<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" v-if="isShowDownLoad">
          <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-tab :name="5" 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>
          <template slot-scope="scope">
            <a @click="showDetail(scope.row)" style="color:#67C23A;cursor:pointer;text-decoration:underline;">
              {{scope.row.ClueCount}}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="VisitCount" label="到访" sortable>
          <template slot-scope="scope">
            <a @click="showDetail(scope.row)" style="color:#67C23A;cursor:pointer;text-decoration:underline;">
              {{scope.row.VisitCount}}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="OrderCount" label="合同数" sortable>
          <template slot-scope="scope">
            <a @click="showDetail(scope.row)" style="color:#67C23A;cursor:pointer;text-decoration:underline;">
              {{scope.row.VisitCount}}
            </a>
          </template>
        </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 {
    meta: {
      title: "市场部同行渠道"
    },
    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,
        CurrentUserInfo: {},
        isShowDownLoad: false, //是否显示下载按钮
      };
    },
    created() {
      this.getEmployeeList();
      this.CurrentUserInfo = this.getLocalStorage();
      if (this.CurrentUserInfo && this.CurrentUserInfo.ActionMenuList && this.CurrentUserInfo.ActionMenuList.length >
        0) {
        this.CurrentUserInfo.ActionMenuList.forEach((x) => {
          if (x.FunctionCode == "DownMarketCreateType") {
            this.isShowDownLoad = true;
          }
        });
      }
    },
    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.getData();
      setTimeout(() => {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 90;
      }, 100)
    },
    methods: {
      //跳转到列表
      showDetail(row) {
        var url = "/sale/mystu";
        if (this.CurrentUserInfo && (this.CurrentUserInfo.IsMarket == 1 || this.CurrentUserInfo.IsCourseConsultant ==
            1)) {
          url = "/sale/mystu";
        } else {
          url = '/school/student';
        }
        var param = {
          CreateType: 0,
          CategoryId: 0,
          StuSourceId: 0,
          startTime: this.msg.startTime,
          endTime: this.msg.endTime,
          IsContract: 0
        }
        var CreateType = 2;
        //同行渠道
        if (this.msg.top_Check == 1) {
          CreateType = 2;
          param.StuSourceId = 0;
          param.CategoryId = row.ChannelId;
          param.CreateType = 0;
          param.IsContract = 0;
        }
        //内部渠道
        if (this.msg.top_Check == 2) {
          CreateType = 3;
          param.StuSourceId = row.ChannelId;
          param.CategoryId = 0;
          param.CreateType = CreateType;
          param.IsContract = 0;
        }
        //学校渠道
        if (this.msg.top_Check == 3) {
          CreateType = 2;
          param.StuSourceId = 0;
          param.CategoryId = row.ChannelId;
          param.CreateType = 0;
          param.IsContract = 0;
        }
        //转介绍渠道
        if (this.msg.top_Check == 4) {
          CreateType = 4;
          param.StuSourceId = row.ChannelId;
          param.CategoryId = 0;
          param.CreateType = CreateType;
          param.IsContract = 0;
        }
        //签约渠道
        if (this.msg.top_Check == 5) {
          CreateType = 2;
          param.StuSourceId = 0;
          param.CategoryId = row.ChannelId;
          param.CreateType = 0;
          param.IsContract = 1;
        }
        this.OpenNewUrl(url, param)
      },
      //下载同行渠道
      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";
        }
        if (this.msg.top_Check == 5) {
          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;
          case 5:
            this.dataList = this.allData.contractDataList;
            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) {
            var tempData = res.Data;
            if (tempData) {
              if (tempData.contractDataList) {
                tempData.contractDataList.forEach(x => {
                  x.VisitingRate = this.getStatical(x.VisitCount, x.ClueCount)
                  x.ContractRate = this.getStatical(x.OrderCount, x.VisitCount)
                })
              }
              if (tempData.customerDataList) {
                tempData.customerDataList.forEach(x => {
                  x.VisitingRate = this.getStatical(x.VisitCount, x.ClueCount)
                  x.ContractRate = this.getStatical(x.OrderCount, x.VisitCount)
                })
              }
              if (tempData.innerDataList) {
                tempData.innerDataList.forEach(x => {
                  x.VisitingRate = this.getStatical(x.VisitCount, x.ClueCount)
                  x.ContractRate = this.getStatical(x.OrderCount, x.VisitCount)
                })
              }
              if (tempData.schoolDataList) {
                tempData.schoolDataList.forEach(x => {
                  x.VisitingRate = this.getStatical(x.VisitCount, x.ClueCount)
                  x.ContractRate = this.getStatical(x.OrderCount, x.VisitCount)
                })
              }
              if (tempData.transDataList) {
                tempData.transDataList.forEach(x => {
                  x.VisitingRate = this.getStatical(x.VisitCount, x.ClueCount)
                  x.ContractRate = this.getStatical(x.OrderCount, x.VisitCount)
                })
              }
            }
            this.allData = tempData;
            this.dataList = this.allData.customerDataList;
          }
        });
      },
      //获取员工列表
      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>