<template>
    <div class="default-main" style="position: relative">
        <TableHeader datePicker showExport>
            <template #select>
                <el-form-item label="发送结果">
                    <el-select v-model="tableStore.table.params.searchState" clearable placeholder="请选择发送结果" filterable>
                        <el-option label="成功" value="1" />
                        <el-option label="失败" value="2" />
                        <el-option label="异常" value="0" />
                    </el-select>
                </el-form-item>
            </template>
            <template #operation>
                <el-button icon="el-icon-Delete" type="primary" @click="deleteEven">删除</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" :showOverflow="false" />
    </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage } from 'element-plus'
import { dictTypeDelete } from '@/api/system-boot/dictType'

defineOptions({
    name: 'smsQueries'
})
const tableStore = new TableStore({
    url: '/system-boot/dictType/list',
    method: 'POST',

    column: [
        { width: '60', type: 'checkbox' },
        {
            title: '序号',
            width: 80,

            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { title: '时间', field: 'time', width: '200px' },
        { title: '接收人', field: 'uesr', width: '120px' },

        { title: '手机号', field: 'sort', width: '180px' },
        {
            title: '发送结果',
            field: 'outcome',
            width: '120px',
            render: 'tag',
            custom: {
                0: 'warning',
                1: 'success',
                2: 'danger'
            },
            replaceValue: {
                0: '异常',
                1: '成功',
                2: '失败'
            }
        },
        { title: '内容', field: 'content', align: 'left' }
    ],
    loadCallback: () => {
        tableStore.table.data = [
            {
                time: '2023-10-01 12:00:00',
                uesr: '张三',
                sort: '1234567890',
                outcome: '1',
                content:
                    '①、2025-05-30 00:12:55 220kV龙泉站 220kV主变1#高压侧发生暂降事件,特征幅值:0.86p.u.(109.56 kV),持续时间:0.189s;②、2025-05-30 00:12:55 220kV龙泉站 220kV福泉II线发生暂降事件,特征幅值:0.86p.u.(109.56 kV),持续时间:0.189s;③、2025-05-30 03:51:58 220kV龙泉站 110kV主变1#中压侧发生暂降事件,特征幅值:0.88p.u.(55.96 kV),持续时间:0.015s;④、2025-05-30 10:46:11 110kV八一站 10kV主变1#低压侧发生暂降事件,特征幅值:0.22p.u.(1.25 kV),持续时间:0.595s;⑤、2025-05-30 03:51:58 220kV龙泉站 10kV主变1#低压侧发生暂降事件,特征幅值:0.85p.u.(4.88 kV),持续时间:0.015s;⑥、2025-05-30 00:12:55 220kV龙泉站 110kV主变1#中压侧发生暂降事件,特征幅值:0.84p.u.(53.17 kV),持续时间:0.189s;⑦、2025-05-30 02:49:29 110kV昌洒站 35kV主变1#中压侧发生暂降事件,特征幅值:0.79p.u.(16.04 kV),持续时间:0.073s;⑧、2025-05-30 00:12:55 220kV龙泉站 220kV福泉I线发生暂降事件,特征幅值:0.86p.u.(109.56 kV),持续时间:0.189s;⑨、2025-05-30 00:12:55 220kV龙泉站 10kV主变1#低压侧发生暂降事件,特征幅值:0.85p.u.(4.90 kV),持续时间:0.189s; 详情请登录海南电网电能质量监测系统查看!'
            },
            {
                time: '2023-10-01 12:00:00',
                uesr: '张三',
                sort: '1234567890',
                outcome: '2',
                content:
                    '①、2025-05-30 00:12:55 220kV龙泉站 220kV主变1#高压侧发生暂降事件,特征幅值:0.86p.u.(109.56 kV),持续时间:0.189s;②、2025-05-30 00:12:55 220kV龙泉站 220kV福泉II线发生暂降事件,特征幅值:0.86p.u.(109.56 kV),持续时间:0.189s;③、2025-05-30 03:51:58 220kV龙泉站 110kV主变1#中压侧发生暂降事件,特征幅值:0.88p.u.(55.96 kV),持续时间:0.015s;④、2025-05-30 10:46:11 110kV八一站 10kV主变1#低压侧发生暂降事件,特征幅值:0.22p.u.(1.25 kV),持续时间:0.595s;⑤、2025-05-30 03:51:58 220kV龙泉站 10kV主变1#低压侧发生暂降事件,特征幅值:0.85p.u.(4.88 kV),持续时间:0.015s;⑥、2025-05-30 00:12:55 220kV龙泉站 110kV主变1#中压侧发生暂降事件,特征幅值:0.84p.u.(53.17 kV),持续时间:0.189s;⑦、2025-05-30 02:49:29 110kV昌洒站 35kV主变1#中压侧发生暂降事件,特征幅值:0.79p.u.(16.04 kV),持续时间:0.073s;⑧、2025-05-30 00:12:55 220kV龙泉站 220kV福泉I线发生暂降事件,特征幅值:0.86p.u.(109.56 kV),持续时间:0.189s;⑨、2025-05-30 00:12:55 220kV龙泉站 10kV主变1#低压侧发生暂降事件,特征幅值:0.85p.u.(4.90 kV),持续时间:0.189s; 详情请登录海南电网电能质量监测系统查看!'
            },
            {
                time: '2023-10-01 12:00:00',
                uesr: '张三',
                sort: '1234567890',
                outcome: '0',
                content:
                    '①、2025-05-30 00:12:55 220kV龙泉站 220kV主变1#高压侧发生暂降事件,特征幅值:0.86p.u.(109.56 kV),持续时间:0.189s;②、2025-05-30 00:12:55 220kV龙泉站 220kV福泉II线发生暂降事件,特征幅值:0.86p.u.(109.56 kV),持续时间:0.189s;③、2025-05-30 03:51:58 220kV龙泉站 110kV主变1#中压侧发生暂降事件,特征幅值:0.88p.u.(55.96 kV),持续时间:0.015s;④、2025-05-30 10:46:11 110kV八一站 10kV主变1#低压侧发生暂降事件,特征幅值:0.22p.u.(1.25 kV),持续时间:0.595s;⑤、2025-05-30 03:51:58 220kV龙泉站 10kV主变1#低压侧发生暂降事件,特征幅值:0.85p.u.(4.88 kV),持续时间:0.015s;⑥、2025-05-30 00:12:55 220kV龙泉站 110kV主变1#中压侧发生暂降事件,特征幅值:0.84p.u.(53.17 kV),持续时间:0.189s;⑦、2025-05-30 02:49:29 110kV昌洒站 35kV主变1#中压侧发生暂降事件,特征幅值:0.79p.u.(16.04 kV),持续时间:0.073s;⑧、2025-05-30 00:12:55 220kV龙泉站 220kV福泉I线发生暂降事件,特征幅值:0.86p.u.(109.56 kV),持续时间:0.189s;⑨、2025-05-30 00:12:55 220kV龙泉站 10kV主变1#低压侧发生暂降事件,特征幅值:0.85p.u.(4.90 kV),持续时间:0.189s; 详情请登录海南电网电能质量监测系统查看!'
            }
        ]
    }
})

provide('tableStore', tableStore)
tableStore.table.params.searchValue = ''
tableStore.table.params.searchState = ''
const deleteEven = (row: any) => {
    if (tableStore.table.selection.length == 0) {
        ElMessage({
            type: 'warning',
            message: '请选择要删除的数据'
        })
    } else {
        ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            // deleteQuitRunningDevice(tableStore.table.selection.map(item => item.id)).then(res => {
            //     ElMessage({
            //         type: 'success',
            //         message: '删除成功!'
            //     })
            //     tableStore.index()
            // })
        })
    }
}
onMounted(() => {
    tableStore.index()
})
</script>
