<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-select v-model="listQuery.city" clearable placeholder="请选择城市">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.dataName" :value="item.dataName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务时间">
            <el-date-picker v-model="listQuery.bookDate" type="date" value-format="yyyy-MM-dd" :picker-options="{}"></el-date-picker>
          </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>

        <!-- 列表数据 -->
        <el-table :data="listData" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="cusPhone" label="预约电话"></el-table-column>
          <el-table-column prop="goodsCategory" label="商品分类"></el-table-column>
          <el-table-column prop="goodsName" label="商品名"></el-table-column>
          <el-table-column prop="payId" label="订单号"></el-table-column>
          <el-table-column prop="payTime" label="购买时间"></el-table-column>
          <el-table-column prop="serviceNum" label="可约次数"></el-table-column>
          <el-table-column prop="servicedNum" label="已服务次数"></el-table-column>
          <el-table-column prop="servicedNum" label="剩余服务次数">
            <template slot-scope="scope">
              {{scope.row.serviceNum-scope.row.servicedNum}}
            </template>
          </el-table-column>
          <el-table-column prop="station" label="服务站"></el-table-column>
          <el-table-column prop="shopName" label="购买门店"></el-table-column>
          <el-table-column prop="nextServiceTime" label="下次服务时间"></el-table-column>
          <el-table-column prop="servantName" label="服务人员"></el-table-column>
          <el-table-column prop="servantPhone" label="服务人员电话"></el-table-column>
          <el-table-column prop="rebuy" label="是否已复购"></el-table-column>
          <el-table-column prop="rebuyGoodsName" label="复购商品"></el-table-column>
          <el-table-column prop="rebuyPayTime" label="复购时间"></el-table-column>
          <el-table-column prop="rebuyLeaveCount" label="复购订单剩余服务次数"></el-table-column>
        </el-table>
        <pagination :total="listQuery.total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="querySearch(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,
        bookDate: "",
      },
    };
  },
  mounted() {
    this.getCityStation();
    this.getEtlTime();
  },
  methods: {
    getEtlTime(){
      Service.$axiosGetMarketReportEtlTime().then(res=>{
        this.etlTime=res.data.data;
      })
    },
    getCityStation() {
      Service.$axiosGetUserAuthBuzData({
        userId: globalData.userInfo.id,
      }).then((res) => {
        if (res.data.errno == "0") {
          this.cityList = res.data.data.userCityDataList;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    querySearch(value) {
      if (this.listQuery.city == null || this.listQuery.city == "") {
        this.$message.warning("请选择城市");
        return;
      }

      if (this.listQuery.bookDate == "") {
        this.$message.warning("请选择服务日期");
        return;
      }

      let temp = {
        pageNo: this.listQuery.currentPage,
        pageSize: this.listQuery.pageSize,
        city: this.listQuery.city,
        bookDate: this.listQuery.bookDate,
        isExport: value,
      };
      if (value) {
        Service.$axiosMarketRebuyRemindExport(temp);
      } else {
        Service.$axiosMarketRebuyRemind(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);
          });
      }
    },
  },
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>