<template>
  <div>
    <template slot="footer">
      <a-button type="dashed" @click="close"> 关闭 </a-button>
    </template>
    <a-card :bordered="false">
      <!-- 操作 -->
      <div class="table-operations">
        <div v-if="showNum != 3">
          <a-button type="primary" @click="$refs.createSubForm.handleAdd()"> <a-icon type="plus" />新增 </a-button>
          <a-button type="danger" :disabled="multiple" @click="handleDelete"> <a-icon type="delete" />删除 </a-button>
        </div>
        <table-setting
          :style="{ float: 'right' }"
          :table-size.sync="tableSize"
          v-model="columns"
          :refresh-loading="loading"
        />
      </div>
      <!-- 增加修改 -->
      <create-sub-form
        ref="createSubForm"
        @add="handleAddLjclwInsuranceRegisterDetail"
        :insuranceTypeOptions="dict.type.insurance_type"
      />
      <!-- 数据展示 -->
      <a-table
        :loading="loading"
        :size="tableSize"
        rowKey="insuranceId"
        :columns="calcColumns"
        :data-source="list"
        :row-selection="this.showNum != 3 ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null"
        :pagination="false"
        :bordered="tableBordered"
      >
        <span slot="insuranceType" slot-scope="text, record">
          <span>{{ dict.label.insurance_type[record.insuranceType] }}</span>
        </span>
        <span slot="operation" slot-scope="text, record">
          <a-divider type="vertical" />
          <a @click="handleDelete(record)"> <a-icon type="delete" />删除 </a>
        </span>
      </a-table>
    </a-card>
  </div>
  <!-- <a-modal ref="subTableModel" :title="'保险登记详情'" width="80%" :visible="visible" @cancel="close">
   
  </a-modal> -->
</template>

<script>
import CreateSubForm from './CreateSubForm'
import { tableMixin } from '@/store/table-mixin'

export default {
  dicts: ['insurance_type'],
  name: 'SubTable',
  components: {
    CreateSubForm,
  },
  props: {
    list: {
      type: Array,
      required: true,
    },
    formType: Number,
  },
  mixins: [tableMixin],
  data() {
    return {
      visible: true,
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      loading: false,
      showNum: null,
      columns: [
        {
          title: '保险类型',
          dataIndex: 'insuranceType',
          scopedSlots: { customRender: 'insuranceType' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '保费',
          dataIndex: 'insuranceExpense',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '保额',
          dataIndex: 'insuranceInsured',
          ellipsis: true,
          align: 'center',
        },
      ],
    }
  },
  filters: {},
  created() {},
  computed: {},
  computed: {
    calcColumns() {
      if (this.showNum != 3) {
        return [
          ...this.columns,
          {
            title: '操作',
            dataIndex: 'operation',
            width: '18%',
            scopedSlots: { customRender: 'operation' },
            align: 'center',
          },
        ]
      }
      return [...this.columns]
    },
  },
  watch: {
    formType: {
      handler(val) {
        this.showNum = val
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 关闭模态框
    close() {
      this.visible = false
      this.selectedRowKeys = []
      this.selectedRows = []
    },
    // 打开抽屉(由外面的组件调用)
    show() {
      this.visible = true
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = selectedRowKeys.map((item) => item - 1)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      var that = this
      if (row) {
        var index = (this.list || []).findIndex((item) => item === row)
      }
      const ids = index !== undefined ? index : this.ids
      this.$confirm({
        title: '确认删除所选中数据?',
        content: '当前选中序号为' + ids + '的数据',
        onOk() {
          that.$emit('delete', index, ids)
        },
        onCancel() {},
      })
    },
    handleAddLjclwInsuranceRegisterDetail(row) {
      this.$emit('add', row)
    },
  },
}
</script>
