<template>
    <!-- 单位选择弹层 -->
    <TableSelectorDialog
        ref="TableSelectorDialogRef"
        :defaultTreeExpandLevel="0"
        v-model:isShow="isShowDialog"
        v-model:selected-content="selectedContentList"
        :search-option="optionList"
        :tableData="tableData"
        :table-loading="tableLoading"
        :table-options="tableOptions"
        :tableParams="params"
        hintLanguage="提示：请在列表中选择资质后，点击确认。"
        select-title-name="已选资质"
        selectLabel="name"
        title="资质选择"
        v-bind="attrs"
        :isShowPagination="true"
        @closed="closed"
        @open="open"
        @tableRefresh="getTableData"
        @confirm="confirmChange"
    />
</template>

<script lang="ts" setup>
import { ref, computed, nextTick } from 'vue'
import { useAttrs } from 'vue'
import { refineRequestBody, setQueryValue } from '@/utils/requestWrappers'
import TableSelectorDialog from '@/components/TableSelectorDialog/index.vue'
import { aptitudeDataTable } from '@/api/supplierMonitor/ConfigManagement/AccessQualificationConfig'

const attrs = useAttrs()
const props = defineProps({
    isShow: {
        default: false,
        type: Boolean
    },
    selectedContent: {
        type: Array,
        default: () => []
    }
})

const emit = defineEmits(['update:isShow', 'update:selectedContent', 'selectedChange'])

// 状态定义
const TableSelectorDialogRef = ref(null)
const optionList = ref([
    { title: '资质类型编码', prop: 'qualificationCategoryCode', type: 'input', default: true },
    { title: '资质类型名称', prop: 'qualificationCategoryName', type: 'input', default: false }
])
const tableOptions = ref([
    { label: '资质类型编码', minWidth: '60', prop: 'qualificationCategoryCode' },
    { label: '资质类型名称', minWidth: '120', prop: 'qualificationCategoryName' },
    { label: '限制文件大小', minWidth: '60', prop: 'limitFileSize' }
])
const params = ref({
    pageBean: { pageSize: 20, page: 1, total: 0 },
    querys: [
        { operation: 'LIKE', property: 'qualificationCategoryCode', value: '' },
        { operation: 'LIKE', property: 'qualificationCategoryName', value: '' },
        { operation: 'LIKE', property: 'status', value: '1' }
    ],
    sorter: [{ direction: 'DESC', property: 'createTime' }]
})
const tableData = ref([])
const tableLoading = ref(false)

// 直接使用 props.isShow
const isShowDialog = computed({
    get: () => {
        return props.isShow
    },
    set: (val) => {
        emit('update:isShow', val)
    }
})

// 直接使用 props.selectedContent
const selectedContentList = computed({
    get: () => {
        return props.selectedContent
    },
    set: (val) => {
        emit('update:selectedContent', val)
    }
})

// 方法定义
const open = () => {
    getTableData()
}

const closed = () => {}

const getTableData = async () => {
    try {
        tableLoading.value = true
        const query = refineRequestBody(params.value)
        const { total = 0, rows = [] } = await aptitudeDataTable(query)
        params.value.pageBean.total = total
        tableData.value = rows
    } finally {
        tableLoading.value = false
    }
}

const confirmChange = (val: any) => {
    emit('selectedChange', val)
}
</script>

<style lang="scss" scoped></style>
