<template>
  <div class="customerManage" style="height:100%;">
    <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;height:calc(100% - 61px);box-sizing:border-box;">
      <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 label="引流总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,1,'0')">{{scope.row.PushCount}}</span>
              <span v-else>{{scope.row.PushCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="有效总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,1,'1')">{{scope.row.EffectiveCount}}</span>
              <span v-else>{{scope.row.EffectiveCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="无效总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,1,'2')">{{scope.row.InvalidCount}}</span>
              <span v-else>{{scope.row.InvalidCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="小红书总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,2,'7')">{{scope.row.RedBookCount}}</span>
              <span v-else>{{scope.row.RedBookCount}} </span>
          </template>
        </el-table-column>
        <el-table-column prop="DouYinCount" label="抖音总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,2,'9')">{{scope.row.DouYinCount}}</span>
              <span v-else>{{scope.row.DouYinCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="飞猪总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,2,'8')">{{scope.row.FlyingPigCount}}</span>
              <span v-else>{{scope.row.FlyingPigCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="社群聊天总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,2,'1')">{{scope.row.GroupChatCount}}</span>
              <span v-else>{{scope.row.GroupChatCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="线下拜访总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,2,'2')">{{scope.row.OfflineVisitCount}}</span>
              <span v-else>{{scope.row.OfflineVisitCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="直客介绍总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,2,'3')">{{scope.row.StraightCustomerCount}}</span>
              <span v-else>{{scope.row.StraightCustomerCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="同业介绍总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,2,'4')">{{scope.row.PeerCount}}</span>
              <span v-else>{{scope.row.PeerCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="其他介绍总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,2,'6')">{{scope.row.OtherCount}}</span>
              <span v-else>{{scope.row.OtherCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="订单总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,3,'')">{{scope.row.OrderCount}}</span>
              <span v-else>{{scope.row.OrderCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="机票订单总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,3,'1')">{{scope.row.TicketOrderCount}}</span>
              <span v-else>{{scope.row.TicketOrderCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="签证订单总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,3,'2')">{{scope.row.VisaOrderCount}}</span>
              <span v-else>{{scope.row.VisaOrderCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="地接订单总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,3,'3')">{{scope.row.GroundOrderCount}}</span>
              <span v-else>{{scope.row.GroundOrderCount}} </span>
          </template>
        </el-table-column>
        <el-table-column label="套餐订单总数">
          <template slot-scope="scope">
              <span v-if="scope.row.YearStr>0&&scope.row.MonthStr>0" class="pointer" @click="seeDetails(scope.row,3,'4')">{{scope.row.ComboOrderCount}}</span>
              <span v-else>{{scope.row.ComboOrderCount}} </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer :with-header="false" size='80%' :visible.sync="drawer" direction="rtl" :before-close="handleClose">
      <rightDrawer v-if="drawer"></rightDrawer>
    </el-drawer>
  </div>
</template>

<script>
import rightDrawer from "../../components/workStatistics/rightDrawer.vue";
export default {
  components: {
    rightDrawer,
  },
  data() {
    return {
      drawer: false,
      isDrawer: true,
      msg: {
        month: "",
        YearStr: "",
        MonthStr: "",
      },
      total: 0,
      tableData: [],
      loading: false,
      selfParams: {
        queryTime: {},
      },
    };
  },
  provide() {
    return {
      selfParams: this.selfParams,
    };
  },
  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, type = 0, val = "0") {
      var d = new Date();
      var currentY = this.msg.YearStr;
      var currentM = this.msg.MonthStr;
      var MonthDayNum = new Date(currentY, currentM, 0).getDate(); //计算当月的天数
      this.selfParams.queryTime.StartTime =
        this.msg.YearStr + "-" + row.DateStr;
      this.selfParams.queryTime.EndTime = this.msg.YearStr + "-" + row.DateStr;

      delete this.selfParams.queryTime.ClueState;
      delete this.selfParams.queryTime.CustomerSourceType;
      this.selfParams.queryTime.OrderType = "";
      this.selfParams.queryTime.queryType = type;
      this.selfParams.queryTime.queryVal = val;
      if (type == 1) {
        this.selfParams.queryTime.ClueState = val;
      } else if (type == 2) {
        this.selfParams.queryTime.CustomerSourceType = val;
      } else if (type == 3) {
        this.selfParams.queryTime.OrderType = val;
      }
      this.drawer = true;
    },

    init() {
      if (this.loading) return;
      this.loading = true;
      this.apipost(
        "/api/ClueStatic/GetClueDay",
        this.msg,
        (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;
      this.init();
    },
    handleCommand(command) {
      if (command == "1") {
        this.downloadHandler();
      }
    },
    downloadHandler() {
      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>
