<template>
    <div class="chart-wrap">
        <div ref="chartDom" class="chart">
        </div>
        <div class="chart-weather">
            <i class="chart-i" v-for="(item, index) in weatherChartData" :key="index" :class="'qi-' + item.iconDay + '-fill'"></i>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, nextTick } from "vue";
import * as echarts from "echarts";
import "qweather-icons/font/qweather-icons.css";

// const props = defineProps({
//     list: {
//         type: Array,
//         default: () => [],
//         required: true,
//     },
// });

let demoData = [
    {
        rq: "08/28",
        weatherZgwd: 30,
        weatherZdwd: 18,
        weatherTqDay: "晴",
        weatherTqNight: "晴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        week: "星期三",
    },
    {
        rq: "08/29",
        weatherZgwd: 31,
        weatherZdwd: 19,
        weatherTqDay: "晴",
        weatherTqNight: "晴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        week: "星期四",
    },
    {
        rq: "08/30",
        weatherZgwd: 30,
        weatherZdwd: 19,
        weatherTqDay: "晴",
        weatherTqNight: "多云",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        week: "星期五",
    },
    {
        rq: "08/31",
        weatherZgwd: 30,
        weatherZdwd: 21,
        weatherTqDay: "多云",
        weatherTqNight: "雷阵雨",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        week: "星期六",
    },
    {
        rq: "09/01",
        weatherZgwd: 25,
        weatherZdwd: 16,
        weatherTqDay: "雷阵雨",
        weatherTqNight: "多云",
        weatherImgDay: "https://d.scggqx.com/forecast/img/多云.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/多云.png",
        week: "星期日",
    },
    {
        rq: "09/02",
        weatherZgwd: 26,
        weatherZdwd: 15,
        weatherTqDay: "晴",
        weatherTqNight: "晴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/阴.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/阴.png",
        week: "星期一",
    },
    {
        rq: "09/03",
        weatherZgwd: 27,
        weatherZdwd: 18,
        weatherTqDay: "多云",
        weatherTqNight: "阴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        week: "星期二",
    },
    {
        rq: "09/04",
        weatherZgwd: 27,
        weatherZdwd: 18,
        weatherTqDay: "多云",
        weatherTqNight: "阴",
        weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
        weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
        week: "星期二",
    },
];

let weekday = [];
let datelist = [];
let weatherDaylist = [];
let weatherNightlist = [];
let weatherImgDaylist = ref([
    "多云",
    "多云",
    "多云",
    "多云",
    "多云",
    "多云",
    "多云"
]);
let weatherImgNightlist = [];
let weatherZgwdlist = [];
let weatherZdwdlist = [];

let weatherImgDaylistRich = {};
let weatherImgNightlistRich = {};

let maxWD = 30;
let minWD = 0;

demoData.forEach((item) => {
    weekday.push(item.week);
    datelist.push(item.rq);
    weatherDaylist.push(item.weatherTqDay);
    weatherNightlist.push(item.weatherTqNight);
    // weatherImgDaylist.push(item.weatherImgDay);
    weatherImgNightlist.push(item.weatherImgNight);
    weatherZgwdlist.push(item.weatherZgwd);
    weatherZdwdlist.push(item.weatherZdwd);
});
maxWD = Math.max(...weatherZgwdlist) + 30;
minWD = Math.min(...weatherZdwdlist) - 30;
let weatherImgDaylistStyle = weatherImgDaylist.value.map((item) => {
    let dateUrl = item;
    return {
        // backgroundColor: {
        //     // image: "@/assets/images/home/多云.png",
        //     image: require(`@/assets/images/home/${item}.svg`)
        // },
        height: 20,
        width: 20,
        color: "#fff"
    };
});
let weatherImgNightlistStyle = weatherImgNightlist.map((item) => {
    let dateUrl = item;
    return {
        backgroundColor: {
            image: dateUrl,
        },
        height: 20,
        width: 20,
    };
});
weatherImgDaylistStyle.forEach((i, index) => {
    weatherImgDaylistRich[index] = i;
});
weatherImgNightlistStyle.forEach((i, index) => {
    weatherImgNightlistRich[index] = i;
});

const myChart = ref(null);
const chartDom = ref(null);
const options = {
    grid: {
        top: "-100px",
        right: "20px",
        bottom: '-80px',
        left: "-20px",
        containLabel: true,
    },
    xAxis: [
        {
            // 图标
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: 0,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{a|{value}}"].join("\n"),
                rich: {
                    a: {
                        color: "#fff",
                    },
                },
            },
            data: [],
        },
        {
            // 日期
            type: "category",
            position: "top",
            offset: -46,
            boundaryGap: false,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{a|{value}}"].join("\n"),
                rich: {
                    a: {
                        fontSize: 11,
                    },
                },
            },
            data: [],
            axisPointer: {
                show: false,
            },
        },
        {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: -65,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{{value}|}"].join("\n"),
                // formatter: `<i class="qi-100-fill"></i>`,
                // formatter: function(params) {
                //     // return `<i class="qi-100-fill"></i>`
                //     return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff"></span>`
                // },
                rich: weatherImgDaylistRich,
            },
            data: ["0", "1", "2", "3", "4", "5", "6"],
            axisPointer: {
                show: false,
            },
        },
        {
            // 最高温度
            type: "category",
            position: "top",
            offset: -85,
            boundaryGap: false,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{a|{value}°}"].join("\n"),
                rich: {
                    a: {
                        color: "#fff",
                    },
                },
            },
            data: weatherZgwdlist,
            axisPointer: {
                show: false,
            },
        },
        {
            // 最低温度
            type: "category",
            position: "bottom",
            offset: -88,
            boundaryGap: false,
            zlevel: 100,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                formatter: ["{a|{value}°}"].join("\n"),
                rich: {
                    a: {
                        color: "#fff",
                    },
                },
            },
            data: weatherZdwdlist,
            axisPointer: {
                show: false,
            },
        },
    ],
    yAxis: {
        show: false,
        interval: 15,
        type: "value",
        axisLabel: {
            formatter: "{value}" + "℃",
        },
        max: maxWD,
        min: minWD,
    },
    series: [
        {
            name: "最高温度",
            type: "line",
            data: weatherZgwdlist,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: true,
            smooth: true,
            itemStyle: {
                color: "#FA8258", // 设置圆形的填充色
                borderColor: "#ffffff", // 设置边框颜色
                borderWidth: 1, // 设置边框宽度
            },
            lineStyle: {
                width: 2, // 设置折线的宽度
                color: "#FA8258", // 设置折线的颜色
                shadowColor: "#FA8258", // 线的阴影颜色
                shadowBlur: 5, // 线的阴影模糊级数
                shadowOffsetX: 0, // 线的阴影水平偏移
                shadowOffsetY: 5, // 线的阴影垂直偏移
            },
            silent: false,
        },
        {
            name: "最低温度",
            type: "line",
            data: weatherZdwdlist,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: true,
            smooth: true,
            itemStyle: {
                color: "#2E9AFE", // 设置圆形的填充色
                borderColor: "#ffffff", // 设置边框颜色
                borderWidth: 1, // 设置边框宽度
            },

            lineStyle: {
                width: 2, // 设置折线的宽度
                color: "#2E9AFE", // 设置折线的颜色
                shadowColor: "#2E9AFE", // 线的阴影颜色
                shadowBlur: 5, // 线的阴影模糊级数
                shadowOffsetX: 0, // 线的阴影水平偏移
                shadowOffsetY: 5, // 线的阴影垂直偏移
            },
            silent: false,
        },
    ],
};

const weatherChartData = ref([])
onMounted(() => {

  const point = sessionStorage.getItem('point')
  const farmId =sessionStorage.getItem("farmId")
  // 获取气象图表数据
  VE_API.mini_farm.gardenItemChart({farmId,point}).then(({data}) =>{
    console.log('tq', data)
    weatherChartData.value = data.weatherData
    // minData.value = res.data.weatherData.map(item =>item.tempMin)
    // lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
    nextTick(() => {
        initChart(data.weatherData);
    })
  })
});


// watch(
//     () => props.list,
//     (newValue, oldValue) => {
//         // if(newValue){
//         //     options.xAxis[0].data = newValue.map(item => item[1] + item[2])
//         //     options.series[0].data = newValue.map(item => Math.floor(item[3]))
//         // }
//         myChart.value.setOption(options);
//     }
// );

const initChart = (weatherData) => {
    // weatherImgDaylist.value = weatherData.map(item => item.textDay)
    // console.log('weatherImgDaylist', weatherImgDaylist.value);
    myChart.value = echarts.init(chartDom.value);
    options.xAxis[0].data = weatherData.map(item => dateFormat(item.fxDate))
    options.xAxis[1].data = weatherData.map(item => dateFormat(item.fxDate))
    // options.xAxis[2].data = weatherData.map(item => dateFormat(item.fxDate))
    options.xAxis[3].data = weatherData.map(item => item.tempMax)
    options.xAxis[4].data = weatherData.map(item => item.tempMin)
    options.series[0].data = weatherData.map(item => item.tempMax)
    options.series[1].data = weatherData.map(item => item.tempMin)
    console.log('options', options)
    myChart.value.setOption(options);
};

function dateFormat(date) {
   return date.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$2/$3")
}

</script>

<style lang="scss" scoped>
.chart-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    .chart-weather {
        display: flex;
        position: absolute;
        left: 0;
        top: 20px;
        width: 100%;
        .chart-i {
            color: #FFD489;
            width: 16px;
            padding-left: 34px;
        }
        .chart-i:nth-child(1) {
            padding-left: 10px;
        }
        .chart-i:nth-child(2) {
            padding-left: 32px;
        }
        .chart-i:nth-child(3) {
            padding-left: 34px;
        }
    }

}
.chart {
    width: 100%;
    height: 100%;
}
</style>
