<!--
  功能：个人信息table
  作者：calliope
-->
<template>
  <lb-table border :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: () => [{}] },
  },
  created() {
    if (this.dataList.length == 0) {
      this.add();
    }
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
  data() {
    return {
      tableData: {
        columns: [
          {
            width: "60",
            renderHeader: (h, scope) => {
              return (
                <i
                  class="el-icon-plus pointer"
                  onClick={() => {
                    this.add();
                  }}
                  style="color:#409EFF"
                ></i>
              );
            },
            render: (h, scope) => {
              return (
                <i
                  class="el-icon-minus pointer"
                  onClick={() => {
                    this.remove(scope.$index, scope.row);
                  }}
                ></i>
              );
            },
          },
          {
            width: "150",
            label: "身份证读卡器",
            render: (h, scope) => {
              return (
                <div>
                  <el-button
                    type="text"
                    icon="el-icon-edit-outline"
                    onClick={() => {
                      this.handleRead(scope);
                    }}
                  >
                    读取
                  </el-button>
                </div>
              );
            },
          },
          {
            width: "150",
            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
                  class="width100"
                  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: this.dataList,
      },
    };
  },
  watch: {
    // 'tableData.data': {
    //   handler (newValue, oldName) {
    //     if (newValue.length != 0) {
    //       //this.$alert(newValue);
    //       //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: {
    add() {
      this.tableData.data.push({
        sqrxm: "",
        sqrzjlxbm: "",
        sqrzjhm: "",
        lxdh: "",
        inputErr: false,
      });
    },
    remove(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>