<template>
  <div>
    <lb-table :column="column" border :maxHeight="300" heightNumSetting :pagination="false" :key="key" :data="tableDataList">
    </lb-table>
    <addQlr v-model="dialog" :details="details" @updateDetail="updateDetail" />
  </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,
      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: "证件种类"
        },
        {
          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: this.InformationTable
    }
  },
  watch: {
    tableData: {
      handler: function (val, oldVal) {
        let that = this
        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 == '1') {
          this.column = _.cloneDeep(dataList).slice(1, dataList.length)
        } else if ((newVal == '2')) {
          this.column = dataList
        } else {
          this.column = _.cloneDeep(dataList)
          this.column.splice(
            2, 0, {
            prop: "fs",
            label: "份数"
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    updateDetail (value) {
      this.tableDataList[this.dataIndex] = value
      this.key++
      this.$emit('upDateQlrxxList', this.tableDataList)
    },
    
    // 新增
    addClick () {
      this.dialog = true
    },

    // 删除
    deleClick (index, row) {
      this.tableData.splice(index, 1)
    },

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

    // 修改
    editClick (index, row) {
      console.log(row, 'rowrowrowrowrow');
      this.dataIndex = index
      this.dialog = true
      this.details = row
    },

    queryViewClick () {
      this.dialog = true
    }
  }
}
</script>
<style scoped lang='scss'>

</style>