<template>
  <!-- 表格明细 -->
  <mtp-table-scroll :class="['mtp-table-detail', isShow ? 'is-open' : 'is-close']">
    <template #default="{ scroll }">
      <a-table :columns="columns" class="srcollYTable" :pagination="false" :rowKey="(record,index)=>index" :data-source="dataSource" :scroll="scroll">
        <template v-for="item in columns" v-slot:[item.dataIndex]="{ text, record }" :key="item.key">
          <slot :name="item.dataIndex" :text="text" :record="record">
            {{text}}
          </slot>
        </template>
      </a-table>
    </template>
    <template #footer>
      <ThridMenu :list="tabs" @selectMenu="changeTab">
        <div class="conditionIcon icon iconfont icon-shouqi" @click="isShow = !isShow"></div>
      </ThridMenu>
    </template>
  </mtp-table-scroll>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue';
import ThridMenu from '@/common/components/thirdMenu/index.vue';
import MtpTableScroll from '@/common/components/tableScroll/index.vue';
import { ColumnType } from '@/common/methods/table';
import { BtnListType } from '@/common/components/btnList/interface';

export default defineComponent({
  emits: ['update:visible', 'change'],
  components: {
    ThridMenu,
    MtpTableScroll,
  },
  props: {
    dataSource: {
      type: Array,
      default: () => ([])
    },
    columns: {
      type: Array as PropType<ColumnType[]>,
      default: () => ([])
    },
    tabs: {
      type: Array as PropType<BtnListType[]>,
      default: () => ([])
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { emit }) {
    // 控制表格显示/隐藏
    const isShow = computed({
      get() {
        return props.visible;
      },
      set(val) {
        emit('update:visible', val);
      }
    })

    // 切换标签
    const changeTab = (index: number, tab: BtnListType) => {
      emit('update:visible', true);
      emit('change', index, tab);
    }

    return {
      isShow,
      changeTab,
    }
  },
})
</script>

<style lang="less">
@import './index.less';
</style>