<template>
    <div class="report" style="width: 100%; height: 100%">
        <div class="topForm">
            <div class="forms">
                <el-space>
                    <div style="min-width: 30px">{{ t('statAnalysis.deviceId') }}</div>
                    <el-select
                        v-model="windBlowerValue"
                        @change="selectWindBlower"
                        :placeholder="'请选择' + t('statAnalysis.deviceId')"
                        class="windBlowerSelect commonSelect"
                    >
                        <el-option v-for="v in windBlowerList" :key="v.irn" :label="v.name" :value="v.irn"></el-option>
                    </el-select>
                    <div style="width: 20px"></div>
                    <div style="min-width: 30px">时间</div>
                    <el-date-picker
                        style="height: 40px"
                        v-model="timeRange"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        range-separator="-"
                        :start-placeholder="t('alarm.selectDate')"
                        :end-placeholder="t('alarm.selectDate')"
                        :shortcuts="shortcuts"
                    />
                    <div style="width: 20px"></div>
                    <div style="min-width: 30px">{{ t('statAnalysis.interval') }}</div>
                    <el-select v-model="interval" :placeholder="'请选择' + t('statAnalysis.interval')" class="commonSelect">
                        <el-option v-for="v in intervals" :key="v.value" :label="v.label" :value="v.value"></el-option>
                    </el-select>
                </el-space>
                <div>
                    <el-space style="margin-top: 10px">
                        <div style="min-width: 30px">模板</div>
                        <el-select v-model="template" placeholder="请选择模板" class="commonSelect" @change="changeTemplate">
                            <el-option v-for="v in reportTemplateList" :key="v.value" :label="v.label" :value="v.value">
                                <template #default>
                                    <div class="tamplateOption">
                                        <span>{{ v.label }}</span>
                                        <el-icon style="color: red" @click="delReportTemplate(v.value)">
                                            <Delete />
                                        </el-icon>
                                    </div>
                                </template>
                            </el-option>
                        </el-select>
                        <div style="width: 20px"></div>
                        <!-- <div>{{ t('statAnalysis.attributes') }}</div>
                                <el-input
                                    style="width: 200px; height: 40px"
                                    v-model="currentChoose"
                                    :placeholder="'请选择' + t('statAnalysis.attributes')"
                                ></el-input>
                                <el-button type="primary" size="small" :icon="Plus" circle @click="chooseMeasurePoint"> </el-button> -->
                    </el-space>
                </div>
            </div>
            <div class="buttons">
                <el-button class="button" :icon="Search" @click="queryHistoryData" type="primary">查询</el-button>
                <el-button class="button" :icon="Upload" type="primary" plain @click="exportCsv">导出</el-button>
                <el-button class="button" :icon="Notebook" type="primary" @click="addReportTemplate" plain>保存为模板</el-button>
            </div>
        </div>
        <el-table
            class="mainReport"
            :columns="reportTableColumn"
            :data="reportTableData"
            :row-key="(row: any) => row.id"
            :row-style="tableRowClassName"
            v-loading="reportLoading"
        >
            <el-table-column prop="time" label="时间" fixed width="180px" align="center"> </el-table-column>
            <el-table-column
                v-for="item in reportTableColumn.length ? reportTableColumn : [{ prop: '', label: '', unit: '' }]"
                :key="item.prop"
                :label="item.label"
                :prop="item.prop"
                align="center"
            >
                <template #header="scope">
                    <div class="header-cell">
                        <div style="margin-right: 2px">
                            {{ item.label }} <br />
                            {{ item.unit ? `(${item.unit})` : '' }}
                        </div>
                        <el-popconfirm v-if="item.label" title="确定删除？" @confirm="removeColumn(scope)">
                            <template #reference>
                                <el-button class="delete-icon" type="danger" size="small">-</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center" fixed="right">
                <template #header="scope">
                    <el-button type="primary" size="small" :icon="Plus" @click="chooseMeasurePoint"> </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="showMeasure" title="测点名称" :width="900" :destroy-on-close="true">
            <template #header>
                <div class="measureSlotHeader">
                    <span style="font-size: 20px">测点名称</span>
                </div>
            </template>
            <div class="measureSlot">
                <Measurement
                    ref="measureRef"
                    :show="showMeasure"
                    :iotModelId="iotModelId"
                    @handleSelections="handleSelections"
                    :reportTableColumn="reportTableColumn"
                ></Measurement>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="selectMeasurePoint"> 保存 </el-button>
                    <el-button @click="showMeasure = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from 'vue'
import { ElMessage, TableInstance, TreeInstance, ElMessageBox } from 'element-plus'
import { Search, Upload, Notebook, Plus, Delete } from '@element-plus/icons-vue'
import { WindBlowerList, RequestData, Devices } from './type'
import {
    queryWindTurbinesPages,
    historyReq,
    getReportTemplateListReq,
    addReportTemplateListReq,
    delReportTemplateListReq,
} from '/@/api/backend/statAnalysis/request'
import Measurement from './measureList.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useAdminInfo } from '/@/stores/adminInfo'
import { cloneDeep } from 'lodash-es'
const adminInfo = useAdminInfo()
import { useEnumStore } from '/@/stores/enums'
const enumStore = useEnumStore()
const shortcuts = [
    {
        text: '今天',
        value: () => {
            const start = getFormattedDate(0) + ' 00:00:00'
            const end = new Date()
            return [start, end]
        },
    },
    {
        text: '昨天',
        value: () => {
            const start = getFormattedDate(-1) + ' 00:00:00'
            const end = getFormattedDate(-1) + ' 23:59:59'
            return [start, end]
        },
    },
    {
        text: '前3天',
        value: () => {
            const start = getFormattedDate(-3) + ' 00:00:00'
            const end = getFormattedDate(-1) + ' 23:59:59'
            return [start, end]
        },
    },
    {
        text: '本周',
        value: () => {
            return getDateRange('week')
        },
    },
    {
        text: '本月',
        value: () => {
            return getDateRange('month')
        },
    },
]
const tableRowClassName = ({ rowIndex }: any) => {
    if (rowIndex % 2 === 1) {
        return { background: '#ebf3f9' }
    }
    return {}
}

const activeIndex = ref('2')
const handleClick = (val: any) => {
    activeIndex.value = val.props.name
}

// 运行报表
const dateValue = ref('')
// 单机报表
// 风机
const windBlowerValue = ref('')
const windBlowerList = ref<WindBlowerList[]>([])
// 时间
const timeRange = ref([])
// 间隔
const interval = ref('')
const intervals = [
    { label: '五分钟', value: '5m' },
    { label: '十五分钟', value: '15m' },
    { label: '一小时', value: '1h' },
    { label: '一天', value: '1d' },
    { label: '原始', value: 'NONE' },
]
// 模板
const template = ref('')
const reportTemplateList = ref<{ label: string; value: string; columns: any[]; interval: string }[]>([])
const getReportTemplateList = () => {
    getReportTemplateListReq({
        pageNum: 1,
        pageSize: 1000,
        category: '单机报表',
    }).then((res) => {
        if (res.success) {
            reportTemplateList.value = res.data.rows.map((item) => {
                const tem = item.template ? JSON.parse(item.template) : {}
                return {
                    label: tem.name,
                    value: item.id,
                    columns: tem.columns,
                    interval: tem.interval,
                }
            })
        }
    })
}
const exportCsv = () => {
    const exportColumnLabel = [{ prop: 'time', label: '时间' }, ...reportTableColumn.value]
    const itemsRest = cloneDeep(reportTableData.value).map((item: any) => {
        const { id, ...rest } = item
        return rest
    })
    const csvContent = [
        exportColumnLabel.map((header: any) => header.label).join(', '),
        ...itemsRest.map((row: any) => exportColumnLabel.map((header) => row[header.prop] ?? '-').join(', ')),
    ].join('\n')
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = Date.now() + '.csv'
    link.style.display = 'none'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}
const addReportTemplate = () => {
    ElMessageBox.prompt('请输入模板名称', '添加模板', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '模板名称不能为空',
    }).then(({ value }) => {
        const tem = {
            name: value,
            interval: interval.value,
            columns: reportTableColumn.value,
        }
        const data = {
            category: '单机报表' as const,
            template: JSON.stringify(tem),
        }
        console.log(data)

        addReportTemplateListReq(data).then((res) => {
            if (res.success) {
                ElMessage.success('添加成功！')
                getReportTemplateList()
            }
        })
    })
}

const delReportTemplate = (id: string) => {
    ElMessageBox.confirm('确定删除该模板吗？', '删除模板', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        delReportTemplateListReq({ id }).then((res) => {
            if (res.success) {
                ElMessage.success('删除成功！')
                getReportTemplateList()
                template.value = ''
                if (template.value == id) {
                    reportTableColumn.value = JSON.parse(JSON.stringify(originReportColumn))
                }
            }
        })
    })
}

const changeTemplate = (val: string) => {
    const target = reportTemplateList.value.find((item) => item.value === val)
    if (target) {
        interval.value = target.interval ? target.interval : interval.value
        reportTableColumn.value = target.columns
    }
}
// 测点名称
const showMeasure = ref(false)
const currentChoose = ref('')
const currentChooseRows = ref([])

const iotModelId = ref('')
const measureRef = ref()
const queryWindBlower = () => {
    queryWindTurbinesPages().then((res) => {
        if (res.code == 200) {
            windBlowerList.value = res.data.map((item: WindBlowerList) => {
                return {
                    irn: item.irn,
                    name: item.name ?? '-',
                    modelId: item.modelId,
                }
            })
        }
    })
}
const selectWindBlower = (val: any) => {
    console.log(val, 9999)
}

const chooseMeasurePoint = () => {
    if (!windBlowerValue.value) return ElMessage.warning('请先选择风机！')
    iotModelId.value = windBlowerList.value.find((val) => val.irn == windBlowerValue.value)!.modelId

    showMeasure.value = true
}
const removeColumn = (val: any) => {
    const columnName = val.column.property
    reportTableColumn.value = reportTableColumn.value.filter((val: any) => val.prop !== columnName)
}

const handleSelections = (value: any) => {
    currentChooseRows.value = JSON.parse(JSON.stringify(value))
}
// 去重
const uniqueByProp = (arr: any) => {
    const seen = new Set()
    return arr.filter((item: any) => {
        if (!seen.has(item.prop)) {
            seen.add(item.prop)
            return true
        }
        return false
    })
}
const selectMeasurePoint = () => {
    reportTableColumn.value = currentChooseRows.value.map((val: any) => {
        return {
            label: val.label || val.attributeName,
            prop: val.prop || val.attributeCode,
            unit: val.unit || '',
        }
    })
    reportTableColumn.value = uniqueByProp(reportTableColumn.value)?.filter((item: any) => {
        return item.prop != null && item.prop !== ''
    })
    if (!reportTableColumn.value.length) {
        reportTableData.value = []
    }
    showMeasure.value = false
}
const reportLoading = ref(false)
const originReportColumn = [
    {
        label: `风速`,
        prop: 'iWindSpeed',
        unit: 'm/s',
    },
    {
        label: '有功功率',
        prop: 'iGenPower',
        unit: 'MW',
    },
    {
        label: '日发电量',
        prop: 'iKWhThisDay',
        unit: 'kWh',
    },
    {
        label: '总发电量',
        prop: 'iKWhOverall',
        unit: 'kWh',
    },
    {
        label: '机舱角度',
        prop: 'iVaneDirection',
        unit: '',
    },
    {
        label: '叶轮转速',
        prop: 'iRotorSpeed',
        unit: 'rmp',
    },
    {
        label: '发电机转速',
        prop: 'iReactivePower',
        unit: 'rmp',
    },
    {
        label: '机舱温度',
        prop: 'iTempNacelle_1sec',
        unit: '℃',
    },
    {
        label: '主由路压力',
        prop: 'iHydrPress',
        unit: 'kpa',
    },
]
const reportTableColumn = ref(JSON.parse(JSON.stringify(originReportColumn)))

const reportTableData = ref([]) as any
const idCounter = ref(0)
const queryHistoryData = () => {
    if (!windBlowerValue.value) return ElMessage.warning('请选择风机！')
    if (!timeRange.value.length) return ElMessage.warning('请选择时间！')
    if (!interval.value) return ElMessage.warning('请选择间隔！')
    const attributeCodes = reportTableColumn.value.map((val: any) => val.prop).filter((item: any) => item != null && item !== '')
    if (!attributeCodes.length) return ElMessage.warning('请添加测点！')
    reportLoading.value = true
    const requestData = {
        devices: [
            {
                deviceId: windBlowerValue.value,
                attributes: [...attributeCodes],
            },
        ],
        interval: interval.value,
        startTime: new Date(timeRange.value[0]).getTime(),
        endTime: new Date(timeRange.value[1]).getTime(),
    } as any
    historyReq(requestData).then((res) => {
        if (res.code == 200) {
            const result = res.data
            if (Object.keys(result)?.length) {
                const realResult = result[windBlowerValue.value]
                let tableData = [] as any
                attributeCodes.forEach((item: any) => {
                    if (Object.keys(realResult).includes(item)) {
                        tableData.push({
                            name: item,
                            times: realResult[item].times,
                            value: realResult[item].values,
                        })
                    }
                })
                const processedData = new Map()
                idCounter.value = 0
                if (tableData.length) {
                    tableData.forEach(({ name, times, value }: any) => {
                        times.forEach((time: number, index: number) => {
                            if (!processedData.has(time)) {
                                processedData.set(time, { id: idCounter.value++, time: timestampToTime(time) })
                            }
                            const values = value[index]
                            processedData.get(time)[name] = enumStore.keys.includes(name) ? enumStore.data?.[name]?.[values] : values
                        })
                    })
                }
                reportTableData.value = Array.from(processedData.values())
                if (!reportTableData.value.length) {
                    ElMessage.warning('查询数据为空!')
                    reportTableData.value = []
                }
                reportLoading.value = false
            } else {
                ElMessage.warning('查询数据为空!')
                reportTableData.value = []
                reportLoading.value = false
            }
        } else {
            reportLoading.value = false
            ElMessage.warning('查询失败')
        }
    })
}

// 时间转换
const getFormattedDate = (offset: number) => {
    const date = new Date()
    date.setDate(date.getDate() + offset)

    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
}
const getDateRange = (type: 'week' | 'month') => {
    const today = new Date()
    if (type === 'week') {
        const dayOfWeek = today.getDay()
        const startOfWeek = new Date(today)
        startOfWeek.setDate(today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1))
        startOfWeek.setHours(0, 0, 0, 0)
        const endOfWeek = new Date(startOfWeek)
        endOfWeek.setDate(startOfWeek.getDate() + 6)
        endOfWeek.setHours(23, 59, 59, 999)
        return [startOfWeek, endOfWeek]
    }
    if (type === 'month') {
        const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
        startOfMonth.setHours(0, 0, 0, 0)
        const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0)
        endOfMonth.setHours(23, 59, 59, 999)
        return [startOfMonth, endOfMonth]
    }
}
const timestampToTime = (timestamp: any) => {
    let timestamps = timestamp ? timestamp : null
    let date = new Date(timestamps)
    let Y = date.getFullYear() + '-'
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    return Y + M + D + h + m + s
}

getReportTemplateList()
onMounted(() => {
    queryWindBlower()
})
</script>

<style lang="scss" scoped>
.topForm {
    display: flex;
    margin-bottom: 10px;
    overflow-x: auto;
    height: 110px;
    .buttons {
        margin-left: 10px;
        display: flex;
        justify-content: flex-end;
        flex: 1;
    }
}
.mainReport {
    width: 100%;
    height: calc(100% - 155px);
}

.commonSelect {
    min-width: 250px;
    :deep(.el-select__wrapper) {
        height: 40px;
    }
}

.button {
    height: 40px;
}
.delete-icon {
    cursor: pointer;
    display: none;
}
.header-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover .delete-icon {
        display: block;
        transition: 0.2;
    }
}
.tamplateOption {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
