<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2024-01-18 14:51:42
-->
<template>
  <div>
    <lb-table :column="column" :pagination="false" :key="key" :heightNumSetting="true" :minHeight="0" :rowStyleHeight='25'
      :data="tableDataList">
    </lb-table>
    <addQlr v-model="dialog" :details="details" :showButton="disabled" @updateDetail="handleupdateDetail" />
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { getIdCardInfo } from '@/utils/operation.js'
  import addQlr from './dialog/addQlr.vue'
  export default {
    components: {
      addQlr
    },
    computed: {
      ...mapGetters(["dictData"]),
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      gyfs: {
        type: String,
        default: '1'
      },
      disabled: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        key: 0,
        dataIndex: 0,
        dialog: false,
        isaddupdate: false,
        details: {},
        tableDataList: [],
        InformationTable: [
          {
            width: '50',
            renderHeader: (h, scope) => {
              return <div> {
                !this.disabled ? '序号' : <i class="el-icon-plus pointer" onClick={() => { this.addClick() }}></i>
              }
              </div>
            },
            render: (h, scope) => {
              return (
                <div>
                  {
                    !this.disabled ? <span>{scope.$index + 1}</span> :
                      <i class="el-icon-minus pointer" onClick={() => { this.deleClick(scope.$index, scope.row) }}></i>
                  }
                </div>
              )
            }
          },
          {
            label: '身份证读卡器',
            align: 'center',
            render: (h, scope) => {
              return <el-button type="text" icon="el-icon-tickets" disabled={!this.disabled} onClick={() => { this.readClick(scope.row) }}>读取</el-button>
            }
          },
          {
            prop: "sqrmc",
            label: "姓名/名称"
          },
          {
            prop: "zjzl",
            label: "证件种类",
            render: (h, scope) => {
              return this.dictData['A30'] && this.dictData['A30'].map(option => {
                if (option.dcode == scope.row.zjzl) {
                  return <span>{option.dname}</span>
                }
              })
            }
          },
          {
            prop: "zjh",
            label: "证件号"
          },
          {
            prop: "dh",
            label: "联系电话"
          },
          {
            label: '操作',
            render: (h, scope) => {
              return (
                <div>
                  {
                    this.disabled ? <el-button
                      icon="el-icon-edit-outline"
                      type="text"
                      onClick={() => { this.editClick(scope.$index, scope.row) }}>编辑</el-button> : <el-button
                        icon="el-icon-view"
                        type="text"
                        onClick={() => { this.queryViewClick(scope.$index, scope.row) }} > 查看</el-button>
                  }
                </div>
              )
            }
          }
        ],
        column: []
      }
    },
    watch: {
      tableData: {
        handler: function (val, oldVal) {
          let that = this
          this.$nextTick(() => {
            if (val.length == 0 || !val) {
            } else {
              that.tableDataList = _.cloneDeep(val)
            }
          })
        },
        immediate: true,
        deep: true
      },
      gyfs: {
        handler (newVal, oldValue) {
          let dataList = _.cloneDeep(this.InformationTable)
          if (newVal == 0) {
            this.column = _.cloneDeep(dataList)
            this.tableDataList = _.cloneDeep(this.tableData)
          } else if ((newVal == '1' || newVal == '3')) {
            this.column = dataList
          } else {
            this.column = _.cloneDeep(dataList)
            this.column.splice(
              2, 0, {
              prop: "qlbl",
              label: "份数"
            })
          }
        },
        immediate: true
      }
    },
    methods: {
      /**
       * @description: handleupdateDetail
       * @param {*} value
       * @author: renchao
       */
      handleupdateDetail (value) {
        let arr = this.tableData.map(item => item.zjh)
        if (this.isaddupdate) {
          if (!arr.includes(value.zjh)) {
            this.tableDataList[this.tableDataList.length] = _.cloneDeep(value);
            this.$emit('upDateQlrxxList', this.tableDataList)
          } else {
            this.$message.error('证件号不能重复');
          }
        } else {
          if (!arr.includes(value.zjh) || this.tableData[this.dataIndex].zjh == value.zjh) {
            this.tableDataList[this.dataIndex] = _.cloneDeep(value);
            this.$emit('upDateQlrxxList', this.tableDataList)
          } else {
            this.$message.error('证件号不能重复');
          }
        }
        this.key++
      },
      /**
       * @description: 新增
       * @author: renchao
       */
      addClick () {
        this.key++
        this.details = {}
        this.dialog = true
        this.isaddupdate = true
      },

      /**
       * @description: 删除
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      deleClick (index, row) {
        this.tableDataList.splice(index, 1)
        this.$emit('upDateQlrxxList', this.tableDataList)
        this.key++
      },
      /**
       * @description: 身份证读取
       * @param {*} row
       * @author: renchao
       */
      readClick (row) {
        function getObjectByValue (arrayOfObjects, value) {
          var name = ''
          arrayOfObjects.forEach(item => {
            if (item.dname.includes(value)) name = item.dcode
          })
          return name
        }
        getIdCardInfo(this.BASE_API.gaopaiyi).then(res => {
          if (this.BASE_API.gaopaiyi == 'jy') {
            const {
              Name,
              IdNo,
              Sex,
              Address,
              Agencvy,
              PhotoB64
            } = JSON.parse(res)
            if (Name) {
              row.sqrmc = Name;
              row.zjzl = '1';
              row.zjh = IdNo;
              row.xb = getObjectByValue(this.dictData['A43'], Sex);
              row.txdz = Address;
              row.fzjg = Agencvy;
              row.avatar = 'data:image/png;base64,' + PhotoB64
              this.$message({
                message: '读取成功！',
                type: 'success'
              })
            } else {
              this.$message({
                message: '请放置身份证',
                type: 'warning'
              })
            }
          } else {
            if (res.data.code == 0) {
              let data = res.data.IDCardInfo;
              const {
                name,
                cardID: zjh,
                sexCode: xb,
                address: txdz,
                issueOrgan: fzjg,
                photoBase64
              } = data
              row.sqrmc = name;
              row.zjzl = '1';
              row.zjh = zjh;
              row.xb = xb
              row.txdz = txdz;
              row.fzjg = fzjg;
              row.avatar = 'data:image/png;base64,' + photoBase64
              this.$message({
                message: '读取成功！',
                type: 'success'
              })
            } else {
              this.$message({
                message: res.data.message,
                type: 'warning'
              })
            }
          }
          this.$emit('upDateQlrxxList', this.tableDataList)
        })
      },
      /**
       * @description: 修改
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      editClick (index, row) {
        this.details = row
        this.details.gyfs = this.gyfs
        this.dataIndex = index
        this.dialog = true
        this.isaddupdate = false
      },
      /**
       * @description: queryViewClick
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      queryViewClick (index, row) {
        // this.details.gyfs=this.gyfs
        this.details = row
        this.dialog = true

      }
    }
  }
</script>
<style scoped lang="scss">
  /deep/.el-table--small .el-table__cell {
    padding: 0 0 !important;
  }
  /deep/.el-table th {
    height: 30px !important;
  }
  /deep/.el-table .cell {
    padding-right: 12px;
  }
  /deep/.el-table__body-wrapper {
    height: auto !important;
  }
</style>