<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-06-16 10:38:23
-->
<template>
  <div>
    <lb-table
      :column="InformationTable"
      :pagination="false"
      :key="key"
      :heightNumSetting="true"
      :minHeight="150"
      :data="tableDataList"
    >
    </lb-table>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["dictData"]),
  },
  props: {
    tableData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      key: 0,
      newdata: {
        yt: "",
        qssj: "",
        jssj: "",
        syqx: "",
      },
      tableDataList: [],
      InformationTable: [
        {
          width: "50",
          renderHeader: (h, scope) => {
            return (
              <div>
                {" "}
                {this.$route.query.viewtype == 1 ? (
                  "序号"
                ) : (
                  <i
                    class="el-icon-plus pointer"
                    onClick={() => {
                      this.addClick();
                    }}
                  ></i>
                )}
              </div>
            );
          },
          render: (h, scope) => {
            return (
              <div>
                {this.$route.query.viewtype == 1 ? (
                  <span>{scope.$index + 1}</span>
                ) : (
                  <i
                    class="el-icon-minus pointer"
                    onClick={() => {
                      this.deleClick(scope.$index, scope.row);
                    }}
                  ></i>
                )}
              </div>
            );
          },
        },
        {
          label: "土地用途",
          align: "center",
          render: (h, scope) => {
            return (
              <el-select
                value={scope.row.yt}
                onChange={(val) => {
                  scope.row.yt = val;
                }}
                clearable
                onblur={() => {
                  this.addrow(scope);
                }}
              >
                {this.dictData["tdyt"].map((option) => {
                  return (
                    <el-option
                      label={option.dname}
                      value={option.dcode}
                    ></el-option>
                  );
                })}
              </el-select>
            );
          },
        },
        {
          label: "土地使用起始时间",
          render: (h, scope) => {
            return (
              <el-date-picker
                v-model={scope.row.qssj}
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                onblur={() => {
                  this.addrow(scope.row);
                }}
              ></el-date-picker>
            );
          },
        },
        {
          label: "土地使用结束时间",
          render: (h, scope) => {
            return (
              <el-date-picker
                v-model={scope.row.jssj}
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                onblur={() => {
                  this.addrow(scope.row);
                }}
              ></el-date-picker>
            );
          },
        },
        {
          label: "土地使用期限",
          render: (h, scope) => {
            return (
              <el-input
                v-model={scope.row.syqx}
                onblur={() => {
                  this.addrow(scope.row);
                }}
              ></el-input>
            );
          },
        },
      ],
    };
  },
  watch: {
    tableData: {
      handler: function (val, oldVal) {
        console.log("什么事件111", val);
        let that = this;
        this.$nextTick(() => {
          if (val.length == 0 || !val) {
            that.tableDataList = _.cloneDeep([
              {
                yt: "",
                qssj: "",
                jssj: "",
                syqx: "",
              },
            ]);
          } else {
            that.tableDataList = _.cloneDeep(val);
          }
        });
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 修改事件
    addrow() {
      this.$emit("upDateTdytxxList", this.tableDataList);
    },
    // 新增
    addClick() {
      this.tableDataList[this.tableDataList.length] = _.cloneDeep(this.newdata);
      this.$emit("upDateTdytxxList", this.tableDataList);
    },

    // 删除
    deleClick(index, row) {
      console.log("删除");
      this.$confirm("确定要删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableData.splice(index, 1);
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="scss">
.el-input {
  border: none !important;
}
</style>