<template xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
  <div>
    <el-row class="top-sum">
      <el-col :span="24">
        <el-card shadow="never" class="top-sum">
          <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" style="margin-left: 15px" icon="el-icon-search" size="mini" @click="handleQuery"
            >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

          </div>
          <div v-loading="totalOneLoading">
            <el-row class="top-sum" style="display: flex" v-if="!!orderData">
              <el-col :span="7">
                <el-card shadow="never" class="card-show" style="height: 150px">
                  <p class="p-title">订单量</p>
                  <p class="p-main">{{ orderData.orderNum }}</p>
                  <div style="display: flex; width: 100%">
                    <p class="p-title-1">
                      环比: <i :style="orderData.orderNumRate > 0 ? 'color:red' : 'color:green'"
                    >{{ (orderData.orderNumRate) + "%" }}
                    </i>
                    </p>
                    <p class="p-title-1">自营:{{ orderData.zyOrderNUm }}</p>
                    <p class="p-title-1">分销:{{ orderData.fxOrderNUm }}</p>

                  </div>
                </el-card>
              </el-col>
              <el-col :span="7">
                <el-card shadow="never" class="card-show" style="height: 150px">
                  <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="color: red"
                    >{{ (orderData.validRadio) + "%" }}
                    </i>
                    </p>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="8">
                <el-card shadow="never" class="card-show" style="height: 150px">
                  <p class="p-title">销售额</p>
                  <p class="p-main">{{ orderData.payAmount }}</p>
                  <div style="display: flex; width: 100%">
                    <p class="p-title-1">
                      环比: <i :style="orderData.payAmountRate > 0 ? 'color:red' : 'color:green'"
                    >{{ (orderData.payAmountRate) + "%" }}
                    </i>
                    </p>
                    <p class="p-title-1">自营:{{ (orderData.zyPayAmount) + "w" }}</p>
                    <p class="p-title-1">分销:{{ (orderData.fxPayAmount) + "w" }}</p>

                  </div>
                </el-card>
              </el-col>

              <el-col :span="7">
                <el-card shadow="never" class="card-show" style="height: 150px">
                  <p class="p-title">有效销售额</p>
                  <p class="p-main">{{ orderData.validPayAmount }}</p>
                  <div style="display: flex; width: 100%">
                    <p class="p-title-1">
                      有效率: <i style="color: red"
                    >{{ (orderData.validPayAmountRadio) + "%" }}
                    </i>
                    </p>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <el-row class="top-sum" style="display: flex" v-if="!!orderData">
              <el-col :span="7">
                <el-card shadow="never" class="card-show" style="height: 150px">
                  <p class="p-title">发货数</p>
                  <p class="p-main">{{ orderData.deliveryNum }}</p>
                  <div style="display: flex; width: 100%">
                    <p class="p-title-1">未发货数:{{ (orderData.notDeliveryNum) }}</p>
                    <p class="p-title-1">
                      发货率:<i style="color: red"
                    >{{ (orderData.deliveryRadio) + "%" }}
                    </i>
                    </p>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="7">
                <el-card shadow="never" class="card-show" style="height: 150px">
                  <p class="p-title">出单商品数</p>
                  <p class="p-main">{{ orderData.itemCount }}</p>
                  <div style="display: flex; width: 100%">
                    <p class="p-title-1">新增商品:{{ (orderData.addItemCount) }}</p>
                    <p class="p-title-1">出单达人:{{ (orderData.promoterCount) }}</p>
                    <p class="p-title-1">新增达人:{{ (orderData.addPromoterCount) }}</p>
                  </div>


                </el-card>
              </el-col>

              <el-col :span="8">
                <el-card shadow="never" class="card-show" style="height: 150px">
                  <p class="p-title">预估收入</p>
                  <p class="p-main"
                     v-if="this.$store.getters.roles[0] == 'jy_admnin' || this.$store.getters.roles[0] == 'admin'|| this.$store.getters.roles[0] == 'jy_out_operation'  ">
                    {{ orderData.regimentalPromotionAmount }}</p>
                  <p class="p-main" v-else>-</p>
                  <div style="display: flex; width: 100%">
                    <p class="p-title-1"
                       v-if="this.$store.getters.roles[0] == 'jy_admnin'  || this.$store.getters.roles[0] == 'admin' || this.$store.getters.roles[0] == 'jy_out_operation'">
                      环比:<i
                      :style="orderData.regimentalPromotionAmountRate > 0 ? 'color:red' : 'color:green'">{{
                        (orderData.regimentalPromotionAmountRate) + "%"
                      }}</i></p>
                    <p class="p-title-1" v-else> 环比:0% </p>
                    <p class="p-title-1"
                       v-if="this.$store.getters.roles[0] == 'jy_admnin' || this.$store.getters.roles[0] == 'admin' ">
                      自营:{{ (orderData.zyRegimentalPromotionAmount) }}</p>
                    <p class="p-title-1" v-else>自营: 0%</p>
                    <p class="p-title-1"
                       v-if="this.$store.getters.roles[0] == 'jy_admnin' || this.$store.getters.roles[0] == 'admin'  || this.$store.getters.roles[0] == 'jy_out_operation'">
                      分销:{{ (orderData.fxRegimentalPromotionAmount) }}</p>
                    <p class="p-title-1" v-else>分销:0%</p>
                  </div>
                </el-card>
              </el-col>

              <el-col :span="7">
                <el-card shadow="never" class="card-show" style="height: 150px">
                  <p class="p-title">毛利</p>
                  <p class="p-main"
                     v-if="this.$store.getters.roles[0] == 'jy_admnin'  || this.$store.getters.roles[0] == 'admin'">
                    {{ (orderData.grossMargin) + '%' }}</p>
                  <p class="p-main" v-else>-</p>
                  <div style="display: flex; width: 100%">
                    <p class="p-title-1"
                       v-if="this.$store.getters.roles[0] == 'jy_admnin'  || this.$store.getters.roles[0] == 'admin'">
                      环比:<i
                      :style="orderData.grossMarginRate > 0 ? 'color:red' : 'color:green'">{{
                        (orderData.grossMarginRate) + "%"
                      }}</i></p>
                    <p class="p-title-1" v-else>
                      <i>
                        环比:0%
                      </i>
                    </p>
                    <p class="p-title-1"
                       v-if="this.$store.getters.roles[0] == 'jy_admnin'  || this.$store.getters.roles[0] == 'admin'">
                      自营:{{ (orderData.zyGrossMargin) + "%" }}</p>
                    <p class="p-title-1" v-else>自营:0%</p>
                    <p class="p-title-1"
                       v-if="this.$store.getters.roles[0] == 'jy_admnin'  || this.$store.getters.roles[0] == 'admin'">
                      分销:{{ (orderData.fxGrossMargin) + "%" }}</p>
                    <p class="p-title-1" v-else>分销:0%</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row class="top-sum">
      <el-col :span="24">

        <el-card shadow="never" class="card-show" v-loading="echartsLoading" style="height: 450px">
          <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >数据分析</span
              >
          </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.orderNum
                    }}
                  </p>
                  <div style=" width: 100%">
                    <p class="p-title-1">
                      环比：<i :style="analysis.orderNumRate > 0 ? 'color:red' : 'color:green'"
                    >{{ (analysis.orderNumRate) + '%' }}
                    </i>
                    </p>
                  </div>

                </div>
                <div style="width: 150px; text-align: left" class="card-show">
                  <p class="p-title">有效</p>
                  <p class="p-main">
                    {{ analysis.validOrderNUm }}
                  </p>

                </div>
                <div style="width: 150px; text-align: left" class="card-show">
                  <p class="p-title">有效率</p>
                  <p class="p-main">
                    {{ (analysis.validRadio) + '%' }}
                  </p>
                </div>

              </div>
              <div class="flex-class top-sum">
                <div style="width: 150px; text-align: left" class="card-show">
                  <p class="p-title">月GMV</p>
                  <p class="p-main">
                    {{
                      (analysis.payAmount >= 0
                        ? priceFormat(analysis.payAmount / 10000)
                        : 0) + 'w'
                    }}
                  </p>
                  <div style=" width: 100%">
                    <p class="p-title-1">
                      环比：<i :style="analysis.payAmountRate > 0 ? 'color:red' : 'color:green'"
                    >{{ (analysis.payAmountRate) + '%' }}
                    </i>
                    </p>
                  </div>
                </div>
                <div style="width: 150px; text-align: left" class="card-show">
                  <p class="p-title">有效GMV</p>
                  <p class="p-main">
                    {{
                      (analysis.validPayAmount >= 0
                        ? priceFormat(analysis.validPayAmount / 10000)
                        : 0) + 'w'
                    }}
                  </p>
                </div>
                <div style="width: 150px; text-align: left" class="card-show">
                  <p class="p-title">有效率</p>
                  <p class="p-main">
                    {{ (analysis.validPayAmountRadio) + '%' }}
                  </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.deliveryNum }}
                  </p>
                </div>
                <div style="width: 150px; text-align: left" class="card-show">
                  <p class="p-title">达人数</p>
                  <p class="p-main">
                    {{ analysis.promoterCount }}
                  </p>
                </div>
                <div style="width: 150px; text-align: left" class="card-show">
                  <p class="p-title">商品数</p>
                  <p class="p-main">
                    {{ analysis.itemCount }}
                  </p>
                </div>


              </div>
            </div>
          </div>
        </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: 300px"
          v-loading="hourEchartsLoading"
        >
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; font-weight: bold; float: left">分时数据</span>
          </div>
          <div
            id="hourEchart"
            ref="hourEchart"
            style="height: 280px; width: 100%;"
          ></div>
        </el-card>
      </el-col>
    </el-row>


    <el-card
      v-if="this.$store.getters.roles[0] == 'jy_admnin' || this.$store.getters.roles[0] == 'admin' || this.$store.getters.roles[0] == 'jy_expert_mentor'"
      shadow="never"
      class="card-show"
      style="width: 100%; max-height: 380px"
      v-loading="tuiGuangLoading"
    >
      <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >分推广者</span
              >
      </div>

      <el-table
        :data="tuiGuangList"
        ref="multipleTable"
        max-height="380px"
      >

        <el-table-column
          label="推广者ID"
          align="center"
          prop="promotionId"

        >
        </el-table-column>
        <el-table-column
          label="推广者名称"
          align="center"
          prop="promotionNickName"
          width="120px"
        >
          <template slot-scope="scope">
            {{ scope.row.promotionNickName }}
          </template>
        </el-table-column>

        <el-table-column
          label="订单量"
          align="center"
          prop="orderNum"

        >
          <template slot-scope="scope">
            {{
              scope.row.orderNum
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="环比"
          align="center"
          prop="orderNumRate"
        >
          <template slot-scope="scope">
            <i v-if="scope.row.orderNumRate" :style=" scope.row.orderNumRate > 0 ? 'color:red' : 'color:green'"
            >{{ (scope.row.orderNumRate) + "%" }} </i>
            <i v-else>
              -
            </i>

          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"

        >
          <template slot-scope="scope">
            {{
              scope.row.validRadio
                ? (scope.row.validRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv"
          align="center"
          prop="payAmount"

        >
          <template slot-scope="scope">
            {{
              scope.row.payAmount
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv有效率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.validPayAmountRadio
                ? (scope.row.validPayAmountRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="发货率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.deliveryRadio
                ? (scope.row.deliveryRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="达人数"
          align="center"
          prop="promoterCount"
        >
        </el-table-column>

        <el-table-column
          label="商品数"
          align="center"
          prop="itemCount"

        >
        </el-table-column>

      </el-table>
    </el-card>


    <el-card
      v-if="this.$store.getters.roles[0] == 'jy_admnin' || this.$store.getters.roles[0] == 'admin' || this.$store.getters.roles[0] == 'jy_expert_mentor'"
      shadow="never"
      class="card-show"
      style="width: 100%; max-height: 380px"
      v-loading="mentorBusinessLoading"
    >
      <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >分导师/商务</span
              >
      </div>

      <el-table
        :data="mentorBusinessList"
        ref="multipleTable"
        max-height="380px"
      >

        <el-table-column
          label="姓名"
          align="center"
          prop="userName"

        >
          <template slot-scope="scope">
            <el-button
              style="text-align: center;"
              type="text"
              @click="getTeamDetail(2,scope.row.userId,scope.row.userName,scope.row.type)">
              {{
                scope.row.userName
              }}
            </el-button>
          </template>

        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="promotionNickName"
          width="120px"
        >
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>

        <el-table-column
          label="人数"
          align="center"
          prop="teamCount"
          width="120px"
        >
          <template slot-scope="scope">
            {{ scope.row.teamCount }}
          </template>
        </el-table-column>

        <el-table-column
          label="订单量"
          align="center"
          prop="orderNum"

        >
          <template slot-scope="scope">
            {{
              scope.row.orderNum
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="环比"
          align="center"
          prop="orderNumRate"
        >
          <template slot-scope="scope">
            <i v-if="scope.row.orderNumRate" :style=" scope.row.orderNumRate > 0 ? 'color:red' : 'color:green'"
            >{{ (scope.row.orderNumRate) + "%" }} </i>
            <i v-else>
              -
            </i>

          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"

        >
          <template slot-scope="scope">
            {{
              scope.row.validRadio
                ? (scope.row.validRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv"
          align="center"
          prop="payAmount"

        >
          <template slot-scope="scope">
            {{
              scope.row.payAmount
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv有效率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.validPayAmountRadio
                ? (scope.row.validPayAmountRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="发货率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.deliveryRadio
                ? (scope.row.deliveryRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="达人数"
          align="center"
          prop="promoterCount"
        >
        </el-table-column>

        <el-table-column
          label="商品数"
          align="center"
          prop="itemCount"

        >
        </el-table-column>

        <el-table-column
          label="新增商品"
          align="center"
          prop="addItemCount"

        >
          <template slot-scope="scope">
            <el-button
              style="text-align: center; padding: 3px 0"
              type="text"
              @click="getItemDetail(scope.row,3)">
              {{
                scope.row.addItemCount
              }}
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>


    <el-card
      v-if="this.$store.getters.roles[0] != 'jy_scissors'  && this.$store.getters.roles[0] != 'jy_bd' && this.$store.getters.roles[0] != 'jy_out_operation'"
      shadow="never"
      class="card-show"
      style="width: 100%; max-height: 420px"
      v-loading="teamLoading"
    >
      <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >分团队数据</span
              >
      </div>

      <el-table
        :data="teamList"
        ref="multipleTable"
        max-height="420px"
      >

        <el-table-column
          label="团队"
          align="center"
          prop="deptName"

        >
          <template slot-scope="scope">
            <el-button
              style="text-align: center; padding: 3px 0"
              type="text"
              @click="getTeamDetail(1,scope.row.deptId,scope.row.deptName,null)">
              {{
                scope.row.deptName
              }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="负责人"
          align="center"
          prop="leaderName"

        />

        <el-table-column
          label="人数"
          align="center"
          prop="teamMember"

        />

        <el-table-column
          label="订单量"
          align="center"
          prop="orderNum"

        >
          <template slot-scope="scope">
            {{
              scope.row.orderNum
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="环比"
          align="center"
          prop="orderNumRate"

        >
          <template slot-scope="scope">
            <i v-if="scope.row.orderNumRate" :style=" scope.row.orderNumRate > 0 ? 'color:red' : 'color:green'"
            >{{ (scope.row.orderNumRate) + "%" }} </i>
            <i v-else>
              -
            </i>

          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"

        >
          <template slot-scope="scope">
            {{
              scope.row.validRadio
                ? (scope.row.validRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv"
          align="center"
          prop="payAmount"

        >
          <template slot-scope="scope">
            {{
              scope.row.payAmount
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv有效率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.validPayAmountRadio
                ? (scope.row.validPayAmountRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="发货率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.deliveryRadio
                ? (scope.row.deliveryRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="达人数"
          align="center"
          prop="promoterCount"
        >
        </el-table-column>


        <el-table-column
          label="新增达人"
          align="center"
          prop="addPromoterCount"
        >
        </el-table-column>

        <el-table-column
          label="商品数"
          align="center"
          prop="itemCount"

        >
        </el-table-column>

        <el-table-column
          label="新增商品"
          align="center"
          prop="addItemCount"
        >
          <template slot-scope="scope">
            <el-button
              style="text-align: center; padding: 3px 0"
              type="text"
              @click="getItemDetail(scope.row,1)">
              {{
                scope.row.addItemCount
              }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


    <el-card
      v-if="this.$store.getters.roles[0] == 'jy_scissors' || this.$store.getters.roles[0] == 'jy_bd' || this.$store.getters.roles[0] == 'jy_out_operation'"
      shadow="never"
      class="card-show"
      style="width: 100%; max-height: 600px"
      v-loading="peopleLoading"
    >
      <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >分组员数据</span
              >
      </div>

      <el-table
        :data="peopleList"
        ref="multipleTable"
        max-height="600px"
      >
        <el-table-column
          label="姓名"
          align="center"
          prop="userName"

        ></el-table-column>

        <el-table-column
          label="团队"
          align="center"
          prop="deapName"

        >
          <template slot-scope="scope">
            {{
              scope.row.deapName
            }}
          </template>

        </el-table-column>
        <el-table-column
          label="负责人"
          align="center"
          prop="leaderName"

        />

        <el-table-column
          label="订单量"
          align="center"
          prop="orderNum"

        >
          <template slot-scope="scope">
            {{
              scope.row.orderNum
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="环比"
          align="center"
          prop="orderNumRate"

        >
          <template slot-scope="scope">
            <i v-if="scope.row.orderNumRate" :style=" scope.row.orderNumRate > 0 ? 'color:red' : 'color:green'"
            >{{ (scope.row.orderNumRate) + "%" }} </i>
            <i v-else>
              -
            </i>

          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"

        >
          <template slot-scope="scope">
            {{
              scope.row.validRadio
                ? (scope.row.validRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv"
          align="center"
          prop="payAmount"

        >
          <template slot-scope="scope">
            {{
              scope.row.payAmount
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv有效率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.validPayAmountRadio
                ? (scope.row.validPayAmountRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="发货率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.deliveryRadio
                ? (scope.row.deliveryRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="达人数"
          align="center"
          prop="promoterCount"
        >
        </el-table-column>


        <el-table-column
          label="新增达人"
          align="center"
          prop="addPromoterCount"
        >
        </el-table-column>

        <el-table-column
          label="商品数"
          align="center"
          prop="itemCount"

        >
        </el-table-column>

        <el-table-column
          label="新增商品"
          align="center"
          prop="addItemCount"

        >
          <template slot-scope="scope">
            <el-button
              style="text-align: center; padding: 3px 0"
              type="text"
              @click="getItemDetail(scope.row,2)">
              {{
                scope.row.addItemCount
              }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


    <el-card
      shadow="never"
      class="card-show"
      style="width: 100%; max-height: 600px"
      v-loading="promoterLoading"
    >
      <div slot="header" class="clearfix">
        <span style="font-size: 16px; font-weight: bold; float: left">分达人数据</span>


        <el-radio-group v-model="selectPromoterType" style="float: right" size="mini" @change="changePromoterType()">
          <el-radio-button label="0">全部</el-radio-button>
          <el-radio-button label="1">自营</el-radio-button>
          <el-radio-button label="2">分销</el-radio-button>
        </el-radio-group>

      </div>
      <el-table
        :data="promoterList"
        ref="multipleTable"
        max-height="600px"
      >
        <el-table-column
          label="达人信息"
          align="center"
          prop="itemTitle"
          width="240"
        >


          <template slot-scope="scope">
            <div style="display: flex; width: 100%">
              <div style="width: 40%">
                <img
                  :src="scope.row.promoterUrl"
                  alt=""
                  style="width: 70px; height: auto"
                />
              </div>
              <div style="width: 60%" class="item-name-calss">
                <p>
                  Id:{{ scope.row.clipUserId }}

                </p>
                <p
                  style="
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 100%;
                  "
                  :title="scope.row.clipNickName">
                  <el-button
                    style="text-align: center; padding: 3px 0"
                    type="text"
                    @click="getItemOrPromoterDetail(1,scope.row)">
                    {{ scope.row.clipNickName }}
                  </el-button>
                </p>
              </div>
            </div>
          </template>
        </el-table-column>


        <el-table-column
          label="归属"
          align="center"
          prop="userName">
        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="promoterType">
        </el-table-column>

        <el-table-column
          v-if=" this.$store.getters.roles[0] == 'jy_admnin' || this.$store.getters.roles[0] == 'admin'"
          label="毛利"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.grossMargin
                ? (scope.row.grossMargin).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="订单量"
          align="center"
          prop="orderNum"

        >
          <template slot-scope="scope">
            {{
              scope.row.orderNum
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="环比"
          align="center"
          prop="orderNumRate"

        >
          <template slot-scope="scope">
            <i v-if="scope.row.orderNumRate" :style=" scope.row.orderNumRate > 0 ? 'color:red' : 'color:green'"
            >{{ (scope.row.orderNumRate) + "%" }} </i>
            <i v-else>
              -
            </i>

          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"

        >
          <template slot-scope="scope">
            {{
              scope.row.validRadio
                ? (scope.row.validRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv"
          align="center"
          prop="payAmount"

        >
          <template slot-scope="scope">
            {{
              scope.row.payAmount
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.validPayAmountRadio
                ? (scope.row.validPayAmountRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="发货率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.deliveryRadio
                ? (scope.row.deliveryRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="出单商品"
          align="center"
          prop="itemCount"
        >
        </el-table-column>

        <el-table-column
          label="新增商品"
          align="center"
          prop="addItemCount"

        >
          <template slot-scope="scope">
            <el-button
              style="text-align: center; padding: 3px 0"
              type="text"
              @click="getItemDetail(scope.row,4)">
              {{
                scope.row.addItemCount
              }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="新上视频"
          align="center"
          prop="videoCount"
        >
          <template slot-scope="scope">
            <el-button
              style="text-align: center; padding: 3px 0"
              type="text"
              @click="getVideoDetail(scope.row)">
              {{
                scope.row.videoCount
              }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


    <el-card
      shadow="never"
      class="card-show"
      style="width: 100%; max-height: 600px"
      v-loading="itemLoading"
    >
      <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >分商品数据</span
              >
      </div>

      <el-table
        :data="itemList"
        ref="multipleTable"
        max-height="600px"
      >

        <el-table-column
          label="商品信息"
          align="center"
          prop="itemTitle"
          width="260"
        >
          <template slot-scope="scope">
            <div style="display: flex; width: 100%">
              <div style="width: 40%">
                <img
                  :src="scope.row.imageUrl"
                  alt=""
                  style="width: 70px; height: auto"
                />
              </div>
              <div style="width: 60%" class="item-name-calss">
                <p>Id: {{ scope.row.itemId }}</p>
                <p
                  style="
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 100%;
                  "
                  :title="scope.row.itemTitle">
                  <el-button
                    style="text-align: center; padding: 3px 0"
                    type="text"
                    @click="getItemOrPromoterDetail(2,scope.row)">
                    {{ scope.row.itemTitle }}
                  </el-button>
                </p>


              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if=" this.$store.getters.roles[0] == 'jy_admnin' || this.$store.getters.roles[0] == 'admin'"
          label="毛利"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.grossMargin
                ? (scope.row.grossMargin).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="订单量"
          align="center"
          prop="orderNum"

        >
          <template slot-scope="scope">
            {{
              scope.row.orderNum
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="环比"
          align="center"
          prop="orderNumRate"

        >
          <template slot-scope="scope">
            <i v-if="scope.row.orderNumRate" :style=" scope.row.orderNumRate > 0 ? 'color:red' : 'color:green'"
            >{{ (scope.row.orderNumRate) + "%" }} </i>
            <i v-else>
              -
            </i>

          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"

        >
          <template slot-scope="scope">
            {{
              scope.row.validRadio
                ? (scope.row.validRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv"
          align="center"
          prop="payAmount"

        >
          <template slot-scope="scope">
            {{
              scope.row.payAmount
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv有效率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.validPayAmountRadio
                ? (scope.row.validPayAmountRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="发货率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.deliveryRadio
                ? (scope.row.deliveryRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="出单达人数"
          align="center"
          prop="promoterCount"
        >
        </el-table-column>
      </el-table>
    </el-card>


    <!--弹框-->
    <el-dialog
      :destroy-on-close="true"
      title="新增商品详情"
      :visible.sync="itemDetailVisible"
      width="1000px"
      :close-on-click-modal="false"
      @close='closeDialog'
    >
      <el-table
        v-loading="bulletFrameLoading"
        :data="addItemList"
        ref="multipleItemTable"
        style="width: 100%"
        max-height="600px"
      >
        <el-table-column
          label="商品信息"
          align="left"
          prop="itemTitle"
          width="300"
        >
          <template slot-scope="scope">
            <div style="display: flex; width: 100%">
              <div style="width: 40%">
                <img
                  :src="scope.row.image_url"
                  alt=""
                  style="width: 80px; height: auto"
                />
              </div>
              <div style="width: 60%" class="item-name-calss">
                <p>商品Id:{{ scope.row.itemId }}</p>
                <p
                  style="
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 100%;
                  "
                  :title="scope.row.itemTitle">
                  标题:{{ scope.row.itemTitle }}
                </p>

              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" prop="regimentalPromotionRate">
          <template slot-scope="scope">
            {{ scope.row.reserve_price }}
          </template>
        </el-table-column>
        <el-table-column
          label="首次出单日期"
          align="center"
          prop="firstOrderTime"
        >
        </el-table-column>
      </el-table>
    </el-dialog>


    <!-- 新上视频弹框-->
    <el-dialog
      :destroy-on-close="true"
      title="新上视频详情"
      :visible.sync="videoDetailVisible"
      width="1000px"
      :close-on-click-modal="false"
      @close='closeDialog'
    >
      <el-table
        v-loading="bulletFrameLoading"
        :data="videoList"
        ref="multipleItemTable"
        style="width: 100%"
        max-height="600px"
      >
        <el-table-column
          label="视频信息"
          align="left"
          prop="itemTitle"
          width="300"
        >
          <template slot-scope="scope">
            <div style="display: flex; width: 100%">
              <div style="width: 40%">
                <img
                  :src="scope.row.cover"
                  alt=""
                  style="width: 80px; height: auto"
                  @click="openVideo(scope.row)"
                />
              </div>
              <div style="width: 60%" class="item-name-calss">
                <p>视频Id:{{ scope.row.photoId }}</p>
                <p
                  style="
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 100%;
                  "
                  :title="scope.row.caption">
                  标题:{{ scope.row.caption }}
                </p>

              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="曝光" align="center" prop="viewCount">
          <template slot-scope="scope">
            {{ scope.row.viewCount }}
          </template>
        </el-table-column>

        <el-table-column label="点赞" align="center" prop="likeCount">
          <template slot-scope="scope">
            {{ scope.row.likeCount }}
          </template>
        </el-table-column>

        <el-table-column label="评论" align="center" prop="commentCount">
          <template slot-scope="scope">
            {{ scope.row.commentCount }}
          </template>
        </el-table-column>


        <el-table-column label="新上日期" align="center" prop="photoCreateTime">
          <template slot-scope="scope">
            {{ scope.row.photoCreateTime }}
          </template>
        </el-table-column>

      </el-table>
    </el-dialog>


    <el-dialog
      title="视频详情"
      :visible.sync="openVideoVisible"
      :close-on-click-modal="false"
      width="800px"
      append-to-body
    >
      <div v-if="videoInfo" style="width: 100%; display: flex">

        <div
          class="video-content"
          style="
            width: 50%;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            border-right: 1px solid #f2f2f2;
          "
        >
          <video
            class="video"
            :src="videoInfo.playUrl"
            controls="controls"
            style="width: 70%"
            controlslist="nodownload"
          >
            您的浏览器不支持 video 标签。
          </video>
        </div>
        <div
          style="
            width: 50%;
            padding: 10px;
            box-sizing: border-box;
            justify-content: center;
            border-right: 1px solid #f2f2f2;
          "
        >
          <h4><span class="prefix"></span>素材详情</h4>
          <div>
            <h>
              <br/>
              <p>上新日期：{{ videoInfo.photoCreateTime }}</p>
              <p>素材ID：{{ videoInfo.photoId }}</p>
              <p>素材标题：{{ videoInfo.caption }}</p>
              <p>曝光：{{ videoInfo.viewCount }}</p>
              <p>点赞：{{ videoInfo.likeCount }}</p>
              <p>评价：{{ videoInfo.commentCount }}</p>

            </h>
          </div>
        </div>


      </div>


    </el-dialog>

    <!-- 抽屉-->
    <el-drawer
      size="950px"
      :title="drawerName"
      :visible.sync="teamDetaildrawer"
      :direction="direction"
      :before-close="handleClose">
      <el-table
        :data="teamDetailList"
        v-loading="drawerLoading"
        ref="multipleTable"
      >
        <el-table-column
          label="姓名"
          align="center"
          prop="userName"
        ></el-table-column>
        <el-table-column
          label="订单量"
          align="center"
          prop="orderNum"

        >
          <template slot-scope="scope">
            {{
              scope.row.orderNum
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="环比"
          align="center"
          prop="orderNumRate"

        >
          <template slot-scope="scope">
            <i v-if="scope.row.orderNumRate" :style=" scope.row.orderNumRate > 0 ? 'color:red' : 'color:green'"
            >{{ (scope.row.orderNumRate) + "%" }} </i>
            <i v-else>
              -
            </i>

          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"

        >
          <template slot-scope="scope">
            {{
              scope.row.validRadio
                ? (scope.row.validRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv"
          align="center"
          prop="payAmount"

        >
          <template slot-scope="scope">
            {{
              scope.row.payAmount
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv有效率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.validPayAmountRadio
                ? (scope.row.validPayAmountRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="发货率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.deliveryRadio
                ? (scope.row.deliveryRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="达人数"
          align="center"
          prop="promoterCount"
        >
        </el-table-column>
        <el-table-column
          label="商品数"
          align="center"
          prop="itemCount"
        >
        </el-table-column>

        <el-table-column
          label="新增商品"
          align="center"
          prop="addItemCount"
        >
          <template slot-scope="scope">
            <el-button
              style="text-align: center; padding: 3px 0"
              type="text"
              @click="getItemDetail(scope.row,2)">
              {{
                scope.row.addItemCount
              }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>


    <!-- 达人商品出单详情抽屉-->
    <el-drawer
      size="950px"
      :title="drawerName"
      :visible.sync="itemPromoterDetailDrawer"
      :direction="direction"
      :before-close="handleClose">
      <el-table
        :data="itemPromoterDetailList"
        v-loading="drawerLoading"
        ref="multipleTable"
      >
        <el-table-column
          v-if="this.itemPromoterType == 1"
          label="商品信息"
          align="center"
          prop="itemId"
          width="260"
        >
          <template slot-scope="scope">
            <div style="display: flex; width: 100%">
              <div style="width: 40%">
                <img
                  :src="scope.row.imageUrl"
                  alt=""
                  style="width: 70px; height: auto"
                />
              </div>
              <div style="width: 60%" class="item-name-calss">
                <p>Id: {{ scope.row.itemId }}</p>
                <p
                  style="
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 100%;
                  "
                  :title="scope.row.itemTitle">
                  {{ scope.row.itemTitle }}
                </p>


              </div>
            </div>
          </template>

        </el-table-column>


        <el-table-column
          label="达人信息"
          align="center"
          prop="itemTitle"
          width="260"
          v-if="this.itemPromoterType == 2"
        >
          <template slot-scope="scope">
            <div style="display: flex; width: 100%">
              <div style="width: 40%">
                <img
                  :src="scope.row.promoterUrl"
                  alt=""
                  style="width: 70px; height: auto"
                />
              </div>
              <div style="width: 60%" class="item-name-calss">
                <p>
                  Id:{{ scope.row.clipUserId }}

                </p>
                <p
                  style="
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 100%;
                  "
                  :title="scope.row.clipNickName">
                  {{ scope.row.clipNickName }}
                </p>
              </div>
            </div>
          </template>
        </el-table-column>


        <el-table-column
          label="类型"
          align="center"
          prop="orderNum"
          v-if="this.itemPromoterType == 2"
        >
          <template slot-scope="scope">
            {{
              scope.row.promoterType
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="归属"
          align="center"
          prop="orderNum"
          v-if="this.itemPromoterType == 2"
        >
          <template slot-scope="scope">
            {{
              scope.row.userName
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="订单量"
          align="center"
          prop="orderNum"
        >
          <template slot-scope="scope">
            {{
              scope.row.orderNum
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="环比"
          align="center"
          prop="orderNumRate"

        >
          <template slot-scope="scope">
            <i v-if="scope.row.orderNumRate" :style=" scope.row.orderNumRate > 0 ? 'color:red' : 'color:green'"
            >{{ (scope.row.orderNumRate) + "%" }} </i>
            <i v-else>
              -
            </i>

          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"

        >
          <template slot-scope="scope">
            {{
              scope.row.validRadio
                ? (scope.row.validRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="gmv"
          align="center"
          prop="payAmount"

        >
          <template slot-scope="scope">
            {{
              scope.row.payAmount
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="有效率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.validPayAmountRadio
                ? (scope.row.validPayAmountRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="发货率"
          align="center"
          prop="teamMember"
        >
          <template slot-scope="scope">
            {{
              scope.row.deliveryRadio
                ? (scope.row.deliveryRadio).toFixed(2) + "%"
                : "-"
            }}
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>


  </div>

</template>

<script>

import {
  getAddItemList, getAddItemListByClipUserId, getAddItemListByExpertId,
  getAddItemListByUserId, getDingPanItemList,
  getGmvHours, getItemPromoterDetail, getMentorBusinessList,
  getMonthData,
  getPeopleList, getPromoterItemDetail, getPromoterList,
  getSumInfo, getTeamDetail, getTeamExpertBusinessDetail,
  getTeamList, getTuiGuangList, getVideoList
} from "@/api/jiaoyang/report";

var echarts = require("echarts");
export default {
  name: "jyDingPan",
  data() {
    return {
      itemPromoterType: null,
      itemPromoterDetailList: [],
      itemPromoterDetailDrawer: false,
      videoInfo: null,
      openVideoVisible: false,
      drawerName: null,
      direction: 'rtl',
      teamDetaildrawer: false,
      drawerLoading: false,
      teamDetailList: [],
      // 遮罩层
      loading: false,
      totalOneLoading: false, // 汇总loading
      echartsLoading: false, //数据分析loading
      hourEchartsLoading: false, //分时loading
      teamList: [], // 分团列表
      peopleList: [], // 成员列表
      itemLoading: false,
      itemList: [],
      addItemList: [],
      teamLoading: false, // 分团队loading
      tuiGuangLoading: false, // 分推广者loading
      mentorBusinessLoading: false, // 分达人/商务
      mentorBusinessList: [], // 分达人/商务
      tuiGuangList: [],
      peopleLoading: false, // 成员loading
      itemDetailVisible: false, // 新增商品弹框
      videoDetailVisible: false, // 新增商品弹框
      videoList: [],
      bulletFrameLoading: false, // 弹框loading
      promoterList: [],
      promoterLoading: false,
      deptId: null,
      peopleId: null,

      // 选中数组
      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);
              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]);
            },
          },
        ],
      },
      // 销售线索回显
      // 表单参数
      form: {},
      //上传报表下拉数据
      formList: {},
      fileList: [],
      //获取销售线索文件流
      dateFile: null,
      //销售线索上传loading
      confirmLoading: false,
      // 表单校验
      rules: {},
      // 分配销售展示列表
      saleAllocationList: [],
      topInfo: null,
      orderData: {},
      analysis: {},
      type: 1,
      promoterRankList: [],
      promoterTotal: 0,
      selectPromoterType: 0,
    };
  },
  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}`];
  },

  mounted() {
    this.getSumData();
    this.getMonthInfo();
    this.getGmvHours();
    if (this.$store.getters.roles[0] != 'jy_scissors' && this.$store.getters.roles[0] != 'jy_bd' && this.$store.getters.roles[0] != 'jy_out_operation') {
      this.getTeamList();
    }
    if (this.$store.getters.roles[0] == 'jy_scissors' || this.$store.getters.roles[0] == 'jy_bd' || this.$store.getters.roles[0] == 'jy_out_operation') {
      this.getPeopleList();
    }
    this.getPromoterList();
    this.getDingPanItemList();
    this.getTuiGuangList();
    this.getMentorBusinessList();

  },

  methods: {

    changePromoterType() {
      this.getPromoterList();
    },

    getItemOrPromoterDetail(type, item) { // type 1 达人下商品出单详情 2 商品下达人出单详情
      this.itemPromoterDetailDrawer = true;
      this.drawerLoading = true;
      if (type == 1) {
        this.itemPromoterType = 1;
        let name = item.clipNickName + "（" + item.clipUserId + "）";
        this.drawerName = name;
        getPromoterItemDetail(
          this.addDateRange(
            {clipUserId: item.clipUserId},
            this.uploadDate,
            "startDate",
            "endDate"
          )
        ).then((response) => {
          this.drawerLoading = false;
          this.itemPromoterDetailList = response.data;
        }).catch((e) => {
          this.drawerLoading = false;
        });
      }
      if (type == 2) {
        this.itemPromoterType = 2;
        let name = item.itemTitle + "（" + item.itemId + "）";
        this.drawerName = name;
        getItemPromoterDetail(
          this.addDateRange(
            {itemId: item.itemId, userId: this.userId},
            this.uploadDate,
            "startDate",
            "endDate"
          )
        ).then((response) => {
          this.drawerLoading = false;
          this.itemPromoterDetailList = response.data;
        }).catch((e) => {
          this.drawerLoading = false;
        });
      }
    },


    getTeamDetail(type, item, deptName, userType) {
      this.drawerName = deptName;
      this.teamDetaildrawer = true;
      this.drawerLoading = true;
      if (type == 1) {
        getTeamDetail(
          this.addDateRange(
            {deptId: item},
            this.uploadDate,
            "startDate",
            "endDate"
          )
        ).then((response) => {
          this.drawerLoading = false;
          this.teamDetailList = response.data;
        }).catch((e) => {
          this.drawerLoading = false;
        });
      }


      if (type == 2) {
        getTeamExpertBusinessDetail(
          this.addDateRange(
            {userId: item, userType: userType},
            this.uploadDate,
            "startDate",
            "endDate"
          )
        ).then((response) => {
          this.drawerLoading = false;
          this.teamDetailList = response.data;
        }).catch((e) => {
          this.drawerLoading = false;
        });
      }


    },

    handleClose() {
      this.teamDetaildrawer = false;
      this.itemPromoterDetailDrawer = false;
      this.drawerName = null;
      this.teamDetailList = [];
      this.itemPromoterDetailList = [];
    },
// 获取汇总信息
    getSumData() {
      this.totalOneLoading = true;
      getSumInfo(
        this.addDateRange(
          {userId: this.userId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.totalOneLoading = false;
        this.orderData = response.data;
      }).catch((e) => {
        this.totalOneLoading = false;
      });
    },

    // 月数据
    getMonthInfo() {
      this.echartsLoading = true;
      getMonthData(
        this.addDateRange(
          {userId: this.userId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.analysis = response.data;
        this.initEchart("echart", this.handlerEchartOption(response.data.list));
        this.echartsLoading = false;
      }).catch((e) => {
        this.echartsLoading = false;
      });
    },

    // 分时数据
    getGmvHours() {
      this.hourEchartsLoading = true;
      getGmvHours(
        this.addDateRange(
          {userId: this.userId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.hourEchartsLoading = false;
        this.initEchart(
          'hourEchart',
          this.hourEchartOption(response.data.today, response.data.yesterday, [], [])
        )
      }).catch((e) => {
        this.hourEchartsLoading = false;
      });
    },

    // 分团队
    getTeamList() {
      this.teamLoading = true;
      getTeamList(
        this.addDateRange(
          {userId: this.userId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.teamLoading = false;
        this.teamList = response.data;
      }).catch((e) => {
        this.peopleLoading = false;
      });
    },

    // 分成员
    getPeopleList() {
      this.peopleLoading = true;
      getPeopleList(
        this.addDateRange(
          {userId: this.userId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.peopleLoading = false;
        this.peopleList = response.data;
      }).catch((e) => {
        this.peopleLoading = false;
      });
    },

    // 分达人
    getPromoterList() {
      this.promoterLoading = true;
      getPromoterList(
        this.addDateRange(
          {userId: this.userId, promoterType: this.selectPromoterType},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.promoterLoading = false;
        this.promoterList = response.data;
      }).catch((e) => {
        this.promoterLoading = false;
      });
    },


    getDingPanItemList() {
      this.itemLoading = true;
      getDingPanItemList(
        this.addDateRange(
          {userId: this.userId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.itemLoading = false;
        this.itemList = response.data;
      }).catch((e) => {
        this.itemLoading = false;
      });
    },

    getTuiGuangList() {
      this.tuiGuangLoading = true;
      getTuiGuangList(
        this.addDateRange(
          {userId: this.userId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.tuiGuangLoading = false;
        this.tuiGuangList = response.data;
      }).catch((e) => {
        this.tuiGuangLoading = false;
      });
    },

    getMentorBusinessList() {
      this.mentorBusinessLoading = true;
      getMentorBusinessList(
        this.addDateRange(
          {userId: this.userId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.mentorBusinessLoading = false;
        this.mentorBusinessList = response.data;
      }).catch((e) => {
        this.mentorBusinessLoading = false;
      });
    },

    // 新增商品列表
    getItemDetail(item, type) {
      if (type == 1) { // 部门
        this.deptId = item.deptId;
        this.getAddItemList();
      }
      if (type == 2) { // 员工
        this.peopleId = item.userId;
        this.getAddItemListByUserId();
      }

      if (type == 3) { // 导师
        this.getAddItemListByExpertId(item.userId, item.type);
      }
      if (type == 4) { // 二创
        this.getAddItemListByClipUserId(item.clipUserId);
      }

      this.itemDetailVisible = true;
    },

    getVideoDetail(item) {
      this.videoDetailVisible = true;
      getVideoList(
        this.addDateRange(
          {promoterId: item.clipUserId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.videoList = response.data;
        this.bulletFrameLoading = false;
      }).catch((e) => {
        this.bulletFrameLoading = false;
      });


    },

    getAddItemList() {
      this.bulletFrameLoading = true;
      getAddItemList(
        this.addDateRange(
          {deptId: this.deptId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.addItemList = response.data;
        this.bulletFrameLoading = false;
      }).catch((e) => {
        this.bulletFrameLoading = false;
      });
    },

    getAddItemListByUserId() {
      this.bulletFrameLoading = true;
      getAddItemListByUserId(
        this.addDateRange(
          {userId: this.peopleId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.addItemList = response.data;
        this.bulletFrameLoading = false;
      }).catch((e) => {
        this.bulletFrameLoading = false;
      });
    },

    getAddItemListByExpertId(userId, type) {
      this.bulletFrameLoading = true;
      getAddItemListByExpertId(
        this.addDateRange(
          {userId: userId, userType: type},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.addItemList = response.data;
        this.bulletFrameLoading = false;
      }).catch((e) => {
        this.bulletFrameLoading = false;
      });
    },

    getAddItemListByClipUserId(clipUserId) {
      this.bulletFrameLoading = true;
      getAddItemListByClipUserId(
        this.addDateRange(
          {clipUserId: clipUserId},
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.addItemList = response.data;
        this.bulletFrameLoading = false;
      }).catch((e) => {
        this.bulletFrameLoading = false;
      });
    },

    openVideo(item) {
      this.videoInfo = item;
      this.openVideoVisible = true;

    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.confirmLoading = false;
      this.reset();
    },
    closeDialog() {
      this.deptId = null;
      this.peopleId = null;
      this.addItemList = [];
      this.videoList = [];
    },
    // 表单重置
    reset() {
      this.form = {};
      this.dateFile = null;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getSumData();
      this.getMonthInfo();
      this.getGmvHours();
      this.getTeamList();
      this.getPeopleList();
      this.getPromoterList();
      this.getDingPanItemList();
      this.getTuiGuangList();
      this.getMentorBusinessList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      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}`];
      this.selectPromoterType = 0;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "上传报表";
    },


    /** 获取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: "单量",

              type: "line",
              stack: "总量",
              data: data.map((item) => {
                  return item['orderNum'];
                }
              ),
              symbol: "circle",
              symbolSize: 6,
              lineStyle: {
                normal: {width: 2},
              },
              itemStyle: {
                borderColor: "#ffffff", borderWidth: 0,
              },
            },

            {
              smooth: true,
              name: '有效单量',
              type: "line",
              stack: "有效",
              data: data.map((item) => {
                  return item['validOrderNUm'];
                }
              ),
              symbol: "circle",
              symbolSize: 6,
              lineStyle:
                {
                  normal: {
                    width: 2
                  },
                },
              itemStyle: {
                borderColor: "#ffffff",
                borderWidth: 0
              },
            },

            {
              smooth: true,
              showSymbol: false,
              name: "有效额 (万)",
              type: "line",
              stack: "实时率",
              data: data.map((item) => {
                  return (item['validPayAmount'] / 10000).toFixed(2);
                }
              ),
              symbol: "circle",
              symbolSize:
                6,
              lineStyle: {
                width: 0, // 线宽是0
                color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
              },
              itemStyle: {
                borderColor: "#ffffff",
                borderWidth: 0,
              },
            },

            {
              smooth: true,
              showSymbol: false,
              name: "商品数",
              type: "line",
              stack: "",
              data: data.map((item) => {
                  return (item['itemCount']);
                }
              ),
              symbol: "circle",
              symbolSize:
                6,
              lineStyle: {
                width: 0, // 线宽是0
                color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
              },
              itemStyle: {
                borderColor: "#ffffff",
                borderWidth: 0,
              },
            },


            {
              smooth: true,
              showSymbol: false,
              name: "达人数",
              type: "line",
              stack: "",
              data: data.map((item) => {
                  return (item['promoterCount']);
                }
              ),
              symbol: "circle",
              symbolSize:
                6,
              lineStyle: {
                width: 0, // 线宽是0
                color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
              },
              itemStyle: {
                borderColor: "#ffffff",
                borderWidth: 0,
              },
            },


          ],
        }
      ;
      return option;
    },


    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, 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}`
                } 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,
            },
          ],

          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',
              },
            },
          ],
        }
        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>
