<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" v-model="activeTab">
      <el-tab-pane label="小程序商城订单">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery1">
          <el-form-item label="城市">
            <el-select v-model="listQuery1.city" clearable placeholder="请选择城市" multiple>
              <el-option v-for="(item,index) in cityList2" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务线">
            <el-select v-model="listQuery1.levelOne" value-key="id" placeholder="请选择业务线" clearable>
              <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-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源">
            <el-select v-model="listQuery1.channel" placeholder="请选择订单来源" clearable>
              <el-option v-for="(item,index) in channelList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间段">
            <el-date-picker v-model="listQuery1.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </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)" v-per="'downloadSale1'">导出</el-button>
          </el-form-item>
          
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData1" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="orderSn" label="订单号" width="120px" fixed="left"></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="channel" label="渠道"></el-table-column>
          <el-table-column prop="samllType" label="商品类型"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>  
          <el-table-column prop="levelOne" label="一级分类"></el-table-column>  
          <el-table-column prop="levelTwo" label="二级分类"></el-table-column>  
          <el-table-column prop="keyWord" label="关键字"></el-table-column>  
          <el-table-column prop="goodsPrice" label="商品价格"></el-table-column>
          <el-table-column prop="payDate" label="支付日期"></el-table-column>
          <el-table-column prop="payAmount" label="支付金额"></el-table-column>
          <el-table-column prop="couponPrice" label="优惠券抵扣金额"></el-table-column>
          <el-table-column prop="couponCode" label="优惠券兑换码"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column prop="orderType" label="订单类型"></el-table-column>
          <el-table-column prop="refundDate" label="退款日期"></el-table-column>
          <el-table-column prop="refundAmount" label="退款金额"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination :total="total1" :page.sync="currentPage1" :limit.sync="pageSize1" @pagination="querySearch1(false)" />
      </el-tab-pane>
      <el-tab-pane label="各渠道销售明细">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery2">
          <el-form-item label="城市">
            <el-select v-model="listQuery2.city" clearable placeholder="请选择城市" multiple>
              <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-select v-model="listQuery2.levelOne" value-key="id" placeholder="请选择业务线" clearable>
              <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-option label="附加" value="附加"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源">
            <el-select v-model="listQuery2.channel" placeholder="请选择订单来源" clearable>
              <el-option v-for="(item,index) in channelList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间段">
            <el-date-picker v-model="listQuery2.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch2">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadSale2" v-per="'downloadSale2'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData2" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="channel" label="渠道"></el-table-column>
          <el-table-column prop="channelNo" label="渠道编号"></el-table-column>
          <el-table-column prop="payOrderNo" label="付款单号" ></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="shopName" label="门店"></el-table-column>
          <el-table-column prop="levelOne" label="一级分类"></el-table-column>
          <el-table-column prop="levelTwo" label="二级分类"></el-table-column>
          <el-table-column prop="keyWord" label="关键字"></el-table-column>
          <el-table-column prop="serviceTime" label="服务时长"></el-table-column>
          <el-table-column prop="serviceCount" label="服务次数"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column prop="payDate" label="支付日期"></el-table-column>
          <el-table-column prop="payFee" label="支付金额"></el-table-column>
          <el-table-column prop="refundDate" label="退款日期"></el-table-column>
          <el-table-column prop="refundFee" label="退款金额"></el-table-column>
          <el-table-column prop="skuCode" label="sku_code"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination :total="total2" :page.sync="currentPage2" :limit.sync="pageSize2" @pagination="querySearch2" />
      </el-tab-pane>
      <el-tab-pane label="销售汇总">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery3">
          <el-form-item label="城市">
            <el-select v-model="listQuery3.city" clearable placeholder="请选择城市" multiple>
              <el-option v-for="(item,index) in cityList2" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务线">
            <el-select v-model="listQuery3.levelOne" value-key="id" placeholder="请选择业务线" clearable>
              <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-option label="附加" value="附加"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源">
            <el-select v-model="listQuery3.channel" placeholder="请选择订单来源" clearable>
              <el-option v-for="(item,index) in channelList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间段">
            <el-date-picker v-model="listQuery3.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch3">查询</el-button>
          </el-form-item>
          <el-button type="primary" icon="el-icon-download" @click="downloadSale3" v-per="'downloadSale'">导出</el-button>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData3" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="dates" label="日期"></el-table-column>
          <el-table-column prop="channel" label="渠道"></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column> 
          <el-table-column prop="salesType" label="销售类型"></el-table-column> 
          <el-table-column prop="levelOne" label="一级分类"></el-table-column>
          <el-table-column prop="levelTwo" label="二级分类"></el-table-column>
          <el-table-column prop="keyWord" label="关键字"></el-table-column>
          <el-table-column prop="baojeilei" label="保洁分类"></el-table-column>
          <el-table-column prop="salesAmount" label="销售额"></el-table-column>
          <el-table-column prop="salesOrderNum" label="销售单量"></el-table-column>
          <el-table-column prop="refundAmount" label="退款额"></el-table-column>
          <el-table-column prop="refundOrderNum" label="退款单量"></el-table-column>
          <el-table-column prop="billMoney" label="开单金额"></el-table-column>
          <el-table-column prop="billNum" label="开单数量"></el-table-column>


        </el-table>

        <!-- 分页 -->
        <pagination :total="total3" :page.sync="currentPage3" :limit.sync="pageSize3" @pagination="querySearch3" />
      </el-tab-pane>

      <el-tab-pane label="服务GMV汇总">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery4">
          <el-form-item label="城市">
            <el-select v-model="listQuery4.city" clearable placeholder="请选择城市" multiple>
              <el-option v-for="(item,index) in cityList2" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务线">
            <el-select v-model="listQuery4.levelOne" value-key="id" placeholder="请选择业务线" clearable>
              <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-option label="附加" value="附加"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间段">
            <el-date-picker v-model="listQuery4.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch4">查询</el-button>
          </el-form-item>
          <el-button type="primary" icon="el-icon-download" @click="downloadService" v-per="'downloadService'">导出</el-button>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData4" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <!-- <el-table-column prop="id" label="id" width="80px" fixed="left"></el-table-column> -->

          <el-table-column prop="dates" label="日期"></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="channel" label="渠道"></el-table-column>
          <el-table-column prop="serviceType" label="服务类型"></el-table-column>
          <el-table-column prop="jzStation" label="驿站"></el-table-column>
          <el-table-column prop="levelOne" label="一级分类"></el-table-column>
          <el-table-column prop="levelTwo" label="二级分类"></el-table-column>
          <el-table-column prop="keyWord" label="关键字"></el-table-column>
          <el-table-column prop="serverTimes" label="服务次数"></el-table-column>
          <el-table-column prop="bjType" label="保洁类"></el-table-column>
          <el-table-column prop="serverOrderNum" label="服务单量"></el-table-column>
          <el-table-column prop="payMoney" label="实付金额"></el-table-column>
          <el-table-column prop="disOrderNum" label="派遣单量"></el-table-column>
          <el-table-column prop="disOrderMoney" label="派遣单金额"></el-table-column>
          <el-table-column prop="createTime" label="创建日期"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination :total="total4" :page.sync="currentPage4" :limit.sync="pageSize4" @pagination="querySearch4" />
      </el-tab-pane>
      <el-tab-pane label="月销售进度回溯">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery5">
          <el-form-item label="城市">
            <el-select v-model="listQuery5.city" clearable placeholder="请选择城市" multiple>
              <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-select v-model="listQuery5.levelOne" value-key="id" placeholder="请选择业务线" clearable>
              <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-option label="附加" value="附加"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="日期">
            <el-date-picker v-model="listQuery5.createTime" type="date" placeholder="请选择日期" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch5">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadSale5" v-per="'downloadSale5'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData5" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="levelOne" label="一级分类"></el-table-column>
          <el-table-column prop="keyWord" label="关键字"></el-table-column>
          <el-table-column prop="setGoal" label="目标"></el-table-column>
          <el-table-column prop="jingdu" label="进度"></el-table-column>
          <el-table-column prop="payFee" label="销售额"></el-table-column>
          <el-table-column prop="refundFee" label="退款额"></el-table-column>
          <el-table-column prop="lastPeriod" label="对比上月"></el-table-column>
          <el-table-column prop="lastdayFee" label="对比前日"></el-table-column>
          <el-table-column prop="kaidanzb" label="开单占比"></el-table-column>
          <el-table-column prop="dangyueshixiao" label="当月实销"></el-table-column>
          <el-table-column prop="todayFee" label="当日实销"></el-table-column>
          <el-table-column prop="introFee" label="开单金额"></el-table-column>
          <el-table-column prop="introCount" label="开单数量"></el-table-column>

          <el-table-column prop="payCount" label="销售单量"></el-table-column>
          <el-table-column prop="refundCount" label="退款单量"></el-table-column>
          <el-table-column prop="actionDate" label="销售日期"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination :total="total5" :page.sync="currentPage5" :limit.sync="pageSize5" @pagination="querySearch5" />
      </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.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch6">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="chart-wrapper">
          <div id="mainChart1"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="城市进度">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery7">
          <el-form-item label="日期">
            <el-date-picker v-model="listQuery7.createTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch7">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadSale7" v-per="'downloadSale7'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData7" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="levelOne" label="业务"></el-table-column>
          <el-table-column prop="keyWord" label="分类"></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="currMonthSales" label="当月实销"></el-table-column>
          <el-table-column prop="targetProgress" label="目标进度"></el-table-column>
          <el-table-column prop="comparLastMonth" label="对比上月"></el-table-column>
          <el-table-column prop="comparYesterday" label="对比前日"></el-table-column>
          <el-table-column prop="thanBill" label="开单占比"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="单品走势">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery8">
          <el-form-item label="城市">
            <el-select v-model="listQuery8.city" clearable placeholder="请选择城市" multiple>
              <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-select
            v-model="listQuery8.channel"
            placeholder="请选择渠道"
            clearable
            multiple
          >
          <el-option v-for="(item,index) in channelList" :key="index" :label="item" :value="item" ></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="业务线">
            <el-select v-model="listQuery8.levelOne" clearable placeholder="请选择业务线" @change="levelChange">
              <el-option v-for="(item,index) in levelList" :key="index" :label="item.buz" :value="item.buz"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-select v-model="listQuery8.keyWord" clearable placeholder="请选择关键字" multiple>
              <el-option v-for="(item,index) in keywordList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间段">
            <el-date-picker v-model="listQuery8.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch8">查询</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <!-- <el-table :data="listData8" border style="width: 100%" class="table">
          <template v-for="(item,index) in tableHead">
            <el-table-column :prop="item" :label="item" :key="index"></el-table-column>
          </template>
        </el-table>-->
        <div id="mainChart2"></div>
      </el-tab-pane>
    </el-tabs>

    <!-- </el-card> -->
  </div>
</template>
<script>
import moment from "moment";
import Pagination from "./common/Pagination";
import Service from "../script/api/service";
import url from "@/script/baseUrl.js";
import userAuthDataApi from "@/script/api/userAuthData.js";
import globalData from "@/components/common/globaldata/global.data.vue";
// import addTrainHisDia from './components/addTrainHisDia';
export default {
  components: { Pagination },
  data() {
    return {
      channelList:[],
       exportSaleUrl2:
        url.exportUrl +
        "/reportservice/salesdata/selectChannelSales?token=" +
        window.localStorage.getItem("token"),
      exportSaleUrl3:
        url.exportUrl +
        "/reportservice/salesdata/salesSummaryExport?token=" +
        window.localStorage.getItem("token"),
      exportServiceUrl:
        url.exportUrl +
        "/reportservice/salesdata/serviceGMVCountExport?token=" +
        window.localStorage.getItem("token"),
        exportSaleUrl5:
        url.exportUrl +
        "/reportservice/salesdata/monthSalesPlan?token=" +
        window.localStorage.getItem("token"),
          exportSaleUrl7:
        url.exportUrl +
        "/reportservice/salesdata/cityProgress?token=" +
        window.localStorage.getItem("token"),
      activeTab: "0",
      cityList: [],
      cityList2:[],
      channelList: [],
      listData1: [],
      total1: 0,
      pageSize1: 50,
      currentPage1: 1, //当前页
      listQuery1: {
        businessType: "",
        category: "",
        type: "",
        city: [],
        createTime: [],
      },
      listData2: [],
      total2: 0,
      pageSize2: 50,
      currentPage2: 1, //当前页
      listQuery2: {
        businessType: "",
        category: "",
        type: "",
        city: [],
        channel:'',
        levelOne:'',
        createTime: [],
      },
      listData3: [],
      total3: 0,
      pageSize3: 50,
      currentPage3: 1, //当前页
      listQuery3: {
        city: [],
        levelOne: "",
        channel: "",
        createTime: [],
      },
      listData4: [],
      total4: 0,
      pageSize4: 50,
      currentPage4: 1, //当前页
      listQuery4: {
        city: [],
        levelOne: "",
        createTime: [],
      },
      listData5: [],
      total5: 0,
      pageSize5: 50,
      currentPage5: 1, //当前页
      listQuery5: {
        city: [],
        levelOne: "",
        createTime: "",
      },
      listQuery6: {
        createTime: "",
      },

      listData7: [],
      listQuery7: {
        createTime: "",
      },
      listData8: [],
      levelList: [],
      keywordList: [],
      total8: 0,
      pageSize8: 50,
      currentPage8: 1, //当前页
      listQuery8: {
        city: [],
        levelOne: "",
        channel:[],
        keyWord: [],
        createTime: [],
      },
      tableHead: [],

      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 * 15);
              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]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 1)
    );
    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 30)
    );
    let startDate8 = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 14)
    );
    this.$set(this.listQuery1, "createTime", [startDate, currentDate]);
    this.$set(this.listQuery2, "createTime", [startDate, currentDate]);
    this.$set(this.listQuery3, "createTime", [startDate, currentDate]);
    this.$set(this.listQuery4, "createTime", [startDate, currentDate]);
    this.$set(this.listQuery5, "createTime", currentDate);
    this.$set(this.listQuery6, "createTime", [startDate, currentDate]);
    this.$set(this.listQuery7, "createTime", currentDate);
    this.$set(this.listQuery8, "createTime", [startDate8, currentDate]);

    // this.listQuery6.createTime = [startDate, currentDate];
    // this.listQuery2.createTime = [startDate, currentDate];
    this.getCityStation();
    this.getUserAuthData();

    // this.querySearch6();

    // this.querySearch7();

    this.getChannel();
    this.getOrderTrendSelect();
  },
  methods: {
    getUserAuthData() {
      userAuthDataApi.$ajaxGetUserAuthData().then(res => { 
        if (res.data.errno == 0) {
          this.cityList2=[];
           res.data.data.city.forEach(item=>{
            this.cityList2.push(item.cityName.replace("市",""));
           }); 
        }
      });
    },
    hasPer(value) {
      let isExist = false;
      let buttonperm = JSON.parse(window.localStorage.getItem("buttonperm")); //['资源公海-电话邀约','资源公海-信息完善-保存']

      for (let i = 0; i < buttonperm.length; i++) {
        // if (buttonperm[i].indexOf(value) > -1) {
        if (buttonperm[i] == value) {
          isExist = true;
          break;
        }
      }
      return isExist;
    },
    getChannel() {
      Service.$axiosGetChannel().then(res => {
        if (res.data.errno == "0") {
          this.channelList = res.data.data;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    getOrderTrendSelect() {
      Service.$axiosOrderTrendSelect().then((res) => {
        // console.log(res);
        if (res.data.errno == "0") {
          this.levelList = res.data.data;
          this.listQuery8.levelOne=res.data.data[1].buz;
          this.levelChange(this.listQuery8.levelOne);
           this.getChannel();
          this.querySearch8();

        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    getCityStation() {
      Service.$axiosGetUserAuthBuzData({
        userId: globalData.userInfo.id,
      }).then((res) => {
        if (res.data.errno == "0") {
          this.cityList = res.data.data.userCityDataList;
          // this.listQuery1.city =
          //   res.data.data.userCityDataList[0].dataName.split(",");
          // this.listQuery2.city =
          //   res.data.data.userCityDataList[0].dataName.split(",");
          // this.listQuery3.city =
          //   res.data.data.userCityDataList[0].dataName.split(",");
          // this.listQuery4.city =
          //   res.data.data.userCityDataList[0].dataName.split(",");
          // this.listQuery5.city =
          //   res.data.data.userCityDataList[0].dataName.split(",");
          // this.listQuery8.city =
          //   res.data.data.userCityDataList[0].dataName.split(",");
         
          this.querySearch1();
          this.querySearch2();
          this.querySearch3();
          this.querySearch4();
          this.querySearch5();
          
          // this.allStationList = res.data.data.storeStation;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    getChannel() {
      Service.$axiosGetChannel().then((res) => {
        if (res.data.errno == "0") {
          this.channelList = res.data.data;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    //查询
    dateChange(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          // this.$message.warning("选中时间范围不能超过一个月");
          // this.listQuery1.createTime = null;
        }
      }
    },
    querySearch1(isExport) {
      if (this.isEmptyObjVue(this.listQuery1.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        pageNo: this.currentPage1,
        pageSize: this.pageSize1,
        city: this.listQuery1.city.join(","),
        channel: this.listQuery1.channel,
        levelOne: this.listQuery1.levelOne,
        startDate: this.listQuery1.createTime[0],
        endDate: this.listQuery1.createTime[1],
        isExport:isExport
      };
      if(isExport){
        Service.$axiosSelectLittleAppOrderExport(temp);
      }
      else {
      Service.$axiosSelectLittleAppOrder(temp)
        .then((res) => {
          // console.log(res);
          this.listData1 = res.data.data.dataList;
          this.total1 = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
      }
    },
    querySearch2() {
      if (this.isEmptyObjVue(this.listQuery2.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        pageNo: this.currentPage2,
        pageSize: this.pageSize2,
        city: this.listQuery2.city.join(","),
        channel: this.listQuery2.channel,
        levelOne: this.listQuery2.levelOne,
        startDate: this.listQuery2.createTime[0],
        endDate: this.listQuery2.createTime[1],
      };

      Service.$axiosSelectChannelSales(temp)
        .then((res) => {
          // console.log(res);
          this.listData2 = res.data.data.dataList;
          this.total2 = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    querySearch3() {
      if (this.isEmptyObjVue(this.listQuery3.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      if(this.listQuery3.city==null||this.listQuery3.city==""||this.listQuery4.length==0){
        this.$message.warning("请选择城市");
        return false;
      }
      let temp = {
        pageNo: this.currentPage3,
        pageSize: this.pageSize3,
        city: this.listQuery3.city.join(","),
        channel: this.listQuery3.channel,
        levelOne: this.listQuery3.levelOne,
        startDate: this.listQuery3.createTime[0],
        endDate: this.listQuery3.createTime[1],
      };

      Service.$axiosSalesSummary(temp)
        .then((res) => {
          // console.log(res);
          this.listData3 = res.data.data.dataList;
          this.total3 = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    querySearch4() {
      if (this.isEmptyObjVue(this.listQuery4.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      if(this.listQuery4.city==null||this.listQuery4.city==""||this.listQuery4.length==0){
        this.$message.warning("请选择城市");
        return false;
      }
      let temp = {
        pageNo: this.currentPage4,
        pageSize: this.pageSize4,
        city: this.listQuery4.city.join(","),
        levelOne: this.listQuery4.levelOne,
        startDate: this.listQuery4.createTime[0],
        endDate: this.listQuery4.createTime[1],
      };

      Service.$axiosServiceGMVCount(temp)
        .then((res) => {
          // console.log(res);
          this.listData4 = res.data.data.dataList;
          this.total4 = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    querySearch5() {
      if (this.isEmptyObjVue(this.listQuery5.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        pageNo: this.currentPage5,
        pageSize: this.pageSize5,
        city: this.listQuery5.city.join(","),
        levelOne: this.listQuery5.levelOne,
        startDate: this.listQuery5.createTime,
        // endDate: this.listQuery5.createTime[1]
      };

      Service.$axiosMonthSalesPlan(temp)
        .then((res) => {
          // console.log(res);
          this.listData5 = res.data.data.dataList;
          this.total5 = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    querySearch6() {
      if (this.isEmptyObjVue(this.listQuery6.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        startDate: this.listQuery6.createTime[0],
        endDate: this.listQuery6.createTime[1],
      };

      Service.$axiosNotHMActualSales(temp)
        .then((res) => {
          let data = res.data.data;
          let list1 = data.filter((item) => {
            return item.value > 0;
          });
          let list2 = data.filter((item) => {
            return item.value == 0;
          });

          let list = list1.concat(list2);
          this.initMainChart(list);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initMainChart(list) {
      // console.log(list);
      var chartDom = document.getElementById("mainChart1");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          top: "10%",
          left: "center",
        },
        series: [
          {
            name: "非盒马渠道当月实销额扇形图",
            type: "pie",
            radius: ["40%", "65%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: list,
          },
        ],
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    querySearch7() {
      if (this.isEmptyObjVue(this.listQuery7.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        pageNo: this.currentPage7,
        pageSize: this.pageSize7,
        date: this.listQuery7.createTime,
      };

      Service.$axiosCityProgress(temp)
        .then((res) => {
          // console.log(res);
          this.listData7 = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    querySearch8() {
      if (this.isEmptyObjVue(this.listQuery8.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        city: this.listQuery8.city.join(","),
        channel: this.listQuery8.channel.join(","),
        keyWord: this.listQuery8.keyWord.join(","),
        levelOne: this.listQuery8.levelOne,
        startDate: this.listQuery8.createTime[0],
        endDate: this.listQuery8.createTime[1],
      };

      Service.$axiosOrderTrend(temp)
        .then((res) => {
          // console.log(res);
          this.initEchart(res.data.data, "mainChart2", "单品走势");
          // this.listData8 = res.data.data.tableData;
          // this.tableHead = res.data.data.tableHead;
        })
        .catch((err) => {
          console.log(err);
        });
    }, 
     downloadSale2() {
      
      if (this.isEmptyObjVue(this.listQuery2.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&city=${this.listQuery2.city.join(",")}&channel=${
        this.listQuery2.channel
      }&levelOne=${this.listQuery2.levelOne}&startDate=${
        this.listQuery2.createTime[0]
      }&endDate=${this.listQuery2.createTime[1]}&isExport=${true}`;
      window.open(this.exportSaleUrl2 + params);
    },
    downloadSale3() {
      // if (this.isEmptyObjVue(this.listQuery3.city)) {
      //   this.$message.warning("城市不能为空,请选择城市");
      //   return false;
      // }
      if (this.isEmptyObjVue(this.listQuery3.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&city=${this.listQuery3.city.join(",")}&channel=${
        this.listQuery3.channel
      }&levelOne=${this.listQuery3.levelOne}&startDate=${
        this.listQuery3.createTime[0]
      }&endDate=${this.listQuery3.createTime[1]}`;
      window.open(this.exportSaleUrl3 + params);
    },
    downloadService() {
      // if (this.isEmptyObjVue(this.listQuery4.city)) {
      //   this.$message.warning("城市不能为空,请选择城市");
      //   return false;
      // }
      if (this.isEmptyObjVue(this.listQuery4.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&city=${this.listQuery4.city.join(",")}&levelOne=${
        this.listQuery4.levelOne
      }&startDate=${this.listQuery4.createTime[0]}&endDate=${
        this.listQuery4.createTime[1]
      }`;
      window.open(this.exportServiceUrl + params);
    },
    downloadSale5() {
      
      if (this.isEmptyObjVue(this.listQuery5.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&city=${this.listQuery5.city.join(",")}&levelOne=${this.listQuery5.levelOne}&startDate=${
        this.listQuery5.createTime}&isExport=${true}`;
      window.open(this.exportSaleUrl5 + params);
    },
    downloadSale7() {
      
      if (this.isEmptyObjVue(this.listQuery7.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&date=${
        this.listQuery7.createTime}&isExport=${true}`;
      window.open(this.exportSaleUrl7 + params);
    },
    levelChange(value) {
      this.listQuery8.keyWord = [];
      let currentList = this.levelList.filter((item) => {
        return item.buz == value;
      });
      this.keywordList = currentList[0].keywords;
    },
    initEchart(data, chartName, name) {
      // console.log(data);
      var myChart = this.$echarts.init(document.getElementById(chartName));

      let dateList = data.days;

      let legendList = [];
      let yAxisList = data.series;
      yAxisList.forEach((item) => {
        legendList.push(item.name);
      });

      let option = {
        title: {
          text: name,
          bottom: 0,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: legendList,
          top: 0,
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: data.days,
            axisLabel: { interval: 0, rotate: 30 },
          },
        ],
        yAxis: {
          type: "value",
        },
        series: yAxisList,
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      // myChart.resize();
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
.crumbs {
  margin: 0 0 10px 0;
}
#mainChart1 {
  height: 800px;
  width: 900px;
  margin: 0 auto;
  padding: 40px;
}
#mainChart2 {
  height: 1000px;
  width: 1200px;
  margin: 0 auto;
  padding: 10px;
}
</style>