<template>
    <div ref="currentchart" class="div"></div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import TAireadAction from "@/api/tairead"
import { ElMessage } from "element-plus";
import { TAireadModel, TAireadQueryParam, PageResult } from "@/types";
import tool from "@/until/tool";
import { onMounted, reactive, ref, toRefs, watch } from "vue";

const currentchart = ref();

const props = defineProps({
    //子组件接收父组件传递过来的值
    queryParams: Object,
    visible: Boolean,
})

//监听配置对象
watch(() => props.visible, (val: any) => {
    if (!val) {
        state.echartsData = [];
        echarts.dispose(currentchart.value);
    }
}, { deep: true })

//使用父组件传递过来的值
const { queryParams } = toRefs(props)

const state = reactive({
    echartsData: [] as TAireadModel[],
});

const QueryEchartsData = () => {
    let copy = { ...props.queryParams };
    let echarts_queryParams = copy as TAireadQueryParam;
    echarts_queryParams.rows = 999;
    TAireadAction.QueryTAireadByCondition(echarts_queryParams)
        .then((result) => {
            if (result.status === 200) {
                const { res, flag, error } = result.data;
                if (flag === "1") {
                    const pageData = res as PageResult<TAireadModel[]>;

                    pageData.list.forEach(element => {
                        element.srcList = [];
                        element.alist = [];
                        element.blist = [];
                        if (element.smallJpgUrl) {
                            element.src = element.smallJpgUrl;
                            element.srcList.push(element.smallJpgUrl);
                        }

                        if (element.bigJpgUrl) {
                            element.src = element.bigJpgUrl;
                            element.srcList.push(element.bigJpgUrl);
                        }

                        if (element.szsbz) {
                            let alist = element.szsbz.split(",");
                            element.alist = alist;
                        }

                        if (element.szsbgl) {
                            let blist = element.szsbgl.split(",");
                            element.blist = blist;
                        }
                    });

                    state.echartsData = pageData.list;
                    init();
                } else {
                    ElMessage.warning(error);
                }
            }
        })
        .catch((error) => {
            //请求失败时的操作
            ElMessage.error(error || "未知异常...");
        });
}

const init = () => {
    let ret = state.echartsData;
    let currendata = [];
    let originalvaluedata = [];
    let signaldata = [];
    let voltagedata = [];
    let differencedata = [];
    let differencedata1 = [];

    if (ret) {
        for (let i = 0; i < ret.length; i++) {
            let record = ret[i];
            let now = tool.dateFormat(record.sampleTime, "YYYYMMDDHHmmss", "YYYY-MM-DD HH:mm:ss");
            let current = record.identValue;
            let originalvalue = record.rawValue;
            let pic = record.smallJpgUrl;
            let signal = record.rsrp;
            let voltage = record.voltage;
            let difference = record.identValue;//Math.floor(parseFloat(record.identValue)) - record.identValue;
            let difference1 = record.rawValue;//Math.floor(record.rawValue) - record.identValue;

            currendata.push([now, current, pic]);
            originalvaluedata.push([now, originalvalue, pic]);
            voltagedata.push([now, voltage, pic]);
            signaldata.push([now, signal, pic]);
            differencedata.push([now, difference, pic]);
            differencedata1.push([now, difference1, pic]);
        }

        const currentoption = {
            //提示框
            tooltip: {
                trigger: "axis",
                textStyle: {
                    align: "left",
                },
                position: function (pt: any) {
                    return [pt[0], "10%"];
                },

                formatter: function (params: any) {
                    let paramsnow = "";
                    let paramscurrent = "";
                    let paramsoriginalvalue = "";
                    let paramspic = "";
                    let paramssignal = "";
                    let paramsvoltage = "";
                    let paramsdifference = "";
                    let paramsdifference1 = "";

                    params.forEach(function (item: any) {
                        paramsnow = item.data[0];
                        paramspic = item.data[2];
                        if (item.seriesName == "当前读数") {
                            paramscurrent = item.data[1];
                        } else if (item.seriesName == "信号强度") {
                            paramssignal = item.data[1];
                        } else if (item.seriesName == "设备电压") {
                            paramsvoltage = item.data[1];
                        } else if (item.seriesName == "标准差值") {
                            paramsdifference = item.data[1];
                        } else if (item.seriesName == "原始差值") {
                            paramsdifference1 = item.data[1];
                        } else if (item.seriesName == "原始读数") {
                            paramsoriginalvalue = item.data[1];
                        }
                    });

                    let result =
                        "<div><font size='4'>数据日期：" + paramsnow + "</font></div>";
                    result =
                        result +
                        "<div ><font size='4'>当前读数：</font><font size='4' color='#00FFFF'>" +
                        paramscurrent +
                        "</font></div>";
                    result =
                        result +
                        "<div ><font size='4'>原始读数：</font><font size='4' color='#f47920'>" +
                        paramsoriginalvalue +
                        "</font></div>";
                    result =
                        result +
                        "<div ><font size='4'>信号强度：</font><font size='4' color='#009900'>" +
                        paramssignal +
                        "</font></div>";
                    result =
                        result +
                        "<div ><font size='4'>设备电压：</font><font size='4' color='#FF00FF'>" +
                        paramsvoltage +
                        "</font></div>";
                    result =
                        result +
                        "<div ><font size='4'>标准差值：</font><font size='4' color='#3366FF'>" +
                        paramsdifference +
                        "</font></div>";
                    result =
                        result +
                        "<div ><font size='4'>原始差值：</font><font size='4' color='#ef5b9c'>" +
                        paramsdifference1 +
                        "</font></div>";
                    result =
                        result + "<div ><font size='4'>拍照图片：</font>" + "</div>";
                    result = result + "<div><img src='" + paramspic + "'></div>";
                    return result;
                },
            },
            //标题
            title: {
                left: "center",
                text:
                    "",
            },
            //工具栏
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: "none",
                    },
                    restore: {},
                    saveAsImage: {},
                },
            },
            //设置区分（哪条线属于什么）
            legend: {
                data: ["当前读数", "原始读数", "信号强度", "设备电压", "标准差值", "原始差值"],
                left: "right",
                top: "center",
                orient: "vertical",
            },
            //设置区分（每条线是什么颜色，和 legend 一一对应）
            color: ["#00FFFF", "#f47920", "#009900", "#FF00FF", "#3366FF", "#ef5b9c"],
            //X轴
            xAxis: {
                type: "time",
                // boundaryGap: false,
            },
            yAxis: {
                type: "value",
                // boundaryGap: [0, "100%"],
            },
            //缩放区域
            dataZoom: [
                {
                    type: "slider",
                    show: true,
                    xAxisIndex: [0],
                    start: 70,
                    end: 100,
                },
                {
                    type: "slider",
                    show: true,
                    yAxisIndex: [0],
                    left: "100%",
                    start: 0,
                    end: 100,
                },
                {
                    type: "inside",
                    xAxisIndex: [0],
                    start: 0,
                    end: 100,
                },
                {
                    type: "inside",
                    yAxisIndex: [0],
                    start: 0,
                    end: 100,
                },
            ],
            series: [
                {
                    name: "当前读数",
                    type: "line",
                    // smooth: false,
                    //stack: "Total",
                    // symbol: "none",
                    data: currendata,
                },
                {
                    name: "原始读数",
                    type: "line",
                    // smooth: false,
                    //stack: "Total",
                    // symbol: "none",1211200090
                    data: originalvaluedata,
                },
                {
                    name: "信号强度",
                    type: "line",
                    // smooth: false,
                    //stack: "Total",
                    // symbol: "none",
                    data: signaldata,
                },
                {
                    name: "设备电压",
                    type: "line",
                    // smooth: false,
                    //stack: "Total",
                    // symbol: "none",
                    data: voltagedata,
                },
                {
                    name: "标准差值",
                    type: "line",
                    // smooth: false,
                    //stack: "Total",
                    // symbol: "none",
                    data: differencedata,
                },
                {
                    name: "原始差值",
                    type: "line",
                    data: differencedata1,
                }
            ],
        };

        if (currentchart.value != null && currentchart.value != undefined) {
            echarts.dispose(currentchart.value);
        }

        let current = echarts.init(currentchart.value);
        current.setOption(currentoption);
    }
};

onMounted(() => {
    QueryEchartsData();
});
</script>

<style lang="scss" scoped>
.div {
    // height: calc(100vh - 300px);
    // width: calc(100vw - 700px);
    height: 500px;
    width: 1000px;
    margin-left: 0;
    border: 1px solid rgb(236, 236, 248);
}
</style>