<style lang="scss">
  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }

  .Sysuser_Date .el-range-editor .el-range-input {
    background: transparent !important;
  }

  .makeOutDiv .el-table th {
    background: #f5f6f7;
  }
</style>
<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-4 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="dateList" type="daterange" style="width:100%" :picker-options="pickerOptions0"
                align="right" value-format="yyyy-MM-dd" @change="getData" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </template>
          </q-field>
        </div>
        <div class="col-3 Sysuser_Date">
          <q-field filled>
             <template v-slot:control>
              <el-select class="topselect" v-model="msg.empList" @change="getData" style="width:100%;" collapse-tags
                multiple filterable placeholder="请选择">
                <el-option v-for="item in EmployeeList" :key="item.Id" :label="item.EmployeeName" :value="item.Id">
                </el-option>
              </el-select>
            </template>
          </q-field>
        </div>
        <div class="col-3">
          <q-btn color="accent" class="q-mr-md" size="sm" icon="download" style="margin-top:15px;" label="下载" @click="downloadMarketCreateType" />
        </div>
      </div>
    </div>
    <div class="makeOutDiv">
      <q-tabs v-model="msg.top_Check" @input="getCheck" class="text-primary" align="left">
        <q-tab :name="1" label="同行渠道" />
        <q-tab :name="2" label="内部渠道" />
        <q-tab :name="3" label="学校渠道" />
        <q-tab :name="4" label="转介渠道" />
      </q-tabs>
      <el-table :data="dataList" ref="table" style="width: 100%;" :height="tableHeight" v-loading="loading">
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column prop="ChannelName" label="渠道名">
        </el-table-column>
        <el-table-column prop="ClueCount" label="回单" sortable>
        </el-table-column>
        <el-table-column prop="VisitCount" label="到访" sortable>
        </el-table-column>
        <el-table-column prop="OrderCount" label="合同数" sortable>
        </el-table-column>
        <el-table-column prop="OrderIncome" label="新业绩金额" sortable>
        </el-table-column>
        <el-table-column prop="VisitingRate" label="到访率" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.VisitingRate}}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="ContractRate" label="合同转化率" sortable>
          <template slot-scope="scope">
            <span>{{scope.row.ContractRate}}%</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import {
    MarketCreateType
  } from '../../api/users/user'
  import {
    queryEmployee
  } from "../../api/users/user";
  import {
    EduDownLoad
  } from "../../api/common/common";
  export default {
    data() {
      return {
        msg: {
          startTime: "",
          endTime: "",
          empList: [],
          top_Check: 1,
        },
        dateList: [],
        dataList: [],
        EmployeeList: [],
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        allData: [],
        tableHeight: 50,
        loading:false,
      };
    },
    created() {

    },
    mounted() {
      var now = new Date();
      var strLink = "-";
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var day = now.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 1 && day <= 9) {
        day = "0" + day;
      }
      this.msg.startTime = year + strLink + month + strLink + '01';
      this.msg.endTime = year + strLink + month + strLink + day;
      this.dateList.push(year + strLink + month + strLink + '01');
      this.dateList.push(year + strLink + month + strLink + day);
      this.getEmployeeList();
      this.getData();
      setTimeout(() => {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 90;
      }, 100)
    },
    methods: {
      downloadMarketCreateType() {
        var msg = JSON.parse(JSON.stringify(this.msg));
        var fileName = "同行渠道.xls";
        if (this.msg.top_Check == 2) {
          fileName = "内部渠道.xls";
        }
        if (this.msg.top_Check == 3) {
          fileName = "学校渠道.xls";
        }
        if (this.msg.top_Check == 4) {
          fileName = "转交渠道.xls";
        }
        this.loading=true;
        EduDownLoad(
          "/UserCenter/DownLoadMarketCreateType",
          msg,
          fileName,res=>{
            this.loading=false;
          }
        );
      },
      getCheck() {
        switch (this.msg.top_Check) {
          case 1:
            this.dataList = this.allData.customerDataList;
            break;
          case 2:
            this.dataList = this.allData.innerDataList;
            break;
          case 3:
            this.dataList = this.allData.schoolDataList;
            break;
          case 4:
            this.dataList = this.allData.transDataList;
            break;
        }
      },
      //获取数据
      getData() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.startTime = this.dateList[0];
          this.msg.endTime = this.dateList[1];
        } else {
          this.msg.startTime = "";
          this.msg.endTime = "";
        }
        this.loading=true;
        MarketCreateType(this.msg).then(res => {
          this.loading=false;
          if (res.Code == 1) {
            this.allData = res.Data;
            this.dataList = this.allData.customerDataList;
            this.dataList.forEach(x => {
              x.VisitingRate = this.getStatical(x.VisitCount, x.ClueCount)
              x.ContractRate = this.getStatical(x.OrderCount, x.VisitCount)
            })
          }
        });
      },
      //获取员工列表
      getEmployeeList() {
        var qMsg = {
          IsLeave: 1,
          Dept_Id: 4,
          UserRole: 1
        };
        queryEmployee(qMsg).then(res => {
          this.EmployeeList = res.Data;
        });
      },
      //获取统计
      getStatical(num, total) {
        num = parseFloat(num);
        total = parseFloat(total);
        if (isNaN(num) || isNaN(total)) {
          return "-";
        }
        return total <= 0 ? "0" : (Math.round(num / total * 10000) / 100.00);
      },

    }
  }
</script>