<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" @tab-click="tabChange">
      <el-tab-pane label="服务力薪资汇总" name="1">
        <el-form :inline="true" size="small" v-model="listQuery">
          <el-form-item label="城市">
            <el-select v-model="listQuery.city" clearable placeholder="请选择城市" @change="cityChange1" filterable>
              <el-option v-for="(item,index) in hmCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery.serviceStation" clearable placeholder="请选择服务站">
              <el-option v-for="(item,index) in stationList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="服务人员">
            <el-input v-model="listQuery.serverName" placeholder="请输入服务人员" clearable></el-input>
          </el-form-item>
          <el-form-item label="客诉时间">
            <el-date-picker v-model="listQuery.month" 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">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadServiceSalary">导出</el-button>  
            <!-- v-per="'downloadServiceSalary'" -->
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData" border style="width: 100%" class="table"> 
          <el-table-column prop="商家ID" label="商家ID" fixed="left"></el-table-column>
          <el-table-column prop="商家名称" label="商家名称" fixed="left"></el-table-column>
          <el-table-column prop="城市" label="城市" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="服务站" label="服务站"></el-table-column>
          <el-table-column prop="上线时间" label="上线时间"></el-table-column>
          <el-table-column prop="解约时间" label="解约时间"></el-table-column>
          <el-table-column prop="工单计提" label="工单计提"></el-table-column>
          <el-table-column prop="鲸选" label="鲸选"></el-table-column>
          <el-table-column prop="新农保" label="新农保"></el-table-column>
          <el-table-column prop="杂费" label="杂费"></el-table-column>
          <el-table-column prop="保险费" label="保险费"></el-table-column>
          <el-table-column prop="跟单费" label="跟单费"></el-table-column>
          <el-table-column prop="住宿费" label="住宿费"></el-table-column>
          <el-table-column prop="宿舍长补贴" label="宿舍长补贴"></el-table-column>
          <el-table-column prop="师傅奖" label="师傅奖"></el-table-column>
          <el-table-column prop="保底补贴" label="保底补贴"></el-table-column>
          <el-table-column prop="复购奖励" label="复购奖励"></el-table-column>
          <el-table-column prop="罚单" label="罚单"></el-table-column>
          <el-table-column prop="押金" label="押金"></el-table-column>
          <el-table-column prop="物料费" label="物料费"></el-table-column>
          <el-table-column prop="总记" label="合计"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination :total="listQuery.total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="querySearch" />
      </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 service from "../script/api/service";
export default {
  components: { Pagination },
  data() {
    return {
      activeTab: "1",
      ticketConsults: [], //客诉类型
      consultValue: null,
      cityList: [],
      hmCityList: [],
      stationList: [],
      allStationList: [],
      listData: [],

      listQuery: {
        total: 0,
        pageSize: 50,
        pageIndex: 1,
        month: "",
        isExport:false
      },
    };
  },
  mounted() {
    this.hmCityList = JSON.parse(window.localStorage.getItem("allHmCity"));

    let allHmStation = JSON.parse(window.localStorage.getItem("allHmStation"));
    let allList = [];
    allHmStation.forEach((item) => {
      let list = item.station_names.split(",");
      allList = allList.concat(list);
    });
    this.allStationList = allList;
    this.stationList = this.allStationList;
    this.stationList1 = this.allStationList;
    this.querySearch();
  },
  activated() {
    this.activeTab = this.$route.query.activeTab
      ? this.$route.query.activeTab
      : "1";
    //console.info(this.activeTab);
    //this.tabChange();
  },
  methods: {
    getCityStation() {
      Service.$axiosGetUserAuthBuzData({
        userId: globalData.userInfo.id,
      }).then((res) => {
        if (res.data.errno == "0") {
          this.cityList = res.data.data.userCityDataList;
          this.listQuery.city = res.data.data.userCityDataList[0].dataName;
          this.allStationList = res.data.data.userCityDataList;

          this.stationList = res.data.data.userCityDataList[0].subList;
          this.querySearch1();
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    cityChange1(value) {
      this.listQuery.serviceStation = "";
      let allHmStation = JSON.parse(
        window.localStorage.getItem("allHmStation")
      );
      if (value.length == 0) {
        this.stationList = this.allStationList;
      } else {
        let currentStation = allHmStation.filter((item) => {
          return value.includes(item.city);
        });
        let allList = [];
        currentStation.forEach((item) => {
          let list = item.station_names.split(",");
          allList = allList.concat(list);
        });
        this.stationList = allList;
      }
    },
    tabChange(e) {
        this.querySearch();
    },
    querySearch() {
      if (this.isEmptyObjVue(this.listQuery.month)) {
        this.$message.warning("请选择日期");
        return false;
      } 

      this.listQuery.isExport=false;

      Service.$axiosGetServicerSalary(this.listQuery)
        .then((res) => {
          console.log(res);
          this.listData = res.data.data.dataList;
          this.listQuery.total = res.data.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    downloadServiceSalary(){
       if (this.isEmptyObjVue(this.listQuery.month)) {
        this.$message.warning("请选择日期");
        return false;
      }  
      this.listQuery.isExport=true;
       Service.$axiosGetServicerSalaryExport(this.listQuery)
        .then((res) => {
         
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>