<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-07-17 13:51:03
-->
<template>
  <div>
    <lb-table :column="column" border :maxHeight="300" heightNumSetting :pagination="false" :key="key" :data="tableDataList">
    </lb-table>
    <addJtcy v-model="dialog" :details="details" @updateDetail="updateDetail" />
  </div>
</template>
<script>
  import addJtcy from './addJtcy.vue'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      addJtcy
    },
    computed: {
      ...mapGetters(["dictData"]),
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      gyfs: {
        type: String,
        default: '1'
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        isDisabled: this.disabled,
        key: 0,
        dataIndex: 0,
        dialog: false,
        details: {},
        tableDataList: [],
        qlrCommonTable: [
          {
            width: '50',
            renderHeader: (h, scope) => {
              return <div> {
                this.isDisabled? '序号' : <i class="el-icon-plus pointer" onClick={() => { this.addClick() }}></i>
              }
              </div>
            },
            render: (h, scope) => {
              return (
                <div>
                  {
                    this.isDisabled? <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.isDisabled} onClick={() => { this.readClick(scope) }}>读取</el-button>
            }
          },
          {
            prop: "cyxm",
            label: "成员姓名"
          },
          {
            prop: "sfzhm",
            label: "身份证号码"
          },
          {
            prop: "dh",
            label: "联系电话"
          },
          {
            label: '修改',
            render: (h, scope) => {
              return (
                <div>
                  {
                    this.isDisabled? <el-button
                      icon="el-icon-view"
                      type="text"
                      onClick={() => { this.queryViewClick(scope.$index, scope.row) }} disabled={this.isDisabled}>查看</el-button> : <el-button
                        icon="el-icon-edit-outline"
                        type="text"
                        onClick={() => { this.editClick(scope.$index, scope.row) }} disabled={this.isDisabled}>编辑</el-button>
                  }
                </div>
              )
            }
          }
        ],
        column: this.qlrCommonTable
      }
    },
    watch: {
      tableData: {
        handler: function (val, oldVal) {
          let that = this
          if (val.length == 0 || !val) {
            that.tableDataList = _.cloneDeep([{
              sqrmc: '',
              dlrzjlx: '',
              dlrzjh: '',
              fr: ''
            }])
          } else {
            that.tableDataList = _.cloneDeep(val)
          }
        },
        immediate: true,
        deep: true
      },
      gyfs: {
        handler (newVal, oldValue) {
          let dataList = _.cloneDeep(this.qlrCommonTable)
          if (newVal == '1') {
            this.column = _.cloneDeep(dataList).slice(1, dataList.length)
          } else {
            this.column = dataList
          }
        },
        immediate: true
      }
    },
    methods: {
      /**
       * @description: updateDetail
       * @param {*} value
       * @author: renchao
       */
      updateDetail (value) {
        this.tableDataList[this.dataIndex] = value
        this.key++
        this.$emit('upDateJtcyList', this.tableDataList)
      },

      // 新增
      /**
       * @description: 新增
       * @author: renchao
       */
      addClick () {
        this.dialog = true
      },

      // 删除
      /**
       * @description: 删除
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      deleClick (index, row) {
        this.tableData.splice(index, 1)
      },

      // 身份证读取
      /**
       * @description: 身份证读取
       * @author: renchao
       */
      readClick () { },

      // 修改
      /**
       * @description: 修改
       * @param {*} index
       * @param {*} row
       * @author: renchao
       */
      editClick (index, row) {
        console.log(row, 'rowrowrowrowrow');
        this.dataIndex = index
        this.dialog = true
        this.details = row
      },

      /**
       * @description: queryViewClick
       * @author: renchao
       */
      queryViewClick () {
        this.dialog = true
      }
    }
  }
</script>
<style scoped lang="scss">
  /deep/.el-table th {
    height: 30px !important;
  }
  /deep/.el-table--small .el-table__cell {
    padding: 5px;
  }
</style>