<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="库存指标">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery">
          <el-form-item label="月份">
            <el-date-picker v-model="listQuery.ofMonth" type="month" value-format="yyyy-MM" :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>

        <!-- 列表数据 -->
        <el-table :data="listData" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="workType" label="服务者类型"></el-table-column>
          <el-table-column prop="stationCont" label="服务站数量"></el-table-column>
          <el-table-column prop="nowPecsCount" label="在职人数"></el-table-column>

          <el-table-column prop="monthPecsCount" label="上月同期人数"></el-table-column>
          <el-table-column prop="yearPecsCount" label="去年同期人数"></el-table-column>
          <el-table-column prop="montHb" label="月环比"></el-table-column>
          <el-table-column prop="monthTb" 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-tab-pane label="接单情况">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery2">
          <el-form-item label="日期">
            <el-date-picker v-model="listQuery2.date" 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="querySearch2(false)">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="querySearch2(true)">导出</el-button>
          </el-form-item>
        </el-form>
        <!-- 列表数据 -->
        <el-table :data="listData2" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="stationType" label="服务站类型"></el-table-column>
          <el-table-column prop="currDayServerNumber" label="当日可接单人数"></el-table-column>
          <el-table-column prop="montHb" label="月环比"></el-table-column>
          <el-table-column prop="montTb" label="月同比"></el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="库存利用率和人均订单">
        <!-- 搜索 各城市各业务线库存利用率和人均订单-->
        <el-form :inline="true" size="small" v-model="listQuery3">
          <el-form-item label="月份">
            <el-date-picker v-model="listQuery3.ofMonth" type="month" value-format="yyyy-MM" :picker-options="{}"></el-date-picker>
          </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>
        <!-- 列表数据 -->
        <el-table :data="listData3" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="station" label="服务站"></el-table-column>
          <el-table-column prop="stationType" label="服务站类型"></el-table-column>
          <el-table-column prop="stockAvailability" label="库存利用率"></el-table-column>
          <el-table-column prop="bjAvgOrder" label="保洁人均订单"></el-table-column>
          <el-table-column prop="plAvgWorktime" label="品类人均工时"></el-table-column>
        </el-table>
      </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="请选择城市">
              <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="querySearch5(false)">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="querySearch5(true)">导出</el-button>
          </el-form-item>
        </el-form>
        <!-- 列表数据 -->
        <el-table :data="listData5" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="jzStation" label="驿站"></el-table-column>
          <el-table-column prop="productName" label="商品"></el-table-column>
          <el-table-column prop="stock7" label="T+7商品库存剩余率"></el-table-column>
          <el-table-column prop="stock15" label="T+15商品库存剩余率"></el-table-column> 
        </el-table>
      </el-tab-pane>
       <el-tab-pane label="保洁师客诉率">
      <!-- 搜索  各城市各服务站不同上线时长保洁师客诉率 -->
      <el-form :inline="true" size="small" v-model="listQuery4">
        <el-form-item label="时间范围">
          <el-date-picker v-model="listQuery4.createTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" 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="querySearch4(false)">查询</el-button>
          <el-button type="primary" icon="el-icon-download" @click="querySearch4(true)">导出</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表数据 -->
      <el-table :data="listData4" border style="width: 100%" class="table">
        <el-table-column prop="city" label="城市"></el-table-column>
        <el-table-column prop="station" label="服务站"></el-table-column>

        <el-table-column prop="day7" label="一周"></el-table-column>
        <el-table-column prop="day30" label="一个月"></el-table-column>
        <el-table-column prop="day60" label="两个月"></el-table-column>
        <el-table-column prop="day90" label="三个月"></el-table-column>
        <el-table-column prop="old" label="老保洁师"></el-table-column>
        <el-table-column prop="jx" label="鲸选"></el-table-column>
      </el-table>
      </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 {
      listData: [],
      listQuery: {
        // total: 0,
        // pageSize: 50,
        // currentPage: 1,
        ofMonth: moment().format("YYYY-MM"),
      },

      listData2: [],
      listQuery2: {
        date: null,
      },

      listData3: [],
      listQuery3: {
        ofMonth: moment().format("YYYY-MM"),
      },

      listData4: [],
      listQuery4: {
        createTime: null,
        startDate: null,
        endDate: null,
      },

      listData5: [], //商品库存剩余率
      listQuery5: {
        createTime: null,
        startDate: null,
        endDate: null,
      },
      cityList:[]
    };
  },
  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)
    );
    this.$set(this.listQuery2, "date", currentDate);
    this.$set(this.listQuery4, "createTime", [startDate, currentDate]);
    
    this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));
  },
  methods: {
    querySearch(boo) {
      this.listQuery.isExport = boo;
      if (boo) {
        Service.$axiosgetStockStationPersonExport(this.listQuery);
      } else {
        Service.$axiosgetStockStationPerson(this.listQuery)
          .then((res) => {
            console.log(res.data);
            this.listData = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch2(boo) {
      if (this.listQuery2.date == null || this.listQuery2.date == "") {
        this.$message.warning("请选择日期");
        return;
      }
      this.listQuery2.isExport = boo;
      if (boo) {
        Service.$axiosgetSpCityBuzlineServiceorderNumberExport(this.listQuery2);
      } else {
        Service.$axiosgetSpCityBuzlineServiceorderNumber(this.listQuery2)
          .then((res) => {
            console.log(res.data);
            this.listData2 = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    querySearch3(boo) {
      this.listQuery3.isExport = boo;
      if (boo) {
        Service.$axiosbuzlineStockAvailabilityExport(this.listQuery3);
      } else {
        Service.$axiosbuzlineStockAvailability(this.listQuery3)
          .then((res) => {
            console.log(res.data);
            this.listData3 = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    querySearch4(boo) {
      if (
        this.listQuery4.createTime == null ||
        this.listQuery4.createTime == ""
      ) {
        this.$message.warning("请选择日期范围");
        return;
      }
      let req = {
        isExport: boo,
        startDate: this.listQuery4.createTime[0],
        endDate: this.listQuery4.createTime[1],
      };

      if (boo) {
        Service.$axiosgetCityBuzServiceorderNumberExport(req);
      } else {
        Service.$axiosgetCityBuzServiceorderNumber(req)
          .then((res) => {
            console.log(res.data);
            this.listData4 = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch5(boo) {
      if (
        this.listQuery5.city == null ||
        this.listQuery5.city == ""
      ) {
        this.$message.warning("请选择城市");
        return;
      }
      let req = {
        isExport: boo,
        city: this.listQuery5.city, 
      };

      if (boo) {
        Service.$axiosGetCityProductStockExport(req);
      } else {
        Service.$axiosGetCityProductStock(req)
          .then((res) => {
            console.log(res.data);
            this.listData5= res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    }
  },
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>