<template>
  <div>
    <lb-table :column="column" :maxHeight="300" heightNumSetting :pagination="false" :key="key" :data="tableDataList">
    </lb-table>
    <addQlr v-model="dialog" :details="details" @updateDetail="handleupdateDetail" />
  </div>
</template>
<script>
import addQlr from './addQlr.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    addQlr
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
  props: {
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    },
    gyfs: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      key: 0,
      dataIndex: 0,
      dialog: false,
      isaddupdate: false,
      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-button type="text" icon="el-icon-tickets" onClick={() => { this.readClick(scope) }}>读取</el-button>
          }
        },
        {
          prop: "sqrmc",
          label: "姓名/名称"
        },
        {
          prop: "zjzl",
          label: "证件种类",
          render: (h, scope) => {
            return this.dictData['A30'].map(option => {
              if (option.dcode == scope.row.zjzl) {
                return <span>{option.dname}</span>
              }
            })
          }
        },
        {
          prop: "zjh",
          label: "证件号"
        },
        {
          prop: "dh",
          label: "联系电话"
        },
        {
          label: '操作',
          render: (h, scope) => {
            return (
              <div>
                {
                  this.$route.query.viewtype == 1 ? <el-button
                    icon="el-icon-view"
                    type="text"
                    onClick={() => { this.queryViewClick(scope.$index, scope.row) }}>查看</el-button> : <el-button
                      icon="el-icon-edit-outline"
                      type="text"
                      onClick={() => { this.editClick(scope.$index, scope.row) }}>编辑</el-button>
                }
              </div>
            )
          }
        }
      ],
      column: []
    }
  },
  watch: {
    tableData: {
      handler: function (val, oldVal) {
        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) {
        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)
          this.column.splice(
            2, 0, {
            prop: "fs",
            label: "份数"
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    handleupdateDetail (value) {
      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)
        }
      }
    },

    // 新增
    addClick () {
      this.dialog = true
      this.isaddupdate = true
    },

    // 删除
    deleClick (index, row) {
      this.$confirm('确定要删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
      }).catch(() => {
      });
    },

    // 身份证读取
    readClick () { },

    // 修改
    editClick (index, row) {
      this.dataIndex = index
      this.dialog = true
      this.details = row
      this.isaddupdate = false
    },
    queryViewClick () {
      this.dialog = true
    }
  }
}
</script>
<style scoped lang='scss'>

</style>