<template>
  <div>
    <lb-table :column="InformationTable" :maxHeight="300" heightNumSetting :pagination="false" :data="tableData">
    </lb-table>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(["dictData"]),
  },
  data () {
    return {
      tableData: [{
        xm: '12',
        zjzl: '32',
        zjh: '123',
        fr: "213123",
      }],
      InformationTable: [
        {
          width: '60',
          renderHeader: (h, scope) => {
            return <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }} style="color:#409EFF"></i>
          },
          render: (h, scope) => {
            return (
              <i class="el-icon-minus pointer" onClick={() => { this.handleMinus(scope.$index, scope.row) }}></i>
            )
          }
        },
        {
          label: '身份证读卡器',
          align: 'center',
          render: (h, scope) => {
            return <el-button type="text" icon="el-icon-tickets" onClick={() => { this.readClick(scope) }}>读取</el-button>
          }
        },
        {
          prop: "xm",
          label: "姓名/名称",
          render: (h, scope) => {
            return (
              <el-input placeholder="姓名/名称" value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        },
        {
          prop: "zjzl",
          label: "证件种类",
          render: (h, scope) => {
            return (
              <el-select value={scope.row[scope.column.property]}>
                {
                  this.dictData['A30'].map(option => {
                    return (
                      <el-option label={option.label} value={option.value}></el-option>
                    )
                  })
                }
              </el-select>
            )
          }
        },
        {
          prop: "zjh",
          label: "证件号",
          render: (h, scope) => {
            return (
              <el-input placeholder="证件号" value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        },
        {
          prop: "fr",
          label: "法人",
          render: (h, scope) => {
            return (
              <el-input placeholder="法人" value={scope.row[scope.column.property]}
                onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
            )
          }
        }
      ]
    }
  },
  watch: {
    tableData: {
      handler (newValue, oldValue) {
        this.$emit('updateValue', newValue)
      },
      deep: true
    }
  },
  methods: {
    // 添加
    handleAdd () {
      this.tableData.push(
        {
          xm: '',
          zjzl: '',
          zjh: '',
          fr: ''
        }
      )
      this.key++
    },
    // 减
    handleMinus (index, row) {
      this.tableData.splice(index, 1)
    },
    // 身份证读取
    readClick () { },

    // 修改
    editClick () { },
  }
}
</script>
<style scoped lang='scss'>

</style>