<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" placeholder="请选择" filterable @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;font-weight: bold;">接待时间:</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: TimetoAhoose == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: TimetoAhoose == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: TimetoAhoose == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker v-model="customtime" @change="confirmtime()" type="daterange" :clearable="false"
            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: auto; margin-right: 10px" v-if="sta_team_downLoad">
          <el-button @click="downLoad" icon="el-icon-download">导出</el-button>
        </div>
      </div> -->
      <div class="app-titel projectBackend">
        <div class="titel-text">筛选日期：</div>
        <div style="margin-left: 14px;">
          <el-button
            :class="{ 'el-button--primary': TimetoAhoose == 0 }"
            @click="tabtimetap(0)"
            >今天</el-button
          >
          <el-button
            :class="{ 'el-button--primary': TimetoAhoose == 4 }"
            @click="tabtimetap(4)"
            >近7天</el-button
          >
          <el-button
            :class="{ 'el-button--primary': TimetoAhoose == 6 }"
            @click="tabtimetap(6)"
            >近30天</el-button
          >
        </div>
        <div style="margin-left: 26px">
          <el-date-picker v-model="customtime" @change="confirmtime()" type="daterange" :clearable="false"
            range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="cen-tab" :style="{'margin-top':role != 3?'100px':'60px'}">
      <div style="overflow: auto">
        <table>
          <tbody>
            <tr style="background: #F5F7FA;color: #333333;">
              <td v-for="(item, index) in tablsitdata1" :key="index" class="theadtd">
                {{ item.name }}
              </td>
            </tr>
            <tr v-for="(item, iddex) in tablsitdata2" :key="iddex">
              <td v-if="iddex + 1 == tablsitdata2.length" class="theadtd">
                合计/平均
              </td>
              <td v-else class="theadtd">{{ iddex + 1 }}</td>

              <td class="theadtd">{{ item.deptName }}</td>
              <td class="theadtd">{{ item.receptionCount }}</td>
              <td class="theadtd">{{ item.accountNum }}</td>
              <td class="theadtd">{{ item.activeCustomer || 0 }}</td>
              <td class="theadtd">{{ item.prohibitedCustomer || 0 }}</td>
              <td class="theadtd">
                {{ Math.floor(item.sumDuration / 60) || 0 }}
              </td>
              <td class="theadtd">{{ item.fraction || 0 }}%</td>
              <td class="theadtd">{{ item.prohibitedZb || 0 }}%</td>
              <td class="theadtd" v-for="(che, ind) in item.resultsList" :key="ind">
                {{ che.zxl }}%
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">接待量排名
            <el-tooltip effect="light" content="筛选时间内，已经结束的接待条数，不包含待接单；" placement="bottom-end">
              <i class="pop"></i>
            </el-tooltip>
          </div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">团队总数</div>
            <div class="text1-2">{{ teamobj1.num || 0 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ teamobj1.avg || 0 }}个</div>
          </div>
        </div>
        <div v-if="teamobj1.list.length != 0" style="width: 94%; margin: 0 auto">
          <div class="jinbox" v-for="(item, i) in teamobj1.list" :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',
            'border': i + 1 == 1 ? '1px solid #FFCAC6' : i + 1 == 2 ? '1px solid #FFD6AA' : i + 1 == 3 ? '1px solid #FFEEAC' : 'none',
            }">{{ 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" v-if="teamobj1.list.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">接待时长排名</div>
        </div>
        <div class="hejisan">
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">团队总数</div>
            <div class="text1-2">{{ teamobj2.num || 0 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">均值</div>
            <div class="text1-2">
              {{ Math.floor(teamobj2.avg / 60) || 0 }}分钟
            </div>
          </div>
        </div>
        <div v-if="teamobj2.list.length != 0" style="width: 94%; margin: 0 auto">
          <div class="jinbox" v-for="(item, i) in teamobj2.list" :key="i">
            <!-- <div class="jinboxtit">{{ item.name }}</div>
            <div class="jinbox-box">
              <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div>
            </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',
            'border': i + 1 == 1 ? '1px solid #FFCAC6' : i + 1 == 2 ? '1px solid #FFD6AA' : i + 1 == 3 ? '1px solid #FFEEAC' : 'none',
            }">{{ 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" v-if="teamobj2.list.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">销讲执行率</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">{{ teamobj3.num || 0 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ teamobj3.avg || 0 }}%</div>
          </div>
        </div>
        <div v-if="teamobj3.list.length != 0" style="width: 94%; margin: 0 auto">
          <div class="jinbox" v-for="(item, i) in teamobj3.list" :key="i">
             <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',
           'border': i + 1 == 1 ? '1px solid #FFCAC6' : i + 1 == 2 ? '1px solid #FFD6AA' : i + 1 == 3 ? '1px solid #FFEEAC' : 'none',
             }">{{ 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.zxl + '%' }">
              </div>

            </div>
            <div class="jinboxbott">{{ item.zxl }}%</div>
          </div>
        </div>
        <div class="nulllist" v-if="teamobj3.list.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">销讲能力雷达图</div>
        </div>
        <div id="main" v-if="isshowcd2 == true" style="width: 94%; margin: 0 auto"></div>
        <div class="nulllist" v-if="isshowcd2 == false">
          <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">违禁接待次数
            <el-tooltip effect="light" content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；" placement="bottom-end">
              <i class="pop"></i>
            </el-tooltip>
          </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: 50%;text-align: center;">
            <div class="text1-1">团队总数</div>
            <div class="text1-2">{{ teamobj5.num || 0 }}个</div>
          </div>
          <div class="sanbox1" style="width: 50%;text-align: center;">
            <div class="text1-1">均值</div>
            <div class="text1-2">{{ teamobj5.avg || 0 }}次</div>
          </div>
        </div>
        <div v-if="teamobj5.list.length != 0" style="width: 94%; margin: 0 auto">
          <div class="jinbox" v-for="(item, i) in teamobj5.list" :key="i">
            <!-- <div class="jinboxtit">{{ item.name }}</div>
            <div class="jinbox-box">
              <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div>
            </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',
           'border': i + 1 == 1 ? '1px solid #FFCAC6' : i + 1 == 2 ? '1px solid #FFD6AA' : i + 1 == 3 ? '1px solid #FFEEAC' : 'none',
             }">{{ 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" v-if="teamobj5.list.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">违禁话术雷达图</div>
        </div>
        <div v-if="isshowcd == true" id="main2" style="width: 94%; margin: 0 auto"></div>
        <div class="nulllist" v-if="isshowcd == false">
          <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 {
  data() {
    return {
      houseId: "",
      TimetoAhoose: 4,
      customtime: [],
      statDateStart: "",
      statDateEnd: "",
      tablsitdata1: [],
      tablsitdata2: [],
      teamobj1: {
        avg: "",
        list: [],
        num: "",
      },
      teamobj2: {
        avg: "",
        list: [],
        num: "",
      },
      teamobj3: {
        avg: "",
        list: [],
        num: "",
      },
      teamobj5: {
        avg: "",
        list: [],
        num: "",
      },
      teamAllLevel: [],
      teamAllLevelid: "",
      teamAllLeve2: [],
      teamAllLeve2id: "",
      ceratelist: [],
      role: "",
      houseList: [],
      isshowcd: true,
      isshowcd2: true,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.sta_team_downLoad = this.permissions["sta_team_downLoad"];
  },
  mounted() {
    this.role = localStorage.getItem("orgType");
    if (this.role == 3) {
      this.houseId = localStorage.getItem("houseId");
      this.allhttp();
    } else {
      this.zkhousePage();
    }
  },
  methods: {
    downLoad() {
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      exportMethodPost(
        "autoSR/cusStageStatistics/teamTableExport",
        "团队对比",
        pamaet
      );
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.allhttp();
        });
    },
    houseChange() {
      this.customtime = [];
      this.TimetoAhoose = 4;
      this.statDateStart = "";
      this.statDateEnd = "";
      this.allhttp();
    },
    allhttp() {
      this.teamteamTable();
      this.teamData1();
      this.teamData2();
      this.teamData3();
      this.teamData4();
      this.teamData5();
      this.teamData6();
      this.teamAllLeve();
    },
    // 获取一级
    teamAllLeve() {
      this.teamAllLevel = [{ name: "平均执行", value: "" }];
      this.teamAllLeve2 = [{ name: "总次数", value: "" }];
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      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 = "";
      });
    },
    //表格
    teamteamTable() {
      this.tablsitdata1 = [
        { name: "序号" },
        { name: "团队" },
        { name: "接待量" },
        { name: "接待顾问" },
        { name: "有效接待" },
        { name: "违禁接待次数" },
        { name: "接待时长（分）" },
        { name: "平均执行率" },
        { name: "违禁接待占比" },
      ];
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
      };

      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamteamTable(pamaet).then((res) => {
        let newlist = res.data || [];
        this.tablsitdata2 = res.data;
        newlist[0].resultsList.map((item) => {
          this.tablsitdata1.push({ name: item.name });
        });
      });
    },
    //接待量排名
    teamData1() {
      this.teamobj1 = {
        avg: "",
        list: [],
        num: "",
      };
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 1,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let arr = [];
        res.data.list.map((item) => {
          let obj = {};
          obj.name = item.deptName;
          obj.zxl = item.activeCustomer;
          arr.push(obj);
        });
        arr = this.dealData(arr);
        this.teamobj1 = {
          avg: res.data.avg || 0,
          num: res.data.num || 0,
          list: arr || [],
        };
      });
    },
    //录音时长排名
    teamData2() {
      this.teamobj2 = {
        avg: "",
        list: [],
        num: "",
      };
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 2,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let arr = [];
        res.data.list.map((item) => {
          let obj = {};
          obj.name = item.deptName;
          obj.zxl = Math.floor(item.sumDuration / 60);
          arr.push(obj);
        });
        arr = this.dealData(arr);
        this.teamobj2 = {
          avg: res.data.avg || 0,
          num: res.data.num || 0,
          list: arr || [],
        };
      });
    },
    //销讲执行率切换一级
    teamAllLevelidtap() {
      this.teamData3();
    },
    //销讲执行率
    teamData3() {
      this.teamobj3 = {
        avg: "",
        list: [],
        num: "",
      };
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 3,
        marketingId: this.teamAllLevelid,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let arr = [];
        res.data.list.map((item) => {
          let obj = {};
          obj.name = item.deptName;
          obj.zxl = item.fraction;
          arr.push(obj);
        });
        // arr=this.dealData(arr)
        this.teamobj3 = {
          avg: res.data.avg || 0,
          num: res.data.num || 0,
          list: arr || [],
        };
      });
    },
    //销讲雷达图
    teamData4() {
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 4,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let namelist = [];
        let datalist = [];
        let newlinename = [];
        let arr = res.data.list || [];

        if (arr.length != 0) {
          arr.map((item) => {
            namelist.push(item.deptName);
            datalist.push({
              name: item.deptName,
              value: [],
            });
          });
          arr[0].resultsList.map((item) => {
            newlinename.push({
              name: item.name,
              max: 100,
            });
          });
          arr.map((item, index) => {
            datalist.map((che) => {
              if (item.deptName == che.name) {
                item.resultsList.map((as) => {
                  che.value.push(as.zxl);
                });
              }
            });
          });
        }

        this.initecah(namelist, datalist, newlinename);
      });
    },
    //违禁话术雷达图
    teamData6() {
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 6,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let namelist = [];
        let datalist = [];
        let newlinename = [];
        let arr = res.data.list || [];
        if (arr.length != 0) {
          arr.map((item) => {
            namelist.push(item.deptName);
            datalist.push({
              name: item.deptName,
              value: [],
            });
          });
          arr[0].sensitiveWordsList.map((item) => {
            newlinename.push({
              name: item.words,
              max: 100,
            });
          });
          arr.map((item, index) => {
            datalist.map((che) => {
              if (item.deptName == che.name) {
                item.sensitiveWordsList.map((as) => {
                  che.value.push(as.num);
                });
              }
            });
          });
        }
        this.initecah2(namelist, datalist, newlinename);
      });
    },

    initecah(namelist, datalist, newlinename) {
      if (datalist.length == 0) {
        this.isshowcd2 = false;
        return;
      } else {
        this.isshowcd2 = true;
      }
      echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: [
          "#6F8EDC",
          "#EE6666",
          "#F98120",
          "#1CC99E",
          "#9474FB",
          "#66AFF5",
          "#FABD2B",
          "#FFCF8F",
          "#657292",
          "#7A6A99",
          "#BF5D52",
          "#77B7E4",
          "#E6A065",
          "#9D5139",
          "#C1AA88",
          "#F87F7A",
          "#F6CF74",
          "#7F5506",
          "#88BB9B",
          "#6E99AA",
          "#5789D0",
        ],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: namelist,
          right: "10",
          top: "10",
          icon:"roundRect"
        },
        color: ["#2671E2", "#F3787B"],
        radar: {
          // shape: 'circle',
          indicator: newlinename,
        },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            data: datalist,
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initecah2(namelist, datalist, newlinename) {
      if (datalist.length == 0) {
        this.isshowcd = false;
        return;
      } else {
        this.isshowcd = true;
      }
      echarts.init(document.getElementById("main2")).dispose();
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        color: [
          "#6F8EDC",
          "#EE6666",
          "#F98120",
          "#1CC99E",
          "#9474FB",
          "#66AFF5",
          "#FABD2B",
          "#FFCF8F",
          "#657292",
          "#7A6A99",
          "#BF5D52",
          "#77B7E4",
          "#E6A065",
          "#9D5139",
          "#C1AA88",
          "#F87F7A",
          "#F6CF74",
          "#7F5506",
          "#88BB9B",
          "#6E99AA",
          "#5789D0",
        ],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: namelist,
          right: "10",
          top: "10",
          icon:"roundRect"
        },
        color: ["#2671E2", "#F3787B"],
        radar: {
          // shape: 'circle',
          indicator: newlinename,
        },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            data: datalist,
          },
        ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    //违禁接待次数一级切换
    teamAllLeve2tap() {
      this.teamData5();
    },
    //违禁接待次数
    teamData5() {
      this.teamobj5 = {
        avg: "",
        list: [],
        num: "",
      };
      let pamaet = {
        houseId: this.houseId,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        type: 5,
        words: this.teamAllLeve2id,
      };
      if (this.TimetoAhoose == 7) {
        pamaet.dateType = null;
      } else {
        pamaet.dateType = this.TimetoAhoose;
      }
      this.$api.http.teamData(pamaet).then((res) => {
        let arr = [];
        res.data.list.map((item) => {
          let obj = {};
          obj.name = item.deptName;
          obj.zxl = item.prohibitedCustomer;
          arr.push(obj);
        });
        arr = this.dealData(arr);
        this.teamobj5 = {
          avg: res.data.avg || 0,
          num: res.data.num || 0,
          list: arr || [],
        };
      });
    },

    // 自定义时间
    confirmtime() {
      this.TimetoAhoose = 7;
      (this.statDateStart = this.customtime[0]),
        (this.statDateEnd = this.customtime[1]);
      this.allhttp();
    },
    //切换时间
    tabtimetap(index) {
      this.TimetoAhoose = index;
      this.statDateStart = "";
      this.statDateEnd = "";
      this.customtime = [];
      this.allhttp();
    },
    dealData(arr) {
      console.log(arr);
      let num = Math.max.apply(
        Math,
        arr.map(function (o) {
          return o.zxl;
        })
      ); //结果：3
      arr.map((item) => {
        item.zxl1 = Math.floor((item.zxl / num) * 100) || 0;
      });
      return arr;
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
/* 添加table滚动条 */
table {
  border-collapse: collapse;
  width: 100%;
}

tbody {
  display: block;
  // width: 100%;
  // overflow-x: auto;
  height: 220px;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  // word-break: break-all;
}

.box-center {
  width: 100%;
  padding: 20px 15px;
  min-width: 1000px;
}

.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 60px;
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}

.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;
    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;
    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;
            display: flex;
            align-items: center;
      }

      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }

  .you {
    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;
            display: flex;
            align-items: center;
      }

      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }

    #main {
      height: calc(400px - 55px);
    }

    #main2 {
      height: calc(400px - 55px);
    }
  }
}

.hejisan {
  width: 92%;
  margin: 15px 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;
  align-items: center;

  .jinboxtit {
    width: 14%;
    height: 18px;
    padding-right: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .jinbox-box {
    width: 75%;
    height: 100%;
    border-radius: 8px;
    background: #f2f2f2;
  }

  .boxbaifenbi {
    height: 100%;
    background: #60d7a0;
    border-radius: 8px;
    max-width: 100%;
  }

  .boxbaifenbi2 {
    height: 100%;
    background: #5b8ff9;
    max-width: 100%;
  }

  .jinboxbott {
    width: 16%;
    text-indent: 16px;
  }
}

.theadtd {
  width: 140px;
  height: 48px;
  border-bottom: 1px solid #E0E0E0;
  text-align: center;
  line-height: 48px;
  font-size: 14px;
  color: #32363d;
}

.nulllist {
  flex: 1;
}
.sequenceNum {
      display: flex;
      width: 26px;
      height: 24px;
      justify-content: center;
      align-items: center;
      background: #E5F0FF;
      border-radius: 15px;
      color: #333333;
      margin-right: 10px;
    }
    .pop{
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url('../../../public/img/pop.png') no-repeat;
  background-size: 100%;
  margin-left: 6px;
}
/deep/ .el-button--primary{
  background: #2671E2 !important;
  border: 1px solid #2671E2 !important;
}
</style>
