<!--
  功能：个人信息table
  作者：calliope
-->
<template>
  <lb-table :column="tableData.columns" :data="tableData.data" :maxHeight="200" heightNumSetting :pagination="false">
  </lb-table>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    dataList: {
      type: Array,
      default: () => [{
        sqrxm: '',
        sqrzjlxbm: '',
        sqrzjhm: '',
        lxdh: ''
      }]
    }
  },
  computed: {
    ...mapGetters(['dictData'])
  },
  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: 'sqrxm',
            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: 'sqrzjlxbm',
            label: '证件种类',
            render: (h, scope) => {
              return (
                <el-select value={scope.row[scope.column.property]}
                  onChange={(val) => { scope.row[scope.column.property] = val }}>
                  {
                    this.dictData['A30'].map(option => {
                      return (
                        <el-option label={option.dname} value={option.dcode}></el-option>
                      )
                    })
                  }
                </el-select>
              )
            }
          },
          {
            prop: 'sqrzjhm',
            label: '证件号',
            render: (h, scope) => {
              return (
                <el-input placeholder="证件号" value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }} maxlength='21'></el-input>
              )
            }
          },
          {
            prop: 'lxdh',
            label: '联系电话',
            render: (h, scope) => {
              return (
                <el-input placeholder="联系电话" value={scope.row[scope.column.property]}
                  onInput={(val) => { scope.row[scope.column.property] = val }} type='tel' maxlength='11'></el-input>
              )
            }
          }
        ],
        data: []
      }
    }
  },
  watch: {
    'tableData.data': {
      handler (newValue, oldName) {
        if (newValue.length != 0) {
          this.$emit('getInfoList', newValue)
        }
      },
      deep: true,
      immediate: true
    },
    dataList: {
      handler (newValue, oldName) {
        this.tableData.data = newValue
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    handleAdd () {
      this.tableData.data.push({
        sqrxm: '',
        sqrzjlxbm: '',
        sqrzjhm: '',
        lxdh: ''
      })
    },
    handleMinus (index, row) {
      this.tableData.data.splice(index, 1)
    },
  },
}
</script>
<style scoped lang='scss'>
</style>