<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="pickerOptions"></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,1)">导出</el-button>
          </el-form-item>
        </el-form>
        <div style="font-size: 9px; color:darkorange">tips: 月份是自然月份,非当前月从该月1号至该月最后一天,如果查询月是当月，则查询从1号至T-1日</div>

        <!-- 盒马导购销售数据 -->
        <el-table :data="listData" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="nanny_name" label="管家名称"></el-table-column>
          <el-table-column prop="day_real_fee" label="当日实销"></el-table-column>
          <el-table-column prop="month_real_fee" label="当月实销"></el-table-column>
          <el-table-column prop="month_fee" label="当月销售"></el-table-column>
          <el-table-column prop="month_refund" label="当月退款"></el-table-column>
        </el-table>
      </el-tab-pane>
      <!--      城市导购数据-->
      <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="pickerOptions"></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,2)">导出</el-button>
          </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="day_real_fee" label="当日实销"></el-table-column>
          <el-table-column prop="month_real_fee" label="当月实销"></el-table-column>
          <el-table-column prop="month_fee" label="当月销售"></el-table-column>
          <el-table-column prop="month_refund" label="当月退款"></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="listQuery">
          <el-form-item label="月份">
            <el-date-picker v-model="listQuery.month" type="month" value-format="yyyy-MM"
                            :picker-options="pickerOptions"></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,3)">导出</el-button>
          </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="day_real_fee" label="当日实销"></el-table-column>
          <el-table-column prop="month_real_fee" label="当月实销"></el-table-column>
          <el-table-column prop="month_fee" label="当月销售"></el-table-column>
          <el-table-column prop="month_refund" label="当月退款"></el-table-column>
        </el-table>
      </el-tab-pane>

      <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="pickerOptions"></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,4)">导出</el-button>
          </el-form-item>
        </el-form>
        <!--        <div style="font-size: 9px;">一个用户在当月第一次买保洁，有第一次买品类，计算2次新客</div>-->
        <!-- 保姆签单-城市数据 -->
        <el-table :data="listData5" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="valid_clue" label="有效线索数">
            <template slot="header">
              <el-tooltip content="已分配且未流失的线索数">
                <span>有效线索数</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="invalid_clue" label="无效线索数"></el-table-column>
          <el-table-column prop="today_allocation_clue" label="当日分配">
            <template slot="header">
              <el-tooltip content="当日分配的有效线索数">
                <span>当日分配</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="today_contract_num" label="当日单量">
            <template slot="header">
              <el-tooltip content="已签约记1，已解约记-1">
                <span>当日单量</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="today_contract_amount" label="当日金额">
            <template slot="header">
              <el-tooltip content="当日签约的合同金额-当日解约的退款金额">
                <span>当日金额</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="month_contract_num" label="当月单量">
            <template slot="header">
              <el-tooltip content="计算同当日单量">
                <span>当月单量</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="month_contract_amount" label="当月金额">
            <template slot="header">
              <el-tooltip content="当月收款金额-当月退款金额">
                <span>当月金额</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="refund_amount" label="当月退款"></el-table-column>
          <el-table-column prop="conversion_rate" label="当月转化率">
            <template slot="header">
              <el-tooltip content="当月单量/当月有效线索数">
                <span>当月转化率</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="customer_price" label="当月客单价">
            <template slot="header">
              <el-tooltip content="当月金额/当月单量">
                <span>当月客单价</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="referral_contract_num" label="转介绍单量">
            <template slot="header">
              <el-tooltip content="来源为转介绍的线索，签约记1,解约记-1">
                <span>转介绍单量</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="referral_contract_amount" label="转介绍GMV">
            <template slot="header">
              <el-tooltip content="来源为转介绍的合同，收款金额-退款金额">
                <span>转介绍GMV</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="referral_contract_rate" label="转介绍占比">
            <template slot="header">
              <el-tooltip content="转介绍GMV/当月金额">
                <span>转介绍占比</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <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="pickerOptions"></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,5)">导出</el-button>
          </el-form-item>
        </el-form>
        <!--        <div style="font-size: 9px;">一个用户在当月第一次买保洁，有第一次买品类，计算2次新客</div>-->
        <!-- 保姆签单-个人数据 -->
        <el-table :data="listData4" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="nanny_name" label="管家"></el-table-column>
          <el-table-column prop="current_day_allot_num" label="当日分配线索数"></el-table-column>
          <el-table-column prop="current_month_allot_num" label="当月分配线索数"></el-table-column>
          <el-table-column prop="one_year_allot_num" label="一年内分配线索数"></el-table-column>
          <el-table-column prop="current_day_contract_num" label="当日单量"></el-table-column>
          <el-table-column prop="current_day_contract_amont" label="当日金额"></el-table-column>
          <el-table-column prop="current_month_contract_num" label="当月单量"></el-table-column>
          <el-table-column prop="current_moenth_real_amont" label="当月金额"></el-table-column>
          <el-table-column prop="current_month_refund_amount" label="当月退款"></el-table-column>
          <el-table-column prop="current_month_conversion_rate" label="当月转化率"></el-table-column>
          <el-table-column prop="current_month_customer_price" label="当月客单价"></el-table-column>
          <el-table-column prop="transfer_contract_num" label="转介绍单量"></el-table-column>
          <el-table-column prop="refer_real_amount" label="转介绍GMV"></el-table-column>
          <el-table-column prop="transfer_contract_rate" label="转介绍占比"></el-table-column>
        </el-table>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
import moment from "moment";
import Pagination from "./common/Pagination";
import Service from "../script/api/service";
// import addTrainHisDia from './components/addTrainHisDia';
export default {
  components: {Pagination},
  data() {
    return {
      cityList: [],
      listData: [],
      listQuery: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        city: null,
        month: moment().format("YYYY-MM"),
        rebuy: "",
        cType: "",
      },
      listData2: [],
      listData3: [],
      listData4: [],
      listData5: [],
      pickerOptions: {
        disabledDate(time) {
          return  moment(time).format("YYYY-MM") > moment().format("YYYY-MM");
        }
      }
    };
  },
  mounted() {
  },
  methods: {
    querySearch(value, type) {
      if (this.listQuery.month === undefined || this.listQuery.month == null || this.listQuery.month === "") {
        this.$message.warning("请选择服务日期");
        return;
      }

      let temp = {
        month: this.listQuery.month,
        type: type,
        isExport: value
      };
      if (value) {
        Service.$axiossalesPerformanceExport(temp);
      } else {
        Service.$axiossalesPerformance(temp)
          .then((res) => {
            res.data.data.forEach(item => {
              item.forEach(i => {
                if (i.query_type === "个人(导购)") {
                  this.listData = item;
                }
                if (i.query_type === "城市(导购)") {
                  this.listData2 = item;
                }
                if (i.query_type === "城市(总体)") {
                  this.listData3 = item;
                }
                if (i.query_type === "保姆签单-城市维度") {
                  this.listData5 = item;
                }
                if (i.query_type === "保姆签单-个人维度") {
                  this.listData4 = item;
                }
              })
            })
          })
          .catch((err) => {
            console.log(err);
          });
      }
    }
  },
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>
