<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="请选择"  @change="houseChange">
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
    <div class="app-titel">
       <div style="text-indent: 30px;">接待时间:</div>
      <div class="toptimeqhuan">
        <div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">
          近7天
        </div>
        <div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">
          近15天
        </div>
        <div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">
          近30天
        </div>
      </div>
      <div style="margin-left: 26px">
        <el-date-picker
          v-model="customtime"
          @change="confirmtime()"
          type="daterange"
          range-separator="-"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="app-titel"  style="margin-top: 15px">
      <div class="div-lab">
        <div  style="margin-right: 20px"  class="label">团队:</div>
        <el-select
          v-model="deptId"
          filterable
          @change="deptChange"
          placeholder="请选择"
          class="div-inp"
        >
          <el-option
            v-for="item in options"
            :key="item.deptId"
            :label="item.name"
            :value="item.deptId"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin-left: 26px" class="div-lab">
        <div style="margin-right: 20px" class="label">置业顾问:</div>
        <el-select
          v-model="accountId"
          filterable
          @change="repChange"
          placeholder="请选择"
          class="div-inp"
        >
          <el-option
            v-for="item in repList"
            :key="item.accountId"
            :label="item.name"
            :value="item.accountId"
          >
          </el-option>
        </el-select>
      </div>
      <div style="margin-left: 20px">
        <el-button type="primary" size="small" @click="screen()"
          >查询</el-button
        >
        <el-button type="primary" size="small" @click="reset()">清空</el-button>
      </div>
        <div style="margin-left: auto;margin-right:10px;" v-if="sta_rec_downLoad">
          <el-button @click="downLoad">导出</el-button>
        </div>
    </div>
    </div>
    <!-- 表格 -->
    <div class="cen-tab">
      <el-table  :data="tableData"  style="width: 100%">
        <el-table-column prop="batchId" label="序号" align="center">
          <template slot-scope="scope">
            {{
              scope.$index == tableData.length - 1
                ? "合计/平均"
                : scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column width='90px' prop="accountName"  label="日期" align="center">
          <template slot-scope="scope">
            {{
              scope.$index == tableData.length - 1
                ? scope.row.statDate
                : scope.row.statDate.substring(0, 10)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="receptionCount" label="接待量" align="center">
          <template slot-scope="{row}">
            {{row.receptionCount}}次
          </template>
        </el-table-column>
        <el-table-column prop="accountNum" label="接待顾问" align="center">

        </el-table-column>
        <el-table-column prop="activeCustomer" label="有效接待" align="center">
           <template slot-scope="{row}">
            {{row.activeCustomer}}次
          </template>
        </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="{ row }">
            {{ Math.floor(row.sumDuration / 60) }}分钟
          </template>
        </el-table-column>
        <el-table-column
          prop="prohibitedZb"
          label="违禁接待占比"
          align="center"
        >
          <template slot-scope="{row}">
            {{row.prohibitedZb}}%
          </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
          v-for="(item, idx) in tablist"
          :key="idx"
          :prop="item.props"
          :label="item.label"
          align="center"
        >
          <template slot-scope="{row}">
            {{row[item.props]}}%
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.$index < tableData.length - 1"
              type="text"
              size="small"
              @click="toDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="80%"

    >
      <div class="cen-tab">
        <el-table
          max-height="300"
          :data="detailData"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="batchId" label="序号" align="center">
            <template slot-scope="scope">
              {{
                scope.$index == detailData.length - 1
                  ? "合计/平均"
                  : scope.$index + 1
              }}
            </template>
          </el-table-column>
          <el-table-column prop="accountName" label="顾问" align="center">
          </el-table-column>
          <el-table-column prop="deptName" label="归属团队" align="center">
          </el-table-column>
          <el-table-column prop="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="{ row }">
              {{ Math.floor(row.sumDuration / 60) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="prohibitedZb"
            label="违禁接待占比"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="fraction" label="平均执行率" align="center">
          </el-table-column>
          <el-table-column
            v-for="(item, idx) in tablist1"
            :key="idx"
            :prop="item.props"
            :label="item.label"
            align="center"
          >
          </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: flex-end; margin-top: 10px">
          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="current1"
            :page-sizes="[10, 30, 50]"
            :page-size="size1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          >
          </el-pagination>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { exportMethodPost} from "@/util/util";
export default {
  data() {
    return {
      houseId: "",
      buildingoptions: [],
      houseList: [],
      detailData: [],
      dateType: 2,
      repList: [],
      current: 1,
      current1: 1,
      accountId: "",
      size: 10,
      total: 20,
      size1: 10,
      total1: 20,
      customtime: [],
      tablist: [],
      tablist1: [],
      deptId: "",
      tableData: [],
      orgType: localStorage.getItem("orgType"),
      options: [],
      value: "1",
      statDateStart: "",
      statDateEnd: "",
      echarlist: [],
      echarlist1: [],
      echarlist2: [],
      echarlist3: [],
      teamAllLevel: [],
      teamAllLevelid: "",
      teamAllLeve2id: "",
      teamAllLeve2: [],
      statDate: "",
      dialogVisible: false,
      houseList:[],
      role:''
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {

    this.sta_rec_downLoad = this.permissions["sta_rec_downLoad"];
  },
  mounted() {
    this.role=localStorage.getItem("orgType");
    if(this.role==3){
      this.houseId = localStorage.getItem("houseId");
      this.tabtimetap(4);
      this.deptFindList();
    }else{
      this.zkhousePage()
    }
  },
  methods: {
      downLoad(){
      let obj = {
          houseId: this.houseId,
          statDateStart: this.statDateStart,
          statDateEnd: this.statDateEnd,
          // current: this.current,
          // size: this.size,
          deptId: this.deptId,
          accountId: this.accountId,
          dateType: this.dateType == 7 ? null : this.dateType,
          type:1
      };
      exportMethodPost('autoSR/cusStageStatistics/receptionStatisticsExport','接待统计',obj)
    },
     houseChange(){
      this.customtime=[];
      this.TimetoAhoose=4;
      this.statDateStart= '';
      this.deptId=''
       this.accountId=''
      this.statDateEnd= '';
 this.tabtimetap(4);
      this.deptFindList();

    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
        this.tabtimetap(4);
      this.deptFindList();
        });
    },
    toDetail(row) {
      console.log(row);
      this.statDate = row.statDate.substring(0, 10);
      this.dialogVisible = true;
      this.getDetailList();
    },
    // 获取detail
    getDetailList() {
      this.$api.api
        .receptionStatistics({
          houseId: this.houseId,
          statDate: this.statDate,
          current: this.current,
          size: this.size,
          deptId: this.deptId,
          accountId: this.accountId,
          type:2
        })
        .then((res) => {
          this.detailData = res.data.records;
          // 数据处理
          // 需要两个数组，一个用来展示
          this.deailDate(0);
          this.total1 = res.data.total;
        });
    },
    screen() {
      this.current = 1;
      this.accountRank();
    },
    reset() {
      this.current = 1;
      this.deptId = "";
      this.accountId = "";
      this.accountRank();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    deptFindList() {
      // 获取团队
       this.$api.http.overviewfindList({
          houseId: this.houseId,
        })
        .then((res) => {
          let userinfo=JSON.parse(sessionStorage.getItem("zk-userInfo"))
          if(userinfo.content.deptType==1){
               this.options.push(...res.data);
              this.deptId= this.options[0].deptId
          }else{
             this.options = [
              {
                name: "全部",
                deptId: "",
              },
            ];
            this.options.push(...res.data);
            this.deptId=''
          }
          this.receptionStatisticsAllAccount();
          this.accountRank();

        });
    },
    deptChange() {
      this.receptionStatisticsAllAccount();
      this.accountId = "";
    },
    receptionStatisticsAllAccount() {
      this.$api.api
        .receptionStatisticsAllAccount({
          houseId: this.houseId,
          deptId: this.deptId,
        })
        .then((res) => {
          console.log(res);
          this.repList = [];
          this.repList.push(...res.data);
          this.accountRank();
        });
    },
    // 获取列表
    repChange() {
      this.accountRank();
    },
    accountRank() {
      this.$api.api
        .receptionStatistics({
          houseId: this.houseId,
          statDateStart: this.statDateStart,
          statDateEnd: this.statDateEnd,
          current: this.current,
          size: this.size,
          deptId: this.deptId,
          accountId: this.accountId,
          dateType: this.dateType == 7 ? null : this.dateType,
          type:1
        })
        .then((res) => {
          this.tableData = res.data.records;
          // 数据处理
          // 需要两个数组，一个用来展示
          this.deailDate();
          this.total = res.data.total;
        });
    },
    confirmtime() {
      this.dateType = 7;
      this.statDateStart = this.customtime[0];
      this.statDateEnd = this.customtime[1];
      this.init();
    },
    init() {
      this.accountRank();
    },
    deailDate(idx) {
      if (idx) {
        this.tablist1 = [];
        // 当他是第一个 小将
        // console.log("第一个");
        this.deailDate[0].resultsList.map((item, idx) => {
          let obj = {};
          obj.label = item.name;
          obj.props = "str" + idx;
          this.tablist1.push(obj);
        });
        this.deailDate.map((item) => {
          this.tablist1.map((item1, idx) => {
            item[item1.props] = item.resultsList[idx].zxl;
          });
        });
      } else {
        this.tablist = [];
        // 当他是第一个 小将
        // console.log("第一个");
        this.tableData[0].resultsList.map((item, idx) => {
          let obj = {};
          obj.label = item.name;
          obj.props = "str" + idx;
          this.tablist.push(obj);
        });
        this.tableData.map((item) => {
          this.tablist.map((item1, idx) => {
            item[item1.props] = item.resultsList[idx].zxl;
          });
        });
      }
    },
    handleCurrentChange(e) {
      this.current = e;
      this.accountRank();
    },
    handleSizeChange(e) {
      this.size = e;
      this.accountRank();
    },
    handleCurrentChange1(e) {
      this.current1 = e;
      // this.accountRank();
    },
    handleSizeChange1(e) {
      this.size1 = e;
      // this.accountRank();
    },
    //切换时间
    tabtimetap(index) {
      this.statDateStart = "";
      this.statDateEnd = "";
      this.dateType = index;
      this.customtime=[];
      this.init();
    },
    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);
      });
      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-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 32px;
      margin-left: 15px;
      // min-width: 100px;
      text-align: right;
    }
      .titel-text {
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #32363d;
    text-indent: 30px;
  }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
      margin-left: 20px;
    }
    .toptimeqhuan div {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 250px;
}

.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: 50px;
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 200px;
}
.label {
  font-size: 14px;
  font-weight: 400;
  color: #32363d;
  line-height: 32px;
  margin-left: 15px;
  min-width: 40px;
}
</style>
