<template xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
  <div class="app-container">
    <el-form
      :inline="true"
      v-show="true"
    >
      <el-form-item label="选择日期" prop="companyId">
        <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-form-item>

      <el-form-item label="选择公司" prop="companyId" v-if="this.$store.getters.roles[0] == 'admin'">
        <el-select
          filterable
          v-model="companyId"
          placeholder="选择公司"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="item in companyList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
        >重置
        </el-button>
      </el-form-item>
    </el-form>


    <el-row class="top-sum">
      <el-col :span="24">
        <el-card shadow="never" class="top-sum">
          <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >数据概览</span
              >
          </div>
          <div v-loading="totalOneLoading">
            <el-row class="top-sum" style="display: flex" v-if="!!orderData">
              <el-col :span="8">
                <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.zxOrderNUm }}</p>
                    <p class="p-title-1">推品:{{ orderData.tpOrderNUm }}</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>
                    <p class="p-title-1">退单数:{{ orderData.effOrderNum }}</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.totalFee }}</p>
                  <div style="display: flex; width: 100%">
                    <p class="p-title-1">
                      环比: <i :style="orderData.totalFeeRate > 0 ? 'color:red' : 'color:green'"
                    >{{ (orderData.totalFeeRate) + "%" }}
                    </i>
                    </p>
                    <p class="p-title-1">自选:{{ (orderData.zxTotalFee) + "w" }}</p>
                    <p class="p-title-1">推品:{{ (orderData.tpTotalFee) + "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.validTotalFee }}</p>
                  <div style="display: flex; width: 100%">
                    <p class="p-title-1">
                      有效率: <i style="color: red"
                    >{{ (orderData.validTotalFeeRadio) + "%" }}
                    </i>
                    </p>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <el-row class="top-sum" style="display: flex" v-if="!!orderData">
              <el-col :span="8">
                <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.deliveryRate) + "%" }}
                    </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.zxOrderCount) }}</p>
                    <p class="p-title-1">推品:{{ (orderData.tpOrderCount) }}</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] == 'industry_admin' || this.$store.getters.roles[0] == 'admin'  ">
                    {{ orderData.estimatedIncome }}</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] == 'industry_admin' || this.$store.getters.roles[0] == 'admin'">
                      自选:{{ (orderData.zxEstimatedIncome) }}</p>
                    <p class="p-title-1" v-else>自选:-</p>
                    <p class="p-title-1"
                       v-if="this.$store.getters.roles[0] == 'industry_admin' || this.$store.getters.roles[0] == 'admin'">
                      推品:{{ (orderData.tpEstimatedIncome) }}</p>
                    <p class="p-title-1" v-else>推品:-</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] == 'industry_admin'  || this.$store.getters.roles[0] == 'admin'">
                    {{ (orderData.costPrice) }}
                  </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] == 'industry_admin' || this.$store.getters.roles[0] == 'admin'">
                      预估利润:{{ (orderData.estimatedGrossProfit) }}</p>
                    <p class="p-title-1" v-else>预估利润:-</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: 480px">
          <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: 360px; 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.totalFee >= 0
                        ? priceFormat(analysis.totalFee / 10000)
                        : 0) + 'w'
                    }}
                  </p>
                  <div style=" width: 100%">
                    <p class="p-title-1">
                      环比：<i :style="analysis.totalFeeRate > 0 ? 'color:red' : 'color:green'"
                    >{{ (analysis.totalFeeRate) + '%' }}
                    </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.validTotalFee >= 0
                        ? priceFormat(analysis.validTotalFee / 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.validTotalFeeRadio) + '%' }}
                  </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 style=" width: 100%">
                    <p class="p-title-1">
                      发货率：<i :style="analysis.deliveryRate > 0 ? 'color:red' : 'color:green'"
                    >{{ (analysis.deliveryRate) + '%' }}
                    </i>
                    </p>
                  </div>
                </div>
                <div style="width: 150px; text-align: left" class="card-show">
                  <p class="p-title">退单数</p>
                  <p class="p-main">
                    {{ analysis.effOrderNum }}
                  </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>
            <el-select
              v-model="hourType"
              placeholder="请选择类型"
              clearable
              style="width: 240px; float: right; padding: 3px 0"
              @change="changeHourType"
            >
              <el-option label="环比" value="1"/>
              <el-option label="同比" value="2"/>
            </el-select>
          </div>
          <div
            id="hourEchart"
            ref="hourEchart"
            style="height: 280px; width: 100%;"
          ></div>
        </el-card>
      </el-col>
    </el-row>


    <el-card
      shadow="never"
      class="card-show"
      style="width: 100%; max-height: 800px"
      v-loading="shopDataLoading"
    >
      <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >分店铺</span
              >
      </div>

      <el-table
        :data="shopList"
        ref="multipleTable"
        max-height="760px"
      >

        <el-table-column
          label="店铺ID"
          align="center"
          prop="shopId"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          label="店铺名称"
          align="center"
          prop="shopName"
          width="120px"
        >
          <template slot-scope="scope">
            {{ scope.row.shopName }}
          </template>
        </el-table-column>

        <el-table-column
          label="体验分"
          align="center"
          prop="orderNum"

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

        <el-table-column
          label="口碑分"
          align="center"
          prop="masterScore"
        >
          <template slot-scope="scope">
            {{
              scope.row.masterScore
            }}
          </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="validOrderNum"

        >
          <template slot-scope="scope">
            {{ scope.row.validOrderNum }}
          </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="退单数"
          align="center"
          prop="effOrderNum"
        >
          <template slot-scope="scope">
            {{ scope.row.effOrderNum }}
          </template>
        </el-table-column>

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

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

        <el-table-column
          label="有效gmv"
          align="center"
          prop="totalFee"

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


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

        <el-table-column
          label="发货数"
          align="center"
          prop="deliveryNum"
        >
          <template slot-scope="scope">
            {{ scope.row.deliveryNum }}
          </template>
        </el-table-column>

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


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

        >
        </el-table-column>

      </el-table>
      <pagination
        :auto-scroll="false"
        @current-change="true"
        v-show="shopDataTotal>10"
        :total="shopDataTotal"
        :page.sync="shopDataParams.pageNum"
        :limit.sync="shopDataParams.pageSize"
        @pagination="getShopListData"
      />
    </el-card>


    <el-card
      shadow="never"
      class="card-show"
      style="width: 100%; max-height: 800px"
      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="760px"
      >

        <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(scope.row.deptId,scope.row.deptName,scope.row.type)">
              {{
                scope.row.deptName
              }}
            </el-button>
          </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.userCount
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="自选品"
          align="center"
          prop="zxOrderNum"
        >
          <template slot-scope="scope">
            {{
              scope.row.zxOrderNum
            }}
          </template>

        </el-table-column>


        <el-table-column
          label="推品"
          align="center"
          prop="tpOrderNum"
        >
          <template slot-scope="scope">
            {{
              scope.row.tpOrderNum
            }}
          </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="validOrderNum"

        >
          <template slot-scope="scope">
            {{ scope.row.validOrderNum }}
          </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="退单数"
          align="center"
          prop="effOrderNum"
        >
          <template slot-scope="scope">
            {{ scope.row.effOrderNum }}
          </template>
        </el-table-column>


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

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

        <el-table-column
          label="有效gmv"
          align="center"
          prop="totalFee"

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

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

        <el-table-column
          label="发货数"
          align="center"
          prop="deliveryNum"
        >
          <template slot-scope="scope">
            {{ scope.row.deliveryNum }}
          </template>
        </el-table-column>

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


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

        >
        </el-table-column>

      </el-table>
      <pagination
        :auto-scroll="false"
        @current-change="true"
        v-show="teamDataTotal>10"
        :total="teamDataTotal"
        :page.sync="teamParams.pageNum"
        :limit.sync="teamParams.pageSize"
        @pagination="getShopListData"
      />
    </el-card>


    <el-card
      shadow="never"
      class="card-show"
      style="width: 100%; "
      v-loading="itemLoading"
    >
      <div slot="header" class="clearfix">
              <span style="font-size: 16px; font-weight: bold; float: left"
              >分商品</span>
        <el-radio-group v-model="selectItemType" style="float: right" size="mini" @change="changeItemType()">
          <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="itemList"
        ref="multipleTable"

      >
        <el-table-column
          label="商品信息"
          align="center"
          prop="itemTitle"
          width="270"
        >
          <template slot-scope="scope">
            <div style="display: flex; width: 100%">
              <div style="width: 40%">
                <img
                  :src="scope.row.itemPicUrl"
                  alt=""
                  style="width: 55px; height: auto"
                />
              </div>
              <div style="width: 60%;height: 55px" class="item-name-calss">
                <a

                  style="
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 100%;
                  "
                  :title="scope.row.itemTitle"
                >
                  {{ scope.row.itemTitle }}
                </a>
                <p>商品Id:{{ scope.row.itemId }}</p>
                <p>商品单价:{{ scope.row.price }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="itemType"
        >
          <template slot-scope="scope">
            {{ scope.row.itemType }}
          </template>
        </el-table-column>
        <el-table-column
          label="绑定人"
          align="center"
          prop="userName"
        >
        </el-table-column>

        <el-table-column
          label="招商/采购"
          align="center"
          prop="courtshipPurchaseName"
        >
        </el-table-column>

        <el-table-column
          label="单数"
          align="center"
          prop="orderNum"
        >
        </el-table-column>
        <el-table-column
          label="环比"
          align="center"
          prop="orderNumRate"
          width="88px"
        >
          <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="validOrderNum"
        />

        <el-table-column
          label="有效率"
          align="center"
          prop="validRadio"
        >
          <template slot-scope="scope">
            {{
              scope.row.validRadio
                ? scope.row.validRadio + "%"
                : "-"
            }}
          </template>
        </el-table-column>

        <el-table-column
          label="退单数"
          align="center"
          prop="effOrderNum"
        >
        </el-table-column>

        <el-table-column
          label="GMV"
          align="center"
          prop="totalFee"
        >
        </el-table-column>


        <el-table-column
          label="有效GMV"
          align="center"
          prop="validTotalFee"
        >
        </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.deliveryRate
                ? (scope.row.deliveryRate) + "%"
                : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="未发货数"
          align="center"
          prop="notDeliveryNum"
        >
        </el-table-column>
      </el-table>
      <pagination
        :auto-scroll="false"
        @current-change="true"
        v-show="itemDataTotal>10"
        :total="itemDataTotal"
        :page.sync="itemParams.pageNum"
        :limit.sync="itemParams.pageSize"
        @pagination="getItemList"
      />
    </el-card>


    <!-- 抽屉-->
    <el-drawer
      size="1000px"
      :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"

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

        <el-table-column
          label="自选品"
          align="center"
          prop="zxOrderNum"
        >
          <template slot-scope="scope">
            {{
              scope.row.zxOrderNum
            }}
          </template>

        </el-table-column>


        <el-table-column
          label="推品"
          align="center"
          prop="tpOrderNum"
        >
          <template slot-scope="scope">
            {{
              scope.row.tpOrderNum
            }}
          </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.validOrderNum
            }}
          </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="退单数"
          align="center"
          prop="effOrderNum"
        >
          <template slot-scope="scope">
            {{ scope.row.effOrderNum }}
          </template>
        </el-table-column>

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

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

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

        <el-table-column
          label="发货数"
          align="center"
          prop="deliveryNum"
        >
          <template slot-scope="scope">
            {{ scope.row.deliveryNum }}
          </template>
        </el-table-column>

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


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

        >
        </el-table-column>


      </el-table>
    </el-drawer>


  </div>

</template>

<script>

import {
  getCompanyList,
  getGmvHours, getItemList,
  getMonthData, getShopList, getShopListData,
  getSumInfo, getTeamDetail, getTeamList

} from "@/api/industry/item";
import {scrollTo} from "@/utils/scroll-to";

var echarts = require("echarts");
export default {
  name: "IndustryHome",
  data() {
    return {
      hourType: "1",
      companyId: undefined,
      companyList: [],
      shopDataParams: {
        pageNum: 1,
        pageSize: 10
      },
      shopDataTotal: 0,


      teamParams: {
        pageNum: 1,
        pageSize: 10
      },
      teamDataTotal: 0,
      itemParams: {
        pageNum: 1,
        pageSize: 10
      },
      itemDataTotal: 0,

      drawerName: null,
      direction: 'rtl',
      teamDetaildrawer: false,
      drawerLoading: false,
      teamDetailList: [],
      // 遮罩层
      loading: false,
      totalOneLoading: false, // 汇总loading
      echartsLoading: false, //数据分析loading
      hourEchartsLoading: false, //分时loading
      teamList: [], // 分团列表
      itemLoading: false,
      itemList: [],
      teamLoading: false, // 分团队loading
      shopDataLoading: false, // 分推广者loading
      shopList: [],
      deptId: null,

      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数

      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,


      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: {},

      rules: {},
      // 分配销售展示列表
      saleAllocationList: [],
      topInfo: null,
      orderData: {},
      analysis: {},
      type: 1,
      selectItemType: 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}`];
    this.getCompanyList();
  },

  mounted() {
    this.getSumData();
    this.getMonthInfo();
    this.getGmvHours();
    this.getShopListData();
    this.getTeamList();
    this.getItemList();

  },

  methods: {


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

    getCompanyList() {
      getCompanyList().then((res) => {
        this.companyList = res.data.map((item) => {
          return {
            label: item.companyName,
            value: item.companyId,
          };
        });
      });
    },


    changeItemType() {
      this.itemParams.pageNum = 1;
      this.itemParams.pageSize = 10;
      this.getItemList();

    },


    handleClose() {
      this.teamDetaildrawer = false;
      this.drawerName = null;
      this.teamDetailList = [];

    },
// 获取汇总信息
    getSumData() {
      this.totalOneLoading = true;
      getSumInfo(
        this.addDateRange(
          {userId: this.userId, companyId: this.companyId},
          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, companyId: this.companyId},
          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, companyId: this.companyId, hourType: this.hourType},
          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;
      });
    },


    getShopListData() {
      this.shopDataLoading = true;
      getShopListData(
        this.addDateRange(
          {
            ...this.shopDataParams,
            userId: this.userId,
            companyId: this.companyId

          },
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.shopDataLoading = false;
        this.shopList = response.rows;
        this.shopDataTotal = response.total;
      }).catch((e) => {
        this.shopDataLoading = false;
      });
    },

    getTeamList() {
      this.teamLoading = true;
      getTeamList(
        this.addDateRange(
          {
            ...this.teamParams,
            userId: this.userId,
            companyId: this.companyId

          },
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.teamLoading = false;
        this.teamList = response.rows;
        this.teamDataTotal = response.total;
      }).catch((e) => {
        this.teamLoading = false;
      });
    },


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

    },


    getItemList() {
      this.itemLoading = true;
      getItemList(
        this.addDateRange(
          {
            ...this.itemParams,
            userId: this.userId,
            itemType: this.selectItemType,
            companyId: this.companyId
          },
          this.uploadDate,
          "startDate",
          "endDate"
        )
      ).then((response) => {
        this.itemLoading = false;
        this.itemList = response.rows;
        this.itemDataTotal = response.total;
      }).catch((e) => {
        this.itemLoading = false;
      });
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {};
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getSumData();
      this.getMonthInfo();
      this.getGmvHours();
      this.getShopListData();
      this.getTeamList();
      this.getItemList();
    },
    /** 重置按钮操作 */
    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.selectItemType = 0;
      this.shopDataParams.pageNum = 1;
      this.shopDataParams.pageSize = 10;
      this.teamParams.pageNum = 1;
      this.teamParams.pageSize = 10;
      this.itemParams.pageNum = 1;
      this.itemParams.pageSize = 10;
      this.companyId = undefined;
      this.handleQuery();
    },

    /** 获取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['validTotalFee'] / 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,
              },
            },


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