<template>
  <div class="customerManage" style="display:flex;height:calc(100% - 20px);flex-direction:column;">
    <div class="tools" style="border:none;">
      <div class="tools-item">
        <h1>月度引流统计</h1>
      </div>
      <div style="width: 340px;">
        <el-date-picker v-model="msg.month" type="year" icon="el-icon-date" slot="append" class="input-with-select"
          format="yyyy 年" @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>
    <el-tabs v-model="activeName" style="flex:1;height:100%;" class="diy-eltabs" tab-position="top">
      <el-tab-pane label="月度数据" name="monthdata" style="background:#000">
        <div class="data-box-item">
          <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.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.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.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.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.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.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.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.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.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.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.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.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.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>{{scope.row.TransRate}}% </span>
              </template>
            </el-table-column>
            <el-table-column label="机票订单总数">
              <template slot-scope="scope">
                <span v-if="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.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.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.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-tab-pane>
      <el-tab-pane label="月度成长率" name="monthrate">
        <div class="data-box-item">
          <el-table :data="rateData" :formatter="formatter" tooltip-effect="dark" v-loading="rateLoading"
            style="width: 100%;" height="100%" border :cell-class-name="tableCellClassName"
            :row-class-name="tableRowClassName">
            <el-table-column prop="ItemName" label="">
            </el-table-column>
            <el-table-column prop="JanuaryRate" label="1月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="FebruaryRate" label="2月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="MarchRate" label="3月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="AprilRate" label="4月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="MayRate" label="5月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="JuneRate" label="6月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="JulyRate" label="7月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="AugustRate" label="8月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="SeptemberRate" label="9月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="OctoberRate" label="10月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="NovemberRate" label="11月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="DecemberRate" label="12月" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="AvgRate" label="平均" :formatter="formatter">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <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: "",
        },
        total: 0,
        tableData: [],
        loading: false,
        rateLoading: false,
        activeName: "monthdata",
        rateData: [],
        selfParams: {
          queryTime: {},
        },
      };
    },
    provide() {
      return {
        selfParams: this.selfParams,
      };
    },
    created() {
      let d = new Date();
      this.msg.month = d;
      this.msg.YearStr = d.getFullYear();
    },
    mounted() {
      this.init();
      this.initRate();
    },
    methods: {
      handleClose(done) {
        done();
      },
      // 查看详情
      seeDetails(row, type = 0, val = "0") {
        var d = new Date();
        var currentY = this.msg.YearStr;
        var currentM = this.msg.month;
        if (row.DateStr.length == 2) {
          currentM = "0" + row.DateStr.slice(0, 1);
        } else {
          currentM = row.DateStr.slice(0, 2);
        }
        var MonthDayNum = new Date(currentY, currentM, 0).getDate(); //计算当月的天数
        this.selfParams.queryTime.StartTime =
          this.msg.YearStr + "-" + currentM + "-01";
        this.selfParams.queryTime.EndTime =
          currentY + "-" + currentM + "-" + MonthDayNum;

        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/GetClueMonth",
          this.msg,
          (res) => {
            this.loading = false;
            this.tableData = res.data.data;
          },
          (e) => {
            this.loading = false;
          }
        );
      },
      initRate() {
        if (this.rateLoading) return;
        this.rateLoading = true;
        this.apipost(
          "/api/ClueStatic/GetClueMonthRate",
          this.msg,
          (res) => {
            this.rateLoading = false;
            this.rateData = res.data.data;
          },
          (e) => {
            this.rateLoading = false;
          }
        );
      },
      tableRowClassName({
        row
      }) {
        let cname = "font-size-12";
        if (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.init();
        this.initRate();
      },
      formatter(row, column) {
        return row[column.property] + "%";
      },
      handleCommand(command) {
        if (command == "1") {
          if (this.activeName == "monthdata") {
            this.downloadHandler(
              "/api/ClueStatic/DownLoadClueMonth",
              "月度引流数据"
            );
          } else {
            this.downloadHandler(
              "/api/ClueStatic/DownLoadClueMonthRate",
              "月度引流成长率"
            );
          }
        }
      },
      downloadHandler(url, name) {
        this.GetLocalFile(url, this.msg, `${name}.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;
  }

  .diy-eltabs .el-tabs__content {
    height: calc(100% - 40px);
  }

  .diy-eltabs .data-box-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .pointer {
    cursor: pointer;
  }

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