<template>
    <div class="contain">
        <el-header class="headerPart">
            <div class="topLeft">
                <div class="selectPart">
                    <span>{{ t('statAnalysis.deviceId') }}</span>
                    <el-select v-model="statAnalysisDeviceId" :placeholder="'请选择' + t('statAnalysis.deviceId')" class="statAnalysisSelect">
                        <el-option v-for="v in statAnalysisSelectOptions.deviceId" :key="v.value" :label="v.label" :value="v.value"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="topRight">
                <el-button type="primary" :loading="isLoading" @click="statAnalysisOperate()">{{ t('statAnalysis.search') }}</el-button>
                <el-button style="color: #0064aa" @click="statAnalysisExport()">{{ t('statAnalysis.export') }}</el-button>
            </div>
        </el-header>
        <div class="timeColumns">
            <div class="headerPart">
                <div class="topLeft">
                    <div class="selectPart">
                        <span>{{ t('statAnalysis.time') }}</span>
                        <el-date-picker
                            class="datetime-picker"
                            v-model="statAnalysisTime"
                            :type="statAnalysisInterval == '1d' ? 'daterange' : 'datetimerange'"
                            :value-format="statAnalysisInterval == '1d' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
                            :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
                            :teleported="false"
                            :shortcuts="shortcuts"
                        />
                    </div>
                    <div class="selectPart">
                        <span>{{ t('statAnalysis.interval') }}</span>
                        <el-select v-model="statAnalysisInterval" :placeholder="'请选择' + t('statAnalysis.interval')" class="statAnalysisSelect">
                            <el-option v-for="v in statAnalysisSelectOptions.interval" :key="v.value" :label="v.label" :value="v.value"></el-option>
                        </el-select>
                    </div>
                    <div class="selectPart">
                        <span>{{ t('statAnalysis.madeinfatory') }}</span>
                        <el-select
                            v-model="statAnalysisFatory"
                            :placeholder="'请选择' + t('statAnalysis.madeinfatory')"
                            class="statAnalysisSelect"
                            clearable
                        >
                            <el-option
                                v-for="v in statAnalysisFatoryList"
                                :key="v.id"
                                :label="v.madeinfactory + v.model"
                                :value="`${v.madeinfactory}:${v.model}`"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
        </div>
        <div
            ref="chartContainer"
            style="height: calc(100% - 240px); width: calc(100% - 60px); border: 1px solid rgb(217, 217, 217); margin: 30px"
        ></div>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { queryWindTurbinesPages, historyReq, powerCurveExport } from '/@/api/backend/statAnalysis/request'
import { theoreticalpowerCurveList, powerCurveQuery } from '/@/api/backend/theoreticalpowerCurve/request'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
const { t } = useI18n()

const statAnalysisFatory = ref('')
const statAnalysisFatoryList: any = ref([])
const statAnalysisInterval = ref('1h')
const statAnalysisDeviceId = ref('')
const statAnalysisSelectOptions: any = reactive({
    interval: [
        { label: '一分钟', value: '1m' },
        { label: '五分钟', value: '5m' },
        { label: '十分钟', value: '10m' },
        { label: '十五分钟', value: '15m' },
        { label: '一小时', value: '1h' },
        { label: '一天', value: '1d' },
        { label: '原始', value: 'NONE' },
    ],
    deviceId: [],
})

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 statAnalysisTime = ref([getFormattedDate(0) + ' 00:00:00', getFormattedDate(0) + ' 23:59:59'])
const chartContainer = ref<HTMLElement | null>(null)

const option: any = {
    tooltip: {
        formatter: function (params: any) {
            return '风速:' + params.value[0] + 'm/s ' + ' <br/>' + '功率：' + params.value[1] + 'KW'
        },
    },
    legend: {
        icon: 'circle',
        itemGap: 20,
        itemWidth: 8,
        itemHeight: 8,
        selectedMode: true,
        data: [],
    },
    xAxis: {
        type: 'value',
        name: 'm/s',
        splitLine: {
            show: false,
        },
        axisLine: {
            show: true,
        },
        axisTick: {
            show: true,
        },
    },
    yAxis: {
        name: 'KW',
        splitLine: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
    },
    series: [],
    grid: {},
}

const chart: any = ref(null)
onMounted(() => {
    if (chartContainer.value) {
        chart.value = echarts.init(chartContainer.value)
        chart.value.on('legendselectchanged', function (event: any) {
            var isSelected = event.selected[event.name]
            var series = chart.value.getOption().series
            for (var i = 0; i < series.length; i++) {
                if (series[i].name === event.name) {
                    series[i].show = isSelected
                }
            }
            chart.value.setOption({ series: series })
        })
    }
    queryWindTurbines().then((res: any) => {
        statAnalysisDeviceId.value = res.value
        statAnalysisOperate()
    })
    queryfactoery()
})

const queryfactoery = () => {
    theoreticalpowerCurveList().then((res: any) => {
        if (res.code == 200) {
            statAnalysisFatoryList.value = res.rows
        }
    })
}

const queryWindTurbines = () => {
    return new Promise((resolve) => {
        queryWindTurbinesPages()
            .then((res) => {
                if (res.code == 200) {
                    statAnalysisSelectOptions.deviceId = res.data.map((item: any) => {
                        return {
                            value: `${item.madeinfactory}:${item.model}:${item.irn}`,
                            label: item.name ?? '-',
                            iotModelId: item.modelId,
                        }
                    })
                    resolve(statAnalysisSelectOptions.deviceId[0])
                } else {
                    ElMessage.error(res.msg)
                }
            })
            .catch((err) => {
                ElMessage.error(err ?? '查询失败')
            })
    })
}

window.onresize = () => {
    chart.value.resize()
}

const shortcuts = [
    {
        text: '今天',
        value: () => {
            const start = getFormattedDate(0) + ' 00:00:00'
            const end = getFormattedDate(0) + ' 23:59:59'
            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 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 isLoading = ref(false)
const statAnalysisOperate = () => {
    const deviceId = statAnalysisDeviceId.value.split(':')[2]
    if (!deviceId) {
        ElMessage.info('请选择风机！')
        return
    } else if (!statAnalysisTime.value.length) {
        ElMessage.info('请选择查询时间！')
        return
    }
    isLoading.value = true
    option.series = []
    option.legend.data = []
    chart.value.setOption(option, { notMerge: true })
    const requestData = {
        devices: [
            {
                deviceId: deviceId,
                attributes: ['iGenPower', 'iWindSpeed'],
            },
        ],
        interval: statAnalysisInterval.value || '5m',
        startTime: new Date(statAnalysisTime.value[0]).getTime(),
        endTime: new Date(statAnalysisTime.value[1]).getTime(),
    }
    const params = statAnalysisFatory.value ? statAnalysisFatory.value : statAnalysisDeviceId.value
    const promise1 = new Promise((resolve, reject) => {
        const madeinfactory = params.split(':')[0]
        const model = params.split(':')[1]
        powerCurveQuery(madeinfactory, model)
            .then((res) => {
                if (res.code == 200) {
                    resolve(res.data)
                } else {
                    isLoading.value = false
                    ElMessage.warning('查询失败')
                }
            })
            .catch((error) => {
                resolve(error)
            })
    })
    const promise2 = new Promise((resolve, reject) => {
        historyReq(requestData)
            .then((res) => {
                if (res.code == 200) {
                    resolve(res.data)
                } else {
                    isLoading.value = false
                    ElMessage.warning('查询失败')
                }
            })
            .catch((error) => {
                resolve(error)
            })
    })

    Promise.all([promise1, promise2])
        .then((results: any) => {
            isLoading.value = false
            const resData0 = results[1][statAnalysisDeviceId.value.split(':')[2]]
            const resData1 = results[0]
            if (resData0) {
                const iGenPower = resData0['iGenPower']['values']
                const iWindSpeed = resData0['iWindSpeed']['values']
                if (!iWindSpeed.length) {
                    ElMessage.info(`实时值数据为空`)
                } else {
                    const seriesData = iGenPower.map((item: any, index: number) => {
                        return [iWindSpeed[index], item]
                    })
                    seriesData.sort((a: any, b: any) => {
                        return a[0] - b[0]
                    })
                    const series = {
                        type: 'line',
                        data: seriesData,
                        name: '实际值',
                        smooth: true,
                        animation: false,
                    }
                    option.series.push(series)
                    option.legend.data.push('实际值')
                }
            }
            if (resData1.length) {
                const seriesData = resData1.map((item: any) => {
                    return [item.speed, item.power]
                })
                const series = {
                    type: 'line',
                    data: seriesData,
                    name: '理论值',
                    smooth: true,
                    animation: false,
                }
                option.series.push(series)
                option.legend.data.push('理论值')
            }
            chart.value.setOption(option)
        })
        .catch((error) => {
            isLoading.value = false
            ElMessage.warning(error)
        })
}

const statAnalysisExport = () => {
    const params = statAnalysisFatory.value ? statAnalysisFatory.value : statAnalysisDeviceId.value
    const requestData = {
        devices: [
            {
                deviceId: statAnalysisDeviceId.value.split(':')[2],
                attributes: ['iGenPower', 'iWindSpeed'],
            },
        ],
        interval: statAnalysisInterval.value || '5m',
        startTime: new Date(statAnalysisTime.value[0]).getTime(),
        endTime: new Date(statAnalysisTime.value[1]).getTime(),
        madeinfactory: params.split(':')[0],
        model: params.split(':')[1],
    }
    console.log(requestData)
    powerCurveExport(requestData).then((res: any) => {
        const downloadUrl = window.URL.createObjectURL(res)
        const a = document.createElement('a')
        a.href = downloadUrl
        a.download = '功率曲线' + new Date().getTime()
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(downloadUrl)
        document.body.removeChild(a)
    })
}
</script>
<style scoped lang="scss">
.contain {
    height: 100%;
    .headerPart {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .topLeft {
            display: flex;
            .icon {
                width: 40px;
                height: 40px;
                padding: 10px 0;
            }
            .selectPart {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 40px;
                margin-right: 20px;
                span {
                    margin-right: 10px;
                }
                .customName {
                    width: fit-content;
                    margin-right: 10px;
                }
                .statAnalysisSelect {
                    width: 200px;
                    :deep(.el-select__wrapper) {
                        height: 40px;
                    }
                    :deep(.el-input__inner) {
                        height: 38px;
                    }
                }
                .max,
                .min,
                .average {
                    border-radius: 6px;
                    height: 40px;
                    width: 72px;
                    text-align: center;
                    line-height: 40px;
                }
                .max {
                    background: rgba(254, 55, 49, 0.2);
                    border: 1px solid #fe3731;
                    color: #fe3731;
                }
                .min {
                    background: rgba(0, 160, 150, 0.2);
                    border: 1px solid #00a096;
                    color: #00a096;
                }
                .average {
                    background: rgba(0, 100, 170, 0.2);
                    border: 1px solid #0064aa;
                    color: #0064aa;
                }
            }
            .dialog-footer button:first-child {
                margin-right: 10px;
            }
        }
        .topRight {
            display: flex;
            justify-content: space-between;
            .el-button {
                width: 100px;
                height: 40px;
            }
        }
    }
    .timeColumns {
        max-height: 120px;
        overflow: hidden;
        .headerPart {
            padding: 0px 10px 20px 20px;
        }
        &.expand {
            max-height: max-content;
            height: auto;
            overflow: inherit;
        }
    }
    .timeColumns.expand + div.ralIcon {
        transform: rotate(-90deg);
    }
    .ralIcon {
        width: 100%;
        text-align: center;
        transform: rotate(90deg);
    }
    #myEChart {
        width: 100%;
        height: 300px;
    }
}
</style>
