import Taro from "@tarojs/taro";
import classnames from "classnames";
import { Block, View, Image, Text, Input } from "@tarojs/components";
import { Popup, Progress, Slider } from "@antmjs/vantui";
import { useRef } from "react";
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
// import echarts from "@/utils/echarts.min.js";
import * as echarts from "echarts";

import React, { useState, useEffect, useMemo } from 'react';

import "./index.less";

interface Props {
    EchartsData: any
}

function Index({
    EchartsData
}: Props) {


    let type = 0
    // console.log(EchartsData,'EchartsDataEchartsData');

    switch (EchartsData.modeName) {
        case '基础班脸部':
            type = 37
            break;
        case '基础版眼部':
            type = 25
            break;
        case '法令纹Pro':
            type = 25
            break;
        case '下颌线Pro':
            type = 19
            break;
        case '抬头纹Pro':
            type = 13
            break;
        default:

    }

    const echartsRef = useRef<EchartsHandle>(null);

    function generateColorArray(startColor, endColor, steps) {
        var startRGB = hexToRgb(startColor);
        var endRGB = hexToRgb(endColor);
        var colors = [];
        for (var i = 0; i < steps; i++) {
            var r = interpolate(startRGB.r, endRGB.r, steps, i);
            var g = interpolate(startRGB.g, endRGB.g, steps, i);
            var b = interpolate(startRGB.b, endRGB.b, steps, i);
            colors.push(rgbToHex(r, g, b));
        }
        return colors;
    }

    function hexToRgb(hex) {
        var bigint = parseInt(hex.slice(1), 16);
        var r = (bigint >> 16) & 255;
        var g = (bigint >> 8) & 255;
        var b = bigint & 255;
        return { r: r, g: g, b: b };
    }

    function rgbToHex(r, g, b) {
        return (
            "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
        );
    }

    function interpolate(start, end, steps, count) {
        return start + ((end - start) / steps) * count;
    }

    const startColor = "#FFFF00"; // 黄色
    const endColor = "#FF0000"; // 红色
    const steps = 81; // 80个颜色


    const colors = generateColorArray(startColor, endColor, steps);
    // const xList = [...new Array(type).fill(0).map((item, key) => key)];
    let seriesData: any = []
    seriesData = EchartsData?.data?.groupedAa
    const xList = [...new Array(type).fill(0).map((item, key) => key)];
    // const seriesData = [
    //     ...xList.map((item) => {
    //         return Math.random() * 80;
    //     }),
    // ];
    const option: EChartOption = {
        grid: {
            // 让图表占满容器
            top: "10rpx",
            left: "45rpx",
            right: "28rpx",
            bottom: "17rpx",
        },
        xAxis: {
            type: "category",
            data: [...xList],
            axisLabel: {
                interval: 5,
                formatter: function (value, index) {
                    return value * 10 + 's';
                },
                textStyle: {
                    color: '#999999', // 文字颜色
                    fontSize: 8 // 文字大小
                },
            },
            axisTick: {
                // alignWithLabel: true,
                show: false,
                interval: 9,
            },
            // axisLine: {
            //     show: false,
            // },
        },
        yAxis: [
            {
                min: 0,
                max: 80,
                splitNumber: 10,
                axisLabel: {
                    formatter: function (value, index) {
                        const num = value / 10 + 1
                        return num === 9 ? '' : num + '级';
                    },
                    textStyle: {
                        color: '#999999', // 文字颜色
                        fontSize: 8 // 文字大小
                    },
                },
                type: "value",
                splitLine: {
                    lineStyle: {
                        color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
                        type: 'dashed'
                    },
                }
            },
        ],
        series: [

            {
                barCategoryGap: '0%',
                data: seriesData,
                type: "bar",
                // barWidth: 15,
                gapWidth: "0%",
                itemStyle: {
                    normal: {
                        color: function (params) {
                            var value = params.data;
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: colors[parseInt(value)], // 红色
                                },
                                {
                                    offset: 1,
                                    color: colors[0], // 黄色
                                },
                            ]);;
                        },
                    },
                },
            },
        ],
    }

    // 基于 EchartsData 生成 ECharts 配置
    //  const option: EChartOption ={
    //     grid: {
    //       // 让图表占满容器
    //       top: "10rpx",
    //       left: "45rpx",
    //       right: "28rpx",
    //       bottom: "17rpx",
    //     },
    //             xAxis: {
    //               type: "category",
    //               data: [...xList],
    //               axisLabel: {
    //                   interval: 5,
    //                   formatter: function (value, index) {
    //                       return value * 10 + 's';
    //                   },
    //                   textStyle: {
    //                     color: '#999999', // 文字颜色
    //                     fontSize: 8 // 文字大小
    //                 },
    //             },
    //             axisTick: {
    //                 // alignWithLabel: true,
    //                 show: false,
    //                 interval: 9,
    //             },
    //             // axisLine: {
    //             //     show: false,
    //             // },
    //         },
    //         yAxis: [
    //             {
    //                 min: 0,
    //                 max: 80,
    //                 splitNumber: 10,
    //                 axisLabel: {
    //                     formatter: function (value, index) {
    //                         const num = value / 10 + 1
    //                         return num === 9 ? '' : num + '级';
    //                     },
    //                     textStyle: {
    //                         color: '#999999', // 文字颜色
    //                         fontSize: 8 // 文字大小
    //                     },
    //                 },
    //                 type: "value",
    //                 splitLine: {
    //                     lineStyle: {
    //                         color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
    //                         type: 'dashed'
    //                     },
    //                 }
    //             },
    //         ],
    //         series: [

    //             {
    //                 barCategoryGap: '0%',
    //                 data: seriesData,
    //                 type: "bar",
    //                 // barWidth: 15,
    //                 gapWidth: "0%",
    //                 itemStyle: {
    //                     normal: {
    //                         color: function (params) {
    //                             var value = params.data;
    //                             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //                                 {
    //                                     offset: 0,
    //                                     color: colors[parseInt(value)], // 红色
    //                                 },
    //                                 {
    //                                     offset: 1,
    //                                     color: colors[0], // 黄色
    //                                 },
    //                             ]);;
    //                         },
    //                     },
    //                 },
    //             },
    //         ],
    //     };


    return (
        <Block>
            <Echarts
                echarts={echarts}
                option={option}
                ref={echartsRef}
                // isPage={false}
                // style自定义设置echarts宽高
                //   style={{ width: "100%", height: "100%" }}
                style={{ width: "670rpx", height: "260rpx" }}
            />

            {/* <View className="box">
        <Echarts
          echarts={echarts}
          option={option}
          ref={echartsRef}
          // isPage={false}
          // style自定义设置echarts宽高
          style={{ width: "630rpx", height: "240rpx" }}
        />
        
      </View> */}


        </Block>
    );
}

export default Index;
