<template>
    <div>
        <!-- 表格内容区 -->
        <div class="tablebox">
            <!-- 标签行 -->
            <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" stripe>
                <el-table-column label="项目名称" align="center" prop="name" width="200" />
                <el-table-column label="当前状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.tbzt" :value="scope.row.status" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button type="text" @click="getInfo(scope.row, 'fill')"
                            v-if="statusMap[scope.row.status] === '待填报'">填报</el-button>
                        <el-button type="text" @click="getInfo(scope.row, 'detail')"
                            v-if="statusMap[scope.row.status] !== '待填报'">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getBasicInformationPage } from "@/api/ManageApi/index";
import { checkPermi, checkRole } from "@/utils/permission";

export default {
    name: "TableContent",
    dicts: ["xzfl", 'tbzt'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 项目表格数据
            postList: [],
            // 状态颜色映射
            statusColors: {
                '审核通过': '#6EDABE',
                '待填报': '#FFBF6B',
                '待审核': '#7693D8'
            },
            //状态文本映射
            statusMap: {
                1: '待填报',
                2: '待审核',
                3: '审核通过'
            },
            xzflMap: {
                1: '已建',
                2: '在建',
                3: '拟建'
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                xzfl: '',
                name: '',
                xmfrdwxz: '',
                dateRange: '', // 日期范围
                status: ''
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        checkPermi,
        checkRole,
        /** 查询项目列表 */
        getList() {
            this.loading = true;

            // 处理日期范围参数
            const params = {
                ...this.queryParams,
                begainTime: this.queryParams.dateRange ? this.queryParams.dateRange[0] : undefined,
                endTime: this.queryParams.dateRange ? this.queryParams.dateRange[1] : undefined
            };

            // console.log('【查询参数】', params); 

            getBasicInformationPage(params).then((response) => {
                this.postList = response.data.records;
                this.total = response.data.total;
                this.loading = false;
            }).catch(error => {
                console.error('查询失败:', error);
                this.loading = false;
            });
        },

        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },

        /** 详情按钮操作 */
        getInfo(row, type) {
            this.$store.commit("SET_CRUMBS", "项目详情");
            const id = row.id || this.ids[0];
            this.$router.push({ path: `/manage-info/${id}`, query: { action: type } });
        },
    },
};
</script>

<style scoped>
.tablebox {
    background-color: #fff;
    border-radius: .5rem;
    margin: .5rem;
    height: 22rem;
}

.tablehead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tablebtntwo {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
</style>