<template>
  <div class="home">
    <el-row :gutter="20">
      <!--  -->
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header" class="user-info">
            <img class="user-img" src="src/assets/imgs/logo.png" />
            <ul>
              <li>Admin</li>
              <li>超级管理员</li>
            </ul>
          </div>
          <ul class="login-info">
            <li>上次登录时间：<span>2008-12-12</span></li>
            <li>上次登录地址：<span>日本-我孙子市</span></li>
          </ul>
        </el-card>


        <el-card class="table" shadow="always">
          <el-table :data="todayData" style="width: 100%">
            <el-table-column
                v-for="(val, key) in labelToday"
                :key="key"
                :prop="key"
                :label="val"
            >
            </el-table-column>
          </el-table>
        </el-card>


      </el-col>
      <!--  -->
      <el-col :span="16">
        <div class="num">
          <el-card
              v-for="(item, index) in countData"
              :key="index"
              shadow="always"
              body-style="padding: 0;display: flex;"
          >
            <i
                :class="'el-icon-' + item.icon"
                :style="'background:' + item.color"
            ></i>
            <ul>
              <li>
                ￥<span>{{ item.value }}</span>
              </li>
              <li>{{ item.name }}</li>
            </ul>
          </el-card>
        </div>
        <el-card style="width: 100%; height: 300px; margin-bottom: 20px">
          <div id="line"></div>
        </el-card>
        <div class="bar-pie">
          <el-card style="width: 49%; height: 300px">
            <div id="bar"></div>
          </el-card>
          <el-card style="width: 49%; height: 300px">
            <div id="pie"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      labelToday:{
        productName:"商品名称",
        productTypeName:"商品类型",
        count: "销量",
        amount: "今日金额",
      },
      todayData:[], // 当天的订单列表
      countData: [
        {
          name: "今日支付订单",
          value: "1234",
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: "210",
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: "1234",
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: "1234",
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: "210",
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: "1234",
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    };
  },
  mounted() {
    this.loadData()
    // 基于准备好的dom，初始化echarts实例
    var bar = echarts.init(document.getElementById("bar"));
    var pie = echarts.init(document.getElementById("pie"));
    var line = echarts.init(document.getElementById("line"));
    // 绘制图表
    line.setOption({
      title: {
        text: "店铺营销额",
        // subtext: 'Demo 虚构数据',
        x: "center",
      },
      legend: {
        // 图例配置选项
        orient: "horizontal", //图例布局方式：水平 'horizontal' 、垂直 'vertical'
        x: "left", // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
        y: "top", // 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
        data: ["猜想", "预期", "实际"],
      },
      grid: {
        // 图表距离边框的距离，可用百分比和数字（px）配置
        top: "20%",
        left: "3%",
        right: "10%",
        bottom: "5%",
        containLabel: true,
      },

      tooltip: {
        // tooltip 用于控制鼠标滑过或点击时的提示框
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器配置项。
          type: "cross", // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
          axis: "auto", // 指示器的坐标轴。
          snap: true, // 坐标轴指示器是否自动吸附到点上
        },
        showContent: true,
      },
      toolbox: {
        // 右上角的工具框
        feature: {
          saveAsImage: {}, //下载按钮
          dataView:{},//数据视图
          dataZoom:{},//区域缩放
          magicType:{
            type:['bar','line']
          }//动态图标切换
        }
      },

      xAxis: {
        name: "月份",
        type: "category",
        axisLine: {
          lineStyle: {
            // X 轴颜色配置
            color: "#3366CC",
          },
        },
        axisLabel: {
          rotate: 45, // X 轴标签文字旋转角度
          interval: 0, //设置 X 轴数据间隔几个显示一个，为0表示都显示
        },
        boundaryGap: false, //数据从 Y 轴起始
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },

      yAxis: {
        name: "人次",
        type: "value",
        min: 0, // 配置 Y 轴刻度最小值
        max: 4000, // 配置 Y 轴刻度最大值
        splitNumber: 7, // 配置 Y 轴数值间隔
        axisLine: {
          lineStyle: {
            // Y 轴颜色配置
            color: "#3366CC",
          },
        },
      },

      series: [
        {
          name: "猜想",
          data: this.randomList(120,1200,12),
          type: "line",
          symbolSize: function (value) {
            // 点的大小跟随数值增加而变大
            return value / 150;
          },
          symbol: "circle",
          itemStyle: {
            normal: {
              label: {
                show: true,
              },
              lineStyle: {
                color: "rgba(0,0,0,0)", // 折线颜色设置为0，即只显示点，不显示折线
              },
            },
          },
        },

        {
          name: "预期",
          data: this.randomList(120,1200,12),
          type: "line",
          symbolSize: 8, //设置折线上圆点大小
          itemStyle: {
            normal: {
              label: {
                show: true, // 在折线拐点上显示数据
              },
              lineStyle: {
                width: 3, // 设置虚线宽度
                type: "dotted", // 虚线'dotted' 实线'solid'
              },
            },
          },
        },

        {
          name: "实际",
          data: this.randomList(120,1200,12),
          type: "line",
          symbol: "circle", // 实心圆点
          smooth: 0.5, // 设置折线弧度
        },
      ],
      color: ["#3366CC", "#FFCC99", "#99CC33"], // 三个折线的颜色
    });
    // 饼图配置
    pie.setOption({
      title: {
        left: "center",
        text: "营业总收入季度分布图",
        textStyle: {
          color: "#6d6",
        },
      },
      toolbox: {
        feature: {
          saveAsImage: {},
          dataView:{},//数据视图

        },
      },
      tooltip: {},
      legend: {
        left: "left",
        top: "10",
        orient: "vertical",
        data: ["一季度", "二季度", "三季度", "四季度"],
      },
      dataset: {
        source: [
          ["quarter", "一季度", "二季度", "三季度", "四季度"],
          ["完美世界", 25.74, 25.7, 29.18, 21.58],
        ],
      },
      series: [
        {
          name: "完美世界",
          type: "pie",
          seriesLayoutBy: "row",
          encode: {
            itemName: 0, //数据项名称，在legend中展示
            value: 1,
          },
          label: {
            show: true,
          },
          // roseType: "area", //设置玫瑰图
        },
      ],
    });
    // 条形统计图
    bar.setOption({
      title: {
        text: "本月售卖情况",
      },
      color: ["#9462e5", "#e1bb22"],
      tooltip: {},
      legend: {
        data: ["销量", "退货"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {
        axisLine: {
          show: true, //显示y轴最左边边框线
        },
      },
      toolbox: {
        feature: {
          saveAsImage: {},
          dataView:{},//数据视图
          magicType:{
            type:['bar','line']
          }//动态图标切换
        },
      },
      series: [
        {
          name: "销量",
          type: "bar",
          data: [550, 120, 336, 110, 430, 420],
        },
        {
          name: "退货",
          type: "bar",
          data: [155, 20, 36, 30, 90, 140],
        },
      ],
    });
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      bar.resize();
      line.resize();
      pie.resize();
    });
  },
  methods:{

    /**
     * 数据加载
     */
    loadData(){
      const that = this

      async function f1(){
          that.todayData = await that.loadAccountByBatch([1,2],"2024-01-01","2024-05-03")
      }
      f1();
    },
    async loadAccountByPId(productId){
      const res = await this.$request.get("/saleStatement/getByPId",{
        params:{
          productIds:1,
          timeStart: "2024-04-28",
          timeOver: "2024-05-03"
        }})
      // this.$message(res.data[0].count + "")
    },
    async loadAccountByBatch( list,from,end){
      console.log("1")
      const res = await this.$request.post("/saleStatement/getByPIdBatch",{
        productIds:list,
        timeStart: from,
        timeOver: end
      })
      return res.data;
    },
    /** 随机left ~ right 范围内的数字 @param left @param right @returns {*} */
    randomRange(left,right){
      const floor = Math.floor(right-left);
      const rand = Math.random()*(floor)
      return left  + Math.floor(rand)
    },
    randomList(left,right,nums){
      const res  =[];
      for(let i = 0;i<nums;i++)
      res.push(this.randomRange(left,right))
      return res;
    }
  }

};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .user-info {
    display: flex;
    align-items: center;
    .user-img {
      width: 150px;
      height: 150px;
      border-radius: 100%;
      margin-right: 40px;
    }
    & li:nth-child(1) {
      font-size: 30px;
    }
    & li:nth-child(2) {
      margin-top: 10px;
      font-size: 16px;
      color: rgb(153, 153, 153);
    }
  }
  .login-info {
    font-size: 14px;
    color: rgb(153, 153, 153);
    li {
      margin: 5px;
      span {
        margin-left: 50px;
      }
    }
  }
  .table {
    margin-top: 30px;
  }
  .num {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-card {
      width: 32%;
      height: 90px;
      margin-bottom: 20px;
      border: none;
      i {
        width: 90px;
        height: 100%;
        line-height: 90px;
        text-align: center;
        font-size: 30px;
        color: #fff;
      }
      ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;
        li:nth-child(1) {
          font-size: 30px;
          color: #000;
          margin-bottom: 5px;
        }
        li:nth-child(2) {
          font-size: 15px;
          color: rgb(148, 148, 148);
        }
      }
    }
  }
  #line {
    width: 100%;
    height: 280px;
  }
  .bar-pie {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #pie {
      width: 100%;
      height: 280px;
    }
    #bar {
      width: 100%;
      height: 280px;
    }
  }
}
</style>