<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="pd-16 border-bottom">
                <div class="f-s-20 c-333 f-w-7 mb-20">监测点管理</div>
                <div class="d-flex j-sb">
                    <el-button type="primary" @click="showStation = true">添加监测点</el-button>
                    <div class="d-flex pl-20">
                        <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
                            <el-form-item label="企业名称" prop="cpyName">
                                <el-input v-model="queryParams.cpyName" placeholder="请输入企业名称" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <div class="flex1 ov-hd pd-16 d-flex flex-cln">
                <div class="d-flex j-sb mb-16">
                    <div><searchTabs v-model="queryParams.isValid" @change="handleQuery" :list="tabs" key-label="name" key-value="type" key-count="num"></searchTabs></div>
                    <div>
                        <el-button @click="batchUpdateEndDate" type="primary">批量修改有效期</el-button>
                        <el-button @click="batchDelete" type="danger">批量删除</el-button>
                    </div>
                </div>
                <div class="flex1 ov-hd">
                    <vxe-table ref="tableRef" :loading="loading" border :data="list" min-height="0" max-height="auto" :column-config="{ resizable: true }" :row-config="{keyField: 'id',isCurrent: true, isHover: true}" :checkbox-config="{ highlight: true, range: true, trigger: 'row', reserve: true }">
                        <vxe-column type="checkbox" width="60"></vxe-column>
                        <!-- 序号 -->
                        <vxe-column type="seq" width="60" title="序号" align="center" />
                        <!-- 企业名称 -->
                        <vxe-column title="企业名称" field="cpyName" min-width="100" />
                        <!-- 企业地址 -->
                        <vxe-column title="企业地址" min-width="100" :formatter="colNoData">
                            <template #default="{ row }">{{ row.regionCodeName }}{{ row.address }}</template>
                        </vxe-column>
                        <!-- 单位负责人 -->
                        <vxe-column title="单位负责人" field="contactPerson" width="90" />
                        <!-- 负责人联系电话 -->
                        <vxe-column title="负责人联系电话" field="tel" width="120" />
                        <vxe-column title="有效期状态" width="90">
                            <template #default="{ row }">
                                <el-tag v-if="+row.isValid" type="success">有效</el-tag>
                                <el-tag v-else type="danger">已过期</el-tag>
                            </template>
                        </vxe-column>
                        <vxe-column title="有效期至" field="endDate" min-width="100" width="110" />
                        <vxe-column title="操作人" field="createByName" min-width="100" :formatter="colNoData" />
                        <vxe-column title="操作时间" field="createTime" min-width="100" :formatter="colNoData" />
                        <vxe-column title="操作" align="center" fixed="right" width="240">
                            <template #default="{ row }">
                                <el-button @click.stop="router.push({ path: 'station-detail', query: { id: row?.id, cpyid: row?.cpyid } })" text type="primary">详情</el-button>
                                <span></span>
                                <el-button @click.stop="updateEndDateItem(row)" text style="color: #0079fe">修改有效期</el-button>
                                <span></span>
                                <el-button @click.stop="deleteItem(row)" text type="danger">删除</el-button>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
            </div>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
            <div class="pd-5"></div>
        </div>
    </div>
    <addStation v-model:show="showStation" @success="handleQuery"></addStation>
    <EditStationEndDate v-if="showEndDate" v-model:show="showEndDate" :infos="infos" @success="handleQuery"></EditStationEndDate>
</template>
<script setup name="price-station-index" lang="ts">
import { deleteOriginCpy, originCpyList, queryOriginCpyCount } from '@/api/price/station';
import { colNoData } from '@/utils/noData';
import { searchTabs } from '@/views/models';
import NP from 'number-precision';
import { addStation, EditStationEndDate } from '../models';
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    isValid: '1'
});
const showEndDate = ref(false);
const showStation = ref(false);
const loading = ref(false);
const total = ref(0);
const list = ref<any>([]);
const getList = async () => {
    loading.value = true;
    const res = await originCpyList(queryParams.value);
    if (!res || res.code !== 200) return;
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getTabs();
    getList();
};
const queryFormRef = ref<any>();
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};
// tabs count获取
const tabs = ref<any>([]);
const getTabs = async () => {
    const res = await queryOriginCpyCount();
    if (!res || res.code !== 200) return;
    tabs.value = res.data
};
const tableRef = ref<any>();
// 批量删除
const batchDelete = async () => {
    const records = tableRef.value?.getCheckboxReserveRecords(true).concat(tableRef.value?.getCheckboxRecords());
    if (!records.length) {
        proxy?.$modal.msgWarning('请选择监测点');
        return;
    }
    const confirm = await proxy?.$modal.confirm('是否确认删除监测点，删除后企业上报的数据将不再作为专业数据展示，之前上报的数据不受影响。');
    const ids = records.map((item: any) => item.id);
    if (confirm === 'confirm') {
        deleteSubmit(ids)
    }
};
const deleteItem = async (row: any) => {
    const confirm = await proxy?.$modal.confirm('是否确认删除该监测点，删除后该企业上报的数据将不再作为专业数据展示，之前上报的数据不受影响。');
    if (confirm === 'confirm') {
        deleteSubmit([row.id])
    }
};
// 删除提交
const deleteSubmit = async (ids: string[]) => {
    proxy?.$modal.loading('删除中...');
    const res = await deleteOriginCpy(ids).finally(() => {
        proxy?.$modal.closeLoading();
    });
    if (!res || res.code !== 200) return;
    proxy?.$modal.msgSuccess('删除成功');
    tableRef.value?.clearCheckboxRow();
    handleQuery();
};
// 修改有效期的检测点
const infos = ref<any[]>([]);
// 修改有效期
const updateEndDateItem = async (row: any) => {
    infos.value = [row];
    showEndDate.value = true;
};
// 批量修改有效期
const batchUpdateEndDate = async () => {
    const records = tableRef.value?.getCheckboxReserveRecords(true).concat(tableRef.value?.getCheckboxRecords());
    if (!records.length) {
        proxy?.$modal.msgWarning('请选择监测点');
        return;
    }
    infos.value = records;
    showEndDate.value = true;
};
onMounted(() => {
    getTabs();
    handleQuery();
});
</script>
