<template>
  <div ref="homePage" class="page">
    <el-row :gutter="20" class="mgb20">
      <el-col v-for="(item, index) in messageList" :key="index" :span="messageList.length -1 == index?4:5">
        <div style="width: 100%;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div class="grid-message" style="background: #fff;border-radius:15px">
            <el-icon class="grid-msg-icon" style="border-radius: 12px 0 0 12px;" :style="{ background: item.color }">
              <component :is="item.icon" />
            </el-icon>
            <div class="grid-msg-right">
              <div class="grid-msg-num" :style="{ color: item.color }">
                {{ item.count }}
              </div>
              <div style="font-size: 16px;">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <div style="width: 100%;height: 200px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div style="display: flex;justify-content: space-between;">
            <div style="width:31%;height: 92px;border-radius: 10px 0 0 0;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #409eff;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">认证公司</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #409eff;">989</div>
            </div>
            <div style="width:31%;height: 92px;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #67c23a;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">认证用户</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #67c23a;">662</div>
            </div>
            <div style="width:31%;height: 90px;border-radius: 0 10px 0 0;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #e6a23c;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">认证车辆</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #e6a23c;">599</div>
            </div>
          </div>
          <div style="display: flex;width:100%;height: 90px;border-radius: 0 0 10px 10px;margin-top: 18px;justify-content: space-between;">
            <div style="width:31%;height: 90px;border-radius: 0 0 0 10px;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #20b2aa;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电桩总数量</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #20b2aa;">789</div>
            </div>
            <div style="width:31%;height: 90px;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #b7a948;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电桩在用数量</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #b7a948;">489</div>
            </div>
            <div style="width:31%;height: 90px;border-radius: 0 0 10px 0;text-align: center;background: #fff;">
              <div style="width: 100%;height: 40px;line-height: 40px;font-size: 18px;color: #83abc3;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">充电桩可用数量</div>
              <div style="height: 55px;line-height: 55px;font-size: 30px;font-weight: bold;color: #83abc3;">367</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="width: 100%;height: 200px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
          <div style="display: flex;justify-content: space-between;">
            <div style="width:31%;height: 200px;border-radius: 10px 0 0 10px;text-align: center;background: #fff;">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #409eff;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">换电订单数</div>
              <div style="height: 150px;line-height: 150px;font-size: 40px;font-weight: bold;color: #409eff;">89</div>
            </div>
            <div style="width:31%;height: 200px;text-align: center;background: #fff;">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #67c23a;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">充电订单数</div>
              <div style="height: 150px;line-height: 150px;font-size: 40px;font-weight: bold;color: #67c23a;">66</div>
            </div>
            <div style="width:31%;height: 200px;border-radius: 0 10px 10px 0;text-align: center;background: #fff;">
              <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #e6a23c;border-radius: 20px 20px 0 0;border-bottom: 3px solid #ebf5ff;">订单金额</div>
              <div style="height: 150px;line-height: 150px;font-size: 40px;font-weight: bold;color: #e6a23c;">599</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mgb20">
      <el-col :span="8">
        <div ref="refChart4" class="chart-cont2" style="padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
      </el-col>
      <el-col :span="16">
        <div ref="refChart5" class="chart-cont2" style="padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div ref="refChart6" class="chart-cont2" style="height: 240px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup name="homePage">
import { nextTick, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { onBeforeUnmount } from "vue";
import { watch } from "vue";
import { useElementSize } from "@vueuse/core";

const messageList = ref([
  {
    type: "mytask",
    name: "运营商",
    count: 0,
    color: "#409EFF",
    icon: "Promotion",
    linkUrl: "/workbench/workflow/task/myProcess",
  },
  {
    type: "todo",
    name: "换电站",
    count: 55,
    color: "#409EFF",
    icon: "Flag",
    linkUrl: "/workbench/workflow/task/todo",
  },
  {
    type: "done",
    name: "电池总量",
    count: 0,
    color: "#67C23A",
    icon: "SuccessFilled",
    linkUrl: "/workbench/workflow/task/done",
  },
  {
    type: "conclude",
    name: "充电电池数量",
    count: 0,
    color: "#67C23A",
    icon: "Checked",
    linkUrl: "/workbench/workflow/task/done",
  },
  {
    type: "message",
    name: "可用电池数量",
    count: 0,
    color: "#E6A23C",
    icon: "BellFilled",
    linkUrl: "#",
  },
  // {
  //   type: "warninng",
  //   name: "预警信息",
  //   count: 0,
  //   color: "#F56C6C",
  //   icon: "WarningFilled",
  //   linkUrl: "#",
  // },
]);


// 图标4
const refChart4 = ref();
let myChart4: echarts.EChartsType;
const initChart4 = () => {
  if (refChart4.value) {
    //初始化echarts实例
    myChart4 = echarts.init(refChart4.value);
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: "换电站收入占比",
        left: "left",
        textStyle: {
            color: '#2363a5',
            fontSize: 16
        }
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        type: "scroll",
        orient: "horizontal",
        left: "center",
        bottom: 0,
      },
      series: [
        {
          name: "数量",
          type: "pie",
          radius: ['40%','70%'],
          data: [
            { value: 1048, name: "充电订单" },
            { value: 735, name: "换电订单" },
            { value: 580, name: "认证" },
            { value: 484, name: "换电" },
            { value: 300, name: "充电" },
          ],
          padAngle: 2,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            },
          },
          itemStyle:{
            borderRadius: 3
          }
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart4.setOption(option);
  }
};

// 图标5
const refChart5 = ref();
let myChart5: echarts.EChartsType;
const initChart5 = () => {
  if (refChart5.value) {
    //初始化echarts实例
    myChart5 = echarts.init(refChart5.value);
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: "换电站信息统计",
        left: "center",
        textStyle: {
            color: '#2363a5',
            fontSize: 16
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      // toolbox: {
      //   feature: {
      //     dataView: { title: "数据视图", show: true, readOnly: false },
      //     magicType: {
      //       title: { line: "折线图", bar: "柱状图" },
      //       show: true,
      //       type: ["line", "bar"],
      //     },
      //     restore: { title: "刷新", show: true },
      //     saveAsImage: { title: "下载", show: true },
      //   },
      // },
      legend: {
        data: [ "换电营收", "换电量"],
        bottom: 0,
      },
      xAxis: [
        {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "换电营收",
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {
            formatter: "{value} 元",
          },
        },
        {
          type: "value",
          name: "换电量",
          min: 0,
          max: 25,
          interval: 5,
          axisLabel: {
            formatter: "{value} 度",
          },
        },
      ],
      series: [
        {
          name: "换电营收",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: string) {
              return value + " ml";
            },
          },
          data: [80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        },
        {
          name: "换电量",
          type: "bar",
          tooltip: {
            valueFormatter: function (value: string) {
              return value + " ml";
            },
          },
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        },
        {
          name: "换电营收",
          type: "line",
          tooltip: {
            valueFormatter: function (value: string) {
              return value + " ml";
            },
          },
          data: [5.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
        },
        {
          name: "换电量",
          type: "line",
          tooltip: {
            valueFormatter: function (value: string) {
              return value + " ml";
            },
          },
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        }
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart5.setOption(option);
  }
};

// 图标6
const refChart6 = ref()
let myChart6: echarts.EChartsType
const initChart6 = () => {
  if (refChart6.value) {
    //初始化echarts实例
    myChart6 = echarts.init(refChart6.value)
    // 指定图表的配置项和数据
    const option = {
      title: {
        text: "换电车辆统计",
        left: "center",
        textStyle: {
            color: '#2363a5',
            fontSize: 16
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      xAxis: [
        {
          type: "category",
          data: ["合肥站", "南京站", "长沙站", "石家庄站", "海口站", "无锡汇聚换电站"],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          type: "bar",
          barWidth:'15%',
          data: [80.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4],
        }
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart6.setOption(option);
  }
};

//重新渲染图表
const resizeChart = () => {
  // 折叠板延迟时间
  setTimeout(() => {
    myChart4?.resize()
    myChart5?.resize()
    myChart6?.resize()
  }, 400);
};

// 监听页面大小变化
const homePage = ref();
const { width: pageWidth } = useElementSize(homePage);
watch(pageWidth, () => {
  resizeChart();
});


// 初始化渲染
onMounted(() => {
  nextTick(() => {
    initChart4();
    initChart5();
    initChart6();
    window.addEventListener("resize", resizeChart);
  });
});

//销毁
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
});

// defineExpose无需导入，直接使用
// defineExpose({ value });
</script>

<style lang="less" scoped>
@message-width: 80px;

.page {
  padding-bottom: 20px;
}

.grid-message {
  display: flex;
  align-items: center;
  height: @message-width;
  cursor: pointer;
}

.grid-msg-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-msg-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-msg-icon {
  font-size: 50px;
  width: @message-width;
  height: @message-width;
  text-align: center;
  line-height: @message-width;
  color: #fff;
}

.chart-cont {
  height: 140px;

  > h1 {
    color: #606266;
    font-weight: normal;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
  }

  > p {
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-height: 40px;
  }

  > div {
    height: 60px;
    width: 100%;

    > p {
      margin: 0;
      padding-top: 10px;
      line-height: 20px;
      font-size: 12px;
      color: #909399;
    }
  }
}

.chart-cont2 {
  height: 260px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
