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

const tableData = ref([]); // 表格数据

const modelVisible = ref(false); // 弹窗状态
const drawerVisible = ref(false); // 抽屉状态
// 弹窗内容
const model = reactive({
    title: '',
    content: null,
    props: {},
    onCancel: null,
    onConfirm: null,
    width: '',
});
const form = reactive({
});
const INIT_FORM = {

};
// 抽屉内容
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: "county",
        label: "所属区县",
    },
    {
        prop: "projectName",
        label: "项目名称",
    },
    {
        prop: "siteName",
        label: "驻地名称",
    },
    {
        prop: "siteType",
        label: "驻地类型",
    },
    {
        prop: "coordinatePoint",
        label: "坐标点位",
    },
    {
        prop: "subProjectName",
        label: "所属项目名称",
    },
    {
        prop: "projectType",
        label: "项目类型",
    },
    {
        prop: "constructionUnit",
        label: "建设单位",
    },
    {
        prop: "constructionCompany",
        label: "施工单位",
    },
    {
        prop: "siteAddress",
        label: "驻地地址",
    },
    {
        prop: "town",
        label: "乡镇名称",
    },
    {
        prop: "streetName",
        label: "街道名称",
    },
    {
        prop: "administrativeRegion",
        label: "行政区域",
    },
    {
        prop: "sitePopulation",
        label: "驻地人数",
    },
    {
        prop: "riskLevel",
        label: "驻地风险等级",
    },
    {
        prop: "buildingType",
        label: "房建类型",
    },
    {
        prop: "relocationStatus",
        label: "搬迁状态",
    },
    {
        label: "吹哨人/电话",
        formatter: (row) => `${row.whistleblowerName || ''}/${row.whistleblowerPhone || ''}`,
    },
    {
        label: "建设单位包保责任人/电话",
        formatter: (row) => `${row.ownerResponsiblePerson || ''}/${row.ownerResponsiblePhone || ''}`,
    },
    {
        label: "施工单位包保责任人/电话",
        formatter: (row) => `${row.constructorResponsiblePerson || ''}/${row.constructorResponsiblePhone || ''}`,
    },
    {
        label: "驻地包保责任人/电话",
        formatter: (row) => `${row.siteResponsiblePerson || ''}/${row.siteResponsiblePhone || ''}`,
    },
    {
        label: "区县级包保责任人/电话",
        formatter: (row) => `${row.districtResponsiblePerson || ''}/${row.districtResponsiblePhone || ''}`,
    },
    {
        label: "市级包保责任人/电话",
        formatter: (row) => `${row.cityResponsiblePerson || ''}/${row.cityResponsiblePhone || ''}`,
    },
    {
        prop: "remarks",
        label: "备注",
    },
]

// 过滤条件
const filterData = reactive({})
// 分页
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 filteredParams = {};
        Object.keys(filterData).forEach(key => {
            if (filterData[key] !== '' && filterData[key] != null) {
                filteredParams[key] = filterData[key];
            }
        });
        const res = await request({
            url: '/snow-ops-platform/site-ledger/list',
            method: "GET",
            params: {
                ...filteredParams,
                pageNum: pagination.current,
                pageSize: pagination.pageSize,
            }
        })
        if (res.code === '00000') {
            tableData.value = res.data.records
            pagination.total = res.data.total
        } else {
            throw new Error(res.message)
        }
    } catch (error) {
        ElMessage.error(error.message)
        console.error('获取列表失败:', error);
    }
}

// 预警类型选项
const typeOptions = [
    { label: "全部", value: "" },
    { label: "台风预警", value: "台风预警" },
    { label: "暴雨预警", value: "暴雨预警" },
    { label: "寒潮预警", value: "寒潮预警" },
    { label: "大雾预警", value: "大雾预警" },
    { label: "暴雪预警", value: "暴雪预警" },
    { label: "道路结冰预警", value: "道路结冰预警" },
    { label: "雷电预警", value: "雷电预警" },
    { label: "强对流预警", value: "强对流预警" },
];

// 预警级别选项
const warningLevelOptions = [
    { label: "全部", value: "" },
    { label: "红色预警", value: "红色预警" },
    { label: "橙色预警", value: "橙色预警" },
    { label: "黄色预警", value: "黄色预警" },
    { label: "蓝色预警", value: "蓝色预警" },
]


const exportExcel = async () => {
    try {
        const res = await request({
            url: '/snow-ops-platform/site-ledger/export',
            method: 'GET'
        })
    } catch (error) {

    }
}



export default () => {

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


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


    return {
        modelVisible,
        model,
        drawerVisible,
        drawer,
        dialogRef,
        drawerRef,


        tableData,
        filterData,
        pagination,
        columns,

        exportExcel,
    }
}