import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
import { request } from "@/utils/request";
import { useRoute, useRouter } from 'vue-router'
import ExamineDialog from "./examineDialog.vue";

const tableData = ref([]); // 表格数据
const modelVisible = ref(false); // 弹窗状态
const drawerVisible = ref(false); // 抽屉状态
// 弹窗内容
const model = reactive({
    title: '',
    content: null,
    props: {},
    onCancel: null,
    onConfirm: null,
    width: '',
    footerPosition: null,
    onCancelType: null,
    onConfirmName: null,
    onCancelName: null,
    tagContent: null,
    tagType: null,
});
const form = reactive({
});
const INIT_FORM = {
    project: {},
    fileList: []
};
// 抽屉内容
const drawer = reactive({
    title: '',
    content: null,
    props: {},
    onCancel: null,
    onConfirm: null,
    direction: 'rtl',
    size: '50%'
});
const dialogRef = ref(null); // 弹窗实例
const drawerRef = ref(null); // 抽屉实例

const columns = [
    {
        prop: "districtName",
        label: "区县",
    },
    {
        prop: "routeNo",
        label: "路线编码",
    },
    {
        prop: "disasterType",
        label: "灾害类型",
    },
    {
        prop: "startStakeNo",
        label: "起点桩号",
    },
    {
        prop: "endStakeNo",
        label: "止点桩号",
    },
    {
        prop: "implementMileage",
        label: "实施里程（公里）",
    },
    {
        prop: "technicalGrade",
        label: "技术等级",
    },
    {
        prop: "totalInvestment",
        label: "总投资金额(万元)",
    },
    {
        prop: "estimatedCost",
        label: "投资估算(万元)",
    },
    {
        prop: "startTime",
        label: "开工或预计开工时间",
    },
    {
        prop: "endTime",
        label: "完工或预计完工时间",
    },
    {
        prop: "approvalStatus",
        label: "审批状态",
        formatter: (row) => {
            const statusMap = {
                0: '待审批',
                1: '审批通过',
                2: '审批驳回'
            };
            return statusMap[row.approvalStatus] || '未知状态';
        }
    },
    {
        prop: "updateTime",
        label: "更新日期",
    },
    {
        label: "操作",
        fixed: "right",
        width: 150,
        render: (row) => () =>
            h("div", { class: "action-btns" }, [
                h(
                    ElButton,
                    {
                        type: "primary",
                        link: true,
                        onClick: async () => {
                        },
                    },
                    () => "审批"
                ),
                h(
                    ElButton,
                    {
                        type: "primary",
                        link: true,
                        style: "margin-left: 10px;",
                        onClick: async () => {
                        },
                    },
                    () => "详情"
                ),
            ]),
    },
]

// 过滤条件
const filterData = reactive({
    submitTimeStart: "",
    routeNo: "",
})
// 分页
const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    pageSizes: [10, 20, 50],
    layout: "prev, pager, next, jumper",
    onChange: (page, pageSize) => {
        pagination.current = page;
        pagination.pageSize = pageSize;
        getTableData(filterData);
    },
});

// 获取项目列表
const getTableData = async (filterData) => {
    try {
        const res = await request({
            url: '/snow-ops-platform/recovery/list',
            method: "GET",
            params: {
                ...filterData,
                submitTimeStart: filterData.submitTimeStart ? filterData.submitTimeStart+`-01-01 00:00:00` : null,
                pageNum: pagination.current,
                pageSize: pagination.pageSize,
            }
        })
    } catch (error) {
        console.error('获取项目列表失败:', error);
    }
}


// 打开审批弹窗
const openExamineDialog = async () => {
    model.title = '项目审批';
    Object.assign(form, INIT_FORM);
    model.props = {
        form: form,
    };
    model.content = ExamineDialog;
    model.onCancel = () => {
        modelVisible.value = false;
    };
    model.onConfirm = async () => {
        dialogType.value = '';
        await dialogRef?.value?.dynamicComponentRef?.formRef.validate().then(() => {
            console.log('@@@@@填报项目', form);
        })
            .catch((err) => {
                ElMessage.error('请处理表单中的错误项');
            });
    };
    model.width = "50%"
    model.footerPosition = 'flex-end'
    model.onCancelType = 'danger'
    model.onConfirmName = '审批通过'
    model.onCancelName = '审批驳回'
    // model.tagType = 'warning'
    // model.tagContent = '测试'
    modelVisible.value = true;
}





export default () => {

    const router = useRouter();

    onMounted(() => {
        getTableData();
    })


    watch(filterData, (val) => {
        getTableData(filterData);
    }, { deep: true })


    return {
        tableData,
        filterData,
        pagination,
        columns,

        modelVisible,
        model,
        drawerVisible,
        drawer,
        dialogRef,
        drawerRef,
        openExamineDialog,
    }
}