<template>
  <div class="app-container" style="padding-bottom: 100px;">
    <!-- <div class="card_wrap">
      <div class="card">
        <div class="header">
          <div class="card_title">总销售额</div>
          <el-tooltip effect="dark" content="订单支付金额" placement="top">
            <i class="icon el-icon-warning-outline"></i>
          </el-tooltip>
        </div>
        <div class="number">{{ topData.totalSales || 0 }}</div>
        <div class="row">平均每单{{ topData.averageSales || 0 }}</div>
        <div class="row">今日销售额{{ topData.totalSalesToday || 0 }}</div>
      </div>
      <div class="card">
        <div class="header">
          <div class="card_title">支付笔数</div>
        </div>
        <div class="number">{{ topData.paymentsNumber }}</div>
        <div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
        <div class="row">
          今日支付笔数{{ topData.paymentsNumberToday || 0 }}
        </div>
      </div>
      <div class="card">
        <div class="header">
          <div class="card_title">访问量</div>
        </div>
        <div class="number">{{ topData.totalVisits }}</div>
        <div class="row" ref="cardCountChart" style="padding-bottom: 2px;"></div>
        <div class="row">
          <div class="dot"></div>
          今日访问 {{ topData.totalVisitsToday || 0 }}
        </div>
      </div>
      <div class="card">
        <div class="header">
          <div class="card_title">用户数</div>
        </div>
        <div class="number">{{ topData.totalUser }}</div>
        <div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
        <div class="row">
          今日新增 {{ topData.userToday || 0 }}
          <i class="icon el-icon-caret-top"></i>
        </div>
      </div>
    </div> -->
    <div class="h_card_wrap">
      <div class="status_wrap">
        <div class="left">
          <div class="dot"></div>
          <span>营业</span>
        </div>
        <div class="time_wrap">
          <el-radio-group v-model="timeValue" @change="timeChange">
            <el-radio-button label="0">今天</el-radio-button>
            <el-radio-button label="-1">昨天</el-radio-button>
            <el-radio-button label="-7">最近7天</el-radio-button>
            <el-radio-button label="-30">最近30天</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="custom">自定义</el-radio-button>
          </el-radio-group>
          <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
            v-if="timeValue == 'custom'" @change="summarytrade">
          </el-date-picker>
        </div>
      </div>
      <div class="content" v-loading="tradeLoading">
        <div class="top">
          <div class="item earnings">
            <div class="num_wrap">
              <div class="num">{{ formatDecimal(tradeSale.incomeAmountAll || 0) }}</div>
              <div class="tips">营业实收（元）
                <el-tooltip popper-class="popper" effect="light" placement="bottom">
                  <div class="tips_row" slot="content">
                    <div class="item" v-for="(item, index) in tradeSale.payCount" :key="index">
                      <div class="left">
                        <img class="icon" :src="item.icon">
                        <span>{{ item.payType }}</span>
                      </div>
                      <span class="num">{{ item.payAmount }}</span>
                    </div>
                  </div>
                  <el-icon class="el-icon-question" />
                </el-tooltip>
              </div>
            </div>
            <div class="line_wrap">
              <div class="line_item">
                <div class="line_item_top">
                  <div>销售金额（元）</div>
                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div> -->
                </div>
                <div class="line_gropress">
                  <div class="gropress l"
                    :style="{ width: `${tradeSale.incomeAmount ? (tradeSale.incomeAmount / tradeSale.totalSaleAmount * 100) : 0}%` }">
                  </div>
                  <div class="gropress r"
                    :style="{ width: `${tradeSale.refundAmount ? (tradeSale.refundAmount / tradeSale.totalSaleAmount * 100) : 0}%` }">
                  </div>
                </div>
                <div class="line_btm">
                  <el-icon class="icon el-icon-caret-right" />
                  <div class="info">
                    <span class="l_t">收：{{ formatDecimal(tradeSale.incomeAmount || 0) }}</span>
                    <span class="l_r">退：{{ formatDecimal(tradeSale.refundAmount || 0) }}</span>
                  </div>
                </div>
              </div>
              <div class="line_item">
                <div class="line_item_top">
                  <div>充值金额（元）</div>
                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div> -->
                </div>
                <div class="line_gropress">
                  <div class="gropress l"
                    :style="{ width: `${tradeSale.inAmount ? (tradeSale.inAmount / tradeSale.totalVipAmount * 100) : 0}%` }">
                  </div>
                  <div class="gropress r"
                    :style="{ width: `${tradeSale.inAmount ? (tradeSale.outAmount / tradeSale.totalVipAmount * 100) : 0}%` }">
                  </div>
                </div>
                <div class="line_btm">
                  <el-icon class="icon el-icon-caret-right" />
                  <div class="info">
                    <span class="l_t">收：{{ formatDecimal(tradeSale.inAmount || 0) }}</span>
                    <span class="l_r">退：{{ formatDecimal(tradeSale.outAmount || 0) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item data">
            <div class="data_item">
              <div class="num_wrap">
                <div class="num">{{ formatDecimal(tradeVip.useAmount || 0) }}</div>
                <div class="tips">会员消费（元）</div>
              </div>
            </div>
            <div class="data_item_right">
              <div class="t"><span>新增会员数</span> <span class="n">{{ tradeVip.newFlow || 0 }}(人)</span></div>
              <div class="t"><span>会员消费笔数</span> <span class="n">{{ tradeVip.useNum || 0 }}</span></div>
            </div>
          </div>
        </div>
        <div class="btm">
          <div class="item item1">
            <div class="title">客单价</div>
            <div class="icon_wrap">
              <img class="img" src="@/assets/images/data_home_item1_icon.png" />
              <div class="t">{{ formatDecimal(tradeCount.unitPrice || 0) }}</div>
            </div>
          </div>
          <div class="item item2">
            <div class="title">翻台率
              <el-tooltip effect="dark" content="翻台率=（客单数-桌台数）/桌台数*100%" placement="top">
                <el-icon class="icon el-icon-question" />
              </el-tooltip>
            </div>
            <div class="icon_wrap">
              <img class="img" src="@/assets/images/data_home_item2_icon.png" />
              <div class="t">{{ tradeCount.turnoverRate }}</div>
            </div>
          </div>
          <div class="item item3">
            <div class="title">优惠金额</div>
            <div class="icon_wrap">
              <img class="img" src="@/assets/images/data_home_item3_icon.png" />
              <div class="t">{{ formatDecimal(tradeCount.saveAmount || 0) }}</div>
            </div>
          </div>
          <div class="item item4">
            <div class="title">优惠笔数 </div>
            <div class="icon_wrap">
              <img class="img" src="@/assets/images/data_home_item4_icon.png" />
              <div class="t">{{ tradeCount.saveNum || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 销售额 -->
    <div class="chart_wrap" style="display: flex;">
      <div class="item">
        <div class="header">
          <div class="tab_wrap">
            <div class="item" :class="{ active: lineChartType == 0 }" @click="lineChartTypeChange(0)">销售趋势</div>
            <div class="item" :class="{ active: lineChartType == 1 }" @click="lineChartTypeChange(1)">支付占比</div>
          </div>
          <el-radio-group v-model="saleActive" @change="lineChartTypeChange(lineChartType)">
            <el-radio-button label="7">近7天</el-radio-button>
            <el-radio-button label="30">30天</el-radio-button>
          </el-radio-group>
        </div>
        <div class="chart" ref="saleChart" v-loading="saleLoading" style="height: 400px;" v-show="lineChartType == 0">
        </div>
        <div class="chart" ref="payChart" v-loading="payChartLoading" style="height: 400px;"
          v-show="lineChartType == 1">
        </div>
      </div>
      <!-- 商品销售排行 -->
      <div class="item" style="margin-left: 20px;">
        <div class="header">
          <div class="tab_wrap">
            <div class="item active">商品销售排行</div>
          </div>
          <el-radio-group v-model="saleTableActive" @change="rankChange">
            <!-- <el-radio-button label="1">今天</el-radio-button> -->
            <el-radio-button label="7">近7天</el-radio-button>
            <el-radio-button label="30">30天</el-radio-button>
          </el-radio-group>
        </div>
        <div class="sale_data">
          <div class="card">
            <div class="sale_data_header">
              <div class="card_title">销售数量</div>
            </div>
            <div class="number">{{ productCount }}</div>
            <div class="product_chart_wrap" ref="productCountChart"></div>
          </div>
          <div class="card">
            <div class="sale_data_header">
              <div class="card_title">销售金额</div>
            </div>
            <div class="number">￥{{ productSum }}</div>
            <div class="product_chart_wrap" ref="productSumChart"></div>
          </div>
        </div>
        <div class="table">
          <el-table :data="saleTable" v-loading="saleTableLoading">
            <!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
            <el-table-column label="商品名称" prop="productName"></el-table-column>
            <el-table-column label="数量" prop="salesNum"></el-table-column>
            <el-table-column label="金额" prop="salesAmount"></el-table-column>
          </el-table>
          <div class="head-container" style="padding-top: 20px;display: flex;justify-content: flex-end;">
            <el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage + 1"
              @current-change="paginationChange" layout="total, prev, pager, next, jumper"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="chart_wrap" style="display: flex;">
      <div class="item" style="margin-left: 20px;">
        <div class="header">
          <div class="tab_wrap">
            <div class="item active">支付占比类型</div>
          </div>
          <el-radio-group v-model="payChartDay" @change="datePayType">
            <el-radio-button label="7">近7天</el-radio-button>
            <el-radio-button label="30">30天</el-radio-button>
          </el-radio-group>
        </div>
        <div style="height: 400px;margin-top: 30px;" ref="payChart" v-loading="payChartLoading"></div>
      </div>
    </div> -->
  </div>
</template>

<script>
import {
  summaryGet,
  summaryTodayGet,
  dateProduct,
  dateAmount,
  datePayType,
  summaryDateGet,
  summarytrade
} from "@/api/home";
import dayjs from 'dayjs'
import echarts from "echarts";
import { debounce, formatDecimal } from "@/utils";
export default {
  name: "home",
  data() {
    return {
      formatDecimal,
      topData: "",
      saleTab: "sale",
      saleActive: "7",
      cardPayChart: null,
      cardCountChart: null,
      cardUserChart: null,
      saleLoading: false,
      saleChart: null,
      payChartDay: "7",
      payChartLoading: false,
      payChart: null,
      chartType: 1,
      productCount: 0,
      productSum: 0,
      saleTableActive: "7",
      saleTable: [],
      saleTableLoading: false,
      saleTablePage: 0,
      saleTableTotal: 0,
      saleTableSize: 5,
      __resizeHandler: null,
      productCountChart: null,
      productSumChart: null,
      lineChartType: 0,
      timeValue: "0",
      query: {
        createdAt: '',
      },
      tradeLoading: false,
      tradeSale: {
        payCount: []
      },
      tradeVip: '',
      tradeCount: '',
    };
  },
  mounted() {
    // this.summaryGet();
    this.dateAmount();
    this.dateProduct();
    // this.summaryDateGet();
    this.timeChange('0')

    this.__resizeHandler = debounce(() => {
      if (this.saleChart) {
        this.saleChart.resize();
      }
      if (this.payChart) {
        this.payChart.resize();
      }
      if (this.cardPayChart) {
        this.cardPayChart.resize();
      }
      if (this.cardUserChart) {
        this.cardUserChart.resize();
      }
      if (this.productCountChart) {
        this.productCountChart.resize();
      }
      if (this.productSumChart) {
        this.productSumChart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
    // this.initCardUserChart();
  },
  methods: {
    // 切换时间
    timeChange(e) {
      const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
      switch (e) {
        case "":
          // 全部
          this.query.createdAt = [];
          break;
        case "0":
          // 今天
          this.query.createdAt = [
            dayjs().format(format[0]),
            dayjs().format(format[1])
          ];
          break;
        case "-1":
          // 昨天
          this.query.createdAt = [
            dayjs()
              .add(-1, "d")
              .format(format[0]),
            dayjs()
              .add(-1, "d")
              .format(format[1])
          ];
          break;
        case "-7":
          // 最近7天
          this.query.createdAt = [
            dayjs()
              .add(-7, "d")
              .format(format[0]),
            dayjs().format(format[1])
          ];
          break;
        case "-30":
          // 最近7天
          this.query.createdAt = [
            dayjs()
              .add(-30, "d")
              .format(format[0]),
            dayjs().format(format[1])
          ];
          break;
        case "week":
          // 本周
          this.query.createdAt = [
            dayjs()
              .startOf("week")
              .format(format[0]),
            dayjs()
              .endOf("week")
              .format(format[1])
          ];
          break;
        case "month":
          // 本周
          this.query.createdAt = [
            dayjs()
              .startOf("month")
              .format(format[0]),
            dayjs()
              .endOf("month")
              .format(format[1])
          ];
          break;
        case "custom":
          // 自定义
          this.query.createdAt = [];
          break;
        default:
          break;
      }
      if (e != 'custom') {
        this.summarytrade()
      }
    },
    // 获取营业板块数据
    async summarytrade() {
      try {
        this.tradeLoading = true
        const res = await summarytrade({
          startTime: this.query.createdAt[0],
          endTime: this.query.createdAt[1]
        })
        this.tradeLoading = false
        this.tradeSale = res.sale
        this.tradeVip = res.vip
        this.tradeCount = res.count
      } catch (error) {
        console.log(error);
      }
    },
    lineChartTypeChange(i) {
      this.lineChartType = i
      if (i == 0) {
        this.dateAmount()
      } else {
        this.datePayType();
      }
    },
    // 初始化支付笔数柱状图
    initCardPayChart(time = [], data = []) {
      this.cardPayChart = echarts.init(this.$refs.cardPayChart);
      this.cardPayChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0
        },
        xAxis: [
          {
            type: "category",
            data: time,
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        color: "#409eff",
        yAxis: [
          {
            type: "value",
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        series: [
          {
            data: data,
            type: "bar",
            barWidth: "30%"
          }
        ]
      });
    },
    // 初始化访问量柱状图
    initCardCountChart(time = [], data = []) {
      this.cardCountChart = echarts.init(this.$refs.cardCountChart);
      this.cardCountChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0
        },
        xAxis: [
          {
            type: "category",
            data: time,
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        color: "#409eff",
        yAxis: [
          {
            type: "value",
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        series: [
          {
            data: data,
            type: "bar",
            barWidth: "30%"
          }
        ]
      });
    },
    // 初始化用户数折线图
    initCardUserChart(time = [], data = []) {
      this.cardUserChart = echarts.init(this.$refs.cardUserChart);
      this.cardUserChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        grid: {
          x: 0,
          y: 10,
          x2: 0,
          y2: 2
        },
        xAxis: [
          {
            type: "category",
            data: time,
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        color: "#409eff",
        yAxis: [
          {
            type: "value",
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        series: [
          {
            data: data,
            type: "line",
            symbol: "none"
          }
        ]
      });
    },
    // 初始化销售额图标
    initSaleChart(time, data) {
      this.saleChart = null;
      this.saleChart = echarts.init(this.$refs.saleChart);
      this.saleChart.setOption({
        title: {
          text: "销售趋势",
          x: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: [
          {
            type: "category",
            data: time,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel: {
              rotate: time.length <= 7 ? 0 : 45,
              interval: 0,
              textStyle: {
                fontSize: "9"
              }
            }
          }
        ],
        color: ["#409eff", "#FFC83A", "#F98B26"],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#ececec"
              }
            }
          }
        ],
        series: [
          {
            name: '订单金额',
            type: "bar",
            barWidth: time.length <= 7 ? "30%" : "20%",
            data: data.map(item => item.orderAmount),
          },
          {
            name: '实收金额',
            type: "bar",
            barWidth: time.length <= 7 ? "30%" : "20%",
            data: data.map(item => item.actualAmount),
          },
          {
            name: '优惠金额',
            type: "bar",
            barWidth: time.length <= 7 ? "30%" : "20%",
            data: data.map(item => item.discountAmount),
          }
        ]
      });
    },
    // 初始化销售额图表
    initPayChart(data) {
      this.payChart = echarts.init(this.$refs.payChart);
      this.payChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: params => {
            return `${params.name}：${params.value}笔`
          }
        },
        legend: {
          top: "5%",
          left: "center"
        },
        color: [
          "#409eff",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      });
    },
    // 获取销售额柱状图数据
    async dateAmount() {
      try {
        this.saleLoading = true;
        const res = await dateAmount(this.saleActive);
        const data = res.total.map(item => {
          return {
            orderAmount: item.orderAmount,
            actualAmount: item.actualAmount,
            discountAmount: item.discountAmount
          }
        });
        const time = res.total.map(item => item.tradeDay);
        this.initSaleChart(time, data);
        setTimeout(() => {
          this.saleLoading = false;
        }, 300);
      } catch (error) {
        console.log(error);
      }
    },
    paginationChange(e) {
      this.saleTablePage = e - 1;
      this.dateProduct();
    },
    // 获取销售额排行表格数据
    async dateProduct() {
      try {
        this.saleTableLoading = true;
        const res = await dateProduct(
          this.saleTableActive,
          this.saleTablePage,
          this.saleTableSize
        );
        this.saleTable = res.productList.content;
        this.saleTableTotal = res.productList.totalElements;
        this.productCount = res.productCount.payAmount;
        this.productSum = res.productSum.payAmount;

        this.summaryDateGet(res.countList)
        setTimeout(() => {
          this.saleTableLoading = false;
        }, 300);
      } catch (error) {
        console.log(error);
      }
    },
    // 支付类型占比 饼图
    async datePayType() {
      try {
        this.payChartLoading = true;
        const res = await datePayType(this.saleActive);
        const data = res.countPayType.map(item => {
          return {
            value: item.count,
            name: item.payType
          };
        });
        setTimeout(() => {
          this.payChartLoading = false;
        }, 300);
        this.initPayChart(data);
      } catch (error) {
        console.log(error);
      }
    },
    // 汇总数据
    async summaryGet() {
      try {
        const res1 = await summaryGet();
        const res2 = await summaryTodayGet();
        this.topData = {
          ...res1,
          ...res2
        };
        let payTime = res1.countDateList.map(item => item.tradeDay);
        let payData = res1.countDateList.map(item => item.count);

        let countTime = res1.visitsCountList.map(item => item.tradeDay);
        let countData = res1.visitsCountList.map(item => item.count);

        this.initCardPayChart(payTime, payData);
        this.initCardCountChart(countTime, countData);
        console.log(this.topData);
      } catch (error) {
        console.log(error);
      }
    },
    rankChange() {
      this.dateProduct();
      // this.summaryDateGet();
    },
    // 初始化销售图标
    initProduceChart(p1, p2) {
      this.productCountChart = echarts.init(this.$refs.productCountChart);
      this.productSumChart = echarts.init(this.$refs.productSumChart);

      this.productCountChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0
        },
        xAxis: [
          {
            boundaryGap: false,
            type: "category",
            data: p1[0],
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        color: "#409eff",
        yAxis: [
          {
            type: "value",
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        series: [
          {
            data: p1[1],
            type: "line",
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#409eff" // 渐变颜色
                },
                {
                  offset: 1,
                  color: "#409eff" // 渐变颜色
                }
              ])
            }
          }
        ]
      });

      this.productSumChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 0
        },
        xAxis: [
          {
            boundaryGap: false,
            type: "category",
            data: p2[0],
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        color: "#409eff",
        yAxis: [
          {
            type: "value",
            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
            axisTick: {
              show: false // 不显示坐标轴刻度线
            },
            axisLine: {
              show: false // 不显示坐标轴线
            },
            axisLabel: {
              show: false // 不显示坐标轴上的文字
            },
            splitLine: {
              show: false // 不显示网格线
            }
          }
        ],
        series: [
          {
            data: p2[1],
            type: "line",
            symbol: "none",
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#409eff" // 渐变颜色
                },
                {
                  offset: 1,
                  color: "#409eff" // 渐变颜色
                }
              ])
            }
          }
        ]
      });
    },
    // 日期汇总数据
    async summaryDateGet(res) {
      try {
        console.log(res);

        // const res = await summaryDateGet(this.saleTableActive);
        let p1 = [
          res.map(item => item.tradeDay),
          res.map(item => item.saleNum)
        ];
        let p2 = [
          res.map(item => item.tradeDay),
          res.map(item => item.saleAmount)
        ];

        console.log(p1);
        console.log(p2);

        this.initProduceChart(p1, p2);
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style>
.popper {
  border: 1px solid #D9D9D9 !important;
}
</style>
<style scoped lang="scss">
.tips_row {
  width: 300px;
  padding: 0 10px;

  .item {
    height: 40px;
    display: flex;
    align-items: center;
    color: #666;
    justify-content: space-between;

    &:not(:last-child) {
      border-bottom: 1px solid #D9D9D9;
    }

    .left {
      display: flex;
      align-items: center;

      .icon {
        font-size: 20px;
        margin-right: 10px;
      }
    }

    .num {
      color: #1890ff;
    }
  }
}

.app-container {
  padding: 20px;
  background-color: #f5f5f5;
}

.h_card_wrap {

  .status_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .dot {
        $size: 6px;
        width: $size;
        height: $size;
        border-radius: 50%;
        background-color: #1890ff;
        margin-right: 10px;
      }
    }

    .time {
      display: flex;
      align-items: center;
    }
  }

  .content {
    background-color: #fff;
    margin-top: 15px;
    padding: 20px;

    .top {
      display: flex;

      .item {
        flex: 1;

        &.earnings {
          display: flex;
        }

        &.data {
          margin-left: 40px;
          background: url('../../assets/images/data_home_bg1.png') no-repeat center center / cover;
          display: flex;
          align-items: center;
        }

        .data_item {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .data_item_right {
          flex: 1;
          display: flex;
          flex-direction: column;

          .t {
            width: 200px;
            color: #333;
            display: flex;

            &:not(:first-child) {
              margin-top: 20px;
            }
          }

          .n {
            color: #1890ff;
            margin-left: 20px;
          }
        }

        .num_wrap {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .num {
            font-size: 30px;
            color: #1890ff;
          }

          .tips {
            font-size: 12px;
            margin-top: 10px;
          }
        }

        .line_wrap {
          flex: 1;
          padding-left: 20px;

          .line_item {
            &:not(:first-child) {
              margin-top: 20px;
            }

            .line_item_top {
              display: flex;
              justify-content: space-between;
              font-size: 12px;

              .t {
                color: #999;
              }
            }

            .line_gropress {
              display: flex;
              margin-top: 6px;
              background-color: #F6F6F6;

              .gropress {
                height: 5px;

                &.l {
                  background-color: #1890ff;
                }

                &.r {
                  background-color: #FF3F3F;
                }
              }
            }

            .line_btm {
              display: flex;
              justify-content: space-between;
              margin-top: 5px;

              .icon {
                color: #A2A2A2;
                position: relative;
                left: -5px;
                font-size: 12px;
              }

              .info {
                font-size: 12px;

                .l_t {
                  color: #1890ff;
                }

                .l_r {
                  color: #FF3F3F;
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
    }

    .btm {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;

      .item {
        width: 200px;
        height: 83px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 18px;

        &.item1 {
          background-image: url('../../assets/images/data_home_item1.png');
        }

        &.item2 {
          background-image: url('../../assets/images/data_home_item2.png');
        }

        &.item3 {
          background-image: url('../../assets/images/data_home_item3.png');
        }

        &.item4 {
          background-image: url('../../assets/images/data_home_item4.png');
        }

        .title {
          display: flex;
          align-items: center;
          color: #333;
          font-size: 14px;

          .icon {
            font-size: 12px;
            color: #999;
            margin-left: 6px;
          }
        }

        .icon_wrap {
          display: flex;
          align-items: center;
          margin-top: 10px;

          .img {
            width: 36px;
            height: 36px;
          }

          .t {
            font-size: 24px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

.card_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .card {
    flex: 1;
    background-color: #fff;
    border-radius: 2px;
    padding: 0 20px;

    .header {
      display: flex;
      justify-content: space-between;
      color: #999;
      padding-top: 20px;

      .card_title {
        font-size: 14px;
        flex: 1;
      }
    }

    .number {
      padding: 20px 0 10px 0;
      font-size: 24px;
      height: 60px;
    }

    .row {
      height: 50px;
      color: #555;
      font-size: 14px;
      display: flex;
      align-items: center;

      &:not(:last-child) {
        border-bottom: 1px solid #ececec;
      }

      .icon {
        color: rgb(255, 85, 85);
        margin-left: 4px;
      }

      .dot {
        $size: 6px;
        width: $size;
        height: $size;
        border-radius: 50%;
        background-color: #1890ff;
        margin-right: 6px;
      }
    }
  }
}

.chart_wrap {
  margin-top: 20px;

  .sale_data {
    display: flex;

    .card {
      flex: 1;
      background-color: #fff;
      border-radius: 2px;
      padding: 0 20px;

      .sale_data_header {
        display: flex;
        justify-content: space-between;
        color: #999;
        padding-top: 20px;

        .card_title {
          font-size: 14px;
          flex: 1;
        }
      }

      .number {
        padding-top: 10px;
        font-size: 24px;
        height: 60px;
      }

      .product_chart_wrap {
        height: 50px;
      }
    }
  }

  .item {
    flex: 1;
    background-color: #fff;
    border-radius: 2px;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;

      .tab_wrap {
        display: flex;
        $color: #1890ff;

        .item {
          padding: 0 10px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          margin-right: 20px;

          &.active {
            position: relative;
            color: $color;

            &::after {
              content: "";
              width: 100%;
              border-bottom: 2px solid $color;
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
        }
      }
    }

    .chart {
      padding: 20px 0;
      height: 300px;
    }

    .table {
      padding: 20px;
    }
  }
}
</style>
