<template>
    <div class="device-control-detail child-router">
        <TableHeader :showSearch="false">
            <template #select>
                <el-form-item label="日期">
                    <DatePicker ref="datePickerRef"></DatePicker>
                </el-form-item>
                <el-form-item label="值类型">
                    <el-select v-model="form.dataLevel" :disabled="props.dataLevel == 'Primary'">
                        <el-option value="Primary" label="一次值"></el-option>
                        <el-option value="Secondary" label="二次值"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据类型" label-width="80px">
                    <el-select v-model="form.statMethod" placeholder="请选择值类型">
                        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </template>
            <template #operation>
                <el-button type="primary" icon="el-icon-Search" @click="init">查询</el-button>
                <el-button icon="el-icon-Back" @click="$emit('close')">返回</el-button>
            </template>
        </TableHeader>

        <MyEchart :options="echartsData" v-if="echartsData" style="flex: 1" class="mt10" />
        <el-empty description="暂无数据" v-else style="flex: 1" v-loading="loading"></el-empty>
    </div>
</template>
<script lang="ts" setup>
import { ref, inject, nextTick, onMounted } from 'vue'
import { reactive } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
import TableHeader from '@/components/table/header/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { yMethod, exportCSV } from '@/utils/echartMethod'
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults'

interface Props {
    detail: anyObj
    dataLevel: string
}

const props = withDefaults(defineProps<Props>(), {
    detail: () => {
        return {}
    },
    dataLevel: () => {
        return ''
    }
})
const datePickerRef = ref()
const form: any = reactive({
    code: '',
    icon: '',
    id: '',
    name: '',
    path: '',
    pid: '0',
    remark: '',
    routeName: '',
    sort: 100,
    dataLevel: '',
    statMethod: 'avg'
})
const typeOptions = [
    {
        name: '平均值',
        id: 'avg'
    },
    {
        name: '最大值',
        id: 'max'
    },
    {
        name: '最小值',
        id: 'min'
    },
    {
        name: 'CP95值',
        id: 'cp95'
    }
]
const echartsData = ref<any>(null)
const dialogVisible = ref(false)
const loading = ref(true)
onMounted(() => {
    if (props.dataLevel == 'Secondary') {
        form.dataLevel = 'Primary'
    } else {
        form.dataLevel = props.dataLevel
    }
    init()
})
const init = () => {
    echartsData.value = null
    loading.value = true
    // console.log(props.detail.children, 'props.detail.children')
    let statisticalParams = props.detail.children
    statisticalParams[0].statMethod = form.statMethod
    getDeviceDataTrend({
        devId: props.detail.devId,
        endTime: datePickerRef.value.timeValue[1],
        lineId: props.detail.lineId,
        startTime: datePickerRef.value.timeValue[0],
        statisticalParams: statisticalParams,
        dataLevel: form.dataLevel,
        statMethod: form.statMethod
    }).then(res => {


        if (res.data.length && res.data[0].length) {
            let arr: any[] = []
            res.data.forEach((item: any[]) => {
                arr.push(...item)
            })
            let [min, max] = yMethod(arr.map((item: any) => item.statisticalData.toFixed(2)))
            echartsData.value = {

                options: {

                    grid: {
                        top: '60px',
                        left: '10px',
                        right: '20px',
                        bottom: '40px',
                        containLabel: true
                    },
                    series: res.data.map((item: any) => {
                        return {
                            data: item.map((item: any, i: any) => {
                                return [res.data[0][i]?.time, item.statisticalData.toFixed(2)]
                            }),
                            // data: [
                            //     [1584086222000, '573'],
                            //     [1584086342000, '57'],
                            //     [1584086462000, '56']
                            // ],
                            // markPoint: {
                            //     symbol: 'circle',
                            //     symbolSize: 0,
                            //     label: {
                            //         show: false
                            //     },
                            //     data: [
                            //         { type: 'max', name: 'Max' },
                            //         { type: 'min', name: 'Min' }
                            //     ]
                            // },
                            type: 'line',
                            showSymbol: false,
                            smooth: true,
                            name: item[0]?.anotherName
                        }
                    })
                },
                title: {
                    text: props.detail.name?.split('(')[0],
                },
                tooltip: {
                    axisPointer: {
                        type: 'cross',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                legend: {
                    data: res.data.map((item: any[]) => {
                        return item[0]?.anotherName
                    })
                },
                yAxis: {
                    name: `单位:(${arr[0].unit == null ? ' / ' : arr[0].unit})`,
                    type: 'value',


                    min: min,
                    max: max,
                    // interval:interval,

                    // min: 134,
                    // max: 500,
                    // min: Math.ceil(
                    //     arr
                    //         .map((item: any) => item.statisticalData)
                    //         .sort((a, b) => {
                    //             return a - b
                    //         })[0]
                    // ),
                    // max: Math.floor(
                    //     arr
                    //         .map(item => item.statisticalData)
                    //         .sort((a, b) => {
                    //             return b - a
                    //         })[0]
                    // ),
                    // interval: (Math.floor(
                    //     arr
                    //         .map(item => item.statisticalData)
                    //         .sort((a, b) => {
                    //             return b - a
                    //         })[0]
                    // ) - Math.ceil(
                    //     arr
                    //         .map((item: any) => item.statisticalData)
                    //         .sort((a, b) => {
                    //             return a - b
                    //         })[0]
                    // )) / 5,


                },

                xAxis: {
                    type: 'time',
                    axisLabel: {
                        formatter: {
                            day: '{MM}-{dd}',
                            month: '{MM}',
                            year: '{yyyy}',
                        }
                    }
                    // data: res.data[0].map((item: any) => {
                    //     return item.time
                    // }),

                    // axisLabel: {
                    //     formatter: function (value: string) {
                    //         return value.split(' ').join('\n')
                    //     }
                    // }
                },
                toolbox: {
                    featureProps: {
                        myTool1: {
                            show: true,
                            title: '下载csv',

                            icon: 'path://M588.8 551.253333V512H352v39.253333h236.373333z m0 78.933334v-39.253334H352v39.253334h236.373333z m136.533333 78.933333V334.933333l-157.866666-157.866666H273.066667A59.306667 59.306667 0 0 0 213.333333 236.373333v551.253334a59.306667 59.306667 0 0 0 59.306667 59.306666h274.773333v42.666667H853.333333v-180.48zM568.746667 234.666667l100.266666 100.693333h-81.066666a20.053333 20.053333 0 0 1-19.626667-20.053333z m-20.48 573.013333H273.066667a19.2 19.2 0 0 1-17.493334-19.626667V236.373333a19.2 19.2 0 0 1 19.626667-19.626666h256v98.133333a58.88 58.88 0 0 0 58.88 59.306667h96.426667v334.933333h-98.133334v-39.68H352v39.68h196.266667z m100.266666 23.04a37.973333 37.973333 0 0 1-32 15.786667 38.826667 38.826667 0 0 1-32.426666-15.786667 53.76 53.76 0 0 1-10.24-32.853333 42.666667 42.666667 0 0 1 42.666666-47.786667 35.84 35.84 0 0 1 37.546667 29.866667h-12.8a23.893333 23.893333 0 0 0-24.746667-19.2c-17.066667 0-29.013333 14.08-29.013333 35.84s11.52 37.546667 28.586667 37.546666a26.453333 26.453333 0 0 0 26.453333-25.6h12.8a39.253333 39.253333 0 0 1-7.253333 22.186667z m59.733334 15.786667a35.84 35.84 0 0 1-40.106667-34.56H682.666667a23.893333 23.893333 0 0 0 26.88 23.04c12.8 0 22.613333-6.4 22.613333-15.786667s-4.266667-11.52-14.506667-13.653333l-21.333333-5.12c-17.066667-4.266667-24.32-11.52-24.32-23.893334s12.8-26.453333 34.133333-26.453333a31.573333 31.573333 0 0 1 35.413334 30.293333h-13.653334a19.626667 19.626667 0 0 0-22.613333-18.773333c-12.8 0-20.48 5.12-20.48 12.8s5.12 11.093333 17.066667 13.653333l14.933333 2.986667a42.666667 42.666667 0 0 1 20.906667 8.96 23.893333 23.893333 0 0 1 7.68 17.92c-0.426667 17.066667-14.506667 28.16-37.12 28.16z m88.746666 0h-14.506666l-32.426667-92.16h14.08l19.626667 59.733333 6.4 20.053333c0-9.386667 3.413333-12.8 5.546666-20.053333l19.2-59.733333h14.08z',
                            onclick: (e) => {

                                console.log("🚀 ~ init ~ echartsData.value:", echartsData.value.options.series.map(item => item.data))

                                let list = echartsData.value.options.series.map(item => item.data)
                                let dataList = list[0].map((item, index) => {
                                    const value1 = list[1] && list[1][index] ? list[1][index][1] : null;
                                    const value2 = list[2] && list[2][index] ? list[2][index][1] : null;
                                    const value3 = list[3] && list[3][index] ? list[3][index][1] : null;

                                    return [item[0], item[1], value1, value2, value3];
                                });
                                exportCSV(echartsData.value.options.series.map(item => item.name), dataList, echartsData.value.title.text + '.csv')

                            }
                        }
                    }
                }
            }
            if ((echartsData.value.legend = ['A相', 'B相', 'C相'])) {
                echartsData.value.color = ['#FFCC00', '#009900', '#CC0000']
            }
        } else {
            echartsData.value = null
        }
        loading.value = false
    })
}




defineExpose({ open })
</script>
<style lang="scss">
.device-control-detail {
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
}

.el-form--inline .el-form-item {
    margin-bottom: 10px !important;
}
</style>
