<template>
  <div>
    <lb-table :column="column" :maxHeight="300" heightNumSetting :pagination="false" :data="tableData">
    </lb-table>
    <addQlr v-model="dialog" />
  </div>
</template>
<script>
import addQlr from './addQlr.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    addQlr
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
  props: {
    tableData: {
      type: Array,
      default: []
    },
    gyfs: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      dialog: false,
      InformationTable: [
        {
          width: '50',
          renderHeader: (h, scope) => {
            return <div> {
              this.$route.query.viewtype == 1 ? '序号' : <i class="el-icon-plus pointer" onClick={() => { this.handleAdd() }}></i>
            }
            </div>
          },
          render: (h, scope) => {
            return (
              <div>
                {
                  this.$route.query.viewtype == 1 ? <span>{scope.$index + 1}</span> :
                    <i class="el-icon-minus pointer" onClick={() => { this.handleMinus(scope.$index, scope.row) }}></i>
                }
              </div>
            )
          }
        },
        {
          label: '身份证读卡器',
          align: 'center',
          render: (h, scope) => {
            return <el-button type="text" icon="el-icon-tickets" onClick={() => { this.readClick(scope) }}>读取</el-button>
          }
        },
        {
          prop: "sqrmc",
          label: "姓名/名称"
        },
        {
          prop: "dlrzjlx",
          label: "证件种类"
        },
        {
          prop: "dlrzjh",
          label: "证件号"
        },
        {
          prop: "fr",
          label: "法人"
        },
        {
          label: '修改',
          render: (h, scope) => {
            return (
              <div>
                {
                  this.$route.query.viewtype == 1 ? <el-button
                    icon="el-icon-view"
                    type="text"
                    onClick={() => { this.handleView(scope.$index, scope.row) }}>查看</el-button> : <el-button
                      icon="el-icon-edit-outline"
                      type="text"
                      onClick={() => { this.handleEdit(scope.$index, scope.row) }}>编辑</el-button>
                }
              </div>
            )
          }
        }
      ],
      column: this.InformationTable
    }
  },
  watch: {
    tableData: {
      handler (newValue, oldValue) {
        this.$emit('updateValue', newValue)
      },
      deep: true
    },
    gyfs: {
      handler (newVal, oldValue) {
        let dataList = _.cloneDeep(this.InformationTable)
        if (newVal == '1') {
          this.column = _.cloneDeep(dataList).slice(1, dataList.length)
        } else if ((newVal == '2')) {
          this.column = dataList
        } else {
          this.column = _.cloneDeep(dataList)
          this.column.splice(
            2, 0, {
            prop: "fs",
            label: "份数"
          })
        }
      },
      immediate: true
    }
  },
  methods: {
    // 添加
    handleAdd () {
      this.dialog = true
    },
    // 减
    handleMinus (index, row) {
      this.tableData.splice(index, 1)
    },
    // 身份证读取
    readClick () { },
    // 修改
    handleEdit () {
      this.dialog = true
    },
    handleView () {
      this.dialog = true
    }
  }
}
</script>
<style scoped lang='scss'>

</style>