<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>销售服务</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane label="销售明细(实时)">
        <!-- 查询和其他操作 -->
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery">
            <el-form-item label="销售时间">
              <el-date-picker v-model="timeArray" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                :picker-options="pickerOptions" />
            </el-form-item>
            <el-form-item label="销售渠道">
              <el-select v-model="listQuery.orderChannel" clearable placeholder="请选择销售渠道">
                <el-option v-for=" object in orderChannelMap" :key="object.id" :label="object.name" :value="object.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select v-model="listQuery.orderStatusMap" multiple style="width: 250px" class="filter-item" clearable
                placeholder="请选择订单状态">
                <el-option v-for="(key, value) in statusMap" :key="key" :label="key" :value="value" />
              </el-select>
            </el-form-item>
            <el-form-item label="服务提供商">
              <el-input v-model="listQuery.provider" clearable placeholder="请输入服务提供商"></el-input>
            </el-form-item>
            <el-form-item label="商品id">
              <el-input v-model="listQuery.goodsId" clearable type="number" placeholder="请输入商品id"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="listQuery.goodsName" clearable placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="filter-item" type="primary" icon="el-icon-search"
                @click="getSalesList(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getSalesList(true)">导出</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 查询结果 -->
        <el-table :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="城市" prop="city" />
          <el-table-column align="center" label="订单类型" prop="orderType" />
          <el-table-column align="center" label="订单号" prop="orderSn" />
          <el-table-column align="center" label="订购商品" prop="goodsName" />
          <el-table-column align="center" label="Sku" prop="goodsId" />
          <el-table-column align="center" label="支付金额" prop="price" />
          <el-table-column align="center" label="订单状态" prop="status" />
          <el-table-column align="center" label="售后状态" prop="aftersaleStatus" />
          <el-table-column align="center" label="退款原因" prop="reason" />
          <el-table-column align="center" label="预约状态" prop="bookStatus" />
          <el-table-column align="center" label="下单时间" prop="createTime" />
          <el-table-column align="center" label="支付时间" prop="payTime" />
          <el-table-column align="center" label="支付渠道" prop="payChannel" />
          <el-table-column align="center" label="退款时间" prop="refundTime" />
          <el-table-column align="center" label="是否为cps" prop="isCps" />
          <el-table-column align="center" label="服务提供商" prop="provider" />
          <el-table-column align="center" label="达人名称" prop="commissionUser" />
          <el-table-column align="center" label="达人ID" prop="talentId" />
          <el-table-column align="center" label="达人比例（万分位）" prop="commissionRate" />
          <el-table-column align="center" label="达人佣金(分)" prop="commissionAmount" />
          <el-table-column align="center" label="来源" prop="sourceType" />
          <el-table-column align="center" label="视频或直播间id" prop="itemId" />
          <el-table-column align="center" label="渠道" prop="orderChannel" />
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
          @pagination="getSalesList(false)" />
      </el-tab-pane>
      <el-tab-pane label="销量汇总表">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQuery2">
            <el-form-item label="访问时间">
              <el-date-picker v-model="timeArray2" type="daterange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="访问开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
            </el-form-item>
            <el-form-item label="城市">
              <el-select v-model="listQuery2.city" clearable placeholder="请选择城市">
                <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 class="filter-item" type="primary" icon="el-icon-search"
                @click="getSalesTotalList(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download"
                @click="getSalesTotalList(true)">导出</el-button>
            </el-form-item>
            <div style="color:red">此报表数据延迟一天</div>
          </el-form>
        </div>
        <div>新客数:抖音首次下单且没有在盒马购买过的客户</div>
        <el-table :data="list2" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="城市" prop="city" />
          <el-table-column align="center" label="下单日期" prop="orderDate" />
          <el-table-column align="center" label="下单客户数（包括未付款客户）" prop="total" />
          <el-table-column align="center" label="新客数（未区分保洁和品类--盒马数据对比）" prop="nc" />
          <el-table-column align="center" label="已加企微客户" prop="cp" />
          <el-table-column align="center" label="已付款订单数" prop="orders" />
          <el-table-column align="center" label="付款GMV" prop="gmv" />
          <el-table-column align="center" label="未付款订单数" prop="unOrders" />
          <el-table-column align="center" label="已退款订单数" prop="refunds" />
          <el-table-column align="center" label="退款GMV" prop="refundGmv" />
          <el-table-column align="center" label="需服务次数" prop="serviceCount" />
          <el-table-column align="center" label="预约未服务次数" prop="bookedCount" />
          <el-table-column align="center" label="已服务次数）" prop="servicedCount" />
        </el-table>

        <pagination v-show="total2 > 0" :total="total2" :page.sync="listQuery2.page" :limit.sync="listQuery2.limit"
          @pagination="getSalesTotalList(false)" />
      </el-tab-pane>
      <el-tab-pane label="美团订单">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQueryMT">
            <el-form-item label="下单时间">
              <el-date-picker v-model="timeArray3" type="datetimerange" value-format="yyyy-MM-dd" class="filter-item"
                range-separator="至" start-placeholder="下单开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" />
            </el-form-item>

            <el-form-item label="下单手机">
              <el-input v-model="listQueryMT.mobile" clearable placeholder="请输入下单手机"></el-input>
            </el-form-item>

            
            <el-form-item label="核销码">
              <el-input v-model="listQueryMT.serialNumber" clearable placeholder="请输入核销码"></el-input>
            </el-form-item>

            <el-form-item label="商城订单号">
              <el-input v-model="listQueryMT.orderSn" clearable placeholder="请输入商城订单号"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search" @click="getMTSDList(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download" @click="getMTSDList(true)">导出</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div>注：只含有服务已完成的订单</div>
        <el-table :data="listMT" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="城市" prop="city" /> 
          <el-table-column align="center" label="订单号" prop="orderSn" />
          <el-table-column align="center" label="订购商品" prop="goodsName" /> 
          <el-table-column align="center" label="支付金额" prop="price" />
          <el-table-column align="center" label="订单状态" prop="status" />
          <el-table-column align="center" label="售后状态" prop="aftersaleStatus" /> 
          <el-table-column align="center" label="核销码" prop="serialNumber" /> 
          <el-table-column align="center" label="下单时间" prop="createTime" />
          <el-table-column align="center" label="支付时间" prop="payTime" />
          <el-table-column align="center" label="预约人手机" prop="mobile" /> 
          <el-table-column align="center" label="预约时间" prop="bookTime" /> 
          <el-table-column align="center" label="下单备注" prop="message" />
        </el-table>

        <pagination v-show="total3 > 0" :total="total3" :page.sync="listQueryMT.page" :limit.sync="listQueryMT.limit"
          @pagination="getMTSDList(false)" />
      </el-tab-pane>

      <el-tab-pane label="优惠券汇总">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQueryCouponSummary"> 
            
            <el-form-item label="优惠券名称">
              <el-input v-model="listQueryCouponSummary.couponName" clearable placeholder="请输入优惠券名称"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search" @click="getCouponSummary(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download" @click="getCouponSummary(true)">导出</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- <div>注：只含有服务已完成的订单</div> -->
        <el-table :data="couponSummaryList" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="优惠券名称" prop="name" /> 
          <el-table-column align="center" label="最低消费" prop="minPayAmount" />
          <el-table-column align="center" label="优惠券面值" prop="discountAmount" /> 
          <el-table-column align="center" label="每人限领" prop="limit" /> 
          <el-table-column align="center" label="当前状态" prop="statusTxt" />
          <el-table-column align="center" label="商品范围" prop="goodsRange" /> 
          <el-table-column align="center" label="有效期" prop="validDuration" /> 
          <el-table-column align="center" label="发行数量" prop="stockNumber" />
          <el-table-column align="center" label="剩余数量" prop="remainingNumber" /> 
          <el-table-column align="center" label="领取次数" prop="received" /> 
          <el-table-column align="center" label="领取率" prop="receiveRate" /> 
          <el-table-column align="center" label="核销次数" prop="verifyNumber" /> 
          <el-table-column align="center" label="核销人数" prop="verifyPersonNumber" />
          <el-table-column align="center" label="核销率" prop="verifyRate" />
          <el-table-column align="center" label="核销销售额" prop="verifySalesAmount" /> 
          <el-table-column align="center" label="创建时间" prop="createTime" /> 
        </el-table>

        <pagination v-show="totalCouponSummary > 0" :total="totalCouponSummary" :page.sync="listQueryCouponSummary.page" :limit.sync="listQueryCouponSummary.limit"
          @pagination="getCouponSummary(false)" />
      </el-tab-pane>

      <el-tab-pane label="优惠券明细">
        <div class="filter-container">
          <el-form :inline="true" size="small" v-model="listQueryCouponDetail"> 
            
            <el-form-item label="优惠券名称">
              <el-input v-model="listQueryCouponDetail.couponName" clearable placeholder="请输入优惠券名称"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-search" @click="getCouponDetail(false)">查找</el-button>
              <el-button :loading="listLoading" class="filter-item" type="primary" icon="el-icon-download" @click="getCouponDetail(true)">导出</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- <div>注：只含有服务已完成的订单</div> -->
        <el-table :data="couponDetailList" element-loading-text="正在查询中。。。" border fit highlight-current-row>
          <el-table-column align="center" label="优惠券名称" prop="name" /> 
          <el-table-column align="center" label="兑换码" prop="couponCode" />
          <el-table-column align="center" label="领取时间" :formatter="dateFormatA" prop="createTime" /> 
          <el-table-column align="center" label="使用时间" :formatter="dateFormatA" prop="usedTime" />
          <el-table-column align="center" label="订单编号" prop="orderSn" />
          <el-table-column align="center" label="订单状态" prop="orderStateName" /> 
          <el-table-column align="center" label="发送达人" prop="talentId" /> 
          <el-table-column align="center" label="达人昵称" prop="talentNick" />  
        </el-table>

        <pagination v-show="totalCouponDetail > 0" :total="totalCouponDetail" :page.sync="listQueryCouponDetail.page" :limit.sync="listQueryCouponDetail.limit"
          @pagination="getCouponDetail(false)" />
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
import Pagination from "./../common/Pagination";
import service from "../../script/api/service";
import "@/script/table2excel";
import moment from "moment";

export default {
  name: "callTask",
  components: { Pagination },
  data() {
    return {
      orderChannelMap: [],
      statusMap: {
        101: '未付款',
        102: '用户取消',
        103: '系统取消',
        201: '已付款',
        202: '申请退款',
        203: '已退款',
        207: '已取消(美团)',
        301: '服务中',
        401: '服务已完成',
        402: '服务已完成(系统)'
      },
      listLoading: false,
      cityList: [],
      timeArray: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),
      ],
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        order: "desc",
        provider: "",
        goodsId: '',
        goodsName: ''
      },
      timeArray2: [
        this.formateDay(new Date(new Date() - 3600 * 1000 * 24 * 7)),
        this.formateDay(new Date()),
      ],
      list2: [],
      total2: 0,
      listQuery2: {
        //ib进电的结果
        page: 1,
        limit: 20,
        city: "",
        order: "desc",
      },
      listMT:[],
      listQueryMT: {
        page: 1,
        limit: 20,
        Mobile: '',
        serialNumber:'',
        orderSn:'',
        startTime: '',
        endTime: ''
      },
      timeArray3: [],
      total3: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //---优惠券
      listQueryCouponSummary:{
        page: 1,
        limit: 20,
        couponName:'',
        isExport:false
      },
      totalCouponSummary: 0,
      couponSummaryList:[],
      listQueryCouponDetail:{
        page: 1,
        limit: 20,
        couponName:'',
        isExport:false
      },
      totalCouponDetail: 0,
      couponDetailList:[]
    };
  },
  computed: {},
  created() {
    this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));
    this.getOrderChannel();
  },
  methods: {
    getCouponDetail(isExport){
      if (isExport == false) {
        service
          .$axiosGetDYCouponDetail(this.listQueryCouponDetail)
          .then((response) => {
            this.couponDetailList = response.data.data.list;
            this.totalCouponDetail = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.couponDetailList = [];
            this.totalCouponDetail = 0;
            this.listLoading = false;
          });
      }
      else {
        this.listQueryCouponDetail.isExport=true;
        service.$axiosGetDYCouponDetailExport(this.listQueryCouponDetail);
        this.listLoading = false;
      }
    },
    getCouponSummary(isExport){
      if (isExport == false) {
        service
          .$axiosGetDYCouponSummary(this.listQueryCouponSummary)
          .then((response) => {
            this.couponSummaryList = response.data.data.list;
            this.totalCouponSummary = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.couponSummaryList = [];
            this.total3 = 0;
            this.listLoading = false;
          });
      }
      else {
        this.listQueryCouponSummary.isExport=true;
        service.$axiosGetDYCouponSummaryExport(this.listQueryCouponSummary);
        this.listLoading = false;
      }
    },

    getOrderChannel() {
      service
        .$axiosGetOrderChannel().then(res => [
          this.orderChannelMap = res.data.data
        ])
    },
    getMTSDList(isExport){
      if (this.timeArray3 && this.timeArray3.length === 2) {
        this.listQueryMT.startTime = this.timeArray3[0];
        this.listQueryMT.endTime = this.timeArray3[1];
      } else {
        this.listQueryMT.startTime = null;
        this.listQueryMT.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQueryMT.isExport = isExport;
      this.listLoading = true;

      if (isExport == false) {
        service
          .$axiosGetMTLSDList(this.listQueryMT)
          .then((response) => {
            this.listMT = response.data.data.list;
            this.total3 = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.listMT = [];
            this.total3 = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosGetMTLSDListExport(this.listQueryMT);
        this.listLoading = false;
      }
    },
    getSalesList(isExport) {
      console.info(this.timeArray);
      if (!this.listQuery.orderChannel) {
        this.$message.warning("请先选择销售渠道再进行查询");
        return false;
      }
      if (this.timeArray && this.timeArray.length === 2) {
        this.listQuery.startTime = this.timeArray[0];
        this.listQuery.endTime = this.timeArray[1];
      } else {
        this.listQuery.startTime = null;
        this.listQuery.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQuery.isExport = isExport;
      this.listLoading = true;
      let params = {
        page: this.listQuery.page,
        limit: this.listQuery.limit,
        startTime: this.listQuery.startTime,
        endTime: this.listQuery.endTime,
        goodsId: this.listQuery.goodsId,
        goodsName: this.listQuery.goodsName,
        isExport: isExport,
        orderStatus: this.listQuery.orderStatusMap.join(","),
        provider: this.listQuery.provider,
        orderChannel: this.listQuery.orderChannel
      }

      if (isExport == false) {
        let days = moment(this.timeArray[1]).diff(moment(this.timeArray[0]), "days");
        if (days > 31) {
          this.$message.warning("请调整日期范围，不能超过30天");
          return;
        }
        service
          .$axiosGetDYSalesList(params)
          .then((response) => {
            this.list = response.data.data.list;
            this.total = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list = [];
            this.total = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosGetDYSalesExport(params);
        this.listLoading = false;
      }

    },
    getSalesTotalList(isExport) {
      if (this.timeArray2 && this.timeArray2.length === 2) {
        this.listQuery2.startTime = this.timeArray2[0];
        this.listQuery2.endTime = this.timeArray2[1];
      } else {
        this.listQuery2.startTime = null;
        this.listQuery2.endTime = null;
        this.$message.warning("请先选择日期范围再进行查询");
        return false;
      }
      this.listQuery2.isExport = isExport;
      this.listLoading = true;

      if (isExport == false) {
        service
          .$axiosGetDYSalesTotalList(this.listQuery2)
          .then((response) => {
            this.list2 = response.data.data.list;
            this.total2 = response.data.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.list2 = [];
            this.total2 = 0;
            this.listLoading = false;
          });
      }
      else {
        service.$axiosGetDYSalesTotalExport(this.listQuery2);
        this.listLoading = false;
      }
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
  },
};
</script>

<style>
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.panel-group {
  display: flex;
  flex-flow: wrap;
}

.panel-group .card-panel {
  min-height: 130px;
  border-radius: 6px;
  padding: 10px 10px 0px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  -webkit-box-shadow: 2px 2px 10px rgb(0 0 0 / 10%);
  box-shadow: 2px 2px 10px rgb(0 0 0 / 10%);
  border-color: rgba(0, 0, 0, .05);
  margin: 10px
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  /*dashed*/
  padding: 10px 0;
}

.card-data {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

.card-item {
  display: flex;
  line-height: 20px;
  font-size: 13px;
}

.card-sub-item {
  margin-right: 20px;
  border-right: 1px dashed #ccc;
  width: 150px;
}

.card-sub-item .title {
  font-weight: 600;
}

.card-footer {
  height: 40px;
  line-height: 40px;
  border-top: 1px dashed #ccc;
  text-align: center;
  margin-top: 10px;
  color: #36a3f7;
}
</style>
