<template>
  <div>
    <el-row class="top-sum">
      <el-col :span="24">
        <el-card shadow="never" class="card-show">
          <div v-if="topInfo">
            <h2 class="top-class">
              <div class="top-left">
                {{ getTimeState() }}，<span style="color: cornflowerblue">{{
                  topInfo.userName
                }}</span
              >，祝你开心每一天！
              </div>
              <div class="top-right">
                <div style="width: 150px">
                  <p class="p-title">待审核领样数</p>
                  <p class="p-main like-a" @click="toSamplingList('1')">
                    {{
                      topInfo.toBeReviewed || topInfo.toBeReviewed == 0
                        ? topInfo.toBeReviewed
                        : "-"
                    }}
                  </p>
                </div>
                <div style="width: 150px">
                  <p class="p-title">待发货领样数</p>
                  <p class="p-main like-a" @click="toSamplingList('3')">
                    {{
                      topInfo.toBeShipped || topInfo.toBeShipped == 0
                        ? topInfo.toBeShipped
                        : "-"
                    }}
                  </p>
                </div>
                <div style="width: 150px">
                  <p class="p-title">待审核作业数</p>
                  <p class="p-main like-a" @click="toSamplingList('6')">
                    {{
                      topInfo.toBeUploaded || topInfo.toBeUploaded == 0
                        ? topInfo.toBeUploaded
                        : "-"
                    }}
                  </p>
                </div>
              </div>
            </h2>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="never" class="top-sum" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>进行中的项目</span>

        <el-date-picker
          v-model="uploadDate"
          style="width: 250px; float: right"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="getOrderData"
        ></el-date-picker>
        <el-button
          size="small"
          type="primary"
          plain
          style="float: right;margin: 0 10px"
          @click="toDataBigScreen"
          v-if=" this.$store.getters.roles[0] == 'supplyChainAdmin' "
        >数据看板
        </el-button
        >
        <el-radio-group v-model="mediaId" style="float: right" @change="changeMedia">
          <el-radio-button label="2">快手</el-radio-button>
          <el-radio-button label="1">抖音</el-radio-button>
        </el-radio-group>
      </div>
      <el-row class="top-sum" style="display: flex" v-if="!!orderData">
        <el-col :span="5">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">订单总数</p>
            <p class="p-main">{{ orderData.allNumber }}</p>

            <div style="display: flex; width: 100%">
              <p class="p-title-1">
                环比：<i :style="orderData.dateOrderRate > 0 ? 'color:red' : 'color:green'"
              >{{ (orderData.dateOrderRate * 100).toFixed(2) + "%" }}
              </i>
              </p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">有效订单数</p>
            <p class="p-main">{{ orderData.validOrderNUm }}</p>
            <div style="display: flex; width: 100%">
              <p class="p-title-1">
                环比：<i :style="orderData.validOrderNUmRoi > 0 ? 'color:red' : 'color:green'"
              >{{ (orderData.validOrderNUmRoi) + "%" }}
              </i>
              </p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">失效订单数</p>
            <p class="p-main">{{ orderData.inValidOrderNUm }}</p>
            <div style="display: flex; width: 100%">
              <p class="p-title-1">
                环比：<i :style="orderData.inValidOrderNUmRoi > 0 ? 'color:red' : 'color:green'"
              >{{ (orderData.inValidOrderNUmRoi) + "%" }}
              </i>
              </p>

            </div>

          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">达人总数</p>
            <p class="p-main">{{ orderData.promoterCount }}</p>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">
              {{ type == 1 ? "完成作业数" : "发货数" }}
            </p>
            <p class="p-main">
              {{ type == 1 ? orderData.completeCount : orderData.sendCount }}
            </p>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="top-sum" style="display: flex" v-if="!!orderData">
        <div style="display: flex; width: 100%">
          <div style="margin-right: 20px">
            <p class="p-main-data" v-if="!!orderData.dataOrderRate">
              数据对比:

              <i :style="orderData.dataOrderRate > 0 ? 'color:red' : 'color:green'">
                {{ (orderData.dataOrderRate * 100).toFixed(2) + "%" }}
              </i>
            </p>
          </div>
          <div
            style="margin-right: 20px"
            :style="dateType == 0 ? '' : 'visibility: hidden'"
          >
            <p class="p-main-data">
              周同比:<i
              :style="orderData.monthOrderRate > 0 ? 'color:red' : 'color:green'"
            >{{ (orderData.monthOrderRate * 100).toFixed(2) + "%" }}</i
            >
            </p>
          </div>
        </div>
      </el-row>
      <el-row class="top-sum" style="display: flex" v-if="!!orderData">
        <el-col :span="5">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">订单金额</p>
            <p class="p-main">
              {{
                orderData.orderAmount >= 0 ? priceFormat(orderData.orderAmount / 100) : 0
              }}
            </p>

            <div style="display: flex; width: 100%">
              <p class="p-title-1">
                环比：<i
                :style="orderData.dateAmountRate > 0 ? 'color:red' : 'color:green'"
              >{{ (orderData.dateAmountRate * 100).toFixed(2) + "%" }}
              </i>
              </p>
            </div>

          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">有效订单金额</p>
            <p class="p-main">
              {{
                orderData.baseAmount >= 0 ? priceFormat(orderData.baseAmount / 100) : 0
              }}
            </p>
            <div style="display: flex; width: 100%">
              <p class="p-title-1">
                环比：<i :style="orderData.baseAmountRoi > 0 ? 'color:red' : 'color:green'"
              >{{ (orderData.baseAmountRoi) + "%" }}
              </i>
              </p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="5">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">预估服务费</p>
            <p class="p-main">
              {{
                orderData.regimentalPromotionAmount >= 0
                  ? priceFormat(orderData.regimentalPromotionAmount / 100)
                  : 0
              }}
            </p>
            <div style="display: flex; width: 100%">
              <p class="p-title-1">
                环比：<i :style="orderData.regimentalPromotionAmountRoi > 0 ? 'color:red' : 'color:green'"
              >{{ (orderData.regimentalPromotionAmountRoi) + "%" }}
              </i>
              </p>
            </div>
          </el-card>
        </el-col>

        <el-col :span="5" v-if="this.mediaId == 1">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">预估服务费支出</p>
            <p class="p-main">
              {{
                orderData.secondEstimatedCommission >= 0
                  ? priceFormat(orderData.secondEstimatedCommission / 100)
                  : 0
              }}
            </p>
          </el-card>
        </el-col>

        <el-col :span="5">
          <el-card shadow="never" class="card-show" style="height: 145px">
            <p class="p-title">
              {{ type == 1 ? "合格作业率" : "订单发货率" }}
            </p>
            <p class="p-main">
              {{ type == 1 ? orderData.completeRate : orderData.sendRate }}
            </p>
          </el-card>
        </el-col>
        <el-col :span="5" v-if="this.mediaId == 2"></el-col>
      </el-row>
      <el-row class="top-sum" style="display: flex" v-if="!!orderData">
        <div style="display: flex; width: 100%">
          <div style="margin-right: 20px">
            <p class="p-main-data" v-if="!!orderData.dataAmountRate">
              数据对比:<i
              :style="orderData.dataAmountRate > 0 ? 'color:red' : 'color:green'"
            >{{ (orderData.dataAmountRate * 100).toFixed(2) + "%" }}</i
            >
            </p>
          </div>
          <div
            style="margin-right: 20px"
            :style="dateType == 0 ? '' : 'visibility: hidden'"
          >
            <p class="p-main-data">
              周同比:<i
              :style="orderData.monthAmountRate > 0 ? 'color:red' : 'color:green'"
            >{{ (orderData.monthAmountRate * 100).toFixed(2) + "%" }}</i
            >
            </p>
          </div>
        </div>
      </el-row>
    </el-card>

    <el-card shadow="never" class="card-show" v-loading="echartsLoading" style="height: 450px">
      <div slot="header" class="clearfix">
        <span style="display: inline-block; line-height: 2">数据分析</span>
        <el-select
          v-model="echartsType"
          placeholder="请选择类型"
          clearable
          style="width: 240px; float: right; padding: 3px 0"
          @change="changeEchartsType"
        >
          <el-option label="销售额" value="orderAmount"/>
          <el-option label="订单数" value="orderCount"/>
          <el-option label="服务费" value="regimentalPromotionAmount"/>
          <el-option label="达人数" value="promoterCount" v-if="type == 1"/>

        </el-select>
      </div>
      <div class="flex-class">
        <div
          id="echart"
          ref="echart"
          style="height: 300px; width: 65%; margin-top: 50px"
        ></div>
        <div style="height: 400px; width: 30%; margin-top: 50px" v-if="!!analysis">
          <div class="flex-class top-sum">
            <div style="width: 150px; text-align: left" class="card-show">
              <p class="p-title">月销售额</p>
              <p class="p-main">
                {{
                  analysis.orderAmount >= 0 ? priceFormat(analysis.orderAmount / 100) : 0
                }}
              </p>
            </div>
            <div style="width: 150px; text-align: left" class="card-show">
              <p class="p-title">今日占比</p>
              <p class="p-main">
                {{ analysis.orderAmountRate }}
              </p>
            </div>
          </div>
          <div class="flex-class top-sum">
            <div style="width: 150px; text-align: left" class="card-show">
              <p class="p-title">月服务费</p>
              <p class="p-main">
                {{
                  analysis.regimentalPromotionAmount >= 0
                    ? priceFormat(analysis.regimentalPromotionAmount / 100)
                    : 0
                }}
              </p>
            </div>
            <div style="width: 150px; text-align: left" class="card-show">
              <p class="p-title">今日占比</p>
              <p class="p-main">
                {{ analysis.regimentalPromotionAmountRate }}
              </p>
            </div>
          </div>
          <div class="flex-class top-sum">
            <div style="width: 150px; text-align: left" class="card-show">
              <p class="p-title">{{ type == 1 ? "月达人总数" : "月订单量" }}</p>
              <p class="p-main">
                {{ type == 1 ? analysis.promoterCount : analysis.orderCount }}
              </p>
            </div>
            <div style="width: 150px; text-align: left" class="card-show">
              <p class="p-title">今日占比</p>
              <p class="p-main">
                {{ type == 1 ? analysis.promoterRate : analysis.orderCountRate }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-card>


    <el-row class="top-sum" :gutter="24" style="margin-top: 24px">
      <el-col :span="24">
        <el-card
          shadow="never"
          class="card-show"
          style="width: 100%; min-height: 300px"
          v-loading="hourEchartsLoading"
        >
          <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >分时数据</span>
            <el-select
              v-model="hourType"
              placeholder="请选择类型"
              clearable
              style="width: 240px; float: right; padding: 3px 0"
              @change="changeHourType"
            >
              <el-option label="销售额" value="1"/>
              <el-option label="订单数" value="2"/>
            </el-select>
          </div>
          <div
            id="hourEchart"
            ref="hourEchart"
            style="height: 280px; width: 100%;"
          ></div>
        </el-card>
      </el-col>
    </el-row>


    <el-row class="top-sum" :gutter="24" style="margin-top: 24px">
      <el-col :span="12">
        <el-card shadow="never" class="card-show" style="width: 100%; min-height: 700px">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; font-weight: bold; float: left"
            >商品排行榜</span
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="toOrderList"
            >更多>>
            </el-button>
          </div>
          <el-table v-loading="orderRankLoading" :data="orderRankList">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column type="index" :index="indexMethod"></el-table-column>
            <el-table-column label="商品名称" align="center" prop="itemTitle">
              <template slot-scope="scope">
                <a
                  :title="scope.row.itemTitle"
                  @click="toOrderDetail(scope.row)"
                  style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden"
                >
                  {{ scope.row.itemTitle }}
                </a>
              </template>
            </el-table-column>
            <el-table-column label="订单数" align="center" prop="orderNum">
            </el-table-column>
            <el-table-column label="有效订单" align="center" prop="validOrderNUm">
            </el-table-column>
            <el-table-column label="有效率" align="center" prop="validRadio">
              <template slot-scope="scope">
                {{
                  scope.row.validRadio
                    ? (scope.row.validRadio * 100).toFixed(2) + "%"
                    : "-"
                }}
              </template>
            </el-table-column>
            <el-table-column label="发货数" align="center" prop="deliveryNum">
            </el-table-column>
            <el-table-column label="发货率" align="center" prop="deliveryRadio">
              <template slot-scope="scope">
                {{
                  scope.row.deliveryRadio
                    ? (scope.row.deliveryRadio * 100).toFixed(2) + "%"
                    : "-"
                }}
              </template>
            </el-table-column>

            <el-table-column label="日涨幅" align="center" prop="radio">
              <template slot-scope="scope">
                <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
                    scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
                  }}</i>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="orderTotal > 0"
            :total="orderTotal"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getIndexOrderRank"
            layout="total, prev, pager, next, jumper"
            :small="true"
            :auto-scroll="false"
          />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" class="card-show" style="width: 100%; min-height: 700px">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; font-weight: bold; float: left"
            >达人排行榜</span
            >
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="toPersonList"
            >更多>>
            </el-button>
          </div>
          <el-table v-loading="promoterLoading" :data="promoterRankList">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column type="index" :index="indexMethodTwo" width="70">
            </el-table-column>
            <el-table-column label="达人名称" align="center" prop="promoterNickName">
              <template slot-scope="scope">
                <a
                  :title="scope.row.promoterNickName"
                  @click="toPersonDetail(scope.row)"
                  style="
                    width: 200px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    text-align: left;
                  "
                >
                  {{ scope.row.promoterNickName }}
                </a>
              </template>
            </el-table-column>
            <el-table-column label="订单数" align="center" prop="orderNum">
            </el-table-column>
            <el-table-column label="有效订单" align="center" prop="validOrderNUm">
            </el-table-column>
            <el-table-column label="有效率" align="center" prop="validRadio">
              <template slot-scope="scope">
                {{
                  scope.row.validRadio
                    ? (scope.row.validRadio * 100).toFixed(2) + "%"
                    : "-"
                }}
              </template>
            </el-table-column>

            <el-table-column label="日涨幅" align="center" prop="radio">
              <template slot-scope="scope">
                <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
                    scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
                  }}</i>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="promoterTotal > 0"
            :total="promoterTotal"
            :page.sync="queryParams.promoterPageNum"
            :limit.sync="queryParams.pageSize"
            layout="total, prev, pager, next, jumper"
            @pagination="getIndexPromoterRank"
            :small="true"
            :auto-scroll="false"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getIndexPromoterRank, //获取达人排行
  getIndexOrderRank, //获取商品排行
  getPersonalInfo,
  getOrderData,
  getDataAnalysis,
  getMediaId,
  getGmvHour,
} from "@/api/index";
import fa from "element-ui/src/locale/lang/fa";

var echarts = require("echarts");
export default {
  name: "sale-html",
  data() {
    return {
      hourEchartsLoading: false,
      mediaId: 2,
      hourType: "1",
      echartsType: "orderAmount",
      echartsTwoType: "validOrderAmount",
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 分配销售
      openAllocation: false,
      // 选择的销售id
      saleId: undefined,
      // 销售列表
      saleList: [],
      // 分配销售确定loading
      confirmLoadingSale: false,
      // 汇总数据获取
      taskNumber: {
        complete: 0,
        noStarted: 0,
      },
      userId: undefined,
      // 日期范围
      dateRange: [],
      uploadDate: [new Date(), new Date()],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 销售线索回显
      formDataShow: null,
      // 表单参数
      form: {},
      //上传报表下拉数据
      formList: {},
      fileList: [],
      //获取销售线索文件流
      dateFile: null,
      //销售线索上传loading
      confirmLoading: false,
      // 表单校验
      rules: {},
      // 分配销售展示列表
      saleAllocationList: [],
      topInfo: null,
      orderData: {
        promoterCount: 0,
        completeCount: 0,
        sendCount: 0,
        completeRate: 0,
        sendRate: 0,
        allNumber: 0,
        validOrderNUm: 0,
        inValidOrderNUm: 0,
        orderAmount: 0,
        regimentalPromotionAmount: 0,
        baseAmount: 0,
      },
      analysis: {
        promoterCount: 0,
        promoterRate: 0,
        orderAmount: 0,
        orderAmountRate: 0,
        regimentalPromotionAmount: 0,
        regimentalPromotionAmountRate: 0,
      },
      type: 1,
      echartsLoading: false,
      orderRankList: [],
      orderRankLoading: false,
      orderTotal: 0,
      queryParams: {pageNum: 1, pageSize: 10, promoterPageNum: 1},
      promoterRankList: [],
      promoterLoading: false,
      promoterTotal: 0,
      dateType: 0,
    };
  },
  filters: {},

  created() {
    this.userId = this.$store.getters.userId;
    this.getMediaId();
    this.type =
      this.$store.getters.roles[0] == "courtshipManager" ||
      this.$store.getters.roles[0] == "courtship"
        ? 2
        : this.$store.getters.roles[0] == "bdManager" ||
        this.$store.getters.roles[0] == "bd" ||
        this.$store.getters.roles[0] == "association" ||
        this.$store.getters.roles[0] == "associationManager" ||
        this.$store.getters.roles[0] == "supplyChainAdmin" ||
        this.$store.getters.roles[0] == "admin"
          ? 1
          : 2;
    let date = new Date();
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let dd = date.getDate();
    dd = dd < 10 ? "0" + dd : dd;
    this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
  },
  methods: {
    getGmvHour() {
      this.hourEchartsLoading = true
      getGmvHour(
        this.addDateRange({
            userId: this.userId, mediaId: this.mediaId, type: this.type, hourType: this.hourType
          },
          this.uploadDate,
          "statDate",
          "endDate"
        )
      ).then((res) => {
        if (res.success) {
          this.chartList = res.result.today
          this.initEchart(
            'hourEchart',
            this.hourEchartOption(res.result.today, res.result.yesterday, res.result.roi, [], [])
          )
        }
        this.hourEchartsLoading = false
      });
    },


    toDataBigScreen() {
      const a = document.createElement("a");
      document.body.appendChild(a);
      a.style.display = "none";
      //   a.href = "http://192.168.1.169:80/dataBigScreen";
      // a.href = " http://192.168.1.82:1024/dataBigScreen";
      a.href = "http://567.ruixuan.bjhcstszkj.cn/dataBigScreen";

      a.target = "_blank";
      a.click();
      document.body.removeChild(a);
    },
    getMediaId() {
      getMediaId({userId: this.userId}).then((res) => {
        this.mediaId = res.data;
        this.getInfomation();
        this.getOrderData();
        this.getDataAnalysis();
        this.getGmvHour();
      });
    },
    getTimeState() {
      // 获取当前时间
      let timeNow = new Date();
      // 获取当前小时
      let hours = timeNow.getHours();
      // 设置默认文字
      let text = ``;
      // 判断当前时间段
      if (hours >= 0 && hours <= 5) {
        text = `凌晨好`;
      } else if (hours >= 6 && hours <= 9) {
        text = `早上好`;
      } else if (hours > 9 && hours <= 12) {
        text = `上午好`;
      } else if (hours > 12 && hours <= 14) {
        text = `中午好`;
      } else if (hours > 14 && hours <= 18) {
        text = `下午好`;
      } else if (hours > 18 && hours <= 24) {
        text = `晚上好`;
      }
      // 返回当前时间段对应的状态
      return text;
    },
    getInfomation() {
      getPersonalInfo({userId: this.userId, type: this.type}).then((res) => {
        this.topInfo = res.data;
      });
    },
    getOrderData() {
      if (this.uploadDate && this.uploadDate.length == 2) {
        this.loading = true;
        getOrderData(
          this.addDateRange(
            {userId: this.userId, type: this.type, mediaId: this.mediaId},
            this.uploadDate,
            "statDate",
            "endDate"
          )
        ).then((res) => {
          this.orderData = res.data;
          this.loading = false;
        });
        this.getIndexPromoterRank();
        this.getIndexOrderRank();
        this.getDataAnalysis();
        this.getGmvHour();
      } else {
        this.$message.error("请选择时间");
      }
    },

    changeMedia() {
      if (this.uploadDate && this.uploadDate.length == 2) {
        this.loading = true;
        getOrderData(
          this.addDateRange(
            {userId: this.userId, type: this.type, mediaId: this.mediaId},
            this.uploadDate,
            "statDate",
            "endDate"
          )
        ).then((res) => {
          this.orderData = res.data;
          if (this.orderData == null) {
            this.loading = true;
          } else {
            this.loading = false;
          }
        });
        this.getIndexPromoterRank();
        this.getIndexOrderRank();
        this.getDataAnalysis();
        this.getGmvHour();
      } else {
        this.$message.error("请选择时间");
      }
    },

    getDataAnalysis() {
      this.echartsLoading = true;
      getDataAnalysis(
        this.addDateRange(
          {userId: this.userId, type: this.type, mediaId: this.mediaId},
          this.uploadDate,
          "statDate",
          "endDate"
        )
      ).then((response) => {
        this.echartsLoading = false;
        this.analysis = response.data;
        this.initEchart("echart", this.handlerEchartOption(response.data.list));
      });
    },

    /** 更多操作 */
    handleEdit(item, id) {
    },

    /** 查询字典类型列表 */
    getList() {
      this.loading = true;
      getSaleClueTaskList({...this.queryParams, userId: this.userId}).then(
        (response) => {
          console.log(response.data.rows);
          this.typeList = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.confirmLoading = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.dateFile = null;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams.uploadDate = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "上传报表";
    },

    changeHourType(e) {
      this.hourType = e;
      this.getGmvHour();
    },


    changeEchartsType(e) {
      if (!!e) {
        if (e == 'orderAmount') {
          this.echartsTwoType = 'validOrderAmount'
        }

        if (e == 'orderCount') {
          this.echartsTwoType = 'validOrderCount'
        }


        this.initEchart("echart", this.handlerEchartOption(this.analysis.list));
      } else {
        this.$message({
          message: "请选择类型",
          type: "error",
        });
      }
    },
    /** 获取echart的值 */
    initEchart(idName, optionName) {
      let that = this;
      const chart = this.$refs[idName];
      if (chart) {
        const myChart = echarts.init(document.getElementById(idName));
        myChart.setOption(optionName);
        window.addEventListener("resize", function () {
          that.clientWidth = document.documentElement.clientWidth - 224;
          myChart.resize();
        });
      }
    } /** echarts数据展示 订单统计*/,
    handlerEchartOption(data) {
      let option = {
          noDataLoadingOption: {
            text: "暂无数据",
            effect: "bubble",
            effectOption: {
              effect: {
                n: 0,
              },
            },
          },
          tooltip: {
            trigger: "axis"
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          legend: {
            icon: "circle",
            top: "5%",
            right: "5%",
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
              color: "#556677"
            },
          },
          xAxis: {
            type: "category",
            data: data.map((item) => {
              return item.date;
            }),
            boundaryGap: false,
            // 坐标轴线
            axisLine: {
              show: false,
              lineStyle: {
                color: "#999"
              },
            },
            // 分割线
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#e5e5e5"
              },
            },
          },

          yAxis: {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#999",
              },
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#e5e5e5",
              },
            },
          },
          series: [
            {
              smooth: true,
              name:
                this.echartsType == "orderAmount"
                  ? "销售额"
                  : this.echartsType == "orderCount"
                    ? "订单数"
                    : this.echartsType == "regimentalPromotionAmount"
                      ? "服务费"
                      : this.echartsType == "promoterCount"
                        ? "达人数"
                        : "",

              type: "line",
              stack: "总量",
              data: data.map((item) => {
                  if (
                    this.echartsType == "orderAmount" ||
                    this.echartsType == "regimentalPromotionAmount"
                    || this.echartsType == "validOrderAmount"
                  ) {
                    return (item[this.echartsType] / 100).toFixed(2);
                  } else {
                    return item[this.echartsType];
                  }
                }
              ),
              symbol: "circle",
              symbolSize: 6,
              lineStyle: {
                normal: {width: 2},
              },
              itemStyle: {
                borderColor: "#ffffff", borderWidth: 0,
              },
            },

            {
              smooth: true,
              name:
                this.echartsType == "orderAmount"
                  ? "有效额"
                  : this.echartsType == "orderCount"
                    ? "有效单数"
                    : "",

              type: "line",
              stack: "有效",
              data: data.map((item) => {
                  if (this.echartsType == "orderAmount") {
                    return (item[this.echartsTwoType] / 100).toFixed(2);
                  }
                  if (this.echartsType == 'orderCount') {
                    return item[this.echartsTwoType];
                  }
                }
              ),
              symbol: "circle",
              symbolSize: 6,
              lineStyle:
                {
                  normal: {
                    width: 2
                  },
                },
              itemStyle: {
                borderColor: "#ffffff",
                borderWidth: 0
              },
            },

            {
              smooth: true,
              showSymbol: false,
              name:
                this.echartsType == "orderAmount" || this.echartsType == "orderCount" ? "t-1有效率" : "",
              type: "line",
              stack: "实时率",
              data: data.map((item) => {
                  if (this.$store.getters.roles[0] == "supplyChainAdmin" || this.$store.getters.roles[0] == "admin") {
                    if (this.echartsType == "orderAmount") {
                      return item['validGmvRate'];
                    }
                    if (this.echartsType == "orderCount") {
                      return item['validOrderRate'];
                    }
                  }
                }
              ),
              symbol: "circle",
              symbolSize:
                6,
              lineStyle: {
                width: 0, // 线宽是0
                color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
              },
              itemStyle: {
                borderColor: "#ffffff",
                borderWidth: 0,
              },
            },

            {
              smooth: true,
              showSymbol: false,
              name:
                this.echartsType == "orderAmount" || this.echartsType == "orderCount" ? "实时有效率" : "",
              type: "line",
              stack: "率",
              data: data.map((item) => {
                  if (this.echartsType == "orderAmount" || this.echartsType == "orderCount") {
                    return (item[this.echartsTwoType] / item[this.echartsType] * 100).toFixed(2);
                  }
                }
              ),
              symbol: "circle",
              symbolSize:
                6,
              lineStyle: {
                width: 0, // 线宽是0
                color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
              },
              itemStyle: {
                borderColor: "#ffffff",
                borderWidth: 0,
              },
            },
          ],
        }
      ;
      return option;
    },
    toSamplingList(item) {
      localStorage.setItem("samplingType", item);
      this.$router.replace({
        path: "/goodsManagement/samplingList",
      });
    },
    toOrderDetail(item) {
      if (this.mediaId == 2) {
        this.$router.replace({
          path: "/supplyChain/kuaishou/goodsDetails",
          query: {
            id: item.itemId,
            name: item.itemTitle,
            orderStartDate: this.uploadDate[0],
            orderEndDate: this.uploadDate[1],
          },
        });
      }


      if (this.mediaId == 1) {
        this.$router.replace({
          path: "/supplyChain/bytedance/bytedanceGoodsDetails",
          query: {
            id: item.itemId,
            name: item.itemTitle,
            orderStartDate: this.uploadDate[0],
            orderEndDate: this.uploadDate[1],
          },
        });

      }


    },
    toOrderList() {
      if (this.mediaId == 2) {
        this.$router.replace({
          path: "/supplyChain/kuaishou/goods",
        });
      }


      if (this.mediaId == 1) {
        this.$router.replace({

          path: "/supplyChain/bytedance/bytedanceGoods",
        });
      }

    },
    toPersonDetail(item) {
      if (this.mediaId == 2) {
        this.$router.replace({
          path: "/supplyChain/kuaishou/indexDetails",
          query: {
            id: item.promoterId,
            name: item.promoterNickName,
            orderStartDate: this.uploadDate[0],
            orderEndDate: this.uploadDate[1],
          },
        });
      }


      if (this.mediaId == 1) {
        this.$router.replace({
          path: "/supplyChain/bytedance/bytedancePromoterDetail",
          query: {
            id: item.promoterId,
            name: item.promoterNickName,
            orderStartDate: this.uploadDate[0],
            orderEndDate: this.uploadDate[1],
          },
        });
      }


    },
    toPersonList() {
      if (this.mediaId == 2) {
        this.$router.replace({
          path: "/supplyChain/kuaishou/index",
        });
      }


      if (this.mediaId == 1) {
        this.$router.replace({
          path: "/supplyChain/bytedance/bytedancePromoterList",
        });
      }

    },
    indexMethod(index) {
      return index + 1 + (this.queryParams.pageNum - 1) * 10;
    },
    indexMethodTwo(index) {
      return index + 1 + (this.queryParams.promoterPageNum - 1) * 10;
    },
    getIndexPromoterRank() {
      this.promoterLoading = true;
      var dateType;
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let dd = date.getDate();
      dd = dd < 10 ? "0" + dd : dd;
      if (
        this.uploadDate[0] == `${y}-${MM}-${dd}` &&
        this.uploadDate[1] == `${y}-${MM}-${dd}`
      ) {
        dateType = 0;
        this.dateType = 0;
      } else {
        dateType = 1;
        this.dateType = 1;
      }
      getIndexPromoterRank(
        this.addDateRange(
          {
            dateType: dateType,
            pageNum: this.queryParams.promoterPageNum,
            pageSize: 10,
            mediaId: this.mediaId,
          },
          this.uploadDate,
          "orderStartDate",
          "orderEndDate"
        )
      ).then((response) => {
        this.promoterRankList = response.rows;
        this.promoterTotal = response.total;
        this.promoterLoading = false;
      });
    },
    getIndexOrderRank() {
      this.orderRankLoading = true;
      var dateType;
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let dd = date.getDate();
      dd = dd < 10 ? "0" + dd : dd;
      if (
        this.uploadDate[0] == `${y}-${MM}-${dd}` &&
        this.uploadDate[1] == `${y}-${MM}-${dd}`
      ) {
        dateType = 0;
        this.dateType = 0;
      } else {
        dateType = 1;
        this.dateType = 1;
      }
      getIndexOrderRank(
        this.addDateRange(
          {
            dateType: dateType,
            pageNum: this.queryParams.pageNum,
            pageSize: 10,
            mediaId: this.mediaId,
          },
          this.uploadDate,
          "orderStartDate",
          "orderEndDate"
        )
      ).then((response) => {
        this.orderRankList = response.rows;
        this.orderTotal = response.total;
        this.orderRankLoading = false;
      });
    },
    priceFormat(num, n) {
      n = n || 2;
      let symbol = ",";
      if (num === null) return num;
      if (typeof num !== "number") throw new TypeError("num参数应该是一个number类型");
      if (n < 0) throw new Error("参数n不应该小于0");
      let hasDot = parseInt(num) != num; //这里检测num是否为小数，true表示小数
      let m = n != undefined && n != null ? n : 1;
      num =
        m == 0
          ? num.toFixed(m) + "."
          : hasDot
            ? n
              ? num.toFixed(n)
              : num
            : num.toFixed(m);
      symbol = symbol || ",";
      num = num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function (match, p1, p2) {
        return p1 + symbol;
      });
      if (n == 0 || (!hasDot && !n)) {
        //如果n为0或者传入的num是整数并且没有指定整数的保留位数，则去掉前面操作中的小数位
        num = num.substring(0, num.indexOf("."));
      }
      return num;
    },

    hourEchartOption(todayList, yesterdayList, roi, timeData, lengthData) {
      var that = this
      if (!!yesterdayList) {
        let option = {
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              if (todayList[0].time == 0) {
                if (params.length > 1) {
                  return `${params[0].marker}今天${params[0].name}时：${params[0].value}<br/>
                            ${params[1].marker}昨天${params[1].name}时：${params[1].value}<br/>
                             ${params[2].marker}环比：${params[2].value}<br/>

`
                } else {
                  return `${params[0].marker}昨天${params[0].name}时: ${params[0].value}`
                }
              } else {
                return `${params[0].marker}${params[0].name}: ${params[0].value}<br/>
                            ${params[1].marker}${params[1].name}: ${params[1].value}`
              }
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              id: 0,
              type: 'category',
              boundaryGap: false,
              data:
                todayList.length == yesterdayList.length
                  ? todayList.map((item) => {
                    return item.time
                  })
                  : yesterdayList.map((item) => {
                    return item.time
                  }),
              position: 'bottom',
            },
            {
              id: 1,
              type: 'category',
              boundaryGap: false,
              data: yesterdayList.map((item) => {
                return item.time
              }),
              axisPointer: {
                type: 'none',
              },
              position: 'bottom',
              offset: 30,
            },
            {
              id: 2,
              type: 'category',
              boundaryGap: false,
              data: roi.map((item) => {
                return item.time
              }),
              axisPointer: {
                type: 'none',
              },
              position: 'bottom',
              offset: 30,
            },

          ],

          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '今天',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              xAxisIndex: 0,
              data:
                this.mediaDimension === 'a'
                  ? todayList.map((item) => {
                    return item.cost
                  })
                  : todayList.map((item) => {
                    return item.charge
                  }),

              lineStyle: {
                color: '#00BFFF',
                width: 2,
              },
              itemStyle: {
                color: '#00BFFF',
                borderWidth: 2,
                borderColor: '#00BFFF',
              },
              id: 0,
            },
            {
              id: 1,
              name: '昨天',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              xAxisIndex: 1,
              data:
                this.mediaDimension === 'a'
                  ? yesterdayList.map((item) => {
                    return item.cost
                  })
                  : yesterdayList.map((item) => {
                    return item.charge
                  }),

              lineStyle: {
                color: '#00FF7F',
                width: 2,
              },
              itemStyle: {
                color: '#00FF7F',
                borderWidth: 2,
                borderColor: '#00FF00',
              },
            },


            {
              id: 2,
              name: '环比',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              xAxisIndex: 1,
              data:
                this.mediaDimension === 'a'
                  ? roi.map((item) => {
                    return item.roi
                  })
                  : roi.map((item) => {
                    return item.roi
                  }),

              lineStyle: {
                width: 0, // 线宽是0
                color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
              },
              itemStyle: {
                borderColor: "#ffffff",
                borderWidth: 0,
              },
            },


          ],
        }
        return option
      } else {
        let optionTwo = {
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              // console.log(params)
              if (
                that.dataType == 3 &&
                moment(that.dateValue[0]).format('YYYY-MM-DD') ==
                moment(that.dateValue[1]).format('YYYY-MM-DD')
              ) {
                return `${params[0].marker}${params[0].name}时: ${params[0].value}`
              } else {
                return `${params[0].marker}${params[0].name}: ${params[0].value}`
              }
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              id: 0,
              type: 'category',
              boundaryGap: false,
              data: todayList.map((item) => {
                return item.time
              }),
              position: 'bottom',
            },
          ],

          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '今天',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              xAxisIndex: 0,
              data:
                this.dataType == 0
                  ? this.mediaDimension === 'a'
                    ? todayList.map((item) => {
                      return item.cost
                    })
                    : todayList.map((item) => {
                      return item.charge
                    })
                  : todayList.map((item) => {
                    return item.count
                  }),
              lineStyle: {
                color: '#00BFFF',
                width: 2,
              },
              itemStyle: {
                color: '#00BFFF',
                borderWidth: 2,
                borderColor: '#00BFFF',
              },
              id: 0,
            },
          ],
        }
        return optionTwo
      }
    },

  },
};
</script>

<style scoped lang="scss">
.top-class {
  text-align: left;
  font-family: cursive;
  font-size: 28px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;

  .top-left {
    flex: 1;
  }

  .top-right {
    flex: 1;
    display: flex;
    justify-content: end;
    font-size: 16px;
    font-family: none;
  }
}

.p-main-data {
  margin: 0;
}

.flex-class {
  display: flex;
  justify-content: space-between;
}

.top-sum {
  margin-bottom: 10px;

  ::v-deep .card-show {
    text-align: center;

    .p-title {
      width: 100%;
      font-size: 10px;
      color: darkgray;
      font-weight: bold;
    }

    .p-title-1 {
      width: 100%;
      font-size: 12px;
      color: darkgray;
      font-weight: bold;
      margin-right: 1px;
    }

    .p-main {
      width: 100%;
      font-size: 20px;
      font-weight: bold;
    }

    .like-a {
      color: cornflowerblue;
      cursor: pointer;
    }
  }
}

::v-deep .el-form-item__label {
  white-space: nowrap;
}
</style>
