<!--
  功能：个人信息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: '',
        inputErr: false
      }]
    }
  },
  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 (
                <div class='typePhone'>
                  <el-input placeholder="联系电话" value={scope.row[scope.column.property]}
                    onInput={(val) => { scope.row[scope.column.property] = val }}
                    onBlur={(val) => { this.teltest(scope.row) }}
                    type='tel' maxlength='11'
                  ></el-input>
                  <span v-show={scope.row.inputErr} style={{
                    fontSize: '12px', color: 'red', position: 'absolute', bottom: '-2px', left: '0'
                  }}>请输入正确手机号</span>
                </div>
              )
            }
          }
        ],
        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 = _.cloneDeep(newValue)
        console.log(this.tableData.data, 'this.tableData.datathis.tableData.data');
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    handleAdd () {
      this.tableData.data.push({
        sqrxm: '',
        sqrzjlxbm: '',
        sqrzjhm: '',
        lxdh: '',
        inputErr: false
      })
    },
    handleMinus (index, row) {
      this.tableData.data.splice(index, 1)
    },
    teltest (row) {
      const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
      if (row.lxdh == '' || row.lxdh.length <= 10 || !reg.test(row.lxdh)) {
        row.inputErr = true
        return false

      } else {
        row.inputErr = false
        return true
      }
    }
  }
}
</script>
<style scoped lang='scss'>
/deep/.el-table__cell {
  padding: 12px 0;
}
</style>