<template>
    <div class="table-page">
        <div class="table-page-content">
            <div class="right-table">
                <div class="full-page">
                    <div class="main-table-container">
                        <div
                            :class="[
                                'search-wrapper',
                                { hide: !isShowSearch },
                                { show: isShowSearchAll }
                            ]"
                        >
                            <CustomSearch
                                :customOptionList="customOptionList"
                                :firstLineColumnCount="4"
                                :fixedOptionList="fixedOptionList"
                                @clearQuery="handleClearQuery"
                                @reset="handleReset"
                                @search="handleSearch"
                                @show-all="handleShowAll"
                            />
                        </div>
                        <div class="table-container">
                            <div ref="tableRef" class="table-content">
                                <div ref="btnGroupPanel" class="btn-box">
                                    <div class="left-btn-group">
                                        <el-button
                                            icon="Plus"
                                            type="primary"
                                            @click="handleReview()"
                                            >提交审核
                                        </el-button>
                                    </div>
                                    <div class="right-btn-group">
                                        <div
                                            :class="{ active: isShowSearch }"
                                            :title="isShowSearch ? '折叠搜索' : '展开搜索'"
                                            class="btn-group-item"
                                            @click="toggleSearch"
                                        >
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </div>
                                        <div
                                            class="btn-group-item"
                                            title="刷新列表"
                                            @click="refresh"
                                        >
                                            <el-icon>
                                                <Refresh />
                                            </el-icon>
                                        </div>
                                        <div
                                            ref="tableHeaderSettingBtn"
                                            class="btn-group-item"
                                            title="设置表头"
                                            @click="toggleSetting"
                                        >
                                            <el-icon>
                                                <Grid />
                                            </el-icon>
                                        </div>
                                        <div
                                            v-show="isShowSetting"
                                            ref="tableHeaderSettingRef"
                                            class="table-header-setting"
                                            tabindex="0"
                                            @focusout="handleSettingFocusOut"
                                        >
                                            <el-scrollbar>
                                                <el-checkbox
                                                    v-model="checkAll"
                                                    :indeterminate="isIndeterminate"
                                                    @change="handleCheckAllChange"
                                                    >全选
                                                </el-checkbox>
                                                <el-checkbox-group
                                                    v-model="currentColumnsKeys"
                                                    @change="handleCheckedChange"
                                                >
                                                    <el-checkbox
                                                        v-for="opt in columnsList"
                                                        :key="opt.prop"
                                                        :title="opt.title"
                                                        :value="opt.prop"
                                                        >{{ opt.title }}
                                                    </el-checkbox>
                                                </el-checkbox-group>
                                            </el-scrollbar>
                                        </div>
                                    </div>
                                </div>
                                <el-table
                                    ref="multipleSelection"
                                    v-loading="tableLoading"
                                    :data="tableData"
                                    border
                                    class="table-list"
                                    element-loading-background="rgba(10 ,38 ,61, 0.9)"
                                    height="100%"
                                    row-key="id"
                                    stripe
                                    @selection-change="handleSelectionChange"
                                >
                                    <el-table-column
                                        :index="
                                            (index) =>
                                                index +
                                                1 +
                                                (params.pageBean.page - 1) *
                                                    params.pageBean.pageSize
                                        "
                                        align="center"
                                        label="序号"
                                        type="index"
                                        width="80"
                                    />
                                    <template v-if="currentColumns.length">
                                        <el-table-column
                                            v-for="col in currentColumns"
                                            :key="col.prop"
                                            :formatter="
                                                col.formatter
                                                    ? col.formatter
                                                    : col.formatter === false
                                                      ? null
                                                      : (row) => row[col.prop] || '-'
                                            "
                                            :label="col.title"
                                            :min-width="col.minWidth"
                                            :prop="col.prop"
                                            :show-overflow-tooltip="
                                                col.showOverflowTooltip
                                                    ? col.showOverflowTooltip
                                                    : true
                                            "
                                            :sortable="col.sortable"
                                            align="center"
                                        >
                                            <template v-if="col.render" v-slot="{ row }">
                                                <template v-if="col.prop === 'assessmentYear'">
                                                    <div>{{ row.assessmentYear }}年</div>
                                                </template>
                                                <template v-if="col.prop === 'assessmentType'">
                                                    <div>
                                                        {{
                                                            dictionaryEscape(
                                                                'khpj-khlx',
                                                                row.assessmentType
                                                            )
                                                        }}
                                                    </div>
                                                </template>
                                                <template v-if="col.prop === 'assessment'">
                                                    <div v-if="row.assessmentMonth">
                                                        <span>{{ row.assessmentYear }}年</span>
                                                        <span>{{ row.assessmentMonth }}月</span>
                                                    </div>
                                                    <div v-else-if="row.assessmentQuater">
                                                        <span>{{ row.assessmentYear }}年</span>
                                                        <span>{{ row.assessmentQuater }}季度</span>
                                                    </div>
                                                    <div v-else>
                                                        <span>{{ row.assessmentYear }}年</span>
                                                    </div>
                                                </template>
                                                <template v-if="col.prop === 'isOpt'">
                                                    <div>
                                                        {{ dictionaryEscape('pjgl-jxpf', row.isOpt) }}
                                                    </div>
                                                </template>
                                                <template v-if="col.prop === 'assessmentResult'">
                                                    <div>
                                                        {{ dictionaryEscape('khpj-pjjl', row.assessmentResult) }}
                                                    </div>
                                                </template>
                                                <template v-if="col.prop === 'level'">
                                                    <el-tag v-if="row.level == 1" type="success">{{
                                                        dictionaryEscape('fzdj', row.level)
                                                    }}</el-tag>
                                                    <el-tag v-if="row.level == 2">{{
                                                        dictionaryEscape('fzdj', row.level)
                                                    }}</el-tag>
                                                    <el-tag v-if="row.level == 3"  color="#EBEB00">{{
                                                        dictionaryEscape('fzdj', row.level)
                                                    }}</el-tag>
                                                    <el-tag v-if="row.level == 4" type="waring">{{
                                                        dictionaryEscape('fzdj', row.level)
                                                    }}</el-tag>
                                                    <el-tag v-if="row.level == 5" type="danger">{{
                                                        dictionaryEscape('fzdj', row.level)
                                                    }}</el-tag>
                                                </template>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            align="center"
                                            label="操作"
                                            fixed="right"
                                            show-overflow-tooltip
                                            width="120"
                                        >
                                            <template v-slot="{ row }">
                                                <div class="operation-buttons">
                                                    <el-link
                                                        type="primary"
                                                        underline="never"
                                                        @click="handleDetail(row)"
                                                    >
                                                        详情
                                                    </el-link>
                                                    <el-link
                                                        type="primary"
                                                        underline="never"
                                                        v-if="row.isOpt!=2"
                                                        @click="handleAudit(row)"
                                                    >
                                                        评分
                                                    </el-link>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </template>
                                </el-table>
                                <pagination
                                    ref="paginationPanel"
                                    :pageResult="params.pageBean"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import CustomSearch from '@/components/CustomSearch/index.vue'
import Pagination from '@/components/Pagination/index.vue'
import { refineRequestBody } from '@/utils/requestWrappers'
import { dictionaryEscape, getDictionaryByCode } from '@/utils/dictionary'
import {
    createAddHandler,
    createEditHandler,
    createCustomHandler,
    createDetailHandler
} from '@/utils/routeNavigation'
import {
    dataTable,
    dataDelete
} from '@/api/supplierMonitor/PerformanceManagement/PerformanceScoring'
import { useTableOptionConfig } from './hooks/useTableOptionConfig'
import { useSearch } from '@/hooks/useSearch'
import { usePagination } from '@/hooks/usePagination'

onMounted(() => {
    loadData()
})

/**
 * table列表
 */

interface TableRow {
    id: string

    [key: string]: any
}

interface QueryParam {
    operation: string
    property: string
    value?: any
}

interface PageBean {
    pageSize: number
    page: number
    total: number
}

interface Params {
    pageBean: PageBean
    querys: QueryParam[]
    sorter: any[]
}

const tableData = ref<TableRow[]>([])
const tableLoading = ref<boolean>(false)

const params = ref<Params>({
    pageBean: { pageSize: 20, page: 1, total: 0 },
    querys: [
        { operation: 'LIKE', property: 'supplierName' },
        { operation: 'EQUAL', property: 'assessmentType' },
        { operation: 'EQUAL', property: 'LEVEL_' },
        { operation: 'EQUAL', property: 'assessmentYear' },
        { operation: 'LIKE', property: 'assessmentResult' },
        { operation: 'BETWEEN', property: 'createTime' },
        { operation: 'EQUAL', property: 'eva.IS_OPT_' }
    ],
    sorter: [
        {
            direction: 'DESC',
            property: 'createTime'
        }
    ]
})

const currentColumnsKeys = ref<string[]>([
    'assessmentType',
    'valuationConfigurationName',
    'assessmentYear',
    'assessmentType',
    'assessment',
    'isOpt',
    'createTime'
])

const currentColumns = computed(() => {
    return columnsList.filter((col) => currentColumnsKeys.value.includes(col.prop))
})

async function loadData(): Promise<void> {
    try {
        tableLoading.value = true
        const query = refineRequestBody(params.value)
        const { total = 0, rows = [] }: { total: number; rows: TableRow[] } = await dataTable(query)
        params.value.pageBean.total = total
        // tableData.value = [{
        //     id:1,
        //     valuationConfigurationName:'A类供应商绩效评价',
        //     assessmentYear:'2025',
        //     assessmentType:'1',
        //     assessment:'2025年11月',
        //     status:'3',
        // }]
        tableData.value = rows
    } finally {
        tableLoading.value = false
    }
}

const { customOptionList, fixedOptionList, columnsList } = useTableOptionConfig({})

/**
 * 查询相关
 */

const {
    tableHeaderSettingRef,
    isShowSearch,
    isShowSearchAll,
    isShowSetting,
    currentDataDel,
    toggleSearch,
    isIndeterminate,
    checkAll,
    handleShowAll,
    toggleSetting,
    handleSettingFocusOut,
    handleSelectionChange,
    refresh,
    handleClearQuery,
    handleReset,
    handleSearch,
    handleCheckedChange,
    handleCheckAllChange
} = useSearch({
    params: params.value,
    loadData,
    columnsList,
    currentColumnsKeys
})

const { handleSizeChange, handleCurrentChange } = usePagination({
    params: params.value,
    loadData
})

const handleExport = async (): Promise<void> => {
    try {
        const res = await exportData(refineRequestBody(params.value))
    } catch (error) {
        console.log(error)
    }
}

/**
 * 跳转页面相关
 */
const basePath: string = 'SupplierMonitor/PerformanceManagement/PerformanceScoring' // 基础路径 （当前页面路径）

const handleAudit = (row: { id: string; type: string }): void => {
    createCustomHandler({
        title: '评分',
        basePath,
        pageType: 'performanceScoringCustom',
        componentUrl:
            '/src/views/SupplierMonitor/PerformanceManagement/PerformanceScoring/audit.vue',
        routeParams: {
            id: row.id
        }
    })
}

const handleDetail = (row: { id: string }): void => {
    createDetailHandler({
        basePath,
        componentUrl:
            '/src/views/SupplierMonitor/PerformanceManagement/PerformanceScoring/detail.vue',
        routeParams: {
            id: row.id
        }
    })
}

</script>

<style lang="scss" scoped>
.classA {
    display: inline-block;
    color: #00cf8a;
    padding: 4px 30px;
    background: #00ffaa20;
}
.classB {
    display: inline-block;
    color: #33a9ff;
    padding: 4px 30px;
    background: #33a9ff20;
}
.classC {
    display: inline-block;
    color: #887d00;
    padding: 4px 30px;
    background: #ebeb0020;
}
.classD {
    display: inline-block;
    color: #fc4774;
    padding: 4px 30px;
    background: #fc477420;
}
</style>
