<template>
  <div class="sampleFunParam">
    <el-dialog
      title="深度空间分层抽样设置"
      :visible.sync="stepSampling"
      width="35%"
    >
      <div class="hint">
        <span>{{ altRangeText }}</span>
      </div>
      <div v-if="hierarchyVal === '2'">
        <span class="sp3">范围数据上传</span>
        <el-upload
          class="upload-demo"
          drag
          multiple
          accept=".json,.geoJson,.topoJson"
          action="/"
          :http-request="uploadJsonFile"
          :show-file-list="false"
        >
          <i class="el-icon-upload"></i>上传geoJson
        </el-upload>
      </div>
      <div class="cardtable">
        <el-table :data="depthList" style="width: 66%; margin-left: 20%">
          <el-table-column label="序号" width="60" align="center" type="index">
          </el-table-column>
          <el-table-column
            prop="startDepth"
            label="起始范围"
            align="center"
            width="80"
          >
            <template slot-scope="{ row, $index }">
              <div
                @click.stop="
                  {
                    {
                      changeNum($index, 'editStartDepthInput');
                    }
                  }
                "
              >
                <el-input
                  v-if="editable[$index]"
                  v-model="row.startDepth"
                  size="mini"
                  class="editStartDepthInput"
                ></el-input>
                <span v-else>{{ row.startDepth }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="endDepth"
            label="结束范围"
            align="center"
            width="80"
          >
            <template slot-scope="{ row, $index }">
              <div
                @click.stop="
                  {
                    {
                      changeNum($index, 'editEndDepthInput');
                    }
                  }
                "
              >
                <el-input
                  v-if="editable[$index]"
                  v-model="row.endDepth"
                  size="mini"
                  class="editEndDepthInput"
                ></el-input>
                <span v-else>{{ row.endDepth }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                style="height: 25px"
                type="danger"
                size="small"
                icon="el-icon-plus"
                @click="addDepthT(scope.$index, scope.row)"
              ></el-button>
              <el-button
                style="height: 25px"
                type="danger"
                size="small"
                icon="el-icon-minus"
                @click="removeDepthT(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancelSampleFunSet">取消</el-button>
        <el-button type="primary" @click="submitSampleFunSet">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    stepSampling: {
      require: true,
    },
    sampleCldFun: {
      require: false,
    },
  },
  data() {
    return {
      hierarchyVal: "0",
      hierarchyOpt: [
        {
          value: "0",
          label: "深度空间分层",
        },
        {
          value: "1",
          label: "场站网空间分层",
        },
      ],
      depthList: [],
      editable: [],
      jsonContent: null,
      depths: [],
    };
  },
  watch: {
    stepSampling: function (value) {},
    "$store.state.altRange": function (value) {
      const temp = value === null || value === "" ? [1, 5] : value.split(",");
      this.depths = temp;
      this.depthList = [
        {
          startDepth: this.depths[0],
          endDepth: this.depths[1],
        },
      ];
      this.$emit("handleDepthList", this.depthList);
    },
  },
  computed: {
    altRangeText: function () {
      return this.$store.state.altRange === null ||
        this.$store.state.altRange === ""
        ? ""
        : "分层深度区间不包括结束深度值；实际样本深度范围：[" +
            this.$store.state.altRange +
            "]";
    },
  },
  created() {},
  mounted() {
    this.initParams();
    this.changeNum(0, "editStartDepthInput");
    this.changeNum(0, "editEndDepthInput");
  },
  methods: {
    initParams() {
      this.depthList = [
        {
          startDepth: this.depths[0],
          endDepth: this.depths[1],
        },
      ];
      this.$emit("handleDepthList", this.depthList);
    },
    // 修改地表覆盖
    changeNum(index, className) {
      // tableList为表格数据
      this.editable = new Array(this.depthList.length);
      this.editable[index] = true;
      this.$set(this.editable, index, true);
      this.$nextTick(function () {
        var editInputList = document.getElementsByClassName(className);
        editInputList[0]?.children[0]?.focus();
      });
    },
    addDepthT() {
      this.depthList.push({
        startDepth: this.depths[0],
        endDepth: this.depths[1],
      });
    },
    removeDepthT(index) {
      if (this.depthList.length === 1) return;
      this.depthList.splice(index, 1);
    },
    setHierarchy(val) {
      if (val === "0") {
        this.depthList = [
          {
            startDepth: "1",
            endDepth: "5",
          },
        ];
      } else {
        this.depthList = [];
      }
    },
    uploadJsonFile(option) {
      console.log(option.file);
      const self = this;
      //新建一个FileReader
      const reader = new FileReader();
      //读取文件
      reader.readAsText(option.file, "UTF-8");
      //读取完文件之后会回来这里
      reader.onload = function (evt) {
        // 读取文件内容
        const fileString = evt.target.result;
        // console.log(fileString);
        self.jsonContent = fileString;
      };
    },
    submitSampleFunSet() {
      if (this.hierarchyVal === "2" && this.jsonContent === null) {
        this.$message.error("请上传深度JSON文件");
        return false;
      }
      this.$emit("handleStepSampling", false);
      this.$emit("handleDepthList", this.depthList);
    },
    cancelSampleFunSet() {
      this.$emit("handleStepSampling", false);
    },
  },
};
</script>
<style>
.sp3 {
  position: relative;
  top: -13px;
  margin-left: 10px;
}
.sampleFunParam .upload-demo {
  display: inline-block;
}
.hint {
  padding: 15px 0;
}
</style>
