<template>
    <div class="default-main">
        <div v-show="view">
            <TableHeader datePicker ref="TableHeaderRef" >
                <template #select>
                    <el-form-item label="筛选数据">
                        <el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入事件关联分析描述"
                            maxlength="32" show-word-limit />
                    </el-form-item>
                </template>
                <template #operation>
                    <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
                </template>
            </TableHeader>
            <Table ref="tableRef" />
        </div>
        <!-- 暂降源定位 -->
        <el-dialog draggable v-model="dialogAnalysis" title="暂降源定位" width="70%">
            <div class="mb10" style="display: flex; justify-content: space-between">
                <span>事件关联编号为：{{ AssociationNumber }}</span>
                <el-button icon="el-icon-Download" type="primary" @click="positioningexport">导出</el-button>
            </div>
            <vxe-table height="400" ref="positioningtableRef" auto-resize :data="AnalysisData"
                :cell-class-name="cellClassName" v-bind="defaultAttribute">
                <vxe-table-column title="序号" width="80" type="seq" align="center">
                    <template v-slot="row">
                        <span>{{ (form.pageNum - 1) * form.pageSize + row.rowIndex + 1 }}</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="startTime" title="暂降发生时刻" align="center" sortable  width="200"
                    :show-overflow="true"></vxe-table-column>
                    <vxe-table-column field="featureAmplitude" title="暂降(骤升)幅值(%)" sortable align="center" width="160">
                    <template #default="{ row }">
                        <span>{{ (row.featureAmplitude * 100).toFixed(2) }}</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column field="duration" title="持续时间(s)" align="center" sortable width="120"></vxe-table-column>
                <vxe-table-column field="advanceType" title="触发类型" align="center" width="120"
                    :formatter="formFilter"></vxe-table-column>
                <vxe-table-column field="advanceReason" title="暂降原因" align="center" width="120"
                    :formatter="formFilter"></vxe-table-column>
                <vxe-table-column field="gdName" title="供电公司" align="center"></vxe-table-column>
                <vxe-table-column field="subName" :show-overflow="true" title="变电站" align="center"></vxe-table-column>
                <vxe-table-column field="lineName" title="监测点" align="center"></vxe-table-column>
                <vxe-table-column field="voltageId" title="电压等级(kV)" align="center"></vxe-table-column>
                
            </vxe-table>
            <el-pagination class="mt10" :currentPage="form.pageNum" :page-size="form.pageSize"
                :page-sizes="[10, 20, 50, 100]" background :layout="'sizes,total, ->, prev, pager, next, jumper'"
                :total="total" @size-change="onTableSizeChange" @current-change="onTableCurrentChange"></el-pagination>
        </el-dialog>
        <!-- 暂降源定位 -->
        <Map :style="height" :showBut="false" v-if="!view" :mapList="mapList" />
        <el-button class="close" :icon="Back" @click="view = true" v-if="!view">返回</el-button>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import { mainHeight } from '@/utils/layout'
import Table from '@/components/table/index.vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import TableHeader from '@/components/table/header/index.vue'
import { queryEventDetailByAssId } from '@/api/advance-boot/analyse'
import { useDictData } from '@/stores/dictData'
import { Back } from '@element-plus/icons-vue'
import { queryEventsAssPage } from '@/api/advance-boot/analyse'
import Map from '@/views/pqs/voltageSags/monitoringPoint/online/navigation/map.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
defineOptions({
    name: 'Advancedanalysis/impactscope'
})
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(20)
const dialogAnalysis = ref(false)
const AnalysisData = ref([])
const AssociationNumber = ref()
const total = ref(0)
const view = ref(true)
const tableRef = ref()
const TableHeaderRef = ref()
const dictData = useDictData()
import { useAdminInfo } from '@/stores/adminInfo'
const mapList = ref([])
const params = ref({
    deptIndex: '',
    monitorFlag: 2,
    powerFlag: 2,
    searchBeginTime: '',
    searchEndTime: '',
    serverName: 'event-boot',
    statisticalType: {}
})
const adminInfo = useAdminInfo()
const positioningtableRef = ref()
const reason = dictData.getBasicData('Event_Reason')
const type = dictData.getBasicData('Event_Type')
const form = ref({
    pageSize: 20,
    pageNum: 1,
    id: ''
})
const tableStore = new TableStore({
    url: '/advance-boot/process/queryEventsAssPage',
    method: 'POST',
    column: [
        {
            field: 'index',
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'timeId', title: '时间', width: '200' },
        { field: 'timeId', title: '事件关联分析名称', width: '200' },
        {
            field: 'contentDes',
            title: '事件关联分析描述'
        },
        {
             title: '操作',fixed: 'right',
            width: '200',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '暂降源定位',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        AssociationNumber.value = row.timeId
                        form.value.id = row.eventAssId
                        source()
                    }
                },
                {
                    name: 'edit',
                    title: '范围查看',
                    type: 'primary',

                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        params.value.deptIndex = adminInfo.$state.deptId
                        params.value.searchBeginTime = tableStore.table.params.searchBeginTime
                        params.value.searchEndTime = tableStore.table.params.searchEndTime
                        getAreaLineInfo(params.value).then(res => {
                            mapList.value = res.data
                            view.value = false
                        }).catch(err => {
                            view.value = false
                        })
                        // monitoringPoint.setValue('lineId', row.id)

                    }
                }
            ]
        }
    ],

    loadCallback: () => { }
})
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
onMounted(() => {
    tableStore.index()
    TableHeaderRef.value.setDatePicker([
        { label: '年份', value: 1 },
        { label: '季度', value: 2 },
        { label: '月份', value: 3 },
        { label: '周', value: 4 }
    ])
})
const cellClassName = ({ row, rowIndex }) => {
  
    if (rowIndex === 0) {
        return 'highlight-first-row';
    }
};
// 启动关联分析
const firing = () => { }
// 暂降源定位
const source = () => {
    queryEventDetailByAssId(form.value).then(res => {
        AnalysisData.value = res.data.records
        total.value = res.data.total
        dialogAnalysis.value = true
    })
}

// 分页
const onTableSizeChange = (val: number) => {
    form.value.pageSize = val
    source()
}

const onTableCurrentChange = (val: number) => {
    form.value.pageNum = val
    source()
}
// 数据过滤
const formFilter = (row: any) => {
    if (row.column.property == 'advanceType') {
        let title = ''
        type.forEach(item => {
            if (item.id == row.row.advanceType) {
                title = item.name
            } else if (row.row.advanceType == null || row.row.advanceType == '') {
                title = '/'
            }
        })
        return title
    } else if (row.column.property == 'advanceReason') {
        let title = ''
        reason.forEach(item => {
            if (item.id == row.row.advanceReason) {
                title = item.name
            } else if (row.row.advanceReason == null || row.row.advanceReason == '') {
                title = '/'
            }
        })
        return title
    } else {
        return row.row[row.column.property]
    }
}
// 导出
const exportEvent = () => {
    queryEventsAssPage({
        searchBeginTime: tableStore.table.params.searchBeginTime,
        searchEndTime: tableStore.table.params.searchEndTime,
        searchValue: tableStore.table.params.searchValue,
        pageNum: 1,
        pageSize: tableStore.table.total
    }).then(res => {
        tableRef.value.getRef().exportData({
            filename: '暂态聚合展示', // 文件名字
            sheetName: 'Sheet1',
            type: 'xlsx', //导出文件类型 xlsx 和 csv
            useStyle: true,
            data: res.data.records, // 数据源 // 过滤那个字段导出
            columnFilterMethod: function (column, $columnIndex) {
                return !(column.$columnIndex === 0)
            }
        })
    })
}
// 导出暂降源定位
const positioningexport = () => {
    positioningtableRef.value.exportData({
        filename: '暂降源定位', // 文件名字
        sheetName: 'Sheet1',
        type: 'xlsx', //导出文件类型 xlsx 和 csv
        useStyle: true,
        download: false,
        data: AnalysisData.value, // 数据源 // 过滤那个字段导出
        columnFilterMethod: function (column, $columnIndex) {
            return !(column.$columnIndex === 0)
        }
    })
}
</script>
<style scoped lang="scss">
:deep .el-pagination__sizes {
    .el-select {
        min-width: 128px;
    }
}

:deep(.highlight-first-row) {
    color: red !important;
}

.close {
    position: absolute;
    right: 10px;
    top: 50px;

}
</style>
