<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-11 09:14:44
-->
<template>
  <div>
    <el-table
      :data="tableDataList"
      border
      :pagination="false"
      :key="key"
      :header-cell-style="{ 'text-align': 'center' }"
      :heightNumSetting="true"
      :minHeight="150"
      height="150"
      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="tdyt" label="土地用途" min-width="100">
        <template slot-scope="scope">
          <treeselect
            v-model="tdyt"
            :disabled="!ableOperation"
            noOptionsText="暂无数据"
            :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="syqx" label="土地使用期限" min-width="100">
        <template slot-scope="scope">
          <el-input
            class="item"
             :disabled="!ableOperation"
            v-model="scope.row.syqx"
            placeholder="请输入内容"
            @input="sumTime(scope.$index,scope.row.syqx)"
          >
            ></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进行树状渲染
      tdyt: null,
      key: 0,
      newdata: {
        yt: "",
        qssj: "",
        jssj: "",
        syqx: "",
      },
      tableDataList: [],
      // 起始时间选择范围
      pickerStart: {},
      pickerEnd: {},
      normalizer(node) {
        if (node.children == null || node.children == "null") {
          delete node.children;
        }
        return {
          id: node.dcode,
          label: node.dname,
        };
      },
    };
  },
  mounted () {
  },
  watch: {
    tableData: {
      handler: function (val, oldVal) {
        let that = this;
        this.$nextTick(() => {
          if (val.length == 0 || !val) {
            that.tableDataList = _.cloneDeep([
              {
                yt: "",
                qssj: "",
                jssj: "",
                syqx: "",
              },
            ]);
            if (that.tableDataList.length > 0) {
              this.tdyt = that.tableDataList[0].yt
                ? that.tableDataList[0].yt
                : null;
            } else {
              this.tdyt = null;
            }
          } else {
            that.tableDataList = _.cloneDeep(val);
            if (that.tableDataList.length > 0) {
              this.tdyt = that.tableDataList[0].yt
                ? that.tableDataList[0].yt
                : null;
            } else {
              this.tdyt = null;
            }
          }
        });
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    renderHeader() {
      return (
        <div>
          {" "}
          {!this.ableOperation ? (
            "序号"
          ) : (
            <i
              class="el-icon-plus pointer"
              onClick={() => {
                this.addClick();
              }}
            ></i>
          )}
        </div>
      );
    },
    // 修改事件
    addrow() {
      this.tableDataList = this.tableDataList.map((item) => {
        return {
          ...item,
          yt: this.tdyt,
        };
      });
      this.$emit("upDateTdytxxList", this.tableDataList);
    },
    startTime(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 (
        Object.keys(startTime).length > 0 &&
        Object.keys(endTime).length > 0
      ) {
        let startYear = new Date(startTime).getFullYear();
        let endYear = new Date(endTime).getFullYear();
        this.tableDataList[index].syqx=endYear-startYear;
      }
    },
    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 (
        Object.keys(startTime).length > 0 &&
        Object.keys(endTime).length > 0
      ) {
        let startYear = new Date(startTime).getFullYear();
        let endYear = new Date(endTime).getFullYear();
        this.tableDataList[index].syqx=endYear-startYear;
      }
    },
      sumTime(index, syqx) {

      let startTime = this.tableDataList[index].qssj;
      this.tableDataList[index].jssj =
        Number(startTime.substring(0, 4)) +
        Number(syqx) +
        startTime.slice(4, 19);

    },
    // 新增
    addClick() {
      this.tableDataList[this.tableDataList.length] = _.cloneDeep(this.newdata);

      this.$emit("upDateTdytxxList", this.tableDataList);
    },

    // 删除
    deleClick(index, row) {
      this.$confirm("确定要删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
        })
        .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%;
}
</style>