<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%" show-summary :summary-method="getSummaries">
        <el-table-column prop="batchId" label="序号" align="center">
          <template slot-scope="scope">
            <span> {{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="houseName" label="项目" align="center">
        </el-table-column>
        <el-table-column prop="fraction" label="平均执行率" align="center" width="110" sortable>
          <template slot-scope="{ row }"> {{ row.fraction }}% </template>
        </el-table-column>
        <el-table-column
          prop="sumDuration"
          label="接待时长(分钟)"
          align="center"
          sortable
          width="140"
        >
          <template slot-scope="scope">
            {{ Math.floor(scope.row.sumDuration / 60) || 0 }}
          </template>
        </el-table-column>
        <el-table-column prop="accountNum" label="顾问数" align="center" sortable>
        </el-table-column>
        <el-table-column prop="receptionCount" label="接待量" align="center" sortable>
        </el-table-column>
        <el-table-column prop="activeCustomer" label="有效接待" align="center" width="100" sortable>
        </el-table-column>
        <el-table-column
          prop="prohibitedCustomer"
          label="违禁接待次数"
          align="center"
          sortable
          width="140"
        >
        </el-table-column>
        
        
        <el-table-column
          prop="prohibitedZb"
          label="违禁接待占比"
          align="center"
          sortable
           width="140"
        >
          <template slot-scope="{ row }"> {{ row.prohibitedZb }}% </template>
        </el-table-column>
        <el-table-column
          prop="addtodigestCount"
          label="优秀案例数"
          align="center"
          sortable
          width="140"
        ></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="height: 300px; 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="height: 300px; 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="height: 300px; 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="height: 300px; 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: {
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            // sums[index] += ' 元';
            if (index === 7) {
              sums[index] += '%';
              return;
            }
            if (index === 8) {
              sums[index] += '%';
              return;
            }
          }
        });
        sums[1] = 'N/A';
        return sums;
      },
    downLoad() {
      let pamaet = {
        orgType: this.role,
        dateType: 0,
        statDateStart: this.statDateStart,
        statDateEnd: this.statDateEnd,
        // houseTypes: this.houseTypes,
        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,
        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,
        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,
        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,
        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,
        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%;
  min-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>
