<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
        <el-form-item label="任务标题" prop="taskId">
          <el-select
            v-model="queryParams.taskId"
            placeholder="请选择任务标题"
            size="small"
            style="width: 198px"
            @keyup.enter.native="handleQuery"
            @change="taskChange"
          >
            <el-option
              v-for="task in taskInfoList"
              :key="task.id"
              :label="task.title"
              :value="task.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="任务执行状态" prop="status">
          <el-select
            v-model="queryParams.status"
            clearable size="small"
            placeholder="请选择任务执行状态"
            @keyup.enter.native="handleQuery"
            style="width: 198px"
          >
            <el-option label="到访不遇" value="0"/>
            <el-option label="拒绝安检" value="1"/>
            <el-option label="已安检" value="2"/>
            <el-option label="燃气停用" value="3"/>
          </el-select>
        </el-form-item>

        <el-form-item label="有无隐患" prop="danger">
          <el-select
            v-model="queryParams.danger"
            clearable size="small"
            placeholder="有无隐患"
            @keyup.enter.native="handleQuery"
            style="width: 198px"
          >
            <el-option label="无" value="0"/>
            <el-option label="有" value="1"/>
          </el-select>
        </el-form-item>

        <el-form-item label="安检人" prop="memberName">
          <el-input
            v-model="queryParams.memberName"
            placeholder="请输入安检人"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            style="width: 198px"
          />
        </el-form-item>

        <el-form-item label="所属村庄" prop="village">
          <el-select
            v-model="queryParams.village"
            placeholder="请选择所属村庄/小区"
            clearable
            size="small"
          >
            <el-option
              v-for="community in communityInfos"
              :key="community.id"
              :label="community.name"
              :value="community.id"
            />
          </el-select>
        </el-form-item>

        <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="结束日期"
            :clearable="false"
            @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>

      <!-- 柱状图 -->
      <Charts ref="inspectCharts"/>

      <!-- 列表 -->
      <InspectTaskTable ref="inspectTable"/>
    </div>
</template>

<script>
  import Charts from "../components/Charts";
  import { taskInfoList }from "@/api/checktask/task";
  import InspectTaskTable from "../components/InspectTaskTable";
  import { communityList } from "@/api/baseinfo/community";
  export default {
    name: "resident-index",
    components:{
      Charts,
      InspectTaskTable
    },
    data(){
      return{
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          taskId: null,
          status: null,
          danger: null,
          memberName: null,
          type: 1,
          village: null,
          dateBegin: null,
          dateEnd: null
        },
        //任务信息
        taskInfoList: [],
        dateRange: [],
        communityInfos: [],
        communityList: []
      }
    },
    created(){
      this.getTaskInfoList();
    },
    methods:{
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        //柱状图
        this.getCharts();
        //获取列表
        this.getTableList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.taskId = this.taskInfoList[0].id;
        this.dateRange = [];
        this.queryParams.dateBegin = null;
        this.queryParams.dateEnd = null;
        this.handleQuery();
      },
      //获取任务列表
      getTaskInfoList(){
        taskInfoList({type:this.queryParams.type}).then(res =>{
          if(res.code == 200){
            this.taskInfoList = res.data;
            if(this.taskInfoList.length >0){
              this.queryParams.taskId = this.taskInfoList[0].id;
              this.getTableList();
              this.getCharts();
              this.getCommunityInfo();
            }
          }
        })
      },
      //统计图
      getCharts(){
        this.$refs.inspectCharts.getStatisticsInfo();
      },
      //列表
      getTableList(){
        this.$refs.inspectTable.getInspectList();
      },
      timeChange(val){
        this.queryParams.dateBegin = val[0] + " 00:00:00";
        this.queryParams.dateEnd = val[1] + " 23:59:59";
      },
      getCommunityInfo(){
        communityList().then(res =>{
          if(res.code == 200 && res.data){
            this.communityList = res.data;
            this.communityInfos = this.taskInfoList[0].relationInfoList ? res.data.filter(community => this.taskInfoList[0].relationInfoList.find(belongArea => belongArea.type == '1' && belongArea.relationId == community.id)) : [];
            //this.communityInfos = res.data;
          }
        })
      },
      taskChange(value){
        const taskInfo = this.taskInfoList.find(item => item.id == value);
        this.communityInfos = taskInfo.relationInfoList ? this.communityList.filter(community => taskInfo.relationInfoList.find(belongArea => belongArea.type == '1' && belongArea.relationId == community.id)) : [];
      }
    }
  }
</script>

<style scoped>

</style>
