<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="储配站" prop="stationId">
          <el-select v-model="queryParams.stationId" placeholder="请选择储配站">
            <el-option
              v-for="item in stationList"
              :key="item.stationId"
              :label="item.stationName"
              :value="item.stationId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="充装人" prop="operator">
          <el-input
            v-model="queryParams.operator"
            placeholder="请输入充装人"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="充装时间" prop="operateTime">
          <el-date-picker
            v-model="operateTime"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
            style="color: #1890ff"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getInfo"></right-toolbar>
      </el-row>

      <el-tabs v-model="statisticsType" @tab-click="handleClick">
        <el-tab-pane label="储配站" name="station">
          <StationList
            ref="station"
            :queryParams="queryParams"
          />
        </el-tab-pane>
        <el-tab-pane label="充装人员" name="operator">
          <Operator
            ref="operator"
            :queryParams="queryParams"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
  import { gasStorageStationList } from "@/api/gasBottleTrack/gasHolderStationManage";
  import StationList from "./StationList";
  import Operator from "./Operator";
  export default {
    name: "air-charge",
    components: {
      StationList,
      Operator
    },
    data(){
      return{
        statisticsType: 'station',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          stationId: null,
          operator: null,
          operateBeginTime: null,
          operateEndTime: null
        },
        operateTime: [],
        exportLoading: false,
        // 显示搜索条件
        showSearch: true,
        stationList: []
      }
    },
    mounted(){
      this.getInfo();
      this.getStationInfo();
    },
    methods: {
      handleClick(){
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = 10;
        this.$refs[this.statisticsType].queryDataInfo();
      },
      //查询
      getInfo(){
        this.$refs[this.statisticsType].queryDataInfo();
      },
      //导出
      handleExport(){
        this.$refs[this.statisticsType].importData();
      },
      getStationInfo(){
        gasStorageStationList().then(res =>{
          if(res.code == 200){
            this.stationList = res.data;
          }
        })
      },
      timeChange(value){
        this.queryParams.operateBeginTime =  value[0];
        this.queryParams.operateEndTime =  value[1];
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getInfo();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.operateTime = [];
        this.queryParams.operateBeginTime =  null;
        this.queryParams.operateEndTime =  null;
        this.handleQuery();
      },
    }
  }
</script>

<style scoped>

</style>