<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2024-01-18 14:13:02
-->
<template>
  <div>
    <el-table
      :data="tableDataList"
      border
      :pagination="false"
      :key="key"
      :header-cell-style="{ 'text-align': 'center' }"
      :heightNumSetting="true"
      style="width: 100%">
      <el-table-column prop="index" width="50" :render-header="renderHeader">
        <template slot-scope="scope">
          <i
            class="el-icon-minus pointer"
            @click="deleClick(scope.$index, scope.row)"
            v-if="ableOperation"></i>
          <div style="text-align: center" v-else>
            {{ scope.$index + 1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="yt" label="土地用途" min-width="100">
        <template slot-scope="scope">
          <treeselect
            v-model="scope.row.yt"
            :disabled="!ableOperation"
            noOptionsText="暂无数据"
            placeholder=""
            :show-count="true"
            :options="dictData['tdyt']"
            :normalizer="normalizer"
            :appendToBody="true"
            z-index="9999"
            @input="addrow(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="qssj" label="土地使用起始时间" min-width="100">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.qssj"
            type="date"
            :disabled="!ableOperation"
            :picker-options="scope.row.pickerStart"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            @input="startTime(scope.$index)">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="jssj" label="土地使用结束时间" min-width="100">
        <template slot-scope="scope">
          <el-date-picker
            v-model="scope.row.jssj"
            type="date"
            :disabled="!ableOperation"
            :picker-options="scope.row.pickerEnd"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            @input="endTime(scope.$index)">
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="tdsyqx" label="土地使用期限" min-width="100">
        <template slot-scope="scope">
          <el-input
            class="item"
            :disabled="!ableOperation"
            v-model="scope.row.tdsyqx"
            oninput="value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
            placeholder="请输入内容"
            @input="sumTime(scope.$index, scope.row.tdsyqx)">
            ></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { mapGetters } from "vuex";
  export default {
    computed: {
      ...mapGetters(["dictData"]),
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return [];
        },
      },
      ableOperation: {
        type: Boolean,
        default: true,
      },
    },
    data () {
      return {
        // 键名转换，方法默认是label和children进行树状渲染
        key: 0,
        newdata: {
          yt: null,
          qssj: "",
          jssj: "",
          tdsyqx: "",
        },
        tableDataList: [],
        // 起始时间选择范围
        pickerStart: {},
        pickerEnd: {},
        normalizer (node) {
          if (node.children == null || node.children == "null") {
            delete node.children;
          }
          return {
            id: node.dcode,
            label: node.dname,
            children: node.children,
          };
        },
      };
    },
    mounted () { },
    watch: {
      tableData: {
        handler: function (val, oldVal) {
          let that = this;
          this.$nextTick(() => {
            if (!val || val.length == 0) {
              that.tableDataList = _.cloneDeep([
                {
                  yt: null,
                  qssj: "",
                  jssj: "",
                  tdsyqx: "",
                },
              ]);
            } else {
              that.tableDataList = _.cloneDeep(val);
            }
          });
        },
        immediate: true,
        deep: true,
      },
    },
    methods: {
      /**
       * @description: renderHeader
       * @author: renchao
       */
      renderHeader () {
        return (
          <div>
            {" "}
            {!this.ableOperation ? (
              "序号"
            ) : (
              <i
                class="el-icon-plus pointer"
                onClick={() => {
                  this.addClick();
                }}
              ></i>
            )}
          </div>
        );
      },
      // 修改事件
      /**
       * @description: 修改事件
       * @author: renchao
       */
      addrow (a) {
        // this.tableDataList = this.tableDataList.map((item) => {
        //   return {
        //     ...item,
        //     yt: a.yt,
        //   };
        // });
        this.$emit("upDateTdytxxList", this.tableDataList);
      },
      /**
       * @description: startTime
       * @param {*} index
       * @author: renchao
       */
      startTime (index) {
        console.log("index", index);
        //  let startTime = this.tableDataList[index].tdsyqssj;
        let endTime = this.tableDataList[index].jssj;
        let startTime = this.tableDataList[index].qssj;
        this.tableDataList[index].pickerEnd = {
          disabledDate: (time) => {
            if (Object.keys(startTime).length > 0) {
              return new Date(startTime).getTime() > time.getTime();
            } else {
              return time.getTime() < Date.now();
            }
          },
        };
        if (startTime && endTime) {
          let startYear = new Date(startTime).getFullYear();
          let endYear = new Date(endTime).getFullYear();
          this.tableDataList[index].tdsyqx = endYear - startYear;
        }
        this.$emit("upDateTdytxxList", this.tableDataList);
      },
      /**
       * @description: endTime
       * @param {*} index
       * @author: renchao
       */
      endTime (index) {
        //  let startTime = this.tableDataList[index].tdsyqssj;
        let startTime = this.tableDataList[index].qssj;
        let endTime = this.tableDataList[index].jssj;
        this.tableDataList[index].pickerStart = {
          disabledDate: (time) => {
            if (Object.keys(endTime).length > 0) {
              return new Date(endTime).getTime() < time.getTime();
            } else {
              return time.getTime() > Date.now();
            }
          },
        };
        if (startTime && endTime) {
          let startYear = new Date(startTime).getFullYear();
          let endYear = new Date(endTime).getFullYear();
          this.tableDataList[index].tdsyqx = endYear - startYear;
        }
        this.$emit("upDateTdytxxList", this.tableDataList);
      },
      /**
       * @description: sumTime
       * @param {*} index
       * @param {*} tdsyqx
       * @author: renchao
       */
      sumTime (index, tdsyqx) {
        let startTime = this.tableDataList[index].qssj;
        this.tableDataList[index].jssj =
          Number(startTime.substring(0, 4)) +
          Number(tdsyqx) +
          startTime.slice(4, 19);
        this.$emit("upDateTdytxxList", this.tableDataList);
      },
      // 新增
      /**
       * @description: 新增
       * @author: renchao
       */
      addClick () {
        // this.tableDataList[this.tableDataList.length] = _.cloneDeep(this.newdata);
        this.tableDataList.push(_.cloneDeep(this.newdata))
        this.$emit("upDateTdytxxList", this.tableDataList);
      },

      // 删除
      /**
       * @description: 删除
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      deleClick (index, row) {
        this.$confirm("确定要删除吗, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.tableDataList.splice(index, 1);
            this.$emit("upDateTdytxxList", this.tableDataList);
          })
          .catch(() => { });
      },
    },
  };
</script>
<style scoped lang="scss">
  .el-input {
    border: none !important;
  }
  /deep/.el-table__row {
    border: none !important;
  }
  .el-date-editor.el-input {
    width: 100%;
  }
  /deep/.el-table th {
    height: 30px !important;
  }
  /deep/ .el-table--border .el-table__cell:first-child .cell {
    text-align: center;
  }
  /deep/.el-table--small .el-table__cell {
    padding: 3px 0 !important;
  }
</style>