<template>
  <lb-table :column="column" :maxHeight="300" heightNumSetting :pagination="false" :key="key" :data="tableData">
  </lb-table>
</template>
<script>
import addQlr from './addQlr.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    addQlr
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
  props: {
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    },
    gyfs: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      key: 0,
      dataIndex: 0,
      dialog: false,
      details: {},
      tableDataList: [],
      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>
            )
          }
        },
        {
          prop: "sqrmc",
          label: "姓名/名称"
        },
        {
          prop: "zjzl",
          label: "证件种类"
        },
        {
          prop: "zjh",
          label: "证件号"
        },
        {
          prop: "dh",
          label: "联系电话"
        },
        {
          prop: "frmc",
          label: "法人"
        },
        {
          label: '操作',
          render: (h, scope) => {
            return (
              <div>
                {
                  <el-button icon="el-icon-view" type="text" onClick={() => { this.handleView(scope.$index, scope.row) }}>查看</el-button>
                }
              </div>
            )
          }
        }
      ],
      column: this.InformationTable
    }
  },
  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.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: {
    updateDetail (value) {
      this.tableDataList[this.dataIndex] = value
      this.key++
      this.$emit('upDateQlrxxList', this.tableDataList)
    },
    // 添加
    handleAdd () {
      this.dialog = true
    },
    // 减
    handleMinus (index, row) {
      this.tableData.splice(index, 1)
    },
    // 身份证读取
    readClick () { },
    // 修改
    handleEdit (index, row) {
      console.log(row, 'rowrowrowrowrow');
      this.dataIndex = index
      this.dialog = true
      this.details = row
    },
    handleView () {
      this.dialog = true
    }
  }
}
</script>
<style scoped lang='scss'>

</style>