<!--
  功能：个人信息table
  作者：calliope
-->
<template>
  <lb-table :column="tableData.columns" :data="tableData.data" :maxHeight="200" heightNumSetting :pagination="false">
  </lb-table>
</template>
<script>

export default {
  props: {
    dataList: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      tableData: {
        columns: [
          {
            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: '身份证读卡器',
            render: (h, scope) => {
              return (
                <div>
                  <el-button type="text" icon="el-icon-edit-outline" onClick={() => { this.handleRead(scope) }}>读取</el-button>
                </div>
              )
            }
          },
          {
            prop: 'name',
            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]}
                  onChange={(val) => { scope.row[scope.column.property] = val }}>
                  {
                    this.options.map(option => {
                      return (
                        <el-option label={option.name} 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: 'xldh',
            label: '联系电话',
            render: (h, scope) => {
              return (
                <el-input placeholder="联系电话" value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }}></el-input>
              )
            }
          }
        ],
        data: [{}],
      },
    }
  },
  watch: {
    dataList: {
      handler (newName, oldName) {
        this.tableData.data = _.cloneDeep(newName)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleAdd () {
      this.tableData.data.push({})
    },
    handleMinus (index, row) {
      this.tableData.data.splice(index, 1)
    },
  },
}
</script>
<style scoped lang='scss'>
</style>