<template>
  <div class="box-center">
    <div v-if="role==3">
      <!-- <div class="app-titel">
              <div class="titel-text">楼盘选择</div>
              <div style="margin-left: 26px">
                <el-select v-model="houseId" @change="houseChange" placeholder="请选择">
                <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 class="titel-text">时间</div>
            <div class="toptimeqhuan">
              <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">今天</div>
              <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> 近7天 </div>
              <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">  近30天 </div>
            </div>
            <div style="margin-left: 26px">
              <el-date-picker
                @change="confirmtime()"
                v-model="customtime"
                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>
        <!-- 卡片部分 -->
        <div class="page-container">
            <div class="pagechen">
              <div class="pageboxtitle1">接待量 (个)</div>
              <div class="pageboxtitle2">
                <div class="span1">{{cardlist.datalist.receptionCount || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{cardlist.sequential.receptionCount || 0}}</span>
                  <span class="span2-2" v-if="cardlist.liftlist.receptionCount>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.receptionCount || 0}}%
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.receptionCount<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.receptionCount || 0}}%
                  </span>
                </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">有效接待(个)</div>
              <div class="pageboxtitle2">
                <div class="span1">{{cardlist.datalist.activeCustomer || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{cardlist.sequential.activeCustomer || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.activeCustomer || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.activeCustomer>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.activeCustomer || 0}}%
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.activeCustomer<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.activeCustomer || 0}}%
                  </span>
                </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">正在接待 (个)</div>
              <div class="pageboxtitle2">
                <div class="span1">{{cardlist.datalist.receivingCustomer || 0}}</div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">平均接待时长(分钟)</div>
              <div class="pageboxtitle2">
                <div class="span1">{{Math.floor(cardlist.datalist.avgDuration/60) || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{Math.floor(cardlist.sequential.avgDuration/60) || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.avgDuration || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.avgDuration>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.avgDuration || 0}}%
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.avgDuration<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.avgDuration || 0}}%
                  </span>
                </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">销讲执行率(%)</div>
              <div class="pageboxtitle2">
                <div class="span1">{{cardlist.datalist.fraction || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{cardlist.sequential.fraction || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.fraction || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.fraction>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.fraction || 0}}%
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.fraction<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.fraction || 0}}%
                  </span>
                </div>
              </div>
            </div>
        </div>
        <div style=" margin-top: 20px;" class="page-container">
            <div class="pagechen">
              <div class="pageboxtitle1">违禁预警(个)</div>
              <div class="pageboxtitle2">
                  <div class="span1">{{cardlist.datalist.prohibitedCustomer || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{cardlist.sequential.prohibitedCustomer || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.prohibitedCustomer || 0}}%</span> -->
                 <span class="span2-2" v-if="cardlist.liftlist.prohibitedCustomer>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.prohibitedCustomer || 0}}%
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.prohibitedCustomer<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.prohibitedCustomer || 0}}%
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">违禁占比(%)</div>
              <div class="pageboxtitle2">
                  <div class="span1">{{cardlist.datalist.prohibitedZb || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{cardlist.sequential.prohibitedZb || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.prohibitedZb || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.prohibitedZb>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.prohibitedZb || 0}}%
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.prohibitedZb<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.prohibitedZb || 0}}%
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">顾问(个)</div>
              <div class="pageboxtitle2">
                    <div class="span1">{{cardlist.datalist.accountNum || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{cardlist.sequential.accountNum || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.accountNum>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.accountNum || 0}}%
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.accountNum<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.accountNum || 0}}%
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen1"></div>
            <div class="pagechen1" ></div>
        </div>

        <div class="app-box-san">
           <div class="zuo">
              <div class="title">
                <div class="text1">维度触达占比</div>
              </div>
              <div v-if="indexZxllist.length==0" style="display:flex;justify-content: center; align-items: center;height: 60%;">
                <div>暂无数据</div>
              </div>
               <div v-else   class="tabbox" style="display:flex;flex-wrap: wrap;height: 290px;overflow-y: auto;width: 90%;margin:0 auto;">
                  <div v-for="(item,index) in indexZxllist" :key="index" style="width:33.3%;margin-top: 10px;">
                    <div style="width:130px;height:100px;margin:0 auto;"><el-progress :stroke-width="12" :width='130'  type="dashboard" :percentage="item.zxl" ></el-progress></div>
                    <div style="width:100%;text-align: center;">{{item.name.substring(0,3)}}</div>
                  </div>
               </div>
           </div>
           <div class="you">
              <div class="title">
                <div class="text1">员工执行率排名(TOP10)</div>
              </div>

              <div  v-if="employeeExecutionRatelist.list.length==0" style="display:flex;justify-content: center; align-items: center;height: 60%;">
                <div>暂无数据</div>
              </div>
              <div class="hejisan"  v-if="employeeExecutionRatelist.list.length!=0">
                  <div  class="sanbox1" style="width: 40%;">
                    <div class="text1-1">顾问</div>
                    <div class="text1-2">{{employeeExecutionRatelist.num || ''}}</div>
                  </div>
                  <div  class="sanbox1" style="width: 25%;">
                    <div class="text1-1">平均执行</div>
                    <div class="text1-2">{{employeeExecutionRatelist.fraction || ''}}</div>
                  </div>
              </div>
              <div class="tabbox"  v-if="employeeExecutionRatelist.list.length!=0">
                <div style="overflow-y:auto;height: 230px;width: 94%;margin: 0 auto;">
                    <div class="jinbox" v-for="(item,i) in employeeExecutionRatelist.list" :key='i'>
                        <div class="jinboxtit">{{item.accountName}}</div>
                        <div class="jinbox-box">
                            <div class="boxbaifenbi" :style="'width:'+(item.fraction)+'%;'"></div>
                        </div>
                        <div class="jinboxbott">{{item.fraction}}%</div>
                    </div>
                </div>
              </div>
           </div>
        </div>

        <div class="app-box-san">
          <div class="zuo">
            <div class="title">
              <div class="text1">违禁提醒</div>
            </div>

            <div class="tabbox">
              <el-table
                  :header-cell-style="{background:'#F2F4F5'}"
                  :data="prohibitedlist"
                  height="320"
                  style="width: 100%">
                  <el-table-column
                    prop="agentName"
                    label="顾问"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="num"
                    label="禁忌执行率"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="staTime"
                    label="接待时间"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="date"
                    label="操作"
                    align="center">
                      <template slot-scope="">
                        <div style="color: #2671E2;">查看</div>
                      </template>
                  </el-table-column>
                </el-table>
              </div>

          </div>
          <div class="you">
            <div class="title">
              <div class="text1" @click="tabclick('0')" :class="{ colostyle: classatec == 0 }">低电工牌</div>
              <div class="text1" @click="tabclick('1')" :class="{ colostyle: classatec == 1 }">离线工牌</div>
            </div>
              <div class="tabbox" v-if="classatec==0">
                <el-table
                  :header-cell-style="{background:'#F2F4F5'}"
                  :data="equipmentList"
                  height="320"
                  style="width: 100%">
                  <el-table-column
                    prop="accName"
                    label="顾问"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="accPhone"
                    label="电话"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="address"
                    label="录音状态"
                    align="center">
                     <template slot-scope="scope" style="">
                       <span v-if="scope.row.recCmd=='start'">开启</span>
                       <span v-if="scope.row.recCmd=='stop'">关闭</span>
                     </template>
                  </el-table-column>

                  <el-table-column
                    prop="electricity"
                    label="电量"
                    align="center">
                  </el-table-column>
                </el-table>
              </div>
              <div class="tabbox" v-if="classatec==1">
                <el-table
                  :header-cell-style="{background:'#F2F4F5'}"
                  :data="equipmentList"
                  height="320"
                  style="width: 100%">
                  <el-table-column
                    prop="accName"
                    label="顾问"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="accPhone"
                    label="电话"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="updateTime"
                    label="离线时间"
                    align="center">
                  </el-table-column>
                </el-table>
              </div>
          </div>
      </div>
    </div>



    <div v-if="role==1" style=" width: 100%; text-align: center;line-height: 400px;font-size: 30px;">
        代理商后台
    </div>
    <div v-if="role==2" style=" width: 100%; text-align: center;line-height: 400px;font-size: 30px;">
        公司后台
    </div>
    <div v-if="role==0" style=" width: 100%; text-align: center;line-height: 400px;font-size: 30px;">
        系统后台
    </div>

  </div>
</template>

<script>
export default {
  name: 'Wel',
  data() {
    return {
      role:'',
      houseId:"",
      houseList:[],
      classatec:0,
      customtime:[],
      statDateStart:'',
      statDateEnd:'',
      TimetoAhoose:0,
      cardlist:{
        datalist:{},
        liftlist:{},
        sequential:{},
      },
      tableData: [],
      equipmentList:[],
      prohibitedlist:[],
      indexZxllist:[],
      employeeExecutionRatelist:{
        num:'',
        list:[],
        fraction:''
      }

    }
  },
   mounted() {
    this.role=localStorage.getItem("orgType");
    if(this.role==3){
      this.houseId = localStorage.getItem("houseId");
        this.getgicd();
        this.getindexZxllist()
        this.getemployeeExecutionRatelist()
        this.findProhibitedRecord()
        this.findAllZkEquipment()
    }else{
        //  this.zkhousePage()
    }

  },
  methods: {
       //切换楼盘
    houseChange() {
        this.TimetoAhoose=0;
        this.statDateStart='';
        this.statDateEnd='';
        this.getgicd()
        this.findProhibitedRecord()
    },
    //获取楼盘
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.getgicd();
          this.getindexZxllist()
          this.getemployeeExecutionRatelist()
          this.findProhibitedRecord()
          this.findAllZkEquipment()
        });
    },
    //获取卡片数据
    getgicd(){
       let obj = {
        houseId:this.houseId,
        dateType: this.TimetoAhoose==5?null:this.TimetoAhoose,
        statDateStart: this.statDateStart,
        statDateEnd:this.statDateEnd
      };
      this.$api.http.houseIndex(obj).then((res) => {

            this.cardlist.datalist={
              receptionCount:res.data.todayStat.receptionCount,
              activeCustomer:res.data.todayStat.activeCustomer,
              receivingCustomer:res.data.todayStat.receivingCustomer,
              avgDuration:res.data.todayStat.avgDuration,
              fraction:res.data.todayStat.fraction,
              prohibitedCustomer:res.data.todayStat.prohibitedCustomer,
              prohibitedZb:res.data.todayStat.prohibitedZb,
              accountNum:res.data.todayStat.accountNum,

            }
            this.cardlist.liftlist={
              receptionCount:res.data.comparedStat.receptionCount,
              activeCustomer:res.data.comparedStat.activeCustomer,
              receivingCustomer:res.data.comparedStat.receivingCustomer,
              avgDuration:res.data.comparedStat.avgDuration,
              fraction:res.data.comparedStat.fraction,
              prohibitedCustomer:res.data.comparedStat.prohibitedCustomer,
              prohibitedZb:res.data.comparedStat.prohibitedZb,
              accountNum:res.data.comparedStat.accountNum,
            }
             this.cardlist.sequential={
              receptionCount:res.data.yesterdayStat.receptionCount,
              activeCustomer:res.data.yesterdayStat.activeCustomer,
              receivingCustomer:res.data.yesterdayStat.receivingCustomer,
              avgDuration:res.data.yesterdayStat.avgDuration,
              fraction:res.data.yesterdayStat.fraction,
              prohibitedCustomer:res.data.yesterdayStat.prohibitedCustomer,
              prohibitedZb:res.data.yesterdayStat.prohibitedZb,
              accountNum:res.data.yesterdayStat.accountNum,
            }
      });
    },
    //获取设备
    findAllZkEquipment(){
      this.equipmentList=[];
        this.$api.http.findAllZkEquipment({
          onLine:this.classatec,
          houseId:this.houseId
        }).then((res) => {
          this.equipmentList=res.data;
        })
    },
    //获取违禁提醒列表
    findProhibitedRecord(){
          this.prohibitedlist=[];
          this.$api.http.findProhibitedRecord({
            houseId:this.houseId,
            dateType:this.TimetoAhoose==5?null:this.TimetoAhoose,
            statDateStart: this.statDateStart,
            statDateEnd:this.statDateEnd
          }).then((res) => {
              this.prohibitedlist=res.data;
          })
    },
    getindexZxllist(){
          this.indexZxllist=[]
          this.$api.http.getindexZxllist({
            houseId:this.houseId,
            dateType:this.TimetoAhoose==5?null:this.TimetoAhoose,
            statDateStart: this.statDateStart,
            statDateEnd:this.statDateEnd
          }).then((res) => {
           this.indexZxllist=res.data.list||[]
          })
    },
    getemployeeExecutionRatelist(){
          this.employeeExecutionRatelist={
            num:'',
            list:[],
            fraction:''
          }
          this.$api.http.getemployeeExecutionRatelist({
            houseId:this.houseId,
            dateType: this.TimetoAhoose==5?null:this.TimetoAhoose,
            statDateStart: this.statDateStart,
            statDateEnd:this.statDateEnd
          }).then((res) => {
               this.employeeExecutionRatelist=res.data
          })
    },

      tabclick(i){
        this.classatec=i;
        this.findAllZkEquipment()
      },
      tabtimetap(i){
        this.statDateStart='';
        this.statDateEnd='';
        this.customtime=[];
        this.TimetoAhoose=i;
        this.getgicd()
        this.getindexZxllist()
        this.getemployeeExecutionRatelist()
        this.findProhibitedRecord()
      },
      //切换时间
      confirmtime() {
        this.statDateStart=this.customtime[0];
        this.statDateEnd=this.customtime[1];
        this.TimetoAhoose=5;
        this.getgicd()
        this.getindexZxllist()
        this.getemployeeExecutionRatelist()
        this.findProhibitedRecord()
      },
  }
}
</script>

<style scoped="scoped" lang="scss">
.box-center{
  width: 100%;
  // height: 100%;
  padding: 15px;
  min-width: 1300px;
  padding-bottom: 100px;
}
.page-container{
  width: 100%;
  display: flex;
  margin-top: 16px;
  .pagechen1{
    flex: 1;
    min-width: 223px;
    border-radius: 4px;
    margin-right: 20px;
    padding: 20px;
  }
  .pagechen{
    flex: 1;
    min-width: 223px;
    background: #FFFFFF;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    margin-right: 20px;
    padding: 20px;
    .pageboxtitle1{
      width: 100%;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      line-height: 16px;
    }
    .pageboxtitle2{
      width: 100%;
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      .span1{
        width: 100px;
          height: 30px;
        font-size: 30px;
        font-weight: normal;
        color: #32363D;
        line-height: 30px;
      }
       .span2{
         height: 30px;
         font-size: 16px;
         display:flex;
         align-items:flex-end;
         .span2-1{
           color: #424D64;
           margin-right: 15px;
           font-weight: 400;
         }
         .span2-2{
           font-weight: 600;
           color: #E6273A;
         }
         .span2-3{
           font-weight: 600;
           color:#25CEBA;
         }
      }
    }
  }
}
.colostyle{
  color: red;
}
.table-box{
  width:98.8%;
  height: 400px;
  background: #FFFFFF;
  border-radius: 4px;
  margin-top: 24px;
  .title{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-indent: 30px;
    font-weight: 500;
    color: #32363D;
    // border-bottom: 1px solid #E6E6E6;
  }
  .tabbox{
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
  }
}
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }


  .app-box-san{
  width: 100%;
  height: 350px;
  display: flex;
  margin-top: 15px;
  .zuo{
    // flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #FFFFFF;
    border-radius: 4px;
    width: 48.7%;
    .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;
      }
    }
  }
  .you{
    height: 100%;
    width: 49%;
    background: #FFFFFF;
    border-radius: 4px;
    .title{
      width: 100%;
      height: 55px;
      // border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;
      .text1{
          line-height: 55px;
          text-indent: 20px;
          font-weight: 500;
          font-size: 16px;
      }
    }
  }
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 16px;
    color: #32363d;
  }
  .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;
  }
}
// 进度条
 .jinbox {
      width: 100%;
      height: 18px;
      line-height: 18px;
      display: flex;
      font-size: 16px;
      color: #2C3542;
      margin-top: 20px;
      .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;
        }
  }
  .hejisan{
		width: 92%;
		margin: 0 auto;
		display: flex;
		.text1-1{
			color: #666666;
		}
		.text1-2{
			color: #333333;
			margin-top: 10px;
		}
	}
</style>
