<template>
  <div class="customerManage">
    <div class="tools">
      <div class="tools-item">
        <h1>每日引流统计</h1>
      </div>
      <div style="width: 340px;">
        <el-date-picker v-model="msg.month" type="month" icon="el-icon-date" slot="append" class="input-with-select"
          @change="changeMonthHandler" placeholder="选择查询的月份">
        </el-date-picker>
      </div>
      <div class="rightmenu">
        <el-dropdown @command="handleCommand">
          <el-button class="crm-btn crm-btn-more easy-btn margin-right0">
            <i class="iconfont icongengduo"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1"><i class="iconfont icondaochu"></i> 导出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="page-content" style="padding-bottom:20px;">
      <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;height:100%;" border
        :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName">
        <el-table-column>
          <template slot-scope="scope">
            <template v-if="scope.row.YearStr>0&&scope.row.MonthStr>0">
              <span class="pointer" style="color:blue;text-decoration:underline;" @click="seeDetails(scope.row)">{{scope.row.DateStr}}</span>
            </template>
            <template v-else>
              <span>{{scope.row.DateStr}} </span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="PushCount" label="引流总数">
        </el-table-column>
        <el-table-column prop="EffectiveCount" label="有效总数">
        </el-table-column>
        <el-table-column prop="InvalidCount" label="无效总数">
        </el-table-column>
        <el-table-column prop="RedBookCount" label="小红书总数">
        </el-table-column>
        <el-table-column prop="DouYinCount" label="抖音总数">
        </el-table-column>
        <el-table-column prop="FlyingPigCount" label="飞猪总数">
        </el-table-column>
        <el-table-column prop="GroupChatCount" label="社群聊天总数">
        </el-table-column>
        <el-table-column prop="OfflineVisitCount" label="线下拜访总数">
        </el-table-column>
        <el-table-column prop="StraightCustomerCount" label="直客介绍总数">
        </el-table-column>
        <el-table-column prop="PeerCount" label="同业介绍总数">
        </el-table-column>
        <el-table-column prop="OtherCount" label="其他介绍总数">
        </el-table-column>
        <el-table-column prop="OrderCount" label="订单总数">
        </el-table-column>
        <el-table-column prop="TicketOrderCount" label="机票订单总数">
        </el-table-column>
        <el-table-column prop="VisaOrderCount" label="签证订单总数">
        </el-table-column>
        <el-table-column prop="GroundOrderCount" label="地接订单总数">
        </el-table-column>
        <el-table-column prop="ComboOrderCount" label="套餐订单总数">
        </el-table-column>
      </el-table>
    </div>
    <el-drawer :with-header="false" size='70%' :visible.sync="drawer" direction="rtl" :before-close="handleClose">
      <clueComponent :isDrawer="isDrawer" :queryTime="queryTime"></clueComponent>
    </el-drawer>
  </div>
</template>

<script>
  import clueComponent from "@/components/clueManagement/clueComponent";
  export default {
    components: {
      clueComponent
    },
    data() {
      return {
        queryTime: {
          StartTime: '',
          EndTime: ''
        },
        drawer: false,
        isDrawer: true,
        msg: {
          month: "",
          YearStr: "",
          MonthStr: "",
        },
        total: 0,
        tableData: [],
        loading: false,
      };
    },
    created() {
      let d = new Date();
      this.msg.month = d;
      this.msg.YearStr = d.getFullYear();
      this.msg.MonthStr = d.getMonth() + 1;
    },
    mounted() {
      this.init();
    },
    methods: {
      handleClose(done) {
        done();
      },
      // 查看详情
      seeDetails(row) {
        var d = new Date();
        var currentY = this.msg.YearStr;
        var currentM = this.msg.MonthStr;
        var MonthDayNum = new Date(currentY, currentM, 0).getDate(); //计算当月的天数
        this.queryTime.StartTime = this.msg.YearStr + '-' + row.DateStr
        this.queryTime.EndTime = this.msg.YearStr + '-' + row.DateStr
        this.drawer = true
      },
      init() {
        if (this.loading) return;
        this.loading = true;
        this.apipost(
          "/api/ClueStatic/GetClueDay",
          this.msg,
          (res) => {
            console.log(res);
            this.loading = false;
            this.tableData = res.data.data;
          },
          (e) => {
            this.loading = false;
          }
        );
      },
      tableRowClassName({
        row
      }) {
        let cname = "font-size-12";
        if (
          row.DateStr == "总数" ||
          row.DateStr == "上期总数" ||
          row.DateStr == "环比成长"
        ) {
          cname += " xiaoji-row";
        } else if (row.DateStr == "月总数") {
          cname += " sum-row";
        }
        return cname;
      },
      tableCellClassName({
        row,
        column
      }) {
        if (
          row[column.property] && row[column.property].toString().indexOf("-") != -1 &&
          column.property != "DateStr"
        ) {
          return "warning-col";
        } else if (column.property == "InvalidCount") {
          if (
            parseFloat(row[column.property]) / parseFloat(row.PushCount) >=
            0.2
          ) {
            return "warning-col";
          }
        }
      },
      changeMonthHandler(val) {
        this.msg.YearStr = val.getFullYear();
        this.msg.MonthStr = val.getMonth() + 1;
        console.log(this.msg);
        this.init();
      },
      handleCommand(command) {
        console.log(command);
        if (command == "1") {
          this.downloadHandler();
        }
      },
      downloadHandler() {
        console.log("点击了");
        this.GetLocalFile(
          "/api/ClueStatic/DownLoadClueDay",
          this.msg,
          "每日引流数据统计.xls",
          (res) => {
            this.$message({
              message: "导出成功",
              type: "success",
            });
          }
        );
      },
    },
  };
</script>

<style>
  @import "../../assets/css/customerManage.css";

  .el-table__fixed-body-wrapper table {
    padding-bottom: 8px !important;
  }

  .el-table .xiaoji-row {
    background: #ffff00;
  }

  .el-table .sum-row {
    background: #00b0f0;
  }

  .el-table .warning-col {
    background: red;
  }

  .pointer {
    cursor: pointer;
  }

  .pointer:hover {
    color: #00b0f0;
  }
</style>