<template>
  <div>
    <a-modal
      :body-style="bodyStyle"
      :title="title"
      :destroy-on-close="true"
      :visible="visible"
      :width="modalWidth"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <!-- 列表 -->
      <SdTable
        ref="SJMXDataTable"
        :row-key="(record, index) => index"
        :columns="columns"
        :data-source="dataList"
        :pagination="false"
        :row-selection="{
          getCheckboxProps() {
            return {}
          },
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
      >
      </SdTable> </a-modal
  ></div>
</template>

<script>
import components from './_import-components/data-class-picker-import'
import SdTable from '@/common/components/sd-table.vue'
import apis from './data-market'

export default {
  name: 'DataClassPicker',
  metaInfo: {
    title: 'DataClassPicker',
  },
  components: {
    ...components,
    SdTable,
  },
  props: {
    title: {
      type: String,
      default: '分类选择器',
    },
    // 弹出窗宽度
    modalWidth: {
      type: String,
      default: '1200px',
    },
    // 弹出窗显示参数
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'sortNum',
          key: 'sortNum',
          customRender: (text, record, index) => `${index + 1}`,
          width: '80px',
        },
        {
          title: '分类名称',
          dataIndex: 'categoryName',
          key: 'categoryName',
        },

        {
          title: '分类描述',
          dataIndex: 'categoryDesc',
          key: 'categoryDesc',
        },
      ],
      dataList: [],
      selectedRowKeys: [],
      selectedRows: [],
      bodyStyle: {
        minHeight: '700px',
      },
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      // 获取全部信息
      apis.categoryListWhole().then((res) => {
        this.dataList = res.data
      })
    },
    handleOk(e) {
      this.$parent.flTableShow = !this.$parent.flTableShow
      this.$emit('listMxSelected', this.selectedRowKeys, this.selectedRows)
    },
    handleCancel(e) {
      this.$parent.flTableShow = !this.$parent.flTableShow
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
