<template>
  <div class="app-container">
    <div v-if="showOld == 1">
      <div style="margin-bottom: 15px">
        <el-date-picker
          v-model="uploadDate"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>

        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          style="margin-left: 15px"
        >搜索
        </el-button
        >
      </div>

      <el-row class="top-sum" :gutter="24">
        <el-col :span="12">
          <el-card shadow="never" class="card-show" v-loading="totalOneLoading">
            <div style="display: flex; width: 100%; margin-bottom: 15px">
              <div style="flex: 1">
                <p class="p-title">订单总数</p>
                <p class="p-main">{{ order.orderNum }}</p>
              </div>
              <div style="flex: 1">
                <p class="p-title">有效订单数</p>
                <p class="p-main">{{ order.validOrderNUm }}</p>
              </div>
              <div style="flex: 1">
                <p class="p-title">失效订单数</p>
                <p class="p-main">{{ order.invalidOrderNUm }}</p>
              </div>
            </div>

            <div style="display: flex; width: 100%">
              <div style="margin-right: 20px">
                <p class="p-main-data">
                  数据对比:<i
                  :style="ratioData.orderTotalRatio > 0 ? 'color:red' : 'color:green'"
                >{{ (ratioData.orderTotalRatio * 100).toFixed(2) + "%" }}</i
                >
                </p>
              </div>
              <div
                style="margin-right: 20px"
                :style="dateType == 0 ? '' : 'visibility: hidden'"
              >
                <p class="p-main-data">
                  周同比:<i :style="order.yearRatio > 0 ? 'color:red' : 'color:green'">{{
                    (order.yearRatio * 100).toFixed(2) + "%"
                  }}</i>
                </p>
              </div>
              <div :style="dateType == 0 ? '' : 'visibility: hidden'">
                <p class="p-main-data">
                  日环比:<i :style="order.ringRatio > 0 ? 'color:red' : 'color:green'"
                >{{ (order.ringRatio * 100).toFixed(2) + "%" }}
                </i>
                </p>
              </div>
            </div>
            <!-- ringRatio: 0, -->
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" class="card-show" v-loading="totalTwoLoading">
            <div style="display: flex; width: 100%; margin-bottom: 15px">
              <div style="flex: 1">
                <p class="p-title">订单金额</p>
                <p class="p-main">
                  {{ priceFormat(regimentalPromotion.regimentalPromotionAmount) }}
                </p>
              </div>
              <div style="flex: 1">
                <p class="p-title">累计货款基数</p>
                <p class="p-main">
                  {{ priceFormat(regimentalPromotion.personData) }}
                </p>
              </div>
              <div style="flex: 1">
                <p class="p-title">预估服务费</p>
                <p class="p-main">
                  {{ priceFormat(regimentalPromotion.complete) }}
                </p>
              </div>
            </div>
            <div style="display: flex; width: 100%">
              <div style="margin-right: 20px">
                <p class="p-main-data">
                  数据对比:<i
                  :style="ratioData.orderAmountRatio > 0 ? 'color:red' : 'color:green'"
                >{{ (ratioData.orderAmountRatio * 100).toFixed(2) + "%" }}</i
                >
                </p>
              </div>
              <div
                style="margin-right: 20px"
                :style="dateType == 0 ? '' : 'visibility: hidden'"
              >
                <p class="p-main-data">
                  周同比:
                  <i
                    :style="
                      regimentalPromotion.yearRatio > 0 ? 'color:red' : 'color:green'
                    "
                  >{{ (regimentalPromotion.yearRatio * 100).toFixed(2) + "%" }}
                  </i>
                </p>
              </div>
              <div :style="dateType == 0 ? '' : 'visibility: hidden'">
                <p class="p-main-data">
                  日环比:<i
                  :style="
                      regimentalPromotion.ringRatio > 0 ? 'color:red' : 'color:green'
                    "
                >{{ (regimentalPromotion.ringRatio * 100).toFixed(2) + "%" }}</i
                >
                </p>
              </div>
            </div>
            <!-- ringRatio: 0, -->
          </el-card>
        </el-col>
        <el-col :span="12" style="margin-top: 24px">
          <el-card shadow="never" class="card-show" v-loading="totalThreeLoading">
            <div style="display: flex; width: 100%; margin-bottom: 15px">
              <div style="flex: 1">
                <p class="p-title">达人总数</p>
                <p class="p-main">{{ taskNumber.noStarted }}</p>
              </div>
              <div style="flex: 1">
                <p class="p-title">发货数</p>
                <p class="p-main">{{ taskNumber.complete }}</p>
              </div>
              <div style="flex: 1">
                <p class="p-title">发货率</p>
                <p class="p-main">
                  {{
                    !!taskNumber.deliveryRadio
                      ? (taskNumber.deliveryRadio * 100).toFixed(2) + "%"
                      : "-"
                  }}
                </p>
              </div>
            </div>
            <div style="display: flex; width: 100%; visibility: hidden">
              <div style="margin-right: 20px">
                <p class="p-main-data">周同比:{{ order.yearRatio }}</p>
              </div>
              <div>
                <p class="p-main-data">日环比:{{ order.ringRatio }}</p>
              </div>
            </div>
            <!-- ringRatio: 0, -->
          </el-card>
        </el-col>
      </el-row>
      <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: 700px"
            v-loading="echartsLoading"
          >
            <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >订单统计</span
              >
              <el-select
                v-model="echartsType"
                placeholder="请选择类型"
                clearable
                style="width: 240px; float: right; padding: 3px 0"
                @change="changeEchartsType"
              >
                <el-option label="订单数" value="orderNum"/>
                <el-option label="有效订单数" value="validOrderNum"/>
                <el-option label="订单金额" value="orderAmount"/>
                <el-option label="货款基数" value="baseAmount"/>
                <el-option label="发货数" value="deliveryNum"/>
              </el-select>
            </div>
            <!-- <el-date-picker
            v-model="uploadDateEcharts"
            style="width: 240px; float: left"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="getAllEchartsData"
          ></el-date-picker> -->
            <div
              id="echart"
              ref="echart"
              style="height: 500px; width: 100%; margin-top: 50px"
            ></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"
            />
          </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"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>

    <staging v-else-if="showOld == 2"/>
    <operationHome v-else-if="showOld == 3"/>
    <jiaoyang v-else-if="showOld == 4"/>
    <industry v-else-if="showOld == 5"/>
  </div>
</template>

<script>
import {
  getIndexOrderInfo, //获取订单数据
  getIndexServiceAmountInfo, //获取服务费数据
  getIndexAmountInfo, //获取金额数据
  getIndexPromoterRank, //获取达人排行
  getIndexOrderRank, //获取商品排行
  getIndexStatistics, //echarts图表
  getTimeRatio, //时间段对比
} from "@/api/index";
import staging from "./staging.vue";
import jiaoyang from "./jiaoyang/jyDingPan.vue";
import industry from "./industry/industryHome.vue";
import operationHome from "./report/operationHome.vue";

var echarts = require("echarts");
export default {
  name: "Index",
  components: {
    staging,
    operationHome,
    jiaoyang,
    industry,
  },
  data() {
    return {
      showOld: 1,
      // 遮罩层
      loading: true,
      // 选中数组
      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,
        deliveryRadio: 0,
        noStarted: 0,
      },
      order: {
        orderNum: 0,
        validOrderNUm: 0,
        invalidOrderNUm: 0,
        ringRatio: 0,
        yearRatio: 0,
      },
      regimentalPromotion: {
        regimentalPromotionAmount: 0,
        personData: 0,
        complete: 0,
        ringRatio: 0,
        yearRatio: 0,
      },
      ratioData: {
        orderAmountRatio: 0,
        orderTotalRatio: 0,
      },
      userId: undefined,
      dateType: 0,
      uploadDate: [new Date(), new Date()],
      uploadDateEcharts: [new Date(), new Date()],
      orderRankList: [],
      orderRankLoading: false,
      orderTotal: 0,
      queryParams: {pageNum: 1, pageSize: 10, promoterPageNum: 1},
      promoterRankList: [],
      promoterLoading: false,
      promoterTotal: 0,
      totalOneLoading: false,
      totalTwoLoading: false,
      totalThreeLoading: false,
      echartsType: "orderNum",
      echartsLoading: false,
      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);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  filters: {},
  created() {
    this.userId = this.$store.getters.userId;
    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}`];

    let start = new Date();
    let end = new Date();

    let ey = end.getFullYear();
    let eMM = end.getMonth() + 1;
    eMM = eMM < 10 ? "0" + eMM : eMM;
    let edd = end.getDate();
    edd = edd < 10 ? "0" + edd : edd;

    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    let sy = start.getFullYear();
    let sMM = start.getMonth() + 1;
    sMM = sMM < 10 ? "0" + sMM : sMM;
    let sdd = start.getDate();
    sdd = sdd < 10 ? "0" + sdd : sdd;
    this.uploadDateEcharts = [`${sy}-${sMM}-${sdd}`, `${ey}-${eMM}-${edd}`];

    this.showOld =
      this.$store.getters.roles[0] == "admin" ||
      this.$store.getters.roles[0] == "courtshipManager" ||
      this.$store.getters.roles[0] == "courtship" ||
      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"
        ? 2
        : this.$store.getters.roles[0] == "operations" ||
        this.$store.getters.roles[0] == "operationsManager" ||
        this.$store.getters.roles[0] == "directorOperations" ||
        this.$store.getters.roles[0] == "operator"
          ? 3
          : this.$store.getters.roles[0] == "jy_bd_manage" ||
          this.$store.getters.roles[0] == "jy_bd" ||
          this.$store.getters.roles[0] == "jy_scissors_manage" ||
          this.$store.getters.roles[0] == "jy_admnin" ||
          this.$store.getters.roles[0] == "jy_scissors" ||
          this.$store.getters.roles[0] == "jy_out_operation" ||
          this.$store.getters.roles[0] == "jy_out_operation_manager" ||
          this.$store.getters.roles[0] == "jy_expert_business" ||
          this.$store.getters.roles[0] == "jy_expert_mentor"
            ? 4
            : this.$store.getters.roles[0] == "industry_sale_manager" ||
            this.$store.getters.roles[0] == "industry_sale" ||
            this.$store.getters.roles[0] == "industry_purchase" ||
            this.$store.getters.roles[0] == "industry_courtship_manager" ||
            this.$store.getters.roles[0] == "industry_courtship" ||
            this.$store.getters.roles[0] == "industry_purchase_manager" ||
            this.$store.getters.roles[0] == "industry_admin"
              ? 5

            : 1;
  },
  mounted() {
    if (this.showOld) {
      this.getIndexOrderInfo();
      this.getIndexServiceAmountInfo();
      this.getIndexAmountInfo();
      this.getIndexPromoterRank();
      this.getIndexOrderRank();
      this.getIndexStatistics();
      this.getTimeRatio();
    }
  },
  methods: {
    getAllEchartsData(e) {
      if (e.length == 2) {
        this.getIndexStatistics();
      } else {
        this.$message({
          message: "请选择时间",
          type: "error",
        });
      }
    },
    changeEchartsType(e) {
      console.log(e);
      if (!!e) {
        this.getIndexStatistics();
      } else {
        this.$message({
          message: "请选择类型",
          type: "error",
        });
      }
    },
    getIndexStatistics() {
      this.echartsLoading = true;
      getIndexStatistics({
        type: this.echartsType,
        orderStartDate: this.uploadDate[0],
        orderEndDate: this.uploadDate[1],
      }).then((response) => {
        this.echartsLoading = false;
        this.initEchart("echart", this.handlerEchartOption(response, this.echartsType));
      });
    },
    /** 获取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, typeShow) {
      var typeName;
      switch (typeShow) {
        case "orderNum":
          typeName = "订单数";
          break;
        case "validOrderNum":
          typeName = "有效订单数";
          break;
        case "orderAmount":
          typeName = "订单金额";
          break;
        case "baseAmount":
          typeName = "货款基数";
          break;
        case "deliveryNum":
          typeName = "发货数";
          break;
      }
      let option = {
        noDataLoadingOption: {
          text: "暂无数据",
          effect: "bubble",
          effectOption: {
            effect: {
              n: 0,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          // formatter: function(params) {
          // 	if(typeShow == 'play_duration_3s'){
          // 		return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
          // 	}else{
          // 		return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
          // 	}

          // },
        },
        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: typeName,

            type: "line",
            stack: "总量",
            data: data.map((item) => {
              return item[typeShow];
            }),
            symbol: "circle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                width: 2,
              },
            },
            itemStyle: {
              borderColor: "#ffffff",
              borderWidth: 0,
            },
          },
        ],
      };
      return option;
    },
    getTimeRatio() {
      getTimeRatio(
        this.addDateRange({}, this.uploadDate, "orderStartDate", "orderEndDate")
      ).then((response) => {
        this.ratioData = {
          orderAmountRatio: response.orderAmountRatio,
          orderTotalRatio: response.orderTotalRatio,
        };
      });
    },
    /** 获取订单数据 */
    getIndexOrderInfo() {
      this.totalOneLoading = true;
      getIndexOrderInfo(
        this.addDateRange(
          {dateType: this.dateType},
          this.uploadDate,
          "orderStartDate",
          "orderEndDate"
        )
      ).then((response) => {
        this.totalOneLoading = false;
        this.order = {
          orderNum: response.orderTotal.orderNum,
          validOrderNUm: response.orderTotal.validOrderNUm,
          invalidOrderNUm: response.orderTotal.invalidOrderNUm,
          ringRatio: this.dateType == 0 ? response.ratio.ringRatio : 0,
          yearRatio: this.dateType == 0 ? response.ratio.yearRatio : 0,
        };
      });
    },

    getIndexServiceAmountInfo() {
      this.totalThreeLoading = true;
      getIndexServiceAmountInfo(
        this.addDateRange(
          {dateType: this.dateType},
          this.uploadDate,
          "orderStartDate",
          "orderEndDate"
        )
      ).then((response) => {
        this.totalThreeLoading = false;
        this.taskNumber = {
          complete: response.serviceAmountTotal.deliveryNum,
          noStarted: response.serviceAmountTotal.promoterNum,
          deliveryRadio: response.serviceAmountTotal.deliveryRadio,
        };
      });
    },
    getIndexAmountInfo() {
      this.totalTwoLoading = true;
      getIndexAmountInfo(
        this.addDateRange(
          {dateType: this.dateType},
          this.uploadDate,
          "orderStartDate",
          "orderEndDate"
        )
      ).then((response) => {
        this.totalTwoLoading = false;
        this.regimentalPromotion = {
          regimentalPromotionAmount: response.amountTotal.orderAmount / 100,
          personData: response.amountTotal.baseAmount / 100,
          complete: response.amountTotal.regimentalPromotionAmount / 100,
          ringRatio: this.dateType == 0 ? response.amountRatio.amountRingRatio : 0,
          yearRatio: this.dateType == 0 ? response.amountRatio.amountYearRatio : 0,
        };
      });
    },
    getIndexPromoterRank() {
      this.promoterLoading = true;
      getIndexPromoterRank(
        this.addDateRange(
          {
            dateType: this.dateType,
            pageNum: this.queryParams.promoterPageNum,
            pageSize: 10,
          },
          this.uploadDate,
          "orderStartDate",
          "orderEndDate"
        )
      ).then((response) => {
        this.promoterRankList = response.rows;
        this.promoterTotal = response.total;
        this.promoterLoading = false;
      });
    },
    getIndexOrderRank() {
      this.orderRankLoading = true;
      getIndexOrderRank(
        this.addDateRange(
          {
            dateType: this.dateType,
            pageNum: this.queryParams.pageNum,
            pageSize: 10,
          },
          this.uploadDate,
          "orderStartDate",
          "orderEndDate"
        )
      ).then((response) => {
        this.orderRankList = response.rows;
        this.orderTotal = response.total;
        this.orderRankLoading = false;
      });
    },
    indexMethod(index) {
      return index + 1 + (this.queryParams.pageNum - 1) * 10;
    },
    indexMethodTwo(index) {
      return index + 1 + (this.queryParams.promoterPageNum - 1) * 10;
    },
    toOrderDetail(item) {
      this.$router.replace({
        path: "/supplyChain/kuaishou/goodsDetails",
        query: {
          id: item.itemId,
          name: item.itemTitle,
          orderStartDate: this.uploadDate[0],
          orderEndDate: this.uploadDate[1],
        },
      });
    },
    toOrderList() {
      this.$router.replace({
        path: "/supplyChain/kuaishou/goods",
      });
    },
    toPersonDetail(item) {
      this.$router.replace({
        path: "/supplyChain/kuaishou/indexDetails",
        query: {
          id: item.promoterId,
          name: item.promoterNickName,
          orderStartDate: this.uploadDate[0],
          orderEndDate: this.uploadDate[1],
        },
      });
    },
    toPersonList() {
      this.$router.replace({
        path: "/supplyChain/kuaishou/index",
      });
    },
    handleQuery() {
      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.length == 2) {
        if (
          this.uploadDate[0] == `${y}-${MM}-${dd}` &&
          this.uploadDate[1] == `${y}-${MM}-${dd}`
        ) {
          this.dateType = 0;
        } else {
          this.dateType = 1;
        }
        this.queryParams.promoterPageNum = 1;
        this.queryParams.pageNum = 1;
        this.getIndexOrderInfo();
        this.getIndexServiceAmountInfo();
        this.getIndexAmountInfo();
        this.getIndexPromoterRank();
        this.getIndexOrderRank();
        this.getIndexStatistics();
        this.getTimeRatio();
      } else {
        this.$message({
          message: "请选择时间",
          type: "error",
        });
      }
    },
    /** 金额格式化 */
    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;
    },
  },
};
</script>

<style scoped lang="scss">
.top-sum {
  margin-bottom: 15px;

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

    .p-title {
      width: 100%;
      font-size: 16px;
      color: darkgray;
      text-align: left;
    }

    .p-main {
      width: 100%;
      font-size: 22px;
      font-weight: bold;
      text-align: left;
    }

    .p-main-data {
      width: 100%;
      color: darkgray;
      font-size: 14px;
      text-align: left;
      margin: 0;
    }
  }
}

::v-deep .el-form-item__label {
  white-space: nowrap;
}

::v-deep a {
  color: #409eff;
  display: block;
}
</style>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
