<template>
    <div class="home-container layout-pd">
        <el-card shadow="hover" class="layout-padding-auto">
            <!-- <div class="ors">
          <div class="orstitle">
            <SvgIcon name="ele-InfoFilled" class="font15 color" />
            <p>预警阈值</p>
          </div>
          <div class="orsitem" v-for="item in state.totalnum">
            <b>{{ item.level }}：</b>{{ item.content }}
          </div>
        </div> -->
            <div class="row system-user-search mb15">
                <el-input size="default" style="width: 200px;margin-right: 10px;" v-model="state.projectName"
                    placeholder="请输入项目名称"></el-input>


                <el-select size="default" v-model="state.delayLevel" placeholder="请选择交付提醒类型"
                    style="width: 240px;margin-right: 10px;">
                    <el-option label="全部" value="" />
                    <el-option label="交付前1个月" value="1" />
                    <el-option label="交付前3个月" value="2" />
                    <el-option label="交付前6个月" value="3" />
                </el-select>

                <el-button size="default" type="primary" class="ml10" @click="getTableData()">
                    <el-icon><ele-Search /></el-icon>查询
                </el-button>
                <el-button size="default" type="primary" class="ml10" @click="noneclick">
                    <el-icon><ele-RefreshRight /></el-icon>重置
                </el-button>
            </div>

            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" border stripe
                :cell-style="{ textAlign: 'center' }" :header-cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="areaName" label="区县" />
                <el-table-column prop="projectName" label="项目名称" />
                <el-table-column prop="buildingName" label="楼幢编码" />
                <el-table-column prop="delayDate" label="交付时间" />
                <el-table-column prop="delayLevel" label="交付提醒">
                    <template #default="scope">
                        <span v-if="scope.row.delayLevel == 1" class="winer">交付前1个月</span>
                        <span v-if="scope.row.delayLevel == 2" class="winer">交付前3个月</span>
                        <span v-if="scope.row.delayLevel == 3" class="winer">交付前6个月</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="earlyWarningLevel" label="逾期交付">
                    <template #default="scope">
                        <span v-if="scope.row.earlyWarningLevel == 1" class="winer">逾期3个月</span>
                        <span v-if="scope.row.earlyWarningLevel == 2" class="winer">逾期半年</span>
                        <span v-if="scope.row.earlyWarningLevel == 3" class="winer">逾期1年</span>
                    </template>
                </el-table-column> -->
            </el-table>
            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
                background v-model:page-size="state.tableData.param.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="priceindex">
import { defineAsyncComponent, reactive, onMounted, ref } from "vue";
import { ElMessageBox, ElMessage, ElNotification } from "element-plus";
import { getApi } from "/@/api/early/overdue";
import { getAll } from "/@/api/sys/index";
import { entApi } from "/@/api/ent/index";

// 引入组件

// 定义变量内容
const state = reactive<any>({
    name: "370783",
    radio: '',
    options: [],
    county: [],
    tableData: {
        data: [],
        total: 0,
        loading: false,
        param: {
            pageNum: 1,
            pageSize: 10,
        },
    },
    totalnum: {},
    projectName: '',
    delayLevel: ''
});

async function loadData() {
    let itemQx = await entApi().typesApi();
    state.options = itemQx.data;
    getCodeApi()
}
function noneclick() {
    state.projectName = ''
    getTableData()
}

const getCodeApi = async () => {
    let item = await getAll().codeApi();
    state.county = item.data;
    getTableData();
};


// 初始化表格数据
const getTableData = async () => {
    state.tableData.loading = true;
    // 项目
    const data = await getApi().getlist({
        page: state.tableData.param.pageNum,
        limit: state.tableData.param.pageSize,
        projectName: state.projectName,
        delayLevel: state.delayLevel
    });

    let sdata = data.data;
    let udata = state.options;
    let _data = [] as any;
    sdata.forEach((res: any) => {
        udata.forEach((ures: any) => {
            if (res.areaCode == ures.value) {
                res.areaName = ures.label
                _data.push(res)
            }
        })
    });
    state.tableData.data = _data;
    state.tableData.total = data.count;
    state.tableData.loading = false;
    // 获取总数
    // const total = await getApi().getmonthdata()
    // state.totalnum = total.data;
};


// 分页改变
const onHandleSizeChange = (val: number) => {
    state.tableData.param.pageSize = val;
    getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.tableData.param.pageNum = val;
    getTableData();
};
// 页面加载时
onMounted(() => {
    // getCodeApi();
    loadData()
});
</script>

<style scoped lang="scss">
.winer {
    color: #e9971c;
}

.title {
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
    border-left: 3px solid #409efe;
    margin-right: 20px;
}

.ors {
    display: flex;
    flex-direction: column;
    background-color: #ecf2fe;
    padding: 20px;
    margin-bottom: 10px;

    .orsitem {
        display: flex;
        align-items: center;
        padding-left: 20px;
        padding-bottom: 5px;

        b {
            flex: 0 0 5%;
            color: #001330;
        }
    }
}

.orstitle {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #333;
    font-size: 15px;
    margin-bottom: 10px;

    .color {
        color: #2362e1;
        margin-right: 4px;
    }
}
</style>