<template>
  <a-table
    :class="$style.list"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    :columns="columns"
    :data-source="dataSource"
    :loading="loading"
    :pagination="pagination"
    :selected-arr="selectedRowKeys"
    @change="handleTableChange"
  >
    <a slot="islink" slot-scope="text, record" href="javascript:;" @click="detailClick(record)">{{
      text
    }}</a>
    <div slot="operation" slot-scope="text, record" :class="$style.actionWrap">
      <span :class="$style.action">•••</span>
      <div :class="$style.actionBtn">
        <a-button-group>
          <a-button
            v-for="(btn, index) in listArrBtn"
            :key="index"
            type="primary"
            @click="btnsClick(record, btn)"
          >
            {{ btn }}
          </a-button>
        </a-button-group>
      </div>
    </div>
  </a-table>
</template>

<script>
import components from './_import-components/sd-table-list-import'

export default {
  name: 'SdTableList',
  components,
  props: {
    columns: {
      type: Array,
      default: function() {
        return []
      },
    },
    dataSource: {
      type: Array,
      default: function() {
        return []
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Object,
      default: function() {
        return {
          current: 1,
          pageSize: 10,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal(total) {
            return `总共 ${total} 条`
          },
        }
      },
    },
    listArrBtn: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
  data() {
    return {
      selectedRowKeys: [],
    }
  },
  mounted() {
    this.handleTableChange(this.pagination)
  },
  methods: {
    handleTableChange(pagination) {
      this.$emit('pageTableChange', pagination)
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      this.$emit('selectedarr', selectedRowKeys)
    },
    // 操作按钮
    btnsClick(record, type) {
      this.$emit('btnsClick', record, type)
    },
    // 详情
    detailClick(record) {
      this.$emit('detailClick', record)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.list table tr {
  td {
    :global(.ant-btn-group) {
      display: none;
    }
    .action {
      display: block;
    }
  }
  td:hover {
    :global(.ant-btn-group) {
      display: block;
    }
    .action {
      display: none;
    }
  }
}
.action-btn {
  position: absolute;
  right: 10px;
  margin-top: -16px;
}
</style>
