<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>复购率分析报表-盒马</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <el-card shadow="hover"> -->
    <el-tabs type="border-card">
      <el-tab-pane label="新客首次履约复购">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery">
          <el-form-item label="服务月份">
            <el-date-picker v-model="listQuery.month" type="month" value-format="yyyy-MM" :picker-options="{}"></el-date-picker>
          </el-form-item>
          <el-form-item label="新客类型">
            <el-select v-model="listQuery.cType" clearable placeholder="请选择新客类型">
              <el-option label="保洁新客" value="保洁"></el-option>
              <el-option label="保洁单次新客" value="单次"></el-option>
              <el-option label="品类新客" value="品类"></el-option>
              <el-option label="新客" value=""></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="复购类型">
            <el-select v-model="listQuery.rebuy" clearable placeholder="请选择复购类型">
              <el-option label="保洁" value="保洁"></el-option>
              <el-option label="周期" value="周期"></el-option>
              <el-option label="品类" value="品类"></el-option>
              <el-option label="全类型" value=""></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch(false)">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="querySearch(true)">导出</el-button>
          </el-form-item>
          <el-form-item>
            <span style="color:#09afff">数据更新时间：{{etlTime}}</span>
          </el-form-item>
        </el-form>
        <div style="font-size: 9px;">①保洁新客：首次购买保洁的客户；②保洁单次新客：首次购买单次保洁的客户；③品类新客：首次购买品类的客户；④新客：首次购买保洁或品类的客户</div>
        <div style="font-size: 9px;">T：首次服务完成时间</div>

        <!-- 新客首次履约复购列表数据 -->
        <el-table :data="listData" border style="width: 100%" class="table">
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="jzStation" label="驿站"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="beginMonth" label="订单首次履约年月"></el-table-column>
          <el-table-column prop="total" label="新客首次履约用户数"></el-table-column>
          <el-table-column prop="serviced" label="新客首次履约后复购用户数"></el-table-column>
          <el-table-column prop="avgDay" label="平均履约复购间隔天数"></el-table-column>
          <el-table-column prop="t0" label="新客履约T+0复购"></el-table-column>
          <el-table-column prop="t7" label="新客履约T+7复购"></el-table-column>
          <el-table-column prop="t15" label="新客履约T+15复购"></el-table-column>
          <el-table-column prop="t30" label="新客履约T+30复购"></el-table-column>
          <el-table-column prop="t60" label="新客履约T+60复购"></el-table-column>
          <el-table-column prop="t90" label="新客履约T+90复购"></el-table-column>
          <el-table-column prop="tother" label="超90天复购"></el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- <el-tab-pane label="保洁新客首次履约复购率(汇总)"> 
        <el-form :inline="true" size="small" v-model="listQuery4">
          <el-form-item label="服务月份">
            <el-date-picker v-model="listQuery4.month" type="month" value-format="yyyy-MM" :picker-options="{}"></el-date-picker>
          </el-form-item> 

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch4(false)">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="querySearch4(true)">导出</el-button>
          </el-form-item>
        </el-form>
        <div style="font-size: 9px;">①保洁新客：首次购买保洁的客户且第一次服务,履约完成后 复购保洁周期卡</div>
        <div style="font-size: 9px;">T：首次服务完成时间</div>
 
        <el-table :data="listData4" border style="width: 100%" class="table"> 
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="jzStation" label="驿站"></el-table-column> 
          <el-table-column prop="total" label="新客首次履约人数"></el-table-column>
          <el-table-column prop="rebuy" label="新客T+7复购"></el-table-column> 
          <el-table-column prop="nrank" label="复购率"></el-table-column>
        </el-table>
      </el-tab-pane> -->
      <el-tab-pane label="老客续约率">
        <el-form :inline="true" size="small" v-model="listQuery2">
          <el-form-item label="服务月份">
            <el-date-picker v-model="listQuery2.month" type="month" value-format="yyyy-MM" :picker-options="{}"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch2(false)">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="querySearch2(true)">导出</el-button>
          </el-form-item>
          <el-form-item>
            <span style="color:#09afff">数据更新时间：{{etlTime}}</span>
          </el-form-item>
        </el-form>
        <div style="font-size: 9px;">老客续约率：周期卡内最后一次服务完成后30天内，有未使用的、未预约的、履约中的订单</div>
        <!-- 老客续约率列表数据 -->
        <el-table :data="listData2" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="total" label="本月完成周期工单数"></el-table-column>
          <el-table-column prop="lastd" label="最后一次周期工单数"></el-table-column>
          <el-table-column prop="bj1" label="续约单次"></el-table-column>
          <el-table-column prop="bj2" label="续约2次"></el-table-column>
          <el-table-column prop="bj4" label="续约4次"></el-table-column>
          <el-table-column prop="bj24" label="续约24次"></el-table-column>
          <el-table-column prop="bj48" label="续约48次"></el-table-column>
        </el-table>

        <pagination :total="listQuery2.total" :page.sync="listQuery2.currentPage" :limit.sync="listQuery2.pageSize" @pagination="querySearch2(false)" />
      </el-tab-pane>
      <el-tab-pane label="保洁品类拉新">
        <el-form :inline="true" size="small" v-model="listQuery3">
          <el-form-item label="服务月份">
            <el-date-picker v-model="listQuery3.month" type="month" value-format="yyyy-MM" :picker-options="{}"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch3(false)">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="querySearch3(true)">导出</el-button>
          </el-form-item>
          <el-form-item>
            <span style="color:#09afff">数据更新时间：{{etlTime}}</span>
          </el-form-item>
        </el-form>
        <div style="font-size: 9px;">一个用户在当月第一次买保洁，有第一次买品类，计算2次新客</div>
        <!-- 保洁品类拉新 -->
        <el-table :data="listData3" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="currMonth" label="月份"></el-table-column>
          <el-table-column prop="currNew" label="新客"></el-table-column>
          <el-table-column prop="bjCurrAll" label="保洁订单"></el-table-column>
          <el-table-column prop="bjCurrNew" label="保洁新客"></el-table-column>
          <el-table-column prop="plCurrAll" label="品类订单"></el-table-column>
          <el-table-column prop="plCurrNew" label="品类新客"></el-table-column>
        </el-table>

        <pagination :total="listQuery3.total" :page.sync="listQuery3.currentPage" :limit.sync="listQuery3.pageSize" @pagination="querySearch3(false)" />
      </el-tab-pane>

    </el-tabs>

    <!-- </el-card> -->
  </div>
</template>
<script>
import moment from "moment";
import Pagination from "./common/Pagination";
import url from "@/script/baseUrl.js";
import Service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";
import commutil from "@/components/common/globaldata/commutil.data.vue";
// import addTrainHisDia from './components/addTrainHisDia';
export default {
  components: { Pagination },
  data() {
    return {
      etlTime: "",
      cityList: [],
      listData: [],
      listQuery: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        city: null,
        month: moment().format("YYYY-MM"),
        rebuy: "",
        cType: "",
      },
      listData2: [],
      listQuery2: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        month: moment().format("YYYY-MM"),
      },
      listData3: [],
      listQuery3: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        month: moment().format("YYYY-MM"),
      },
      istData4: [],
      listQuery4: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        month: moment().format("YYYY-MM"),
      },
    };
  },
  mounted() {
    this.getEtlTime();
  },
  methods: {
    getEtlTime() {
      Service.$axiosGetMarketReportEtlTime().then((res) => {
        this.etlTime = res.data.data;
      });
    },
    querySearch(value) {
      if (this.listQuery.month == null || this.listQuery.month == "") {
        this.$message.warning("请选择服务日期");
        return;
      }

      let temp = {
        month: this.listQuery.month,
        isExport: value,
        rebuy: this.listQuery.rebuy,
        cType: this.listQuery.cType,
        isExport: value,
      };
      if (value) {
        Service.$axiosGetMarketNewCustomerRebuyExport(temp);
      } else {
        Service.$axiosGetMarketNewCustomerRebuy(temp)
          .then((res) => {
            console.log(res.data.data.data);
            this.listData = res.data.data;
            if (res.data.data.length > 0)
              this.listQuery.total = res.data.data[0].total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch2(value) {
      console.info("querySearch2");
      if (this.listQuery2.month == null || this.listQuery2.month == "") {
        this.$message.warning("请选择服务日期");
        return;
      }

      let temp = {
        month: this.listQuery2.month,
        isExport: value,
      };
      if (value) {
        Service.$axiosGetOldCustomerRebuyListExport(temp);
      } else {
        Service.$axiosGetOldCustomerRebuyList(temp)
          .then((res) => {
            console.info(res.data.data);
            this.listData2 = res.data.data;
            this.querySearch2.total = res.data.data.length;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch3(value) {
      console.info("querySearch3");
      if (this.listQuery3.month == null || this.listQuery3.month == "") {
        this.$message.warning("请选择服务日期");
        return;
      }

      let temp = {
        month: this.listQuery3.month,
        isExport: value,
        pageSize: this.listQuery3.pageSize,
        pageNo: this.listQuery3.currentPage,
      };
      if (value) {
        Service.$axiosGetNewCustomerListExport(temp);
      } else {
        Service.$axiosGetNewCustomerList(temp)
          .then((res) => {
            this.listData3 = res.data.data.dataList;
            this.listQuery3.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch4(value) {
      console.info("querySearch3");
      if (this.listQuery4.month == null || this.listQuery3.month == "") {
        this.$message.warning("请选择服务日期");
        return;
      }

      let temp = {
        month: this.listQuery4.month,
        isExport: value,
      };
      if (value) {
        Service.$axiosGetNewCustomerRebuyBJTotalExport(temp);
      } else {
        Service.$axiosGetNewCustomerRebuyBJTotal(temp)
          .then((res) => {
            this.listData4 = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>