<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>保洁管理工具</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-tabs type="border-card" v-model="activeTab" @tab-click="tabChange">
      <div style="font-size: 9px; color:darkcyan">tips:
        月份是自然月份,非当前月从该月1号至该月最后一天,如果查询月是当月，则查询从1号至T-1日
      </div>
      <el-tab-pane label="可邀约好评-服务站汇总" name="1">
        <el-form :inline="true" size="small" v-model="listQuery1">
          <el-form-item label="城市">
            <el-select v-model="listQuery1.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery1.station" 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-date-picker v-model="listQuery1.month" type="month" value-format="yyyy-MM"  style="width: 150px;" placeholder="请选择月份"
              :picker-options=pickerOptions></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch1">查询</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData1" border style="width: 100%" class="table">
          <el-table-column prop="city" label="城市" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="currentMonthEvaluationCount" label="当月评价数">
            <template slot="header">
              <el-tooltip content="好评+差评">
                <span>当月评价数</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="currentMonthGoodEvaluationCount" label="当月好评数">
          </el-table-column>
          <el-table-column prop="currentMonthBadEvaluationCount" label="当月差评数"></el-table-column>
          <el-table-column prop="currentMonthGoodEvaluationRate" label="当月好评率">
            <template slot="header">
              <el-tooltip content="好评数/评价数">
                <span>当月好评率</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="currentMonthEvaluationRate" label="当月参评率">
            <template slot="header">
              <el-tooltip content="评价数/可评价数，可评价：订单当前未评价或订单预约服务开始时间早于评价时间">
                <span>当月参评率</span>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!--        &lt;!&ndash; 分页 &ndash;&gt;-->
        <!--        <pagination :total="listQuery1.total" :page.sync="listQuery1.currentPage" :limit.sync="listQuery1.pageSize"-->
        <!--                    @pagination="querySearch1"/>-->
      </el-tab-pane>
      <el-tab-pane label="可邀约好评-服务站每日明细" name="2">
        <el-form :inline="true" size="small" v-model="listQuery2">
          <el-form-item label="城市">
            <el-select v-model="listQuery2.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery2.station" 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-date-picker v-model="listQuery2.month" type="month" value-format="yyyy-MM"  style="width: 150px;" placeholder="请选择月份"
              :picker-options=pickerOptions></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="城市" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="searchDay" label="预约日期"></el-table-column>
          <el-table-column prop="currentDayCanEvaluationCount" label="当日可评价数"></el-table-column>
          <el-table-column prop="currentDayEvaluationRate" label="当日参评率"></el-table-column>
          <el-table-column prop="currentDayGoodEvaluationRate" 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="可邀约好评-服务人员每日明细" name="3">
        <el-form :inline="true" size="small" v-model="listQuery3">
          <el-form-item label="城市">
            <el-select v-model="listQuery3.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery3.station" 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-date-picker v-model="listQuery3.month" type="month" value-format="yyyy-MM"  style="width: 150px;" placeholder="请选择月份"
              :picker-options=pickerOptions></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="beginDate" label="预约日期" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="startTime" label="开始时间"></el-table-column>
          <el-table-column prop="addressName" label="地址"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="workerName" label="商家姓名"></el-table-column>
          <el-table-column prop="serviceTimeCanEvluate" label="服务时可评价" :show-overflow-tooltip="true">
            <template slot="header">
              <el-tooltip content="付款15天内预约服务且当前未评价或预约服务时间早于等于评价时间">
                <span>服务时可评价</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="nowCanEvluate" label="当前可评价">
            <template slot="header">
              <el-tooltip content="付款15天内预约服务且当前未评价">
                <span>当前可评价</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="payId" label="付款单号"></el-table-column>
          <el-table-column prop="evaluateTime" label="评价日期"></el-table-column>
          <el-table-column prop="goodBad" label="评价类型"></el-table-column>
          <el-table-column prop="bookOrderNo" label="服务订单号"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination :total="listQuery3.total" :page.sync="listQuery3.currentPage" :limit.sync="listQuery3.pageSize"
          @pagination="querySearch3(false)" />
      </el-tab-pane>
      <el-tab-pane label="个人排名" name="4">
        <div style="font-size: 9px; color:darkcyan">tips: 可左右滑动查看更多指标</div>
        <el-form :inline="true" size="small" v-model="listQuery4">
          <el-form-item label="城市">
            <el-select v-model="listQuery4.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery4.station" 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-date-picker v-model="listQuery4.month" type="month"  value-format="yyyy-MM"  style="width: 150px;" placeholder="请选择月份"
              :picker-options=pickerOptions></el-date-picker>
          </el-form-item>
          <el-form-item label="服务者">
            <el-input v-model="listQuery4.workerName" placeholder="请输入服务者姓名"></el-input>
          </el-form-item>

          <el-form-item label="好评率">
            <el-select v-model="listQuery4.goodRank" multiple clearable placeholder="请选择好评率" style="width:180px">
              <el-option  label="90%以上" value="90"></el-option>
              <el-option  label="80-89%" value="80"></el-option>
              <el-option  label="70-79%" value="70"></el-option>
              <el-option  label="60-69%" value="60"></el-option>
              <el-option  label="50-59%" value="50"></el-option>
              <el-option  label="50%以下" value="40"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch4(false)">查询</el-button>
            <el-button icon="el-icon-search" type="primary" plan @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="城市" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="stationName" label="服务站"></el-table-column>
          <el-table-column prop="workNo" label="商家ID"></el-table-column>
          <el-table-column prop="workName" label="商家姓名"></el-table-column>
          <el-table-column prop="canEvaluationCount" label="可评价数">
            <template slot="header">
              <el-tooltip content="付款15天内预约服务且当前未评价或预约服务时间早于等于评价时间">
                <span>可评价数</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="evaluationRate" label="参评率" :show-overflow-tooltip="true">
            <template slot="header">
              <el-tooltip content="已评价/可评价">
                <span>参评率</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="goodEvaluationCount" label="好评数"></el-table-column>
          <el-table-column prop="goodEvaluationRate" label="好评率"></el-table-column>
          <el-table-column prop="badEvaluationCount" label="差评数"></el-table-column>
          <el-table-column prop="badEvaluationRate" label="差评率"></el-table-column>
          <el-table-column prop="ondoorPercentPassRate" label="到门合格率">
            <template slot="header">
              <el-tooltip content="（正常到门+过早到)/(正常到门+过早到+迟到)">
                <span>到门合格率</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="rebuyCount" label="复购数">
            <template slot="header">
              <el-tooltip content="凭付款单号记数">
                <span>复购数</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="is90Day" label="上线满90天">
            <template slot="header">
              <el-tooltip content="最近一次入职距今天是否满90天，是记1，否记0">
                <span>上线满90天</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="lastBeComplainedDate" label="最近投诉时间">
            <template slot="header">
              <el-tooltip content="crm系统投诉成立的单子记录的服务时间">
                <span>最近投诉时间</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="lastBeComplainedFinishOrder" label="做满100单无差评">
            <template slot="header">
              <el-tooltip content="自最后一次投诉后已提供服务的单子,无投诉为空，已做满100记-">
                <span>做满100单无差评</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="entryDate" label="上线时间"></el-table-column>
          <el-table-column prop="cancelDate" label="解约时间"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination :total="listQuery4.total" :page.sync="listQuery4.currentPage" :limit.sync="listQuery4.pageSize"
          @pagination="querySearch4(false)" />
      </el-tab-pane>
      <el-tab-pane label="个人排名-个人明细" name="5">
        <div style="font-size: 9px; color:darkcyan">tips: 可左右滑动查看更多指标</div>
        <el-form :inline="true" size="small" v-model="listQuery5">
          <el-form-item label="城市">
            <el-select v-model="listQuery5.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery5.station" 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-date-picker v-model="listQuery5.month" type="month" value-format="yyyy-MM"  style="width: 150px;" placeholder="请选择月份"
              :picker-options=pickerOptions></el-date-picker>
          </el-form-item>
          <el-form-item label="服务者">
            <el-input v-model="listQuery5.workerName" placeholder="请输入服务者姓名"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch5(false)">查询</el-button>
            <el-button icon="el-icon-download" type="primary" plan @click="querySearch5(true)">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData5" border style="width: 100%" class="table">
          <el-table-column prop="beginDate" label="服务时间" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="workerName" label="商家姓名"></el-table-column>
          <el-table-column prop="goodBad" label="评价类型"></el-table-column>
          <el-table-column prop="comment" label="评价内容" :show-overflow-tooltip="true"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination :total="listQuery5.total" :page.sync="listQuery5.currentPage" :limit.sync="listQuery5.pageSize"
          @pagination="querySearch5(false)" />
      </el-tab-pane>
      <el-tab-pane label="签到打卡-城市维度" name="6">
        <div style="font-size: 9px; color:darkcyan">tips: 可左右滑动查看更多指标</div>
        <el-form :inline="true" size="small" v-model="listQuery6">
          <el-form-item label="城市">
            <el-select v-model="listQuery6.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="月份">
            <el-date-picker v-model="listQuery6.month" type="month" value-format="yyyy-MM"  style="width: 150px;" placeholder="请选择月份"
              :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-button icon="el-icon-download" type="primary" plan @click="querySearch5(true)">导出</el-button>-->
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData6" border style="width: 100%" class="table">
          <el-table-column prop="cityName" label="城市" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="lateCount" label="迟到"></el-table-column>
          <el-table-column prop="arriveEarlyCount" label="过早到"></el-table-column>
          <el-table-column prop="leaveLateCount" label="过晚结束"></el-table-column>
          <el-table-column prop="earlyCount" label="早退"></el-table-column>
          <el-table-column prop="orderCount" label="订单数"></el-table-column>
          <el-table-column prop="indoorQualifierCount" label="到门合格数">
            <template slot="header">
              <el-tooltip content="正常到和过早到均计入到门合格">
                <span>到门合格数</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="ondoorQualifierRate" label="到门合格率"></el-table-column>

        </el-table>

      </el-tab-pane>
      <el-tab-pane label="签到打卡-服务站" name="7">
        <div style="font-size: 9px; color:darkcyan">tips: 可左右滑动查看更多指标</div>
        <el-form :inline="true" size="small" v-model="listQuery7">
          <el-form-item label="城市">
            <el-select v-model="listQuery7.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery7.station" 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-date-picker v-model="listQuery7.month" type="month" value-format="yyyy-MM"  style="width: 150px;" placeholder="请选择月份"
              :picker-options=pickerOptions></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch7()">查询</el-button>
            <!--            <el-button icon="el-icon-download" type="primary" plan @click="querySearch5(true)">导出</el-button>-->
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData7" border style="width: 100%" class="table">
          <el-table-column prop="stationName" label="服务站" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="lateCount" label="迟到"></el-table-column>
          <el-table-column prop="arriveEarlyCount" label="过早到"></el-table-column>
          <el-table-column prop="leaveLateCount" label="过晚结束"></el-table-column>
          <el-table-column prop="earlyCount" label="早退"></el-table-column>
          <el-table-column prop="orderCount" label="订单数"></el-table-column>
          <el-table-column prop="indoorQualifierCount" label="到门合格数">
            <template slot="header">
              <el-tooltip content="正常到和过早到均计入到门合格">
                <span>到门合格数</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="ondoorQualifierRate" label="到门合格率"></el-table-column>

        </el-table>

      </el-tab-pane>
      <el-tab-pane label="签到打卡-个人到门信息" name="8">
        <div style="font-size: 9px; color:darkcyan">tips: 可左右滑动查看更多指标</div>
        <el-form :inline="true" size="small" v-model="listQuery8">
          <el-form-item label="城市">
            <el-select v-model="listQuery8.city" clearable placeholder="请选择城市"  @change="cityChange1" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery8.station" clearable placeholder="请选择服务站">
              <el-option v-for="(item, index) in hmStationList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="月份">
            <el-date-picker v-model="listQuery8.month" type="month" value-format="yyyy-MM"   style="width: 150px;" placeholder="请选择月份"
              :picker-options=pickerOptions></el-date-picker>
          </el-form-item>
          <el-form-item label="服务者">
            <el-input v-model="listQuery8.workerName" placeholder="请输入服务者姓名"></el-input>
          </el-form-item>
          <el-form-item label="到店情况">
            <el-select v-model="listQuery8.onOrLeaveDoorType" clearable placeholder="请选择到店情况">
              <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>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch8(false)">查询</el-button>
            <el-button icon="el-icon-download" type="primary" plan @click="querySearch8(true)">导出</el-button>
          </el-form-item>

        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData8" border style="width: 100%" class="table">
          <el-table-column prop="beginDate" label="预约日期" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="bookOrderNo" label="服务订单号"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="servantName" label="商家姓名"></el-table-column>
          <el-table-column prop="ondoorTime" label="到门时间"></el-table-column>
          <el-table-column prop="ondoorStatus" label="到门情况"></el-table-column>
          <el-table-column prop="lateMinute" label="迟到分钟数"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination :total="listQuery8.total" :page.sync="listQuery8.currentPage" :limit.sync="listQuery8.pageSize"
          @pagination="querySearch8(false)" />
      </el-tab-pane>
      <el-tab-pane label="签到打卡-个人离门信息" name="9">
        <div style="font-size: 9px; color:darkcyan">tips: 可左右滑动查看更多指标</div>
        <el-form :inline="true" size="small" v-model="listQuery9">
          <el-form-item label="城市">
            <el-select v-model="listQuery9.city" clearable placeholder="请选择城市" @change="cityChange1" multiple>
              <el-option v-for="(item, index) in selfCityList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="listQuery9.station" clearable placeholder="请选择服务站">
              <el-option v-for="(item, index) in hmStationList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="月份">
            <el-date-picker v-model="listQuery9.month" type="month" value-format="yyyy-MM"  style="width: 150px;" placeholder="请选择月份"
              :picker-options=pickerOptions></el-date-picker>
          </el-form-item>
          <el-form-item label="服务者">
            <el-input v-model="listQuery9.workerName" placeholder="请输入服务者姓名"></el-input>
          </el-form-item>
          <el-form-item label="离店情况">
            <el-select v-model="listQuery9.onOrLeaveDoorType" clearable placeholder="请选择离店情况">
              <el-option  label="正常结束" value="正常结束"></el-option>
              <el-option  label="过晚结束" value="过晚结束"></el-option> 
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch9(false)">查询</el-button>
            <el-button icon="el-icon-download" type="primary" plan @click="querySearch9(true)">导出</el-button>
          </el-form-item>

        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData9" border style="width: 100%" class="table">
          <el-table-column prop="beginDate" label="预约日期" width="100px" fixed="left"></el-table-column>
          <el-table-column prop="bookOrderNo" label="服务订单号"></el-table-column>
          <el-table-column prop="workerNo" label="商家ID"></el-table-column>
          <el-table-column prop="servantName" label="商家姓名"></el-table-column>
          <el-table-column prop="leavedoorTime" label="离门时间"></el-table-column>
          <el-table-column prop="leavedoorStatus" label="离门情况"></el-table-column>
          <el-table-column prop="lateMinute" label="迟到分钟数"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination :total="listQuery9.total" :page.sync="listQuery9.currentPage" :limit.sync="listQuery9.pageSize"
          @pagination="querySearch9(false)" />
      </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";

export default {
  components: { Pagination },
  data() {
    return {
      activeTab: "1",
      selfCityList: [],
      stationList: [],
      hmStationList: [],
      listData1: [],
      listQuery1: {
        citys: [],
        station: '',
        month: ''
      },
      listData2: [],
      listQuery2: {
        citys: [],
        station: '',
        month: '',
        pageSize: 50,
        currentPage: 1,
        total: 0
      },
      listData3: [],
      listQuery3: {
        citys: [],
        station: '',
        month: '',
        pageSize: 50,
        currentPage: 1,
        total: 0
      },
      listData4: [],
      listQuery4: {
        citys: [],
        station: '',
        month: '',
        pageSize: 50,
        currentPage: 1,
        total: 0,
        workerName: ''
      },
      listData5: [],
      listQuery5: {
        citys: [],
        station: '',
        month: '',
        pageSize: 50,
        currentPage: 1,
        total: 0,
        workerName: ''
      },
      listData6: [],
      listQuery6: {
        citys: [],
        month: ''
      },
      listData7: [],
      listQuery7: {
        citys: [],
        station: '',
        month: ''
      },
      listData8: [],
      listQuery8: {
        citys: [],
        station: '',
        month: '',
        pageSize: 50,
        currentPage: 1,
        total: 0,
        workerName: ''
      },
      listData9: [],
      listQuery9: {
        citys: [],
        station: '',
        month: '',
        pageSize: 50,
        currentPage: 1,
        total: 0,
        workerName: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return moment(time).format("YYYY-MM") < moment('2022-06').format("YYYY-MM") || moment(time).format("YYYY-MM") > moment().format("YYYY-MM");
        }
      }
    };
  },
  mounted() {
    this.selfCityList = JSON.parse(window.localStorage.getItem("allSelfCity"));
    let allSelfStation = JSON.parse(window.localStorage.getItem("allSelfStation"));
    let allHmStation = JSON.parse(window.localStorage.getItem("allHmStation"));
    allSelfStation.forEach(item => {
      this.stationList.push(item.station_name);
    });
    allHmStation.forEach(item => {
      item.station_names.split(",").forEach(item2 => {
        this.hmStationList.push(item2);
      });
    })
    this.querySearch1();
  },
  activated() {
    this.activeTab = this.$route.query.activeTab
      ? this.$route.query.activeTab
      : "1";
  },
  methods: {
    cityChange1(value) {
      this.listQuery9.station = '';
      this.listQuery8.station = '';
      if (value != null) {
        this.hmStationList = [];
      }
      let allHmStation = JSON.parse(window.localStorage.getItem("allHmStation"));
      if (value.length === 0) {
        allHmStation.forEach(item => {
          item.station_names.split(",").forEach(item2 => {
            this.hmStationList.push(item2);
          });
        })
      } else {
        let currentStation = allHmStation.filter(item => value.includes(item.city));
        currentStation.forEach(item => {
          item.station_names.split(",").forEach(item2 => {
            this.hmStationList.push(item2);
          });
        });
      }
    },
    cityChange(value) {
      this.listQuery1.station = '';
      this.listQuery2.station = '';
      if (value != null) {
        this.stationList = [];
      }
      let allSelfStation = JSON.parse(window.localStorage.getItem("allSelfStation"));
      if (value.length == 0) {
        this.stationList = allSelfStation.map(a => a.station_name);
      } else {
        let currentStation = allSelfStation.filter(item => value.includes(item.city));
        currentStation.forEach(item => {
          this.stationList.push(item.station_name);
        });
      }
    },
    tabChange() {
      if (this.activeTab == "1" && this.listData1.length == 0) {
        this.querySearch1();
      } else if (this.activeTab == "2" && this.listData2.length == 0) {
        this.querySearch2(false);
      } else if (this.activeTab == "3" && this.listData2.length == 0) {
        this.querySearch3(false);
      }
    },
    //查询
    querySearch1() {
      if (this.isEmptyObjVue(this.listQuery1.month)) {
        this.listQuery1.month = moment().format('YYYY-MM');
      }
      let temp = JSON.parse(JSON.stringify(this.listQuery1));
      temp.citys = this.listQuery1.city.join(',');
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }

      Service.$axiosEvaluationInfo(temp)
        .then((res) => {
          console.log(res);
          this.listData1 = res.data.data.evaluationInfo;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    querySearch2(value) {

      if (this.isEmptyObjVue(this.listQuery2.month)) {
        this.listQuery2.month = moment().format('YYYY-MM');
      }
      let temp = JSON.parse(JSON.stringify(this.listQuery2));
      temp.citys = this.listQuery2.city.join(',');
      temp.pageNum = this.listQuery2.currentPage;
      delete temp.currentPage;
      delete temp.total;
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }
      if (value) {
        //需要导出
        temp.export = true;
        Service.$axiosEvaluationInfoByStationExport(temp);
      } else {
        Service.$axiosEvaluationInfoByStation(temp)
          .then((res) => {
            console.log(res);
            this.listData2 = res.data.data.detail.list;
            this.listQuery2.total = res.data.data.detail.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch3(value) {
      if (this.isEmptyObjVue(this.listQuery3.month)) {
        this.listQuery3.month = moment().format('YYYY-MM');
      }
      let temp = JSON.parse(JSON.stringify(this.listQuery3));
      temp.citys = this.listQuery3.city.join(',');
      temp.pageNum = this.listQuery3.currentPage;
      delete temp.currentPage;
      delete temp.total;
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }
      if (value) {
        //需要导出*/
        temp.export = true;
        Service.$axiosEvaluationInfoByPersonExport(temp);
      } else {
        Service.$axiosEvaluationInfoByPerson(temp)
          .then((res) => {
            console.log(res);
            this.listData3 = res.data.data.detail.list;
            this.listQuery3.total = res.data.data.detail.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch4(value) {
      let list = this.listQuery4;
      if (this.isEmptyObjVue(list.month)) {
        this.listQuery4.month = moment().format('YYYY-MM');
      }
      let temp = JSON.parse(JSON.stringify(list));
      temp.citys = list.city.join(',');
      temp.pageNum = list.currentPage;
      temp.goodRank=list.goodRank.join(',');
      delete temp.currentPage;
      delete temp.total;
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }
      if (value) {
        //需要导出*/
        temp.export = value;
        Service.$axiosIndividualRankingExport(temp);
      } else {
        Service.$axiosIndividualRanking(temp)
          .then((res) => {
            console.log(res);
            this.listData4 = res.data.data.detail.list;
            list.total = res.data.data.detail.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch5(value) {
      let list = this.listQuery5;
      if (this.isEmptyObjVue(list.month)) {
        this.listQuery5.month = moment().format('YYYY-MM');
      }
      let temp = JSON.parse(JSON.stringify(list));
      temp.citys = list.city.join(',');
      temp.pageNum = list.currentPage;
      delete temp.currentPage;
      delete temp.total;
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }
      if (value) {
        //需要导出*/
        temp.export = value;
        Service.$axiosIndividualRankingDetailExport(temp);
      } else {
        Service.$axiosIndividualRankingDetail(temp)
          .then((res) => {
            console.log(res);
            this.listData5 = res.data.data.detail.list;
            list.total = res.data.data.detail.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch6() {
      let list = this.listQuery6;
      if (this.isEmptyObjVue(list.month)) {
        this.listQuery6.month = moment().format('YYYY-MM');
      }
      let temp = JSON.parse(JSON.stringify(list));
      temp.citys = list.city.join(',');

      delete temp.total;
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }
      Service.$axiosSignIn(temp)
        .then((res) => {
          console.log(res);
          this.listData6 = res.data.data.signAdnClockInfo;
          this.listData6.month = res.data.data.month;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    querySearch7() {
      let list = this.listQuery7;
      if (this.isEmptyObjVue(list.month)) {
        this.listQuery7.month = moment().format('YYYY-MM');
      }
      let temp = JSON.parse(JSON.stringify(list));
      temp.citys = list.city.join(',');
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }
      Service.$axiosSignInByStation(temp)
        .then((res) => {
          console.log(res);
          this.listData7 = res.data.data.signAdnClockInfoByStation;
        })
        .catch((err) => {
          console.log(err);
        });

    },
    querySearch8(value) {
      let list = this.listQuery8;
      if (this.isEmptyObjVue(list.month)) {
        this.listQuery8.month = moment().format('YYYY-MM');
      }
      let temp = JSON.parse(JSON.stringify(list));
      temp.citys = list.city.join(',');
      temp.pageNum = list.currentPage;
      temp.onOrLeaveDoorType=list.onOrLeaveDoorType;
      delete temp.currentPage;
      delete temp.total;
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }
      temp.queryType = 1;
      if (value) {
        //需要导出*/
        temp.export = value;
        Service.$axiosSignInByPersonExport(temp);
      } else {
        Service.$axiosSignInByPerson(temp)
          .then((res) => {
            console.log(res);
            this.listData8 = res.data.data.ondoorInfo.list;
            list.total = res.data.data.ondoorInfo.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    querySearch9(value) {
      let list = this.listQuery9;
      if (this.isEmptyObjVue(list.month)) {
        this.listQuery9.month = moment().format('YYYY-MM');
      }
      let temp = JSON.parse(JSON.stringify(list));
      temp.citys = list.city.join(',');
      temp.pageNum = list.currentPage;
      temp.onOrLeaveDoorType=list.onOrLeaveDoorType;
      delete temp.currentPage;
      delete temp.total;
      if (null == temp.citys || temp.citys == []) {
        delete temp.citys;
      }
      delete temp.city;
      if (null == temp.station || temp.station === '') {
        delete temp.station;
      }
      temp.queryType = 2;
      if (value) {
        //需要导出*/
        temp.export = value;
        Service.$axiosSignInByPersonExport(temp);
      } else {
        Service.$axiosSignInByPerson(temp)
          .then((res) => {
            console.log(res);
            this.listData9 = res.data.data.leaveDoorInfo.list;
            list.total = res.data.data.leaveDoorInfo.total;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0;
}
</style>
