<template>
  <div class="box-center">
        <div class="app-titel">
        <el-row style="border-bottom: 1px solid #D8D8D8;height: 70px;">
            <el-col :span="12">
                <div style="line-height: 70px;color: #32363D;font-size: 18px;font-weight: 600;">
                  楼盘选择：
                  <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="screeningbox">
                    <div class="toptimeqhuan">
                        <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">今日</div>
                        <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">昨日</div>
                        <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">近一周</div>
                    </div>
                    <div style="margin-left: 26px;">
                        <el-date-picker
                             @change="confirmtime()" v-model="customtime"
                             type="daterange" range-separator="至"
                             start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <div style="width: 30px;height: 70px;margin-left: 20px;display:flex;align-items: center;">
                            <img @click="daochu()" style="width:30px;height: 30px;" src="/img/xiazai.png" alt="" id="poi">
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div style="margin-top: 15px;padding-bottom: 30px;">
                    <table>
                        <thead>
                            <tr>
                                <th class="theadtd">员工</th>
                                <th class="theadtd">录音条数</th>
                                <th class="theadtd">录音时长
                                    <span class='thding'>
                                        <i class='sotoA' @click="ascending(-1)"></i>
                                        <i class='sotoB' @click="Descendingorder(-1)"></i>
                                    </span>
                                </th>
                                <th class="theadtd" v-for="(item,index) in headerlist" :key='index'>
                                   {{item.name}}
                                    <span class='thding'>
                                        <i @click="ascending(index)" class='sotoA'></i>
                                        <i @click="Descendingorder(index)" class='sotoB'></i>
                                    </span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in centedlist" :key='index'>
                                <td class="theadtd">{{item.name}}</td>
                                <td class="theadtd">{{item.receptionCount}}</td>
                                <td class="theadtd">{{(item.sumDuration == null ? '' : item.sumDuration) }}</td>
                                <td class="theadtd" v-for="(cet,index) in item.ejList" :key='index'>
                                    {{cet.zxl}}%
                                </td>
                            </tr>
                        </tbody>
                        <tfoot>
                           <tr>
                               <td class="theadtd">统计</td>
                               <td class="theadtd">{{footerlist.receptionCount}}</td>
                               <td class="theadtd">{{ (footerlist.sumDuration == null ? '' : footerlist.sumDuration)}}</td>
                               <td class="theadtd" v-for="(cet,index) in footerlist.ejList" :key='index'>
                                   {{cet.zxl}}%
                               </td>
                           </tr>
                        </tfoot>
                    </table>
                </div>
            </el-col>
        </el-row>
    </div>
      <div style="margin-top: 15px;">
        <el-row :gutter="15">
            <el-col :span="12">
                <div class="zgutteruo">
                    <div class="zgutteruo-tit">录音量排名</div>
                    <div class="Templatetable">
                        <div class="table-tit">
                            <div>排名</div>
                            <div>员工</div>
                            <div>录音时长</div>
                        </div>
                        <div class="table-cent" v-for="(itcen,inde) in quantitylist" :key='inde' >
                            <div style="display: flex;align-items: center;justify-content: center">
                                <img v-if="inde==0" style="width: 30px;height:30px;" src="/img/ranking1.png" alt="">
                                <img v-else-if="inde==1" style="width: 30px;height:30px;" src="/img/ranking2.png" alt="">
                                <img v-else-if="inde==2" style="width: 30px;height:30px;" src="/img/ranking3.png" alt="">
                                <div v-else class="indeclass">{{inde+1}}</div>
                            </div>
                            <div>{{itcen.name}}</div>
                            <div>{{itcen.sumDuration}}</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="zgutteruo">
                    <div class="zgutteruo-tit">执行率排行</div>
                    <div class="Templatetable">
                        <div class="zhibiaotab">
                            <div :class="{ xianzhongbiao: Timeindex == index }" @click="Timeindextab(index)"
                             v-for="(item,index) in performanceratelist" :key='index'>{{item.name}}</div>
                        </div>
                        <div style="overflow-y:auto;height: 400px;width: 94%;margin: 0 auto;">
                            <div  class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
                                <div class="jinboxtit">{{item.name}}</div>
                                <div class="jinbox-box">
                                    <div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
                                </div>
                                <div class="jinboxbott">{{item.avgZxl}}%</div>
                            </div>
                        </div>

                    </div>
                </div>
            </el-col>
        </el-row>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
         currentPage4: 1,
          customtime:'',
          TimetoAhoose:2,
          fromobj:{
              starttime:'',
              endoftime:''
          },
          houseId:'',
          headerlist:[],
          centedlist:[],
          footerlist:[],
          quantitylist:[
            {name:'萨达多撒',sumDuration:'10000'}
          ],
          performanceratelist:[],
          Timeindex:0,
            ceratelist:[
            {name:'还是得',avgZxl:80},
             {name:'大大奥德赛',avgZxl:90},
              {name:'沙发和',avgZxl:20},
               {name:'还是得',avgZxl:10},
                {name:'还客户家客户是得',avgZxl:80},
        ]
    };
  },
  mounted() {
    // this.houseId=localStorage.getItem("AitemId");
    //         this.Accesstolevel()
  },
  methods: {
       //时间tab切换
            tabtimetap(index){
                this.TimetoAhoose=index;
                this.fromobj.starttime='';
                this.fromobj.endoftime='';
                this.customtime='';
                this.Accesstolevel()
            },
            //时间选择
            confirmtime(){
                if(this.customtime==''){

                }else{
                    this.TimetoAhoose=6;
                    const d = new Date(this.customtime[0])
                    this.fromobj.starttime = d.getFullYear() + '-' + this.Zeropadding((d.getMonth() + 1)) + '-' + this.Zeropadding(d.getDate())
                    const c = new Date(this.customtime[1])
                    this.fromobj.endoftime = c.getFullYear() + '-' + this.Zeropadding((c.getMonth() + 1)) + '-' + this.Zeropadding(c.getDate())
                    console.log(this.fromobj)
                    this.Accesstolevel()
                }
            },
            //时间补0
            Zeropadding(s) {
                return s < 10 ? '0' + s : s
            },
            //获取数据
            Accesstolevel(){
                this.headerlist=[];
                this.centedlist=[];
                this.footerlist=[];
                var datatype='';
                if(this.TimetoAhoose==6){
                    datatype=''
                }else {
                    datatype=this.TimetoAhoose
                }
                axios({
                    url: `${jypath}/cusStageStatistics/findPersonalData`,
                    method: 'get',
                    params: {
                        dateType:datatype,
                        itemId:this.houseId,
                        statDateStart:this.fromobj.starttime,
                        statDateEnd:this.fromobj.endoftime
                    }
                }).then(data => {
                    if(data.data.code==10000){
                        var result = data.data.data;
                        this.headerlist=result.headerList;
                        this.centedlist=result.list;
                        this.footerlist= result.total;
                        this.tapequantity()
                        this.performancerate()
                    }
                })
            },
            //升序
            ascending(index){
                var parames={
                    list:this.centedlist,
                    type:index,
                    sort:0,
                }
                this.getorgCode(parames)
            },
            //降序
            Descendingorder(index){
                var parames={
                    list:this.centedlist,
                    type:index,
                    sort:1,
                }
                this.getorgCode(parames)
            },
            getorgCode(parames){
                this.centedlist=[];
                axios({
                    url: `${jypath}/cusStageStatistics/findPersonalDataSort`,
                    method: 'post',
                    data: parames
                }).then(data => {
                    if(data.data.code==10000){
                        var result = data.data.data;
                        this.centedlist=result;
                    }
                })
            },
            //导出
            daochu(){
                var datatype='';
                if(this.TimetoAhoose==6){
                    datatype=''
                }else {
                    datatype=this.TimetoAhoose
                }
                var s = "statDateStart=" + this.fromobj.starttime + "&statDateEnd=" + this.fromobj.endoftime + "&itemId=" + this.houseId +"&dateType="+datatype;
                window.location.href = "${jypath}/marketing/dczxl?" + s;
            },
            //录音量排名
            tapequantity(){
                this.quantitylist=[];
                var datatype='';
                if(this.TimetoAhoose==6){
                    datatype=''
                }else {
                    datatype=this.TimetoAhoose
                }
                axios({
                    url: `${jypath}/cusStageStatistics/findReceptionTime`,
                    method: 'get',
                    params: {
                        dateType:datatype,
                        itemId:this.houseId,
                        statDateStart:this.fromobj.starttime,
                        statDateEnd:this.fromobj.endoftime
                    }
                }).then(data => {
                    if(data.data.code==10000){
                        var result = data.data.data;
                        this.quantitylist=result;
                    }
                })
            },
            //指标执行率tab切换
            Timeindextab(index){
                this.ceratelist=[];
                this.Timeindex=index;
                this.ceratelist=this.performanceratelist[index].acc
            },
            //指标执行率
            performancerate(){
                this.performanceratelist=[];
                var datatype='';
                if(this.TimetoAhoose==6){
                    datatype=''
                }else {
                    datatype=this.TimetoAhoose
                }
                axios({
                    url: `${jypath}/cusStageStatistics/findExecutionRateAnalysis`,
                    method: 'get',
                    params: {
                        dateType:datatype,
                        itemId:this.houseId,
                        statDateStart:this.fromobj.starttime,
                        statDateEnd:this.fromobj.endoftime
                    }
                }).then(data => {
                    if(data.data.code==10000){
                        var result = data.data.data;
                        this.performanceratelist=result;
                        this.ceratelist=this.performanceratelist[0].acc
                    }
                })
            }
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}
.app-titel{
      width: 100%;
      min-height: 240px;
      max-height: 500px;
      background: #FFFFFF;
      box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);border-radius: 8px;
      padding-left: 30px;
      padding-right: 30px;
      overflow-y:auto;
      overflow-x:auto;
  }
  .screeningbox{
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
  }
  .toptimeqhuan{
      width: 190px;height: 32px;background: #FFFFFF;border-radius: 4px;
      border: 1px solid #E0E0E0;display: flex;align-items: center;overflow: hidden;
  }
  .toptimeqhuan div{
      flex: 1;text-align: center;
      line-height: 32px;font-size: 16px;
  }
  .tophove{
      color: #ffffff;background: #2671E2;
  }
  .theadtd{
      width: 140px;
      height: 48px;
      border: 1px solid #E0E0E0;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      color: #32363D;
      position: relative;
  }
  .thding{
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      height: 34px;
      width: 24px;
      vertical-align: middle;
      cursor: pointer;
      overflow: initial;
      position: relative;
  }
  .sotoA{
      width: 0px;
      height: 0px;
      border-width: 6px;
      border-style: solid;
      border-color:  transparent  transparent black transparent;
      margin-top: 3px;
  }
  .sotoB{
      width: 0px;
      height: 0px;
      border-width: 6px;
      border-style: solid;
      border-color: black transparent transparent transparent;
      margin-top: 2px;
  }
  .zgutteruo{
      width: 100%;
      height: 477px;
      background: #FFFFFF;
      box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
      border-radius: 8px;
  }
  .zgutteruo-tit{
      width: 100%;
      height: 60px;
      line-height: 60px;
      font-size: 16px;
      color: #32363D;
      font-weight: 500;
      text-indent: 30px;
      border-bottom: 1px solid #E0E0E0;
  }
  .Templatetable{
      width: 94%;height: 100%;margin: 0 auto;overflow-y:auto;
  }
  .table-tit{
      width: 100%;height: 40px;line-height: 40px;display: flex;
      background: #F2F4F5;margin-top: 22px;
  }
  .table-tit>div:nth-of-type(1){
      width: 10%;text-align: center;font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #606775;
  }
  .table-tit>div:nth-of-type(2){
      width: 70%;text-align: center;font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #606775;
  }
  .table-tit>div:nth-of-type(3){
      width: 20%;text-align: center;font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #606775;
  }

  .table-cent{
      width: 100%;height: 44px;
      line-height: 44px;display: flex;
      border-bottom: 1px solid #F2F4F5;
  }
  .table-cent>div:nth-of-type(1){
      width: 10%;text-align: center;font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;color: #32363D;
  }
  .table-cent>div:nth-of-type(2){
      width: 70%;text-align: center;
      font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC;color: #32363D;
  }
  .table-cent>div:nth-of-type(3){
      width: 20%;text-align: center;
      font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC;color: #32363D;
  }
  .indeclass{
      width: 20px;height:20px;border-radius:50%;
      background: #ECF1FF;color:#ffffff;text-align: center;line-height: 20px;font-size: 14px;
  }
  .zhibiaotab {
      margin: 0 0 0 0;
      padding: 0 0 0 0;
      height: 60px;
      line-height: 45px;
      color: #666666;
      font-size: 14px;
      display: flex;
      /*flex-wrap: nowrap;*/
      width: 100%;
      overflow-x: auto;
      margin-top: 6px;
  }
  .zhibiaotab div {
      height: 20px;
      margin-right:60px;
      white-space: nowrap;
  }
  .xianzhongbiao {
      color: #008EF2;
      font-weight: 600;
  }

  .jinbox {
      width: 100%;
      height: 18px;
      line-height: 18px;
      display: flex;
      font-size: 16px;
      color: #2C3542;
      margin-top: 18px;
  }

  .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;
  }

  .boxbaifenbi2 {
      height: 100%;
      background: #5B8FF9;
  }

  .jinboxbott {
      width: 16%;
      text-indent: 50px;
  }
</style>
