<template>
    <super-dialog
        v-model="dialogVisible"
        :title="title"
        custom-class="notification-dialog"
        top="3%"
        :close-on-click-modal="false"
        width="60%"
        @closed="closePage"
    >
        <div
            v-loading="detailLoading"
            class="table-container"
            element-loading-background="rgba(10 ,38 ,61, 0.9)"
        >   
            <div class="total-amount">
                <span>合计销售额(万元): {{ totalAmount ? Number(totalAmount).toFixed(2) : '0.00' }}</span>
            </div>
            <el-table
                :data="tableData"
                border
                stripe
            >
                <el-table-column type="index" label="序号" width="80px" align="center" />
                <el-table-column prop="year" label="年份" align="center" />
                <el-table-column prop="annualTransAmount" label="销售额(万元)" align="center" />
            </el-table>
            <el-pagination
                v-model:current-page="pageBean.page"
                v-model:page-size="pageBean.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                style="justify-content: flex-end;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <div slot="footer" style="display: flex; justify-content: center; width: 100%">
            <el-button @click="closePage">取消</el-button>
        </div>
    </super-dialog>
</template>

<script lang="ts" setup>
import SuperDialog from '@/components/Dialog/index.vue'
import { getorderData } from '@/api/supplierMonitor/PerformanceManagement/PerformanceEvaluation'
import { close } from 'fs'
// 1. 定义 props
const props = defineProps({
    isShowAdd: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    info: {
        type: [String, Object],
        default: ''
    }
})
const tableData = ref<any[]>([])
const totalAmount = ref<any>('')
const total = ref<number>(0)
const pageBean = ref({
    page: 1,
    pageSize: 10
})
// 监听父组件传入的ID
watch(
    () => props.info,
    (newInfo) => {
        if (newInfo && props.isShowAdd) {
            console.log('接收到的ID:', newInfo)
            // 在这里处理接收到的ID
            loadData(newInfo)
        }
    },
    { immediate: true }
)

const loadData = async (data: string) => {
    const params = {
        pageBean: {
            page: pageBean.value.page,
            pageSize: pageBean.value.pageSize
        },
        querys: [],
        sorter: [{ direction: 'DESC', property: 'year' }]
    }
    try {
        detailLoading.value = true
        const res = await getorderData(data.supplierId, params)
        tableData.value = res.value.data.rows
        total.value = res.value.data.total
        totalAmount.value = res.value.totalPrice
    } finally {
        detailLoading.value = false
    }
}

const handleSizeChange = (val: number) => {
    pageBean.value.pageSize = val
    pageBean.value.page = 1
    loadData(props.info)
}

const handleCurrentChange = (val: number) => {
    pageBean.value.page = val
    loadData(props.info)
}

onMounted(() => {})

const detailLoading = ref<Boolean>(false)
// 2. 定义 emit
const emit = defineEmits(['update:isShowAdd', 'submit'])

const openPage = () => {
    // loadData()
}

const closePage = () => {
    dialogVisible.value = false
}

defineExpose({
    openPage
})

// 3. 使用 computed 定义双向绑定
const dialogVisible = computed({
    get() {
        return props.isShowAdd
    },
    set(val) {
        emit('update:isShowAdd', false)
    }
})
</script>

<style lang="scss" scoped>
.total-amount {
    margin-bottom: 16px;
    padding: 12px 16px;
    background-color: #f5f7fa;
    border-radius: 4px;
    border-left: 4px solid #409eff;
    
    span {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
    }
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>
