<template>
    <div class="report">
        <el-container class="mainContainer">
            <el-tabs v-model="activeIndex" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="运行报表" name="1" class="runningReport">
                    <!-- <div class="header">
                        <el-space>
                            <div>时间</div>
                            <el-date-picker style="height: 40px" v-model="dateValue" type="date" placeholder="选择日期时间" />
                            <el-button :icon="Search" type="primary">查询</el-button>
                        </el-space>
                    </div> -->
                    运行报表
                </el-tab-pane>
                <el-tab-pane label="单机报表" name="2" class="singleReport">
                    <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>模板</div>
                                    <el-select v-model="template" placeholder="请选择模板" class="commonSelect">
                                        <el-option v-for="v in templateList" :key="v.value" :label="v.label" :value="v.value"></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>导出</el-button>
                            <el-button class="button" :icon="Notebook" type="primary" plain>保存为模板</el-button>
                        </div>
                    </div>

                    <el-table
                        class="mainReport"
                        :columns="reportTableColumn"
                        :data="reportTableData"
                        :row-key="(row) => row.id"
                        :row-style="tableRowClassName"
                        v-loading="reportLoading"
                    >
                        <el-table-column prop="time" label="时间" fixed width="120px"> </el-table-column>
                        <el-table-column v-for="item in reportTableColumn" :key="item.prop" :label="item.label" :prop="item.prop">
                            <template #header="scope">
                                <el-space>
                                    {{ item.label }}
                                    <el-popconfirm v-if="item.label" title="确定删除？" @confirm="removeColumn(scope)">
                                        <template #reference>
                                            <el-button type="danger" size="small">-</el-button>
                                        </template>
                                    </el-popconfirm>
                                </el-space>
                            </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-tab-pane>
                <el-tab-pane label="多机报表" name="3">多机报表</el-tab-pane>
            </el-tabs>
        </el-container>
        <el-dialog v-model="showMeasure" title="测点名称" :width="800" :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"></Measurement>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showMeasure = false">取消</el-button>
                    <el-button type="primary" @click="selectMeasurePoint"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from 'vue'
import { ElMessage, TableInstance, TreeInstance } from 'element-plus'
import { Search, Upload, Notebook, Plus } from '@element-plus/icons-vue'
import { WindBlowerList } from './type'
import { queryWindTurbinesPages, historyReq } from '/@/api/backend/statAnalysis/request'
import Measurement from './measureList.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useAdminInfo } from '/@/stores/adminInfo'
const adminInfo = useAdminInfo()
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 }) => {
    if (rowIndex % 2 === 1) {
        return { background: '#ebf3f9' }
    }
    return {}
}

const activeIndex = ref('2')
const handleClick = (val) => {
    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 templateList = [
    { label: '模板一', value: '1' },
    { label: '模板二', value: '2' },
]
// 测点名称
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) => {
                return {
                    irn: item.irn,
                    name: item.name ?? '-',
                    modelId: item.modelId,
                }
            })
        }
    })
}
const selectWindBlower = (val) => {
    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) => {
    const columnName = val.column.property
    reportTableColumn.value = reportTableColumn.value.filter((val) => val.prop !== columnName)
}
const handleSelections = (value) => {
    currentChooseRows.value = value
}
// 去重
const uniqueByProp = (arr) => {
    const seen = new Set()
    return arr.filter((item) => {
        if (!seen.has(item.prop)) {
            seen.add(item.prop)
            return true
        }
        return false
    })
}
const selectMeasurePoint = () => {
    currentChooseRows.value?.forEach((val) => {
        reportTableColumn.value.push({
            label: val.attributeName,
            prop: val.attributeCode,
        })
    })
    reportTableColumn.value = uniqueByProp(reportTableColumn.value)?.filter((item) => item.prop != null && item.prop !== '')
    showMeasure.value = false
}
const reportLoading = ref(false)
const reportTableColumn = ref([
    {
        label: '',
        prop: '',
    },
])

const reportTableData = ref([])
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) => val.prop).filter((item) => 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(),
    }
    historyReq(requestData).then((res) => {
        if (res.code == 200) {
            const result = res.data
            if (Object.keys(result)?.length) {
                const realResult = result[windBlowerValue.value]
                let tableData = []
                attributeCodes.forEach((item) => {
                    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 }) => {
                        times.forEach((time, index) => {
                            if (!processedData.has(time)) {
                                processedData.set(time, { id: idCounter.value++, time: timestampToTime(time) })
                            }
                            processedData.get(time)[name] = value[index]
                        })
                    })
                }
                reportTableData.value = Array.from(processedData.values())
                reportLoading.value = false
            } else {
                ElMessage.warning('查询数据为空!')
                reportLoading.value = false
            }
        } else {
            reportLoading.value = false
            ElMessage.warning('查询失败')
        }
    })
}

// 时间转换
const getFormattedDate = (offset) => {
    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) => {
    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
}
onMounted(() => {
    queryWindBlower()
})
</script>

<style lang="scss" scoped>
$headerHeight: 60px;
$defaultBackgroundColor: #fff;
$defaultAsideWidth: 260px;
$paginationHeight: 32px;
.report {
    position: relative;
    width: 100%;
    height: 100%;
    .mainContainer {
        width: 100%;
        height: 100%;
        padding: 0 20px;
        .el-tabs {
            width: 100%;
            --el-tabs-header-height: 60px;
            :deep(.el-tabs__content) {
                height: calc(100% - 80px);
            }
        }
        .runningReport {
            .header {
                width: 100%;
                height: 60px;
            }
        }
        .singleReport {
            width: 100%;
            height: 100%;

            .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: 200px;
                :deep(.el-select__wrapper) {
                    height: 40px;
                }
            }

            .button {
                height: 40px;
            }
        }
    }
}
</style>
