<!--
 * @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>
    <addTdyt v-model="dialog" :details="details" :showButton="showButton" @updateDetail="handleupdateDetail" />
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { getIdCardInfo } from '@/utils/operation.js'
  import addTdyt from './dialog/addTdyt.vue'
  export default {
    components: {
      addTdyt
    },
    computed: {
      ...mapGetters(["dictData"]),
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
    },
    data () {
      return {
        key: 0,
        dataIndex: 0,
        dialog: false,
        isaddupdate: false,
        showButton: this.$route.query.viewtype ? false : true,
        details: {},
        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>
                {
                  this.dictData['tdyt'].map(option => {
                    return (
                      <el-option label={option.dname} value={option.dcode}></el-option>
                    )
                  })
                }
              </el-select>
            )
           }
           },
          {
            prop: "sqrmc",
            label: "土地使用起始时间",
             render: (h, scope) => {
            return (
              <el-date-picker
                v-model={scope.row.qssj}
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            );
            }
          },
          {
            prop: "zjzl",
            label: "土地使用结束时间",
              render: (h, scope) => {
            return (
              <el-date-picker
                v-model={scope.row.jssj}
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            );
            }
          },
          {
            prop: "zjh",
            label: "土地使用期限",
             render: (h, scope) => {
               return <el-input v-model={scope.row.syqx} ></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([{
                sqrmc: '',
                dlrzjlx: '',
                dlrzjh: '',
                fr: ''
              }])
            } else {
              that.tableDataList = _.cloneDeep(val)
            }
          })
        },
        immediate: true,
        deep: true
      },
      // gyfs: {
      //   handler (newVal, oldValue) {
      //     console.log("什么事件222",newVal);
      //     let dataList = _.cloneDeep(this.InformationTable)
      //     let dataList = _.cloneDeep(this.InformationTable)
      //     if (newVal == 0) {
      //       // this.column = _.cloneDeep(dataList).slice(1, dataList.length)
      //       this.column = _.cloneDeep(dataList)

      //     } else if ((newVal == '1' || newVal == '3')) {
      //       this.column = dataList
      //     } else {
      //       this.column = _.cloneDeep(dataList)
      //     }
      //   },
      //   immediate: true
      // }
    },
    methods: {
    //  新增提交事件
      handleupdateDetail (value) {
        console.log("什么事件33",this.tableData);
        if (this.isaddupdate) {
          if (!_.isEqual(value, this.tableData)) {
            this.tableDataList[this.tableDataList.length] = _.cloneDeep(value);
            this.$emit('upDateQlrxxList', this.tableDataList)
          }
        } else {
          if (!_.isEqual(value, this.tableData)) {
            this.tableDataList[this.dataIndex] = _.cloneDeep(value);
            this.$emit('upDateQlrxxList', this.tableDataList)
          }
        }
        this.key++
      },
      // 新增
      addClick () {
        if (this.gyfs == '0' && this.tableDataList.length > 0) {
          this.$message.warning("1")
        } else {
          this.dialog = true
          this.isaddupdate = true
        }
      },

      // 删除
      deleClick (index, row) {
        this.$confirm('确定要删除吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1)
        }).catch(() => {
        });
      },
      // 修改
      editClick (index, row) {
        //   popupDialog("申请人信息", "workflow/components/addQlr", {
        //     showButton: this.$route.query.viewtype ? false : true,
        //   dataIndex :index,
        //  details :row,/[^\d]/g
        //  isaddupdate :false
        // });
        this.dataIndex = index
        this.dialog = true
        this.details = row
        this.isaddupdate = false
      },
      queryViewClick (index, row) {
        //   popupDialog("申请人信息", "workflow/components/addQlr", {
        //     showButton: this.$route.query.viewtype ? false : true,
        //   details: row,
        // });
        this.dialog = true
        this.details = row
      }
    }
  }
</script>
<style scoped lang="scss">
.el-input {
  border: none !important;
}
</style>