<template>
  <div class="app-container home">
    <div class="homes">
      <div class="count" @click="goodsCount">
        <div class="el-icon-picture-outline icons"></div>
        <div class="counts">{{ List.goodsCount }}</div>
        <div class="total">商品总数量</div>
      </div>
      <div class="count member" @click="patientCount">
        <div class="el-icon-user-solid icons"></div>
        <div class="counts">{{ List.patientCount }}</div>
        <div class="total">会员总数量</div>
      </div>
      <div class="count order" @click="appointmentOrderCount">
        <div class="el-icon-shopping-cart-2 icons"></div>
        <div class="counts">{{ List.appointmentOrderCount }}</div>
        <div class="total">预约订单总数量</div>
      </div>
      <div class="count shop" @click="goodsOrderCount">
        <div class="el-icon-s-data icons"></div>
        <div class="counts">{{ List.goodsOrderCount }}</div>
        <div class="total">商品订单总数量</div>
      </div>
    </div>
    <div class="today">
      <!-- 今日概括 -->
      <div class="todayitem">
        <div class="el-icon-sell icon"></div>
        <div class="goodsinfo">今日上架商品数量</div>
        <div class="totals">{{ summaryTodayList.goodsCount }}</div>
      </div>
      <div class="todayitem">
        <div class="el-icon-user icon"></div>
        <div class="goodsinfo">今日新增会员数</div>
        <div class="totals">{{ summaryTodayList.patientCount }}</div>
      </div>
      <div class="todayitem">
        <div class="el-icon-shopping-cart-full icon"></div>
        <div class="goodsinfo">今日订单数</div>
        <div class="totals">{{ summaryTodayList.orderCount }}</div>
      </div>
      <div class="todayitem">
         <div class="el-icon-money icon"></div>
         <div class="goodsinfo">今日交易额</div>
        <div class="totals">{{ summaryTodayList.totalPrice }}</div>
      </div>


    </div>
    <el-row>
      <el-col :span="12">
        <div class="main2" id="main2" style="width: 100%; height: 500px"></div>
      </el-col>
      <el-col :span="12">
        <div class="main" id="main" style="width: 100%; height: 500px"></div>
      </el-col>
    </el-row>
    <el-row>
      <div class="title">热卖商品TOP10</div>
      <el-table :data="list" style="width: 96%; margin: 0 auto">
        <el-table-column label="排名" type="index" width="130" align="center" />
        <el-table-column label="商品名称" align="center" prop="goodsName" />
        <el-table-column label="价格" align="center" prop="sumTotalPrice" />
        <el-table-column
          label="销量"
          align="center"
          width="130"
          prop="sumGoodsCount"
        />
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { informationStatistics, summaryToday } from "@/api/system/index";
import * as echarts from "echarts";
import {
  getWeekGoodsTradeTrend,
  getWeekTradeAppointmentTrend,
  selectHotGoodsList,
} from "@/api/system/homepage.js";
export default {
  name: "index",
  data() {
    return {
      queryParams: {
        goodsCount: null,
        patientCount: null,
        orderCount: null,
        storeCount: null,
      },
      // 基本信息查询
      List: [],
      // 概述查询
      summaryTodayList: [],
      // 版本号
      version: "0.0.1",
      list: [],
    };
  },
  mounted() {
    this.info();
  },
  created() {
    this.getList();
    this.tableinfo();
  },
  methods: {
    tableinfo() {
      selectHotGoodsList().then((res) => {
        this.list = res.data;
      });
    },
    info() {
      getWeekTradeAppointmentTrend().then((res) => {
        if (res.code == 200) {
          var timedata = [];
          res.data.forEach((e) => {
            timedata.push(e.clickDate);
          });
          var totalPricedata = [];
          res.data.forEach((e) => {
            totalPricedata.push(e.totalPrice);
          });
            var numberdata = [];
          res.data.forEach((e) => {
            numberdata.push(e.count);
          });
          var chartDom = document.getElementById("main2");
          var myChart = echarts.init(chartDom);
          var option;
          option = {
            title: {
              text: "预约订单交易走势",
              left: "50%",
              textAlign: "center",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#ddd",
                },
              },
              backgroundColor: "rgba(255,255,255,1)",
              padding: [5, 10],
              textStyle: {
                color: "#7588E4",
              },
              extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
            },
            xAxis: {
              type: "category",
              data: timedata,
              boundaryGap: false,
              splitLine: {
                show: true,
                interval: "auto",
                lineStyle: {
                  color: ["#ffffff"],
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#609ee9",
                },
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14,
                },
              },
            },
            yAxis: {
              type: "value",
              splitLine: {
                lineStyle: {
                  color: ["#f0f0f0"],
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#609ee9",
                },
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14,
                },
              },
            },
            series: [
              {
                name: "订单数量",
                type: "line",
                smooth: true,
                showSymbol: false,
                symbol: "circle",
                symbolSize: 6,
                data: numberdata,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#d6e3fd",
                        },
                        {
                          offset: 1,
                          color: "#d6e3fd",
                        },
                      ],
                      false
                    ),
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#6194f9",
                  },
                },
                lineStyle: {
                  normal: {
                    width: 3,
                  },
                },
              },
              {
                name: "订单金额",
                type: "line",
                smooth: true,
                showSymbol: false,
                symbol: "circle",
                symbolSize: 6,
                data: totalPricedata,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#d6e3fd",
                        },
                        {
                          offset: 1,
                          color: "#d6e3fd",
                        },
                      ],
                      false
                    ),
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#6194f9",
                  },
                },
                lineStyle: {
                  normal: {
                    width: 3,
                  },
                },
              },
            ],
          };
          option && myChart.setOption(option);
        } else {
        }
      });
      getWeekGoodsTradeTrend ().then((res) => {
        if (res.code == 200) {
          var timedata = [];
          res.data.forEach((e) => {
            timedata.push(e.clickDate);
          });
          var numberdata = [];
          res.data.forEach((e) => {
            numberdata.push(e.count);
          });
           var totalPricedata = [];
          res.data.forEach((e) => {
            totalPricedata.push(e.totalPrice);
          });
          var chartDom = document.getElementById("main");
          var myChart = echarts.init(chartDom);
          var option;
          option = {
            title: {
              text: "商品订单交易走势",
              left: "50%",
              textAlign: "center",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                lineStyle: {
                  color: "#ddd",
                },
              },
              backgroundColor: "rgba(255,255,255,1)",
              padding: [5, 10],
              textStyle: {
                color: "#7588E4",
              },
              extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
            },
            xAxis: {
              type: "category",
              data: timedata,
              boundaryGap: false,
              splitLine: {
                show: true,
                interval: "auto",
                lineStyle: {
                  color: ["#e4f7f9"],
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#609ee9",
                },
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14,
                },
              },
            },
            yAxis: {
              type: "value",
              splitLine: {
                lineStyle: {
                  color: ["#D4DFF5"],
                },
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                lineStyle: {
                  color: "#609ee9",
                },
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14,
                },
              },
            },
            series: [
              {
                name: "订单数量",
                type: "line",
                smooth: true,
                showSymbol: false,
                symbol: "circle",
                symbolSize: 6,
                data: numberdata,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(216, 244, 247,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(216, 244, 247,1)",
                        },
                      ],
                      false
                    ),
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#58c8da",
                  },
                },
                lineStyle: {
                  normal: {
                    width: 3,
                  },
                },
              },
              {
                name: "订单金额",
                type: "line",
                smooth: true,
                showSymbol: false,
                symbol: "circle",
                symbolSize: 6,
                data: totalPricedata,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(216, 244, 247,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(216, 244, 247,1)",
                        },
                      ],
                      false
                    ),
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#58c8da",
                  },
                },
                lineStyle: {
                  normal: {
                    width: 3,
                  },
                },
              },
            ],
          };
          option && myChart.setOption(option);
        } else {
        }
      });
    },

    goodsCount() {
      this.$router.push("/Shopping/operateGoodsInfo");
    },
    patientCount() {
      this.$router.push("/patient/patientArchives");
    },
    appointmentOrderCount() {
      this.$router.push("/order/order");
    },
    goodsOrderCount() {
      this.$router.push("/order/goodsOrder");
    },

    getList() {
      informationStatistics(this.queryParams).then((response) => {
        console.log(response);
        this.List = response.data;
      });
      summaryToday(this.queryParams).then((response) => {
        console.log(response);
        this.summaryTodayList = response.data;
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  margin: 20px 0 20px 2%;
  font-size: 18px;
  font-weight: 600;
}
.count {
  color: white;
  width: 30%;
  background-image: linear-gradient(
    109.6deg,
    rgba(111, 167, 183, 0.6) 11.2%,
    #b3e9d8 100.2%
  );
  transition: 0.35s;
  -webkit-box-shadow: 1px 3px 12px rgb(255 113 113 / 30%);
  height: 84px;
  border-radius: 0.4em;
  font-weight: 700;
  margin-right: 20px;
}
.count:hover {
  cursor: pointer;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  z-index: 99;
}
.member {
  background-image: linear-gradient(
    109.6deg,
    rgba(161, 191, 239, 0.6) 11.2%,
    #86c5e2 100.2%
  );
  -webkit-box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
  box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
}
.order {
  background-image: linear-gradient(
    109.6deg,
    rgba(161, 191, 214, 0.6) 11.2%,
    #688eab 100.2%
  );
  -webkit-box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
  box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
}
.shop {
  background-image: linear-gradient(
    109.6deg,
    rgba(138, 203, 158, 0.6) 11.2%,
    #81c195 100.2%
  );
  -webkit-box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
  box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
}
.counts {
  margin-top: 20px;
  margin-left: 35%;
  line-height: 1;
  font-size: 21px;
}
.total {
  margin-top: 5px;
  margin-left: 35%;
  font-size: 13px;
}
.icon {
  margin-top: 10px;
  margin-left: 16px;
  font-size: 31px;
  position: absolute;
}
.icons {
  margin-top: 30px;
  margin-left: 35px;
  position: absolute;
  font-size: 31px;
}
.today {
  width: 100%;
  display: flex;
  margin-top: 10px;
  margin-left: -10px;
}
.todayitem {
  transition: 0.35s;
  margin: 10px;
  width: 30%;
  height: 100px;
  margin-bottom: 20px;
  border-radius: 0.4em;
  font-weight: 700;
  background: hsla(0,0%,92.2%,.5333333333333333);
  padding: 20px;
  .goodsinfo {
    margin-top: 5px;
    margin-left: 32%;
  }
  .totals {
    color: #ff5c58;
    margin-left: 32%;
    margin-top: 5px;
    font-size: 21px;
  }
}
.todayitem:hover {
  cursor: pointer;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  z-index: 99;
}
.home {
  height: 100%;
  width: 100%;
  background-size: cover;
}
.homes {
  display: flex;
}
</style>

