<style>
  .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;
  }

  .CustomerName {
    cursor: pointer;
    color: var(--q-color-primary);
  }
</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="downloadMarketChannelStatic" />
        </div>
      </div>
    </div>
    <div class="makeOutDiv">
      <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="渠道名">
          <template slot-scope="scope">
            <div class="CustomerName" v-if="scope.row.CustomerType" @click="showDetail(scope.row)">
              {{scope.row.ChannelName}}
            </div>
            <div v-else>
              {{scope.row.ChannelName}}
            </div>
          </template>
        </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>
    <customerInfo v-if="isShowDetailForm" :rowId="curRowId" :tabId="tabId" :empList="employeeList"
      @close="closeCustomForm" :auth="AuthorityObj" @success="refreshQuestion"></customerInfo>
  </div>
</template>
<script>
  import {
    MarketChannelStatic
  } from '../../api/users/user'
  import {
    queryEmployee
  } from "../../api/users/user";
  import {
    EduDownLoad
  } from "../../api/common/common";
  import customerInfo from "../../components/sale/b2bcustomerinfo/b2bCustomerInfo.vue";
  export default {
    components: {
      customerInfo
    },
    data() {
      return {
        msg: {
          startTime: "",
          endTime: "",
          empList: []
        },
        dateList: [],
        dataList: [],
        EmployeeList: [],
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        tableHeight: 50,
        isShowDetailForm: false,
        curRowId: 0,
        tabId: 1,
        employeeList: [],
        //权限设置
        AuthorityObj: {
          isShowEdit: false, //是否显示新增修改按钮
          isShowAudit: false, //是否显示审批
          isShowBankBook: false, //是否显示幸福存折
          isShowRebate: false //是否显示返佣
        },
        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.getMyEmployeeList();
      this.getData();
      setTimeout(() => {
        this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 80;
      }, 100)
    },
    methods: {
      downloadMarketChannelStatic() {
        this.loading = true;
        var msg = JSON.parse(JSON.stringify(this.msg));
        EduDownLoad(
          "/UserCenter/DownLoadMarketChannelStatic",
          msg,
          "细分渠道.xls", res => {
            this.loading = false;
          }
        );
      },
      //获取员工列表
      getMyEmployeeList() {
        queryEmployee({
          IsLeave: 1
        }).then(res => {
          this.employeeList = res.Data;
        });
      },
      //获取数据
      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;
        MarketChannelStatic(this.msg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data;
            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);
      },
      //客户详情
      showDetail(row) {
        this.curRowId = row.ChannelId;
        this.isShowDetailForm = true;
      },
      //关闭弹窗
      closeCustomForm() {
        this.isShowDetailForm = false;
      },
      refreshQuestion() {
        this.getData();
      },
    }
  }
</script>