<template>
  <div class="box-center">
    <div class="app-top">
      <div class="app-titel" v-if="role != 3" style="margin-bottom: 10px">
        <div class="titel-text">项目选择:</div>
        <div style="margin-left: 26px">
          <el-select
            v-model="houseId"
            filterable
            placeholder="请选择"
            @change="houseChange"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="app-titel">
        <div style="text-indent: 30px">接待时间:</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker
            v-model="customtime"
            @change="confirmtime()"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div style="margin-left: 26px" class="div-lab">
          <div class="label">团队</div>
          <el-select
            v-model="deptId"
            filterable
            @change="deptChange"
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options"
              :key="item.deptId"
              :label="item.name"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="cen-tab" :style="{'margin-top':role != 3?'110px':'70px'}">
      <div class="app-titel1">
        <!-- <div class="toptimeqhuan"> -->
          <!-- <div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">
            销讲统计
          </div>
          <div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">
            违禁统计
          </div> -->
          <el-radio-group @change="tabFlagChange" v-model="tabFlag">
            <el-radio-button :label="0">销讲统计</el-radio-button>
            <el-radio-button :label="1">违禁统计</el-radio-button>
          </el-radio-group>
        <!-- </div> -->
        <div
          style="margin-left: auto; margin-right: 10px"
          v-if="sta_men_downLoad"
        >
          <el-button @click="downLoad">导出</el-button>
        </div>
      </div>
      <el-table max-height="300" :data="tableData" stripe style="width: 100%"  height="390">
        <el-table-column prop="batchId" label="序号" align="center">
          <template slot-scope="scope">
            {{
              scope.$index == tableData.length - 1
                ? "合计/平均"
                : scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="accountName" label="顾问" align="center">
        </el-table-column>
        <el-table-column prop="deptName" label="归属团队" align="center">
        </el-table-column>
        <el-table-column
          prop="activeCustomer"
          label="接待量"
          align="center"
          sortable
        >
          <template slot-scope="{ row }"> {{ row.activeCustomer }}次 </template>
        </el-table-column>
        
        <el-table-column
          prop="activeCustomer"
          label="未标顾问"
          align="center"
          sortable
        >
          <template slot-scope="{ row }"> {{ row.unTagCustomer }}个 </template>
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 1"
          prop="prohibitedCustomer"
          label="违禁接待次数"
          align="center"
          sortable
        >
          <template slot-scope="{ row }">
            {{ row.prohibitedCustomer }}次
          </template>
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 1"
          prop="prohibitedZb"
          label="违禁接待占比"
          align="center"
          sortable
        >
          <template slot-scope="{ row }"> {{ row.prohibitedZb }}% </template>
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 0"
          prop="realityEquipmentCount"
          label="接待时长"
          align="center"
          sortable
          width="110"
        >
          <template slot-scope="{ row }">
            {{ Math.floor(row.sumDuration / 60) }}分钟
          </template>
        </el-table-column>
        <el-table-column
          v-if="tabFlag == 0"
          prop="fraction"
          label="销讲执行率"
          align="center"
          sortable
          width="110"
        >
          <template slot-scope="{ row }"> {{ row.fraction }}% </template>
        </el-table-column>
        <el-table-column
          v-for="(item, idx) in tablist"
          :key="idx"
          :prop="item.props"
          :label="item.label"
          align="center"
          width="100"
        >
          <template slot-scope="{ row }"> {{ row[item.props] }}% </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">接待量排名（TOP10）</div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 35%;text-align: center;">
            <div class="text1-1">接待合计</div>
            <div class="text1-2">{{ sum1 }}次</div>
          </div>
          <div class="sanbox1" style="width: 40%;text-align: center;">
            <div class="text1-1">顾问人数</div>
            <div class="text1-2">{{ num1 }}个</div>
          </div>
          <div class="sanbox1" style="width: 25%;text-align: center;">
            <div class="text1-1">人均接待</div>
            <div class="text1-2">{{ avg1 }}次</div>
          </div>
        </div>
        <div
          v-if="echarlist.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist" :key="i">
            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
            <span class="sequenceNum" :style="{
              'background': i + 1 == 1 ? 'linear-gradient(180deg, #FFA395 0%, #F54D3F 100%)' : i + 1 == 2 ? 'linear-gradient(180deg, #FFBE70 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(180deg, #FFE683 0%, #FFCC00 100%)' : '#E5F0FF',
                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
              }">{{ i + 1 }}</span>
             <div class="jinboxtit">
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
                <span class="name">{{ item.name }}</span>
              </el-tooltip>
            </div>
            <div class="jinbox-box">
              <!-- <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl1 + '%;'"
              ></div> -->
              <div class="boxbaifenbi" 
                :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl1 + '%' }">
               </div>
             
            </div>
            <div class="jinboxbott">{{ item.zxl }}次</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist.length == 0"
        >
          <div class="imgboxc">
            <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
            <div class="nulltext" style="font-size:14px;">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="you">
        <div class="title">
          <div class="text1">接待时长排名（TOP10）</div>
        </div>

        <div class="hejisan">
          <div class="sanbox1" style="width: 35%;text-align: center;">
            <div class="text1-1">接待时长合计</div>
            <div class="text1-2">{{ Math.floor(sum2 / 60) }}分钟</div>
          </div>
          <div class="sanbox1" style="width: 40%;text-align: center;">
            <div class="text1-1">顾问人数</div>
            <div class="text1-2">{{ num2 }}个</div>
          </div>
          <div class="sanbox1" style="width: 25%;text-align: center;">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ Math.floor(avg2 / 60) }}分钟</div>
          </div>
        </div>
        <div
          v-if="echarlist2.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist2" :key="i">
            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
            <span class="sequenceNum" :style="{
              'background': i + 1 == 1 ? 'linear-gradient(180deg, #FFA395 0%, #F54D3F 100%)' : i + 1 == 2 ? 'linear-gradient(180deg, #FFBE70 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(180deg, #FFE683 0%, #FFCC00 100%)' : '#E5F0FF',
                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
              }">{{ i + 1 }}</span>
             <div class="jinboxtit">
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
                <span class="name">{{ item.name }}</span>
              </el-tooltip>
            </div>
            <div class="jinbox-box">
              <!-- <div
                class="boxbaifenbi"
                :style="'width:' + item.percentage + '%;'"
              ></div> -->
              <div class="boxbaifenbi" 
                :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.percentage + '%' }">
               </div>
             
            </div>
            <div class="jinboxbott">{{ item.zxl }}分钟</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist2.length == 0"
        >
          <div class="imgboxc">
            <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
            <div class="nulltext" style="font-size:14px;">暂无数据</div>
          </div>
        </div>
      </div>
    </div>

    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">平均执行率排名（TOP10）</div>
          <div class="text2">
            <el-select
              @change="teamAllLevelidtap()"
              style="width: 90%; margin: 0 auto"
              v-model="teamAllLevelid"
              placeholder="请选择"
            >
              <el-option
                v-for="item in teamAllLevel"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">顾问人数</div>
            <div class="text1-2">{{ num3 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">平均执行</div>
            <div class="text1-2">{{ avg3 }}%</div>
          </div>
        </div>
        <div
          v-if="echarlist1.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist1" :key="i">
            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
            <span class="sequenceNum" :style="{
                'background': topThreeColor(i),
                'color': i < 3 ? '#FFF' : '#333',
                'box-shadow': i < 3 ? '0px 0px 6px 1px' + topThreeColor(i) : '0px 0px 6px 1px' + '#E5F0FF',
              }">{{ i + 1 }}</span>
             <div class="jinboxtit">
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
                <span class="name">{{ item.name }}</span>
              </el-tooltip>
            </div>
            <div class="jinbox-box">
              <!-- <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl + '%;'"
              ></div> -->
              <div class="boxbaifenbi" 
                :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl + '%' }">
               </div>
             
            </div>
            <div class="jinboxbott">{{ item.zxl }}%</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist1.length == 0"
        >
          <div class="imgboxc">
            <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
            <div class="nulltext" style="font-size:14px;">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="you">
        <div class="title">
          <div class="text1">违禁接待次数排名（TOP10）</div>
          <div class="text2">
            <el-select
              @change="teamAllLeve2tap()"
              style="width: 90%; margin: 0 auto"
              v-model="teamAllLeve2id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in teamAllLeve2"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 35%;text-align: center;">
            <div class="text1-1">违禁合计</div>
            <div class="text1-2">{{ sum4 }}次</div>
          </div>
          <div class="sanbox1" style="width: 40%;text-align: center;">
            <div class="text1-1">顾问人数</div>
            <div class="text1-2">{{ num4 }}个</div>
          </div>
          <div class="sanbox1" style="width: 25%;text-align: center;">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ avg4 }}次</div>
          </div>
        </div>
        <div
          v-if="echarlist3.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist3" :key="i">
            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
            <span class="sequenceNum" :style="{
              'background': i + 1 == 1 ? 'linear-gradient(180deg, #FFA395 0%, #F54D3F 100%)' : i + 1 == 2 ? 'linear-gradient(180deg, #FFBE70 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(180deg, #FFE683 0%, #FFCC00 100%)' : '#E5F0FF',
                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
              }">{{ i + 1 }}</span>
             <div class="jinboxtit">
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
                <span class="name">{{ item.name }}</span>
              </el-tooltip>
            </div>
            <div class="jinbox-box">
              <!-- <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl1 + '%;'"
              ></div> -->
              <div class="boxbaifenbi" 
                :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl1 + '%' }">
               </div>
             
            </div>
            <div class="jinboxbott">{{ item.zxl }}次</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist3.length == 0"
        >
          <div class="imgboxc">
            <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
            <div class="nulltext" style="font-size:14px;">暂无数据</div>
          </div>
        </div>
      </div>
    </div>


    <!-- 接待未标顾问排名（TOP10） -->
    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">接待未标顾问排名（TOP10）</div>
          <div class="text2">
            <el-select
              style="width: 90%; margin: 0 auto"
              v-model="teamAllLevelsId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in teamAllLevels"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">未标记合计</div>
            <div class="text1-2">{{ num5 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ avg5 }}个</div>
          </div>
        </div>
        <div
          v-if="echarlist1.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist4" :key="i">
            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
            <span class="sequenceNum" :style="{
                'background': topThreeColor(i),
                'color': i < 3 ? '#FFF' : '#333',
                'box-shadow': '0px 0px 6px 1px' + topThreeColor(i)
              }">{{ i + 1 }}</span>
             <div class="jinboxtit">
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
                <span class="name">{{ item.name }}</span>
              </el-tooltip>
            </div>
            <div class="jinbox-box">
              <!-- <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl + '%;'"
              ></div> -->
              <div class="boxbaifenbi" 
                :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl1 + '%' }">
              </div>
             
            </div>
            <div class="jinboxbott">{{ item.zxl }}个</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist4.length == 0"
        >
          <div class="imgboxc">
            <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
            <div class="nulltext" style="font-size:14px;">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="you" style="opacity: 0;">
        <div class="title">
          <div class="text1">违禁接待次数排名（TOP10）</div>
          <div class="text2">
            <el-select
              @change="teamAllLeve2tap()"
              style="width: 90%; margin: 0 auto"
              v-model="teamAllLeve2id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in teamAllLeve2"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 35%;text-align: center;">
            <div class="text1-1">违禁合计</div>
            <div class="text1-2">{{ sum4 }}次</div>
          </div>
          <div class="sanbox1" style="width: 40%;text-align: center;">
            <div class="text1-1">顾问人数</div>
            <div class="text1-2">{{ num4 }}个</div>
          </div>
          <div class="sanbox1" style="width: 25%;text-align: center;">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ avg4 }}次</div>
          </div>
        </div>
        <div
          v-if="echarlist3.length != 0"
          style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
        >
          <div class="jinbox" v-for="(item, i) in echarlist3" :key="i">
            <!-- <div class="jinboxtit">{{ item.name }}</div> -->
            <span class="sequenceNum" :style="{
              'background': i + 1 == 1 ? 'linear-gradient(180deg, #FFA395 0%, #F54D3F 100%)' : i + 1 == 2 ? 'linear-gradient(180deg, #FFBE70 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(180deg, #FFE683 0%, #FFCC00 100%)' : '#E5F0FF',
                'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
                'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
              }">{{ i + 1 }}</span>
             <div class="jinboxtit">
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
                <span class="name">{{ item.name }}</span>
              </el-tooltip>
            </div>
            <div class="jinbox-box">
              <!-- <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl1 + '%;'"
              ></div> -->
              <div class="boxbaifenbi" 
                :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl1 + '%' }">
              </div>
             
            </div>
            <div class="jinboxbott">{{ item.zxl }}次</div>
          </div>
        </div>
        <div
          class="nulllist"
          style="height: 250px"
          v-if="echarlist3.length == 0"
        >
          <div class="imgboxc">
            <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
            <div class="nulltext" style="font-size:14px;">暂无数据</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { exportMethodPost } from "@/util/util";
export default {
  name: "consultantBrand",
  data() {
    return {
      houseId: "",
      buildingoptions: [],
      houseList: [],
      dateType: 2,
      tabFlag: 0,
      current: 1,
      size: 30,
      total: 20,
      customtime: [],
      tablist: [],
      deptId: "",
      tableData: [],
      orgType: localStorage.getItem("orgType"),
      options: [],
      value: "1",
      statDateStart: "",
      statDateEnd: "",
      echarlist: [],
      echarlist1: [],
      echarlist2: [],
      echarlist3: [],
      echarlist4: [],
      teamAllLevel: [],
      teamAllLevels: [],
      teamAllLevelid: "",
      teamAllLeve2id: "",
      teamAllLeve2: [],
      teamAllLevels: [],
      teamAllLevelsId: '',
      sum1: "",
      avg1: "",
      num1: "",

      sum2: "",
      avg2: "",
      num2: "",

      sum3: "",
      avg3: "",
      num3: "",

      sum4: "",
      avg4: "",
      num4: "",

      sum5: "",
      avg5: "",
      num5: "",
      houseList: [],
      role: "",
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.sta_men_downLoad = this.permissions["sta_men_downLoad"];
  },
  mounted() {
    this.role = localStorage.getItem("orgType");
    if (this.role == 3) {
      this.houseId = localStorage.getItem("houseId");
      this.tabtimetap(4);
      this.deptFindList();
      this.teamAllLeve();
    } else {
      this.zkhousePage();
    }
  },
  methods: {
    // 排名颜色
    topThreeColor(index) {
      let str = ''
      switch (index) {
        case 0:
          str = '#F54D3F'
          break
        case 1:
          str = '#FF981E'
          break
        case 2:
          str = '#FFCC00'
          break
        default:
          str = '#E5F0FF'
          break
      }

      return str
    },

    downLoad() {
      let obj = {
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        deptId: this.deptId,
        dateType: this.dateType == 7 ? null : this.dateType,
        type: 1,
        current: 1,
        size: 1,
      };
      // exportMethodPost()
      exportMethodPost(
        "autoSR/cusStageStatistics/accountRankExport",
        "顾问排名",
        obj
      );
    },
    houseChange() {
      this.customtime = [];
      this.TimetoAhoose = 4;
      this.statDateStart = "";
      this.statDateEnd = "";
      this.sum1 = "";
      this.avg1 = "";
      this.num1 = "";

      this.sum2 = "";
      this.avg2 = "";
      this.num2 = "";

      this.sum3 = "";
      this.avg3 = "";
      this.num3 = "";

      this.sum4 = "";
      this.avg4 = "";
      this.num4 = "";

      
      this.sum5 = "";
      this.avg5 = "";
      this.num5 = "";
      this.tableData = [];
      this.tabFlag = 0;
      this.echarlist = [];
      this.echarlist1 = [];
      this.echarlist2 = [];
      this.echarlist3 = [];
      this.echarlist4 = [];
      this.tabtimetap(4);
      this.deptFindList();
      this.teamAllLeve();
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.tabtimetap(4);
          this.deptFindList();
          this.teamAllLeve();
        });
    },
    async deptChange() {
      await this.init();
    },
    // 获取一级
    teamAllLeve() {
      this.teamAllLevel = [{ name: "平均执行", value: "" }];
      this.teamAllLeve2 = [{ name: "总次数", value: "" }];
      this.teamAllLevels = [{name: '总次数', value: ''}]
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };
      if (this.dateType == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.dateType;
      }
      this.$api.http.teamAllLevel(pamaet).then((res) => {
        let arr1 = res.data.resultsList || [];
        let arr2 = res.data.sensitiveWordsList || [];
        arr1.map((item) => {
          this.teamAllLevel.push({
            name: item.name,
            value: item.marketingId,
          });
        });
        arr2.map((item) => {
          this.teamAllLeve2.push({
            name: item.words,
            value: item.words,
          });
        });
        this.teamAllLevelid = "";
        this.teamAllLeve2id = "";
      });
    },
    deptFindList() {
      this.options = [];
      // 获取团队
      this.$api.http
        .overviewfindList({
          houseId: this.houseId,
        })
        .then((res) => {
          let userinfo = JSON.parse(sessionStorage.getItem("zk-userInfo"));
          if (userinfo.content.deptType == 1) {
            this.options.push(...res.data);
            this.deptId = this.options[0].deptId;
          } else {
            this.options = [
              {
                name: "全部",
                deptId: "",
              },
            ];
            this.deptId = "";
            this.options.push(...res.data);
          }

          this.accountRank();
        });
    },
    async init() {
      this.accountRank();
      this.echarlist = await this.accountRankTOP10(1);
      this.echarlist1 = await this.accountRankTOP10(3, this.teamAllLevelid, "");
      this.echarlist2 = await this.accountRankTOP10(2);
      this.echarlist3 = await this.accountRankTOP10(4, "", this.teamAllLeve2id);
      this.echarlist4 = await this.accountRankTOP10(5, "", this.teamAllLeve2id);
    },
    // 获取图标
    async accountRankTOP10(type, marketingId = "", words = "") {
      let res = await this.$api.api.accountRankTOP10({
        houseId: this.houseId,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,

        deptId: this.deptId,
        dateType: this.dateType == 7 ? null : this.dateType,
        type,
        marketingId,
        words,
      });
      this["sum" + type] = res.data.sum || 0;
      this["num" + type] = res.data.num || 0;
      this["avg" + type] = res.data.avg || 0;
      let arr = [];
      let max = 0;
      let newarr = res.data.list || [];
      if (newarr.length != 0) {
        res.data.list.map((item) => {
          let obj = {};
          if (type == 1) {
            obj.name = item.accountName;
            obj.zxl = item.activeCustomer;
            arr.push(obj);
          } else if (type == 2) {
            obj.name = item.accountName;
            obj.zxl = Math.floor(item.sumDuration / 60);
            if (max < obj.zxl) {
              max = obj.zxl;
            }
            arr.push(obj);
          } else if (type == 3) {
            obj.name = item.accountName;
            obj.zxl = item.fraction;
            arr.push(obj);
          } else if(type == 5) {
            obj.name = item.accountName;
            obj.zxl = item.unTagCustomer;
            arr.push(obj);
          } else {
            obj.name = item.accountName;
            obj.zxl = item.prohibitedCustomer;
            arr.push(obj);
          }
        });
      }

      if (type == 2) {
        arr.forEach((item) => {
          item.percentage = (item.zxl / max) * 100;
        });
      }

      if (type == 3) {
        arr = arr;
      }

      if (type == 4) {
        console.log(
          arr,
          "arr4,ajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjaksl"
        );
        arr = this.dealData(arr);
      }
      if (type == 5) {
        arr = this.dealData(arr);
      }
      return arr;
    },
    accountRank() {
      this.$api.api
        .accountRank({
          houseId: this.houseId,
          statDateStart: this.statDateStart,
          statDateEnd: this.statDateEnd,
          current: this.current,
          size: this.size,
          deptId: this.deptId,
          dateType: this.dateType == 7 ? null : this.dateType,
        })
        .then((res) => {
          this.tableData = res.data.records;
          // 数据处理
          // 需要两个数组，一个用来展示
          this.deailDate();
          this.total = res.data.total;
        });
    },
    confirmtime() {
      this.dateType = 7;
      this.statDateStart = this.customtime[0];
      this.statDateEnd = this.customtime[1];
      this.init();
    },
    deailDate() {
      this.tablist = [];
      // 当他是第一个 小将
      if (this.tabFlag == 0) {
        this.tableData[0].resultsList.map((item, idx) => {
          let obj = {};
          obj.label = item.name;
          obj.props = "str" + idx;
          this.tablist.push(obj);
        });
        this.tableData.map((item) => {
          this.tablist.map((item1, idx) => {
            item[item1.props] = item.resultsList[idx].zxl;
          });
        });
      } else {
        this.tableData[0].sensitiveWordsList.map((item, idx) => {
          let obj = {};
          obj.label = item.words;
          obj.props = "str" + idx;
          this.tablist.push(obj);
        });
        this.tableData.map((item) => {
          this.tablist.map((item1, idx) => {
            item[item1.props] = item.sensitiveWordsList[idx].num;
          });
        });
      }
    },
    //平均执行率切换一级
    async teamAllLevelidtap() {
      // this.teamData3();
      this.echarlist1 = await this.accountRankTOP10(3, this.teamAllLevelid, "");
    },
    //违禁接待次数一级切换
    async teamAllLeve2tap() {
      // this.teamData5();
      this.echarlist3 = await this.accountRankTOP10(4, "", this.teamAllLeve2id);
    },
    echarCreat() {
      let myChart = echarts.init(document.getElementById("echar"));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        color: [
          "#66AFF5",
          "#FABD2B",
          "#6F8EDC",
          "#FFCF8F",
          "#F98120",
          "#1CC99E",
          "#9474FB",
          "#657292",
          "#7A6A99",
          "#BF5D52",
          "#EE6666",
          "#77B7E4",
          "#E6A065",
          "#9D5139",
          "#C1AA88",
          "#F87F7A",
          "#F6CF74",
          "#7F5506",
          "#88BB9B",
          "#6E99AA",
          "#5789D0",
        ],
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
        },
        series: [
          {
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141, 681807],
          },
        ],
      };
      myChart.setOption(option);
    },
    handleCurrentChange(e) {
      this.current = e;
      this.accountRank();
    },
    handleSizeChange(e) {
      this.size = e;
      this.accountRank();
    },
    //切换时间
    tabtimetap(index) {
      this.statDateStart = "";
      this.statDateEnd = "";
      this.dateType = index;
      this.init();
    },
    tabFlagChange(idx) {
      this.tabFlag = idx;
      this.deailDate();
    },
    dealData(arr) {
      console.log(arr, "arr");
      let num = Math.max.apply(
        Math,
        arr.map(function (o) {
          return o.zxl;
        })
      ); //结果：3
      console.log(num, "nums");
      arr.map((item) => {
        if (num != 0) {
          item.zxl1 = Math.floor((item.zxl / num) * 100);
        } else {
          item.zxl1 = 0;
        }
      });
      console.log(arr, "arr2");
      return arr;
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.sequenceNum {
      display: flex;
      width: 28px;
      height: 24px;
      justify-content: center;
      align-items: center;
      background: #E5F0FF;
      border-radius: 15px;
      color: #333333;
      margin-right: 10px;
    }
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-titel1 {
  width: 100%;
  height: 70px;
  background: #ffffff;
  // box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .titel-text {
    height: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #32363d;
    line-height: 70px;
    margin-left: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
  }
}

.app-top {
  // width: 100%;
  width: calc(100% - 270px);
  position: fixed;    
  z-index: 999;
  margin-top: -16px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  box-shadow: 0px 0px 10px 0px #dadada;
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    .titel-text {
      height: 100%;
      font-size: 16px;
      font-weight: 600;
      color: #32363d;
      text-indent: 30px;
    }
    .toptimeqhuan {
      width: 190px;
      height: 32px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-left: 20px;
      cursor: pointer;
    }
    .toptimeqhuan div {
      flex: 1;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
    }
  }
}

.app-box-san {
  width: 100%;
  min-height: 400px;
  display: flex;
  margin-top: 15px;
  .zuo {
    flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
  .you {
    height: 100%;
    flex: 1;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.hejisan {
  width: 92%;
  margin: 0 auto;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  .text1-1 {
    color: #666666;
  }
  .text1-2 {
    color: #333333;
    margin-top: 10px;
    font-weight: bold;
  }
}

// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 24px;
  .jinboxtit {
    width: 14%;
    height: 18px;
    padding-right: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .jinbox-box {
    position: relative;
    width: 75%;
    height: 100%;
    border-radius: 8px;
    background: #f2f2f2;
  }
  .boxbaifenbi {
    height: 100%;
    background: #60d7a0;
    border-radius: 8px;
  }
  .boxbaifenbi2 {
    height: 100%;
    background: #5b8ff9;
  }
  .jinboxbott {
    width: 16%;
    display: flex;
    justify-content: flex-end;
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 200px;
}
.label {
  font-size: 14px;
  font-weight: 400;
  color: #32363d;
  line-height: 32px;
  margin-left: 15px;
  min-width: 40px;
}
/deep/ .el-table__header-wrapper{
  thead{
    tr{
      th{
        background: #F5F7FA;
        color: #333333;
      }
    }
  }
}
</style>
