<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" style="flex-shrink: 0">
          <div class="dot" />
          <span>营业</span>
        </div>
        <div class="u-flex" style="flex-wrap: wrap">
          <importData
            :type="9"
            style="margin-right: 14px"
            @close="importDataClose"
            @update="updateData"
          />
          <el-select
            v-if="isHeadShop == 1 && loginType == 0"
            v-model="shopId"
            placeholder="选择分店"
            style="width: 200px; margin-right: 10px"
            @change="shopChange"
          >
            <el-option
              v-for="item in branchList"
              :key="item.shopId"
              :label="item.shopName"
              :value="item.shopId"
            />
          </el-select>
          <div class="time_wrap u-flex" style="flex-shrink: 0">
            <div class="date_list">
              <div
                class="item"
                :class="{ active: dataListActive == index }"
                v-for="(item, index) in dateList"
                :key="item.value"
                @click="timeChange(item.value, index)"
              >
                <!-- 标签文本 -->
                <span class="date-tab-item">{{ item.label }}</span>
                <!-- 分隔符：非最后一项才显示 -->
                <span class="separator" v-if="index < dateList.length - 1">|</span>
              </div>
            </div>
            <div class="u-flex">
              <el-date-picker
                v-if="timeValue == 'custom'"
                v-model="query.createdAt"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                @change="summarytrade"
              />
            </div>
          </div>
        </div>
      </div>
      <div v-loading="tradeLoading" class="content">
        <div class="top">
          <div class="item earnings">
            <div class="num_wrap">
              <div class="num">
                {{ formatDecimal(trade.payAmount + trade.rechargeAmount || 0) }}
              </div>
              <div class="tips">
                营业额(元)
                <el-tooltip popper-class="popper" effect="light" placement="bottom">
                  <template #content>
                    <div class="tips_row">
                      <div class="item">
                        <div class="left">
                          <img class="icon" src="@/assets/images/data/wx.png" />
                          <span>微信小程序</span>
                        </div>
                        <span class="num">{{ trade.wechatPayAmount || 0 }}</span>
                      </div>
                      <div class="item">
                        <div class="left">
                          <img class="icon" src="@/assets/images/data/ali.png" />
                          <span>支付宝小程序</span>
                        </div>
                        <span class="num">{{ trade.aliPayAmount || 0 }}</span>
                      </div>
                      <div class="item">
                        <div class="left">
                          <img class="icon" src="@/assets/images/data/scan.png" />
                          <span>二维码收款</span>
                        </div>
                        <span class="num">{{ trade.mainScanPayAmount || 0 }}</span>
                      </div>
                      <div class="item">
                        <div class="left">
                          <img class="icon" src="@/assets/images/data/scan.png" />
                          <span>扫码收款</span>
                        </div>
                        <span class="num">{{ trade.backScanPayAmount || 0 }}</span>
                      </div>
                      <div class="item">
                        <div class="left">
                          <img class="icon" src="@/assets/images/data/cash.png" />
                          <span>现金</span>
                        </div>
                        <span class="num">{{ trade.cashPayAmount || 0 }}</span>
                      </div>
                      <div class="item">
                        <div class="left">
                          <img class="icon" src="@/assets/images/data/cash.png" />
                          <span>充值</span>
                        </div>
                        <span class="num">{{ trade.rechargeAmount || 0 }}</span>
                      </div>
                      <div class="item">
                        <div class="left">
                          <img class="icon" src="@/assets/images/data/cash.png" />
                          <span>挂账</span>
                        </div>
                        <span class="num">{{ trade.creditPayAmount || 0 }}</span>
                      </div>
                      <div class="item">
                        <div class="left">
                          <img class="icon" src="@/assets/images/data/cash.png" />
                          <span>余额支付</span>
                        </div>
                        <span class="num">{{ trade.memberPayAmount || 0 }}</span>
                      </div>
                    </div>
                  </template>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </el-tooltip>
              </div>
            </div>
            <div class="line_wrap">
              <div class="line_item">
                <div class="line_item_top">
                  <div>销售金额（元）</div>
                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalpayAmount || 0) }}</div> -->
                </div>
                <div class="line_gropress">
                  <div
                    class="gropress l"
                    :style="{
                      width: `${
                        trade.payAmount
                          ? (trade.payAmount / (trade.payAmount * 1 + trade.refundAmount * 1)) * 100
                          : 0
                      }%`,
                    }"
                  />
                  <div
                    class="gropress r"
                    :style="{
                      width: `${
                        trade.refundAmount
                          ? (trade.refundAmount / (trade.payAmount * 1 + trade.refundAmount * 1)) *
                            100
                          : 0
                      }%`,
                    }"
                  />
                </div>
                <div class="line_btm">
                  <el-icon class="icon el-icon-caret-right" />
                  <div class="info">
                    <span class="l_t">收：{{ formatDecimal(trade.payAmount || 0) }}</span>
                    <span class="l_r">退：{{ formatDecimal(trade.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: `${
                        trade.rechargeAmount
                          ? (trade.rechargeAmount /
                              (trade.rechargeAmount * 1 + trade.rechargeRefundAmount * 1)) *
                            100
                          : 0
                      }%`,
                    }"
                  />
                  <div
                    class="gropress r"
                    :style="{
                      width: `${
                        trade.rechargeRefundAmount
                          ? (trade.rechargeRefundAmount /
                              (trade.rechargeAmount * 1 + trade.rechargeRefundAmount * 1)) *
                            100
                          : 0
                      }%`,
                    }"
                  />
                </div>
                <div class="line_btm">
                  <el-icon class="icon el-icon-caret-right" />
                  <div class="info">
                    <span class="l_t">收：{{ formatDecimal(trade.rechargeAmount || 0) }}</span>
                    <span class="l_r">
                      退：{{ formatDecimal(trade.rechargeRefundAmount || 0) }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item data">
            <div class="right_data_wrap">
              <div class="item">
                <div class="num">{{ formatDecimal(trade.memberPayAmount || 0) }}</div>
                <div class="tips">余额支付金额（元）</div>
              </div>
              <div class="item">
                <div class="num">{{ trade.memberPayCount || 0 }}</div>
                <div class="tips">余额支付（笔）</div>
              </div>
              <div class="item">
                <div class="num">{{ trade.newMemberCount || 0 }}</div>
                <div class="tips">新增会员数（人）</div>
              </div>
            </div>
            <!-- <div class="data_item">
              <div class="num_wrap">
                <div class="num">{{ formatDecimal(trade.memberPayAmount || 0) }}</div>
                <div class="tips">会员消费（元）</div>
              </div>
            </div>
            <div class="data_item_right">
              <div class="t">
                <span>新增会员数</span>
                <span class="n">{{ trade.newMemberCount || 0 }}(人)</span>
              </div>
              <div class="t">
                <span>会员消费笔数</span>
                <span class="n">{{ trade.memberPayCount || 0 }}</span>
              </div>
            </div> -->
          </div>
        </div>
        <div class="btm">
          <div class="item item1">
            <div class="title">
              客单价
              <el-tooltip
                effect="dark"
                :content="`订单实付金额（${trade.payAmount}）/就餐人数（${trade.customerCount || 0}）`"
                placement="top"
              >
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </div>
            <div class="icon_wrap">
              <img class="img" src="@/assets/images/data_home_item1_icon.png" />
              <div class="t" style="color: #0080ff">
                {{ formatDecimal(trade.avgPayAmount || 0) }}
              </div>
            </div>
          </div>
          <div class="item item2">
            <div class="title">
              翻台率
              <el-tooltip
                effect="dark"
                :content="`翻台率=（客单数（${trade.customerCount || 0}）-桌台数（${trade.tableCount || 0}））/桌台数*100%`"
                placement="top"
              >
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </div>
            <div class="icon_wrap">
              <img class="img" src="@/assets/images/data_home_item2_icon.png" />
              <div class="t" style="color: #ffb200">{{ trade.turnoverRate || 0 }}%</div>
            </div>
          </div>
          <div class="item item3">
            <div class="title">
              优惠金额
              <el-tooltip popper-class="popper" effect="light" placement="bottom">
                <template #content>
                  <div class="tips_row">
                    <div class="item">
                      <div class="left">
                        <span>优惠类目</span>
                      </div>
                      <span class="num">优惠金额</span>
                    </div>
                    <div class="item">
                      <div class="left">
                        <span>新客立减</span>
                      </div>
                      <span class="num">
                        {{ multiplyAndFormat(trade.newCustomerDiscountAmount || 0) }}
                      </span>
                    </div>
                    <div class="item">
                      <div class="left">
                        <span>满减活动</span>
                      </div>
                      <span class="num">
                        {{ multiplyAndFormat(trade.fullDiscountAmount || 0) }}
                      </span>
                    </div>
                    <div class="item">
                      <div class="left">
                        <span>优惠券抵扣</span>
                      </div>
                      <span class="num">
                        {{ multiplyAndFormat(trade.couponDiscountAmount || 0) }}
                      </span>
                    </div>
                    <div class="item">
                      <div class="left">
                        <span>积分抵扣</span>
                      </div>
                      <span class="num">
                        {{ multiplyAndFormat(trade.pointDiscountAmount || 0) }}
                      </span>
                    </div>
                    <div class="item">
                      <div class="left">
                        <span>霸王餐</span>
                      </div>
                      <span class="num">
                        {{ multiplyAndFormat(trade.backDiscountAmount || 0) }}
                      </span>
                    </div>
                    <div class="item">
                      <div class="left">
                        <span>会员折扣</span>
                      </div>
                      <span class="num">
                        {{ multiplyAndFormat(trade.memberDiscountAmount || 0) }}
                      </span>
                    </div>
                    <div class="item">
                      <div class="left">
                        <span>订单改价</span>
                      </div>
                      <span class="num">
                        {{ multiplyAndFormat(trade.orderPriceDiscountAmount || 0) }}
                      </span>
                    </div>
                  </div>
                </template>
                <el-icon>
                  <QuestionFilled />
                </el-icon>
              </el-tooltip>
            </div>
            <div class="icon_wrap">
              <img class="img" src="@/assets/images/data_home_item3_icon.png" />
              <div class="t" style="color: #ff8000">
                {{ formatDecimal(trade.discountAmount || 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" style="color: #00cb71">{{ trade.discountCount || 0 }}</div>
            </div>
          </div>
          <div class="item item5">
            <div class="row_wrap">
              <div class="row">
                <div class="title">毛利润</div>
                <div class="icon_wrap">
                  <div class="t" style="color: #0000c2">{{ trade.profitAmount || 0 }}</div>
                </div>
              </div>
              <div class="row">
                <div class="title">毛利率</div>
                <div class="icon_wrap">
                  <div class="t" style="color: #0000c2">{{ trade.profitRate || 0 }}%</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="item item6">
            <div class="row_wrap">
              <div class="row">
                <div class="title">净利润</div>
                <div class="icon_wrap">
                  <div class="t" style="color: #E30675;">{{ trade.netProfitAmount || 0 }}</div>
                </div>
              </div>
              <div class="row">
                <div class="title">净利率</div>
                <div class="icon_wrap">
                  <div class="t" style="color: #E30675;">{{ trade.netProfitRate || 0 }}%</div>
                </div>
              </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 value="7">近7天</el-radio-button>
            <el-radio-button value="30">30天</el-radio-button>
          </el-radio-group>
        </div>
        <div
          v-show="lineChartType == 0"
          ref="saleChart"
          v-loading="saleLoading"
          class="chart"
          style="height: 350px"
        />
        <div
          v-show="lineChartType == 1"
          ref="payChart"
          v-loading="payChartLoading"
          class="chart"
          style="height: 350px"
        />
      </div>
      <!-- 商品销售排行 -->
      <div class="item">
        <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 value="7">近7天</el-radio-button>
            <el-radio-button value="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 w-full">
          <el-table v-loading="saleTableLoading" :data="saleTable" style="width: 100%">
            <!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
            <el-table-column label="商品名称" prop="productName" />
            <el-table-column label="数量" prop="saleCount" />
            <el-table-column label="金额" prop="saleAmount" />
          </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"
              layout="total, prev, pager, next, jumper" @current-change="paginationChange" />
          </div> -->
        </div>
      </div>
    </div>
    <div class="chart_wrap">
      <!-- 毛利率/净利率 -->
      <div class="item">
        <div class="header">
          <div class="rate_title">
            <div class="column">
              <span class="t1">毛利率</span>
              <span class="t2">今天 {{ initInterestRateTime }} 更新</span>
            </div>
            <!-- <span class="t1">毛利率/净利率</span> -->
            <el-radio-group v-model="interestRateDay" @change="profitRateBarChart">
              <el-radio-button value="7">近7天</el-radio-button>
              <el-radio-button value="30">30天</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div
          ref="initInterestRate"
          v-loading="initInterestRateLoading"
          class="chart"
          style="height: 350px"
        />
      </div>
      <!-- 成本（元） -->
      <div class="item">
        <div class="header">
          <div class="rate_title">
            <div class="column">
              <span class="t1">成本（元）</span>
              <span class="t2">今天 {{ costUpdateTime }} 更新</span>
            </div>
            <el-radio-group v-model="costDay" @change="costLineChart">
              <el-radio-button value="7">近7天</el-radio-button>
              <el-radio-button value="30">30天</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div ref="costRef" v-loading="costLoading" class="chart" style="height: 350px" />
      </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 importData from "@/components/importData/index.vue";
import dataSummaryApi from "@/api/order/data-summary";
import finceApi from "@/api/order/fince";

import ShopApi from "@/api/account/shop";
import dayjs from "dayjs";
import * as echarts from "echarts";
import { debounce, formatDecimal } from "@/utils/tools";
import { formatDateRange } from "./utils/index.js";
import { multiplyAndFormat } from "@/utils/index.js";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  name: "home",
  components: { importData },
  data() {
    return {
      multiplyAndFormat,
      dataListActive: 0,
      dateList: [
        {
          label: "今天",
          value: "today",
        },
        {
          label: "昨天",
          value: "yesterday",
        },
        {
          label: "最近7天",
          value: "last_7_days",
        },
        {
          label: "最近30天",
          value: "last_30_days",
        },
        {
          label: "本周",
          value: "this_week",
        },
        {
          label: "本月",
          value: "this_month",
        },
        {
          label: "自定义",
          value: "custom",
        },
      ],
      payCount: [
        {
          icon: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/static/wx.png",
          isAmount: "1",
          payAmount: 0,
          payType: "微信小程序",
          saveAmount: null,
        },
        {
          icon: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/static/ali.png",
          isAmount: "1",
          payAmount: 0,
          payType: "支付宝小程序",
          saveAmount: null,
        },
        {
          icon: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/static/scan.png",
          isAmount: "1",
          payAmount: 0,
          payType: "主扫收款",
          saveAmount: null,
        },
        {
          icon: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/static/bscan.png",
          isAmount: "1",
          payAmount: 0,
          payType: "收款码收款",
          saveAmount: null,
        },
        {
          icon: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/static/cash.png",
          isAmount: "1",
          payAmount: 0,
          payType: "现金",
          saveAmount: null,
        },
        {
          icon: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/static/vipIn.png",
          isAmount: "1",
          payAmount: 0,
          payType: "充值",
          saveAmount: null,
        },
      ],
      branchList: [],
      shopId: null,
      trade: {},
      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: 1,
      saleTableTotal: 0,
      saleTableSize: 5,
      __resizeHandler: null,
      productCountChart: null,
      productSumChart: null,
      lineChartType: 0,
      timeValue: "today",
      query: {
        createdAt: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
      },
      tradeLoading: false,
      tradeSale: {
        payCount: [],
      },
      tradeVip: "",
      tradeCount: "",
      isHeadShop: JSON.parse(localStorage.getItem("userInfo")).isHeadShop,
      loginType: localStorage.getItem("loginType"),
      shopInfo: JSON.parse(localStorage.getItem("userInfo")),
      initInterestRateLoading: true,
      initInterestRate: null,
      initInterestRateTime: "",
      costLoading: true,
      costRef: null,
      costUpdateTime: "",
      interestRateDay: "7",
      costDay: "7",
    };
  },
  computed: {
    yingyeShiShou() {
      if (!this.trade) {
        return 0;
      }
      return (
        this.trade.wechatPayAmount * 1 +
        this.trade.aliPayAmount * 1 +
        this.trade.aliPayAmount * 1 +
        this.trade.memberPayAmount * 1 +
        this.trade.scanPayAmount * 1 +
        this.trade.cashPayAmount * 1 +
        this.trade.rechargeAmount * 1
      );
    },
  },
  mounted() {
    let shopInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (shopInfo.isHeadShop) {
      this.shopId = shopInfo.id;
    } else {
      this.shopId = localStorage.getItem("shopId");
    }

    // 增加首页提示是否账号30天过期
    let date = dayjs(localStorage.getItem("expireDate")).diff(dayjs().format("YYYY-MM-DD"), "day");
    if (date <= 30 && date >= 0) {
      this.$alert(
        `店铺账号有限期至${localStorage.getItem("expireDate")}，店铺账号到期剩余${date}天!`,
        "提示"
      );
    }
    // this.summaryGet();
    this.dateAmount();
    this.dateProduct();
    // this.summaryDateGet();
    this.timeChange(this.timeValue);
    this.profitRateBarChart();
    this.costLineChart();

    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.initInterestRate) {
        this.initInterestRate.resize();
      }
      if (this.costRef) {
        this.costRef.resize();
      }
      // if (this.productSumChart) {
      //   this.productSumChart.resize();
      // }
    }, 100);
    window.addEventListener("resize", this.__resizeHandler);
    this.geiShopList();
    // this.initCardUserChart();
  },
  methods: {
    updateData(e) {
      finceApi
        .financeBase({
          shopId: this.shopId,
          type: "all",
          date: e,
        })
        .then((res) => {
          ElMessageBox.confirm("经营数据重新计算中，请稍后刷新页面查看", "提示", {
            confirmButtonText: "知道了",
            showCancelButton: false,
            type: "warning",
          });
        });
    },
    importDataClose() {
      // this.summaryGet();
      this.dateAmount();
      this.dateProduct();
      // this.summaryDateGet();
      this.timeChange(this.timeValue);
      this.profitRateBarChart();
      this.costLineChart();
    },
    /**
     * 获取分店列表
     */
    async geiShopList() {
      try {
        if (this.shopInfo.isHeadShop) {
          let res = await ShopApi.getBranchList();
          this.branchList = res;
          this.shopId = res[0].shopId;
        } else {
          this.shopId = this.shopInfo.id;
        }
      } catch (error) {
        console.log("获取分店列表===", error);
      }
    },
    shopChange() {
      this.summarytrade();
      this.lineChartTypeChange(this.lineChartType);
      this.dateProduct();

      this.profitRateBarChart();
      this.costLineChart();
    },
    // 切换时间
    timeChange(e, index = 0) {
      this.dataListActive = index;
      this.timeValue = e;
      this.query.createdAt = formatDateRange(e);
      if (e != "custom") {
        this.summarytrade();
      }
    },
    // 获取营业板块数据
    async summarytrade() {
      try {
        this.tradeLoading = true;
        // if( this.query.createdAt[1] ){
        //   this.query.createdAt.splice(1,1,this.query.createdAt[1].replace("00:00:00","23:59:59"))
        // }
        const res = await dataSummaryApi.trade({
          beginDate: this.query.createdAt[0],
          endDate: this.query.createdAt[1],
          rangeType: this.timeValue,
          shopId: this.shopId,
        });
        this.trade = res;
        this.tradeSale = res.sale;
        this.tradeVip = res.vip;
        this.tradeCount = res.count;
      } catch (error) {
        console.log(error);
      }
      setTimeout(() => {
        this.tradeLoading = false;
      }, 500);
    },
    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",
          },
        ],
      });
    },
    // 初始化成本折线图
    initCostChart(time = [], data = []) {
      // 销毁旧实例，避免重复创建
      if (this.costRef) {
        this.costRef.dispose();
      }
      this.costRef = echarts.init(this.$refs.costRef);

      this.costRef.setOption({
        tooltip: {
          trigger: "item",
          // 核心1：显示「时间 + 数量」（时间取X轴分类，数量取当前数值）
          formatter: (params) => {
            // params.name 是X轴时间，params.value 是对应数值（保留2位小数，可按需调整）
            return `${params.name}<br/>${params.value.toFixed(2)}`;
          },
          // 优化提示框样式（可选）
          padding: 10,
          textStyle: { fontSize: 11 },
          backgroundColor: "#fff",
          borderColor: "#eee",
          borderWidth: 1,
          boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
        },
        xAxis: [
          {
            type: "category",
            data: time,
            axisTick: { alignWithLabel: true },
            axisLine: { lineStyle: { color: "#999" } },
            axisLabel: {
              rotate: time.length <= 7 ? 0 : 45,
              interval: 0,
              fontSize: "9",
            },
          },
        ],
        grid: {
          top: "5%",
          right: "5%",
          bottom: "8%",
          left: "8%",
          containLabel: true, // 确保标签不溢出，不影响点的显示
        },
        color: "#165DFF", // 折线和默认点的颜色
        yAxis: [
          {
            type: "value",
            axisLine: { lineStyle: { color: "#999" } },
            splitLine: { lineStyle: { type: "dashed", color: "#ececec" } },
          },
        ],
        series: [
          {
            data: data,
            type: "line",
            symbol: "circle", // 核心2：X轴每个数据点显示圆形标记（默认是none，不显示）
            symbolSize: 6, // 固定点的大小（默认尺寸，可调整）
            lineStyle: { width: 2 }, // 折线宽度（优化视觉）
            // 核心3：鼠标悬浮时点变大 + 黑色边框
            emphasis: {
              symbol: "circle", // 悬浮时仍为圆形
              symbolSize: 10, // 悬浮时点的大小（比默认大）
              itemStyle: {
                borderColor: "#000", // 黑色边框
                borderWidth: 2, // 边框宽度
                // 悬浮时填充色不变（仍为 #165DFF）
                color: "#165DFF",
              },
            },
            // 确保所有数据点都显示（避免自动隐藏）
            showAllSymbol: true,
            // 点的基础样式（默认状态）
            itemStyle: {
              color: "#165DFF", // 点的填充色（与折线一致）
              borderWidth: 1, // 基础状态可加细边框（可选，不加则无）
              borderColor: "#fff", // 基础状态边框颜色（与背景区分，可选）
            },
          },
        ],
      });
    },
    // 初始化销售额图标
    initSaleChart(time, data) {
      this.saleChart = null;
      this.saleChart = echarts.init(this.$refs.saleChart);
      this.saleChart.setOption({
        title: {
          text: "销售趋势",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: (params) => {
            return `${params.value}`;
          },
        },
        xAxis: [
          {
            type: "category",
            data: time,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              rotate: time.length <= 7 ? 0 : 45,
              interval: 0,
              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 ? "50%" : "30%",
            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),
          // }
        ],
      });
    },
    initInterestRateChart(time, data) {
      // 销毁旧实例，避免重复创建
      if (this.initInterestRate) {
        this.initInterestRate.dispose();
      }
      this.initInterestRate = echarts.init(this.$refs.initInterestRate);

      // 预处理数据：将毛利率和净利率按索引对应（关键，用于手动匹配）
      const profitRateData = data.map((item) => item.profitRate || 0);
      const netProfitRateData = data.map((item) => item.netProfitRate || 0);

      this.initInterestRate.setOption({
        tooltip: {
          trigger: "item", // 保留 item 模式（确保能触发，之前已验证有效）
          // 核心：手动查找当前 X 轴索引对应的另一个系列数据，拼接显示
          formatter: (params) => {
            const index = params.dataIndex; // 获取当前数据的索引（X轴位置）
            const xName = time[index]; // 当前 X 轴分类名称（如时间）
            const color1 = "#165DFF"; // 毛利率颜色（与 series 一致）
            const color2 = "#14C9C9"; // 净利率颜色（与 series 一致）
            // 当前系列数据 + 另一个系列数据（按索引匹配）
            const profitRate = profitRateData[index].toFixed(2);
            const netProfitRate = netProfitRateData[index].toFixed(2);

            // 拼接提示框内容（彩色方块 + 两个指标）
            return `
          <div style="margin-bottom:4px;">${xName}</div>
          <div><span style="display:inline-block;width:8px;height:8px;background:${color1};margin-right:6px;border-radius:2px;"></span>毛利率：${profitRate}%</div>
        `;
          },
          // 保留你原有的提示框样式
          padding: 10,
          textStyle: { fontSize: 11 },
          backgroundColor: "#fff",
          borderColor: "#eee",
          borderWidth: 1,
          boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
        },
        xAxis: [
          {
            type: "category",
            data: time,
            axisTick: { alignWithLabel: true },
            axisLine: { lineStyle: { color: "#999" } },
            axisLabel: {
              rotate: time.length <= 7 ? 0 : 45,
              interval: 0,
              fontSize: "9",
            },
          },
        ],
        color: ["#165DFF", "#14C9C9", "#F98B26"], // 系列颜色不变
        yAxis: [
          {
            type: "value",
            axisLine: { lineStyle: { color: "#999" } },
            splitLine: { lineStyle: { type: "dashed", color: "#ececec" } },
            axisLabel: { formatter: "{value}%" }, // Y轴加百分号
          },
        ],
        grid: {
          top: "5%",
          right: "5%",
          bottom: "8%",
          left: "8%",
        },
        series: [
          {
            name: "毛利率",
            type: "bar",
            barGap: "0%", // 保持柱子紧贴
            barWidth: time.length <= 7 ? "50%" : "30%",
            data: profitRateData, // 预处理后的毛利率数据
          },
        ],
      });
    },
    // 初始化毛利率/净利率图表
    // initInterestRateChart(time, data) {
    //   // 销毁旧实例，避免重复创建
    //   if (this.initInterestRate) {
    //     this.initInterestRate.dispose();
    //   }
    //   this.initInterestRate = echarts.init(this.$refs.initInterestRate);

    //   // 预处理数据：将毛利率和净利率按索引对应（关键，用于手动匹配）
    //   const profitRateData = data.map(item => item.profitRate || 0);
    //   const netProfitRateData = data.map(item => item.netProfitRate || 0);

    //   this.initInterestRate.setOption({
    //     tooltip: {
    //       trigger: "item", // 保留 item 模式（确保能触发，之前已验证有效）
    //       // 核心：手动查找当前 X 轴索引对应的另一个系列数据，拼接显示
    //       formatter: (params) => {
    //         const index = params.dataIndex; // 获取当前数据的索引（X轴位置）
    //         const xName = time[index]; // 当前 X 轴分类名称（如时间）
    //         const color1 = "#165DFF"; // 毛利率颜色（与 series 一致）
    //         const color2 = "#14C9C9"; // 净利率颜色（与 series 一致）
    //         // 当前系列数据 + 另一个系列数据（按索引匹配）
    //         const profitRate = profitRateData[index].toFixed(2);
    //         const netProfitRate = netProfitRateData[index].toFixed(2);

    //         // 拼接提示框内容（彩色方块 + 两个指标）
    //         return `
    //       <div style="margin-bottom:4px;">${xName}</div>
    //       <div><span style="display:inline-block;width:8px;height:8px;background:${color1};margin-right:6px;border-radius:2px;"></span>毛利率：${profitRate}%</div>
    //       <div><span style="display:inline-block;width:8px;height:8px;background:${color2};margin-right:6px;border-radius:2px;"></span>净利率：${netProfitRate}%</div>
    //     `;
    //       },
    //       // 保留你原有的提示框样式
    //       padding: 10,
    //       textStyle: { fontSize: 11 },
    //       backgroundColor: "#fff",
    //       borderColor: "#eee",
    //       borderWidth: 1,
    //       boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: time,
    //         axisTick: { alignWithLabel: true },
    //         axisLine: { lineStyle: { color: "#999" } },
    //         axisLabel: {
    //           rotate: time.length <= 7 ? 0 : 45,
    //           interval: 0,
    //           fontSize: "9",
    //         },
    //       },
    //     ],
    //     color: ["#165DFF", "#14C9C9", "#F98B26"], // 系列颜色不变
    //     yAxis: [
    //       {
    //         type: "value",
    //         axisLine: { lineStyle: { color: "#999" } },
    //         splitLine: { lineStyle: { type: "dashed", color: "#ececec" } },
    //         axisLabel: { formatter: "{value}%" }, // Y轴加百分号
    //       },
    //     ],
    //     grid: {
    //       top: '5%',
    //       right: '5%',
    //       bottom: '8%',
    //       left: '8%',
    //     },
    //     series: [
    //       {
    //         name: "毛利率",
    //         type: "bar",
    //         barGap: "0%", // 保持柱子紧贴
    //         barWidth: time.length <= 7 ? "50%" : "30%",
    //         data: profitRateData, // 预处理后的毛利率数据
    //       },
    //       {
    //         name: '净利率',
    //         type: "bar",
    //         barGap: "0%",
    //         barWidth: time.length <= 7 ? "50%" : "30%",
    //         data: netProfitRateData, // 预处理后的净利率数据
    //       },
    //     ],
    //   });
    // },
    // 初始化销售额图表
    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 dataSummaryApi.dateAmount({ day: this.saleActive, shopId: this.shopId });
        const data = res.map((item) => {
          return {
            orderAmount: item.orderAmount,
            // actualAmount: item.actualAmount,
            // discountAmount: item.discountAmount
          };
        });
        const time = res.map((item) => item.tradeDay);
        this.initSaleChart(time, data);
      } catch (error) {
        console.log(error);
      }
      setTimeout(() => {
        this.saleLoading = false;
      }, 300);
    },
    // 获取毛利率/净利率柱状图数据
    async profitRateBarChart() {
      try {
        this.initInterestRateLoading = true;
        const res = await dataSummaryApi.profitRateBarChart({
          day: this.interestRateDay,
          shopId: this.shopId,
        });

        this.initInterestRateTime = dayjs().format("HH:mm");

        const data = res.map((item) => {
          return {
            profitRate: item.profitRate || 0,
            netProfitRate: item.netProfitRate || 0,
            // discountAmount: item.discountAmount
          };
        });
        const time = res.map((item) => item.tradeDay);
        this.initInterestRateChart(time, data);
      } catch (error) {
        console.log(error);
      }
      setTimeout(() => {
        this.initInterestRateLoading = false;
      }, 300);
    },
    // 获取成本折线图数据
    async costLineChart() {
      try {
        this.costLoading = true;
        const res = await dataSummaryApi.costLineChart({ day: this.costDay, shopId: this.shopId });

        this.costUpdateTime = dayjs().format("HH:mm");

        const data = res.map((item) => item.productCostAmount || 0);
        const time = res.map((item) => item.tradeDay);
        this.initCostChart(time, data);
      } catch (error) {
        console.log(error);
      }
      setTimeout(() => {
        this.costLoading = false;
      }, 300);
    },
    paginationChange(e) {
      this.saleTablePage = e;
      this.dateProduct();
    },
    // 获取销售额排行表格数据
    async dateProduct() {
      try {
        this.saleTableLoading = true;
        const res = await dataSummaryApi.productSaleDate({
          day: this.saleTableActive,
          shopId: this.shopId,
        });
        this.saleTable = res;
        this.saleTableTotal = res.length;
        // this.summaryDateGet(res.countList);
        setTimeout(() => {
          this.saleTableLoading = false;
        }, 300);
      } catch (error) {
        console.log(error);
      }
    },
    // 支付类型占比 饼图
    async datePayType() {
      try {
        this.payChartLoading = true;
        const res = await dataSummaryApi.datePayType({ day: this.saleActive, shopId: this.shopId });
        const data = res.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);
        // 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");
        }

        &.item5 {
          background-image: url("../../assets/images/data_home_item5.png");
        }

        &.item6 {
          background-image: url("../../assets/images/data_home_item6.png");
        }

        .row_wrap {
          display: flex;
          width: 100%;
          height: 100%;

          .row {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .t {
              margin-left: 0;
            }
          }
        }

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

          .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;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.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;
  display: flex;
  gap: 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;

      .rate_title {
        flex: 1;
        padding: 20px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .column {
          display: flex;
          flex-direction: column;
        }

        .t1 {
          font-size: 16px;
          color: #111;
        }

        .t2 {
          font-size: 12px;
          color: #999;
        }
      }

      .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;
    }
  }
}

.right_data_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .num {
      font-size: 32px;
      color: var(--el-color-primary);
      font-weight: bold;
    }

    .tips {
      font-size: 14px;
      color: #666666;
    }
  }
}

.date_list {
  display: flex;
  margin-right: 10px;

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

    &.active {
      .date-tab-item {
        color: var(--el-color-primary);
      }
    }

    .date-tab-item {
      cursor: pointer;

      &:hover {
        color: var(--el-color-primary-light-3);
      }
    }

    .separator {
      margin: 0 6px;
      position: relative;
      top: -1px;
    }
  }
}
</style>
