<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="服务单次卡后T+30复购汇总">
        <el-form :inline="true" size="small" v-model="listQuery1">
          <el-form-item label="服务月份">
            <el-date-picker v-model="listQuery1.month" type="month" value-format="yyyy-MM" :picker-options="{}"></el-date-picker>
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="listQuery1.city" clearable placeholder="请选择城市" filterable>
              <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch1(false)">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="querySearch1(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;"> 服务单次保洁后T+30天（0-30），客服复购周期卡（2、4、24、48）情况</div>

        <el-table :data="listData1" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="workerManager" label="商家运营"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="servantName" label="商家"></el-table-column>
          <el-table-column prop="total" label="服务工单数"></el-table-column>
          <el-table-column prop="t7" label="T+7复购周期订单数"></el-table-column>
        </el-table>
        <pagination :total="listQuery1.total" :page.sync="listQuery1.pageIndex" :limit.sync="listQuery1.pageSize" @pagination="querySearch1(false)" />
      </el-tab-pane>

      <el-tab-pane label="服务单次卡后T+30复购明细">
        <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 label="城市">
            <el-select v-model="listQuery2.city" clearable placeholder="请选择城市" filterable>
              <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </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;"> 服务单次保洁后T+30天（0-30），客服复购周期卡（2、4、24、48）情况</div>

        <el-table :data="listData2" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="workerManager" label="商家运营"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="servantName" label="商家"></el-table-column>
          <el-table-column prop="isNew" label="客户类型"></el-table-column>
          <el-table-column prop="bookTime" label="服务时间"></el-table-column>
          <el-table-column prop="bookTradeNo" label="服务单号"></el-table-column>
          <el-table-column prop="payTime" label="复购时间"></el-table-column>
          <el-table-column prop="goodsName" label="复购商品"></el-table-column>
        </el-table>
        <pagination :total="listQuery2.total" :page.sync="listQuery2.pageIndex" :limit.sync="listQuery2.pageSize" @pagination="querySearch2(false)" />
      </el-tab-pane>

      <el-tab-pane label="服务品类后T+30复购明细">
        <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 label="城市">
            <el-select v-model="listQuery3.city" clearable placeholder="请选择城市" filterable>
              <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </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;"> 服务品类后T+30天（0-30），客服复购全品类的情况</div>

        <el-table :data="listData3" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="workerManager" label="商家运营"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="servantName" label="商家"></el-table-column>
          <el-table-column prop="isNew" label="客户类型"></el-table-column>
          <el-table-column prop="bookTime" label="服务时间"></el-table-column>
          <el-table-column prop="bookTradeNo" label="服务单号"></el-table-column>
          <el-table-column prop="payTime" label="复购时间"></el-table-column>
          <el-table-column prop="goodsName" label="复购商品"></el-table-column>
        </el-table>
        <pagination :total="listQuery3.total" :page.sync="listQuery3.pageIndex" :limit.sync="listQuery3.pageSize" @pagination="querySearch3(false)" />
      </el-tab-pane>
      <el-tab-pane label="周期老客T+30续约明细">
        <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 label="城市">
            <el-select v-model="listQuery4.city" clearable placeholder="请选择城市" filterable>
              <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </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-item>
            <span style="color:#09afff">数据更新时间：{{etlTime}}</span>
          </el-form-item>
        </el-form>
        <div style="font-size: 9px;">老客续约率：周期卡内最后一次服务完成后30天内（0-30），有未使用的、未预约的、履约中的周期订单</div>

        <el-table :data="listData4" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="workerManager" label="商家运营"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="servantName" label="商家"></el-table-column>
          <el-table-column prop="serviceGoods" label="服务商品"></el-table-column>
          <el-table-column prop="bookTime" label="最后一次服务时间"></el-table-column>
          <el-table-column prop="bookTradeNo" label="服务单号"></el-table-column>
          <el-table-column prop="payTime" label="复购时间"></el-table-column>
          <el-table-column prop="goodsName" label="复购商品"></el-table-column>
          <el-table-column prop="isRebuy" label="是否已计提此复购"></el-table-column>
          <el-table-column prop="isBefore" label="是否有T+0之前的复购"></el-table-column>
          <el-table-column prop="beforeRebuyGoods" label="T+0之前的复购商品"></el-table-column>
          <el-table-column prop="isRefund" label="是否已退款"></el-table-column>
        </el-table>
        <pagination :total="listQuery4.total" :page.sync="listQuery4.pageIndex" :limit.sync="listQuery4.pageSize" @pagination="querySearch4(false)" />
      </el-tab-pane>
      <el-tab-pane label="散单服务工单明细">
        <el-form :inline="true" size="small" v-model="listQuery5">
          <el-form-item label="服务时间">
            <el-date-picker v-model="listQuery5.startTime" type="date" value-format="yyyy-MM-dd" :picker-options="{}"></el-date-picker>
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="listQuery5.city" clearable placeholder="请选择城市" filterable>
              <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="分类">
            <el-select v-model="listQuery5.type" clearable placeholder="请选择分类">
              <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="querySearch5(false)">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="querySearch5(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>

        <el-table :data="listData5" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="workerManager" label="商家运营"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="servantName" label="商家"></el-table-column>
          <el-table-column prop="serviceGoods" label="服务商品"></el-table-column>
          <el-table-column prop="cusType" label="客户类型"></el-table-column>
          <el-table-column prop="isFirst" label="是否首次服务"></el-table-column>
          <el-table-column prop="bookTime" label="服务时间"></el-table-column>
          <el-table-column prop="bookTradeNo" label="服务单号"></el-table-column>
          <el-table-column prop="isRight" label="是否权益单"></el-table-column>
          <el-table-column prop="userRemark" label="权益单备注"></el-table-column>
        </el-table>
        <pagination :total="listQuery5.total" :page.sync="listQuery5.pageIndex" :limit.sync="listQuery5.pageSize" @pagination="querySearch5(false)" />
      </el-tab-pane>
      
      <el-tab-pane label="周期单服务明细">
        <el-form :inline="true" size="small" v-model="listQuery6">
          <el-form-item label="服务时间">
            <el-date-picker v-model="listQuery6.startTime" type="date" value-format="yyyy-MM-dd" :picker-options="{}"></el-date-picker>
          </el-form-item>
          <el-form-item label="城市">
            <el-select v-model="listQuery6.city" clearable placeholder="请选择城市" filterable>
              <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
 
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch6(false)">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="querySearch6(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>

        <el-table :data="listData6" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="workerManager" label="商家运营"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="servantName" label="商家"></el-table-column>
          <el-table-column prop="serviceGoods" label="服务商品"></el-table-column>
          <el-table-column prop="serviceCount" label="需服务次数"></el-table-column>
          <el-table-column prop="servicedCount" label="已服务次数"></el-table-column>
          <el-table-column prop="times" label="此单第几次服务"></el-table-column>
          <el-table-column prop="cusType" label="客户类型"></el-table-column>
          <el-table-column prop="total" label="客户总剩余服务次数"></el-table-column> 
          <el-table-column prop="bookTime" label="服务时间"></el-table-column>
          <el-table-column prop="bookTradeNo" label="服务单号"></el-table-column> 
        </el-table>
        <pagination :total="listQuery6.total" :page.sync="listQuery6.pageIndex" :limit.sync="listQuery6.pageSize" @pagination="querySearch6(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: [],
      listData1: [],
      listQuery1: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        month: moment().format("YYYY-MM"),
        isExport: false,
      },
      listData2: [],
      listQuery2: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        month: moment().format("YYYY-MM"),
        isExport: false,
      },
      listData3: [],
      listQuery3: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        month: moment().format("YYYY-MM"),
        isExport: false,
      },
      listData4: [],
      listQuery4: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        month: moment().format("YYYY-MM"),
        isExport: false,
      },
      listData5: [],
      listQuery5: {
        type:'保洁',
        total: 0,
        currentPage: 1,
        pageSize: 50,
        startTime: moment().format("YYYY-MM-DD"),
        isExport: false,
      },
      listData6: [],
      listQuery6: { 
        total: 0,
        currentPage: 1,
        pageSize: 50,
        startTime: moment().format("YYYY-MM-DD"),
        isExport: false,
      },
    };
  },
  mounted() {
    this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));
    this.getEtlTime();
  },
  methods: {
    getEtlTime(){
      Service.$axiosGetServicerReportEtlTime().then(res=>{
        this.etlTime=res.data.data;
      })
    },
    querySearch1(value) {
      if (this.listQuery1.month == null || this.listQuery1.month == "") {
        this.$message.warning("请选择服务日期");
        return;
      }
      this.listQuery1.isExport = value;

      if (value) {
        Service.$axiosGetServicerRebuyExport(this.listQuery1);
      } else {
        Service.$axiosGetServicerRebuy(this.listQuery1)
          .then((res) => {
            console.log(res.data.data.dataList);
            this.listData1 = res.data.data.dataList;
            this.listQuery1.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch2(value) {
      if (this.listQuery2.month == null || this.listQuery2.month == "") {
        this.$message.warning("请选择服务日期");
        return;
      }
      this.listQuery2.isExport = value;

      if (value) {
        Service.$axiosGetServicerRebuyDetailExport(this.listQuery2);
      } else {
        Service.$axiosGetServicerRebuyDetail(this.listQuery2)
          .then((res) => {
            console.log(res.data.data.dataList);
            this.listData2 = res.data.data.dataList;
            this.listQuery2.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch3(value) {
      if (this.listQuery3.month == null || this.listQuery3.month == "") {
        this.$message.warning("请选择服务日期");
        return;
      }
      this.listQuery3.isExport = value;

      if (value) {
        Service.$axiosGetServicerRebuyPLDetailExport(this.listQuery3);
      } else {
        Service.$axiosGetServicerRebuyPLDetail(this.listQuery3)
          .then((res) => {
            console.log(res.data.data.dataList);
            this.listData3 = res.data.data.dataList;
            this.listQuery3.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch4(value) {
      if (this.listQuery4.month == null || this.listQuery4.month == "") {
        this.$message.warning("请选择服务日期");
        return;
      }
      this.listQuery4.isExport = value;

      if (value) {
        Service.$axiosGetOldCustomerRebuyDetailListExport(this.listQuery4);
      } else {
        Service.$axiosGetOldCustomerRebuyDetailList(this.listQuery4)
          .then((res) => {
            console.log(res.data.data.dataList);
            this.listData4 = res.data.data.dataList;
            this.listQuery4.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch5(value) {
      if (
        this.listQuery5.startTime == null ||
        this.listQuery5.startTime == ""
      ) {
        this.$message.warning("请选择服务日期");
        return;
      }

      if (
        this.listQuery5.type == null ||
        this.listQuery5.type == ""
      ) {
        this.$message.warning("请选择类型");
        return;
      }
      this.listQuery5.isExport = value;

      if (value) {
        Service.$axiosGetNewCustomerTradeDetailListExport(this.listQuery5);
      } else {
        Service.$axiosGetNewCustomerTradeDetailList(this.listQuery5)
          .then((res) => {
            console.log(res.data.data.dataList);
            this.listData5 = res.data.data.dataList;
            this.listQuery5.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch6(value) {
      if (
        this.listQuery6.startTime == null ||
        this.listQuery6.startTime == ""
      ) {
        this.$message.warning("请选择服务日期");
        return;
      }
 
      this.listQuery6.isExport = value;

      if (value) {
        Service.$axiosGetCycleTradeDetailListExport(this.listQuery6);
      } else {
        Service.$axiosGetCycleTradeDetailList(this.listQuery6)
          .then((res) => {
            console.log(res.data.data.list);
            this.listData6 = res.data.data.list;
            this.listQuery6.total = res.data.data.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>