<template>
    <div class="app-container">
      <!-- 搜索 -->
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
        <el-form-item label="日期">
          <el-date-picker
            size="small"
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
            :clearable="false"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="安检类型" prop="taskType">
          <el-select
            v-model="queryParams.taskType"
            clearable size="small"
            placeholder="请选择安检类型"
            @keyup.enter.native="handleQuery"
            style="width: 100%"
          >
            <el-option label="小区用户" value="1"/>
            <el-option label="气代煤用户" value="2"/>
            <el-option label="孤寡老人用户" value="3"/>
          </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="12">
        <el-col :span="8">
          <el-card shadow="always" class="user-total">
            <div class="total-item">用户总数</div>
            <div class="total-num">{{ tableData.length > 0 ? tableData[0]["userNum"] : 0 }}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always" class="danger-total">
            <div class="total-item">用户检出隐患数</div>
            <div class="total-num">{{ tableData.length > 0 ? tableData[0]["userDangerNum"] : 0 }}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="always" class="danger-rate">
            <div class="total-item">用户隐患占比</div>
            <div class="total-num">{{ tableData.length > 0 && tableData[0]["userNum"] != 0 ? Number(tableData[0]["userDangerNum"] * 100/tableData[0]["userNum"]).toFixed(1).replace(/\.0$/, '') : 0  + "%" }}</div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 隐患列表 -->
      <el-table :data="tableData" style="margin-top: 15px">
        <el-table-column prop="name" label="隐患名称" align="center"/>
        <el-table-column prop="inspectNum" label="安检单总数" align="center"/>
        <el-table-column prop="dangerNum" label="检出隐患数量" align="center"/>
        <el-table-column prop="dangerRate" label="检出隐患占比" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.inspectNum != 0 ? Number(scope.row.dangerNum * 100/totalDanger).toFixed(1).replace(/\.0$/, '') : 0 + "%" }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
  import { statisticsInspectItems } from "@/api/checktask/inspect";
  import moment from 'moment';
  export default {
    name: "resident-inspect-danger-statistics-index",
    data(){
      return{
        // 查询参数
        queryParams: {
          dateBegin: null,
          dateEnd: null,
          taskType: null
        },
        tableData: [],
        statisticsInfo: {},
        dateRange: [],
        pickerOptions:{
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e7;
          },
        },
        totalDanger: 0
      }
    },
    created(){
      this.restTime();
      this.getList();
    },
    methods:{
      getList(){
        this.tableData = [];
        this.statisticsInfo = {};
        statisticsInspectItems(this.queryParams).then(res =>{
          if(res.code == 200){
            this.totalDanger = res.data.reduce((total, obj) => total + obj.dangerNum, 0);
            console.log("==============",this.totalDanger)
            this.tableData = res.data;
          }
        })
      },
      timeChange(val){
        if(val){
          this.queryParams.dateBegin = val[0];
          this.queryParams.dateEnd = val[1];
        }else{
          this.restTime();
        }

      },
      restTime(){
        if(moment().startOf('month').format('YYYY-MM-DD') === moment().format('YYYY-MM-DD')) {
          const dateBegin = moment().subtract(1, 'months').startOf('month').format('YYYY-MM-DD');
          const dateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');
          this.queryParams.dateBegin = dateBegin;
          this.queryParams.dateEnd = dateEnd;
          this.dateRange = [dateBegin,dateEnd];
        } else {
          const dateBegin = moment().startOf('month').format('YYYY-MM-DD');
          const dateEnd = moment().subtract(1, 'days').format('YYYY-MM-DD');
          this.queryParams.dateBegin = dateBegin;
          this.queryParams.dateEnd = dateEnd;
          this.dateRange = [dateBegin,dateEnd];
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        //获取列表
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.restTime();
        this.getList();
      },
    }
  }
</script>

<style scoped>
  .total-item{
    line-height: 25px;
  }

  .total-num{
    line-height: 40px;
    font-size: 30px;
  }

  .user-total{
    color: white;
    background-color: #4f83fd;
  }

  .danger-total{
    color: white;
    background-color: #44ccd8;
  }

  .danger-rate{
    color: white;
    background-color: #fea77a;
  }


</style>
