<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="130px">

      <el-form-item label="起止时间">
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          @change="timeChange"
          value-format="yyyy-MM-dd"
          :clearable="false"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="所属区域（区县）" prop="street">
        <el-select
          v-model="queryParams.street"
          placeholder="所属区域（区县）"
          @change="changeStreet"
          filterable
        >
          <el-option
            v-for="item in streetData"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="所属区域（村）" prop="village">
        <el-select
          v-model="queryParams.village"
          placeholder="所属区域（村）"
          filterable
        >
          <el-option
            v-for="item in communityData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </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
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
        >导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="inspectStatisticInfoList">
      <el-table-column label="姓名" align="center" prop="inspector"/>
      <!--<el-table-column label="待安检单数" align="center" prop="noInspectNum"/>-->
      <el-table-column label="正常安检" align="center" prop="normalInspectNum"/>
      <el-table-column label="拒绝安检" align="center" prop="refuseInspectNum"/>
      <el-table-column label="燃气停用" align="center" prop="stopInspectNum"/>
      <el-table-column label="到访不遇" align="center" prop="missInspectNum"/>
      <el-table-column label="有隐患单数" align="center" prop="dangerNum"/>
      <el-table-column label="无隐患单数" align="center" prop="noDangerNum"/>
      <el-table-column label="汇总" align="center" prop="total"/>
    </el-table>
  </div>
</template>

<script>
  import {inspectNumStatisticByInspector, inspectNumStatisticByInspectorExport} from "@/api/checktask/inspect";
  import { communityList } from "@/api/baseinfo/community";
  import { aLLAreaListInfo } from "@/api/baseinfo/area";
  import moment from 'moment';
  export default {
    name: "inspect-statistic-index",
    data(){
      return{
        queryParams:{
          beginTime: moment(moment().startOf('day').toDate()).format("YYYY-MM-DD HH:mm:ss"),
          endTime: moment(moment().endOf('day').toDate()).format("YYYY-MM-DD HH:mm:ss"),
          village: null,
          street: null
        },
        loading: true,
        inspectStatisticInfoList: [],
        time: [moment(moment().startOf('day').toDate()).format("YYYY-MM-DD HH:mm:ss"),moment(moment().endOf('day').toDate()).format("YYYY-MM-DD HH:mm:ss")],
        communityData: [],
        streetData: [],
        exportLoading: false
      }
    },
    created(){
      this.getList();
      this.getCommunityInfo();
      this.getStreet();
    },
    methods:{
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.beginTime = moment(moment().startOf('day').toDate()).format("YYYY-MM-DD HH:mm:ss");
        this.queryParams.endTime = moment(moment().endOf('day').toDate()).format("YYYY-MM-DD HH:mm:ss");
        this.getCommunityInfo();
        this.time = [moment(moment().startOf('day').toDate()).format("YYYY-MM-DD HH:mm:ss"),moment(moment().endOf('day').toDate()).format("YYYY-MM-DD HH:mm:ss")];
        this.handleQuery();
      },
      getList(){
        this.loading = true;
        inspectNumStatisticByInspector(this.queryParams).then(res =>{
          this.loading = false;
          if(res.code == 200 && res.data){
              this.inspectStatisticInfoList = res.data;
              let statistic = {inspector: "汇总",noInspectNum: "-",normalInspectNum: 0,refuseInspectNum: 0,stopInspectNum: 0,
                missInspectNum: 0,dangerNum: 0,noDangerNum: 0,total: 0};
              this.inspectStatisticInfoList.forEach(item =>{
                let total = item.normalInspectNum + item.refuseInspectNum + item.stopInspectNum + item.missInspectNum;
                //statistic.noInspectNum += item.noInspectNum;
                statistic.normalInspectNum += item.normalInspectNum;
                statistic.refuseInspectNum += item.refuseInspectNum;
                statistic.stopInspectNum += item.stopInspectNum;
                statistic.missInspectNum += item.missInspectNum;
                statistic.dangerNum += item.dangerNum;
                statistic.noDangerNum += item.noDangerNum;
                statistic.total += total;
                item.total = total;
              })
              this.inspectStatisticInfoList.unshift(statistic);
          }
        })
      },
      timeChange(val){
        this.queryParams.beginTime = val[0] + " 00:00:00";
        this.queryParams.endTime = val[1] + " 23:59:59";
      },
      //获取小区信息
      getCommunityInfo(){
        communityList({street: this.queryParams.street}).then(res =>{
          if(res.code == 200){
            this.communityData = res.data;
          }
        })
      },
      //获取街道镇信息
      getStreet(){
        aLLAreaListInfo({parentId: 8}).then(res =>{
          if(res.code == 200){
            this.streetData = res.data;
          }
        })
      },
      changeStreet(){
        this.queryParams.village = null;
        this.getCommunityInfo();
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有安检量统计数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return inspectNumStatisticByInspectorExport(queryParams);
        }).then(response => {
            this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
      },
    }
  }
</script>

<style scoped>

</style>
