<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-titel">
        <div style="text-indent: 30px;">接待时间:</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>
      <el-select
          v-model="houseTypes"
          @change="sysChange"
          style="width: 100px; margin-left: 10px"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
      </el-select>
          <div style="margin-left: auto;margin-right:10px;" v-if="sta_bui_downLoad">
          <el-button @click="downLoad">导出</el-button>
        </div>
    </div>

       <!-- 表格 -->
    <div class="cen-tab">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="batchId"
            label="序号"
            align="center"
          >
        <template slot-scope="scope">
          <span v-if="scope.$index+1==tableData.length"> 合计/平均</span>
          <span v-else> {{scope.$index+1}}</span>
        </template>
          </el-table-column>
          <el-table-column
            prop="houseName"
            label="楼盘"
             align="center"
           >
          </el-table-column>
          <el-table-column
            prop="accountNum"
            label="顾问数"
             align="center">
          </el-table-column>
          <el-table-column
            prop="receptionCount"
            label="接待量"
             align="center">
          </el-table-column>
          <el-table-column
            prop="activeCustomer"
            label="有效接待"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="prohibitedCustomer"
            label="违禁接待次数"
             align="center"
           >
          </el-table-column>
          <el-table-column
            prop="sumDuration"
            label="接待时长(分钟)"
            align="center"
          >
          <template slot-scope="scope">
            {{Math.floor(scope.row.sumDuration/60) || 0}}
          </template>
          </el-table-column>
           <el-table-column
            prop="fraction"
            label="平均执行率"
            align="center"
          >
           <template slot-scope="{row}">
            {{row.fraction}}%
          </template>
          </el-table-column>
           <el-table-column
            prop="prohibitedZb"
            label="违禁接待占比"
            align="center"
          >
           <template slot-scope="{row}">
            {{row.prohibitedZb}}%
          </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="page"
              :page-sizes="[10, 30, 50]"
              :page-size="pagesize"
              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%;">
              <div class="text1-1">接待合计</div>
              <div class="text1-2">{{objList1.sum}}次</div>
            </div>
            <div  class="sanbox1" style="width: 40%;">
              <div class="text1-1">楼盘总数</div>
              <div class="text1-2">{{objList1.num}}个</div>
            </div>
            <div  class="sanbox1" style="width: 25%;">
              <div class="text1-1">平均接待</div>
              <div class="text1-2">{{objList1.avg}}次</div>
            </div>
         </div>
         <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in objList1.list" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.zxl}}</div>
              </div>
         </div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">平均执行率（TOP10）</div>
          </div>
          	<div class="hejisan">
            <div class="sanbox1" style="width: 50%;">
              <div class="text1-1">楼盘总数</div>
              <div class="text1-2">{{objList2.num}}个</div>
            </div>
            <div  class="sanbox1" style="width: 50%;">
              <div class="text1-1">平均执行率</div>
              <div class="text1-2">{{objList2.avg}}%</div>
            </div>
         </div>
          <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in objList2.list" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.zxl)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.zxl}}%</div>
              </div>
         </div>
        </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%;">
              <div class="text1-1">合计</div>
              <div class="text1-2">{{objList3.sum}}次</div>
            </div>
            <div  class="sanbox1" style="width: 40%;">
              <div class="text1-1">顾问</div>
              <div class="text1-2">{{objList3.num}}个</div>
            </div>
            <div  class="sanbox1" style="width: 25%;">
              <div class="text1-1">人均接待量</div>
              <div class="text1-2">{{objList3.avg}}次</div>
            </div>
         </div>
         <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in objList3.list" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.zxl}}</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%;">
              <div class="text1-1">时长合计</div>
              <div class="text1-2">{{objList4.sum}}分钟</div>
            </div>
            <div  class="sanbox1" style="width: 40%;">
              <div class="text1-1">楼盘总数</div>
              <div class="text1-2">{{objList4.num}}个</div>
            </div>
             <div  class="sanbox1" style="width: 25%;">
              <div class="text1-1">平均时长</div>
              <div class="text1-2">{{objList4.avg}}分钟</div>
            </div>
         </div>
          <div style="overflow-y:auto;height: 250px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in objList4.list" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.zxl}}</div>
              </div>
         </div>
        </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { exportMethodPost} from "@/util/util";
export default {
  data() {
    return {
      role:'',
      houseId: "",
      orgCode:'',
      page:1,
      pagesize:10,
      buildingoptions:[],
      TimetoAhoose: 4,
      customtime: [],
      currentPage4:1,
      total:0,
      ceratelist:[
            {name:'还是得',avgZxl:80},
             {name:'大大奥德赛',avgZxl:90},
              {name:'沙发和',avgZxl:20},
               {name:'还是得',avgZxl:10},
                {name:'还客户家客户是得',avgZxl:80},
      ],
      tableData:[],
      objList1:{
        avg:'',
        list:[],
        num:'',
        sum:''
      },
       objList2:{
        avg:'',
        list:[],
        num:'',
      },
       objList3:{
        avg:'',
        list:[],
        num:'',
        sum:''
      },
       objList4:{
        avg:'',
        list:[],
        num:'',
        sum:''
      },
      houseTypes: "0,1",
      options2: [
        {
          label: "正式数据",
          value: "0,1",
        },
        {
          label: "测试数据",
          value: "2,3",
        },
      ],

    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.sta_bui_downLoad = this.permissions["sta_bui_downLoad"];
  },
  mounted() {
       this.role=localStorage.getItem("orgType");
       this.houseId = localStorage.getItem("houseId");
       this.orgCode= localStorage.getItem("orgCode");
       this.gethouseData()
  },
  methods: {
    downLoad(){
      let pamaet={
        orgType:this.role,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        houseTypes: this.houseTypes,
      }
      if(this.role==3){
        pamaet.houseId=this.houseId
      }else{
        pamaet.orgCode=this.orgCode
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
     exportMethodPost('autoSR/cusStageStatistics/houseTableExport','楼盘对比',pamaet)
    },
    sysChange() {
      this.gethouseData()
    },
    gethouseData(){
        this.houseTable()
        this.houseData1()
        this.houseData2()
        this.houseData3()
        this.houseData4()
    },
    houseData1(){
      let pamaet={
        orgType:this.role,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:1,
        houseTypes: this.houseTypes,
      }
      if(this.role==3){
        pamaet.houseId=this.houseId
      }else{
        pamaet.orgCode=this.orgCode
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.houseData(pamaet).then((res) => {
          let arr=[]
          res.data.list.map(item=>{
            let obj={}
            obj.name=item.houseName
            obj.zxl=item.activeCustomer
            arr.push(obj)
          })
          arr=this.dealData(arr)
          this.objList1={
            avg: res.data.avg || 0,
            num: res.data.num || 0,
            sum:res.data.sum || 0,
            list:arr || []
          }
      })
    },
    houseData2(){
      let pamaet={
        orgType:this.role,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:2,
        houseTypes: this.houseTypes,
      }
      if(this.role==3){
        pamaet.houseId=this.houseId
      }else{
        pamaet.orgCode=this.orgCode
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.houseData(pamaet).then((res) => {
          let arr=[]
          res.data.list.map(item=>{
            let obj={}
            obj.name=item.houseName;
            obj.zxl=item.fraction;
            arr.push(obj)
          })
          this.objList2={
            avg: res.data.avg || 0,
            num: res.data.num || 0,
            list:arr || []
          }
      })
    },
    houseData3(){
      let pamaet={
        orgType:this.role,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:3,
        houseTypes: this.houseTypes,
      }
      if(this.role==3){
        pamaet.houseId=this.houseId
      }else{
        pamaet.orgCode=this.orgCode
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.houseData(pamaet).then((res) => {
        console.log(res)
          let arr=[]
          res.data.list.map(item=>{
            let obj={}
            obj.name=item.houseName
            obj.zxl=item.prohibitedCustomer
            arr.push(obj)
          })
          console.log(arr)
          arr=this.dealData(arr)
          this.objList3={
            avg: res.data.avg || 0,
            num: res.data.num || 0,
            sum:res.data.sum || 0,
            list:arr || []
          }
          console.log(this.objList3)
      })
    },
    houseData4(){
      let pamaet={
        orgType:this.role,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:4,
        houseTypes: this.houseTypes,
      }
      if(this.role==3){
        pamaet.houseId=this.houseId
      }else{
        pamaet.orgCode=this.orgCode
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.houseData(pamaet).then((res) => {
          let arr=[]
          res.data.list.map(item=>{
            let obj={}
            obj.name=item.houseName;
            obj.zxl=Math.floor(item.sumDuration/60) || 0;
            arr.push(obj)
          })
          arr=this.dealData(arr)
          this.objList4={
            avg: Math.floor(res.data.avg/60) || 0,
            num: res.data.num || 0,
            sum:Math.floor(res.data.sum/60) || 0,
            list:arr || []
          }
      })
    },


    houseTable(){
      let pamaet={
        orgType:this.role,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        current:this.page,
        size:this.pagesize,
        houseTypes: this.houseTypes,
      }
      if(this.role==3){
        pamaet.houseId=this.houseId
      }else{
        pamaet.orgCode=this.orgCode
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.houseTable(pamaet).then((res) => {
          this.tableData=res.data.records || [];
          this.total=res.data.total || 0;
      })
    },

      handleSizeChange(val) {
      this.pagesize=val;
      this.houseTable()
    },
    handleCurrentChange(val) {
      this.page=val;
      this.houseTable()
    },
    confirmtime(){
      this.TimetoAhoose=7
      this.statDateStart=this.customtime[0];
      this.statDateEnd=this.customtime[1];
      this.page=1;
      this.gethouseData()
    },
    //切换时间
    tabtimetap(index) {
      this.TimetoAhoose = index;
      this.statDateStart='';
      this.statDateEnd='';
      this.page=1;
      this.gethouseData()
    },
      dealData(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" >
.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-titel {
  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;
  .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-box-san{
  width: 100%;
  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;
		}
	}

// 进度条
 .jinbox {
      width: 100%;
      height: 18px;
      line-height: 18px;
      display: flex;
      font-size: 16px;
      color: #2C3542;
      margin-top: 10px;
      .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: 16px;
        }
  }
</style>
