<!--
 * @Description: 异常调度列表过滤条件组件
 * @Author: liusheng
 * @Date: 2024-11-13 15:30:56
-->
<template>
  <div>
    <el-row class="filter-row" :gutter="0" type="flex" justify="space-between" align="middle">
      <el-col :span="7" style="text-align: left">
        <span class="field-title">应用：</span>
        <el-select v-model="filterForm.app" style="width:260px" filterable 
          size="small" clearable default-first-option allow-create placeholder="请选择应用">
          <el-option v-for="(app, index) in filterDo.appList" :key="index" :label="app.name" :value="app.value" />
        </el-select>
      </el-col>
      <el-col :span="8" style="text-align: left">
        <span class="field-title">执行时间：</span>
        <el-date-picker v-model="dateRange" type="daterange" align="right" unlink-panels
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          style="width:290px" size="small" :picker-options="dateRangePickerOptions" clearable>
        </el-date-picker>
      </el-col>
      <el-col :span="7" style="text-align: left">
        <span class="field-title">说明：</span>
        <el-input v-model="filterForm.remark" size="small" clearable style="width:260px" placeholder="请输入"/>
      </el-col>
      <el-col :span="2" style="text-align: right">
        <el-button style="margin-left: 15px; width: 80px" icon="el-icon-search" type="primary" 
          size="small" @click="handleSearch">搜 索</el-button>
      </el-col>
    </el-row>
    <el-row class="filter-row" :gutter="0" type="flex" justify="space-between" align="middle">
      <el-col :span="7" class="filter-col">
        <span class="field-title">类型：</span>
        <el-checkbox-group v-model="filterForm.type" size="small" style="margin-left:6px;">
          <el-checkbox-button v-for="(type, index) in filterDo.typeList" :key="index" :label="type.value"
            @change="handleChgType($event, type.value)">{{ type.name }}</el-checkbox-button>
        </el-checkbox-group>
      </el-col>
      <el-col :span="17" class="filter-col">
        <span class="field-title" style="margin-left: 30px;">状态：</span>
        <el-checkbox-group v-model="filterForm.status" size="small" style="margin-left: 3px;">
          <el-checkbox-button v-for="(status, index) in filterDo.statusList" :key="index" :label="status.value"
            @change="handleChgStatus($event, status.value)">{{ status.name }}</el-checkbox-button>
        </el-checkbox-group>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name:'AbnormalSchdFilter',
  props: {},

  data() {
    return {
      filterDo: { appList: [], typeList: [], statusList: [] },
      filterForm: {
        app: '',
        remark: '',
        begDate: '',
        endDate: '',
        type: '',
        status: ''
      },
      dateRange: null,
      dateRangePickerOptions: this.dateUtil.getDateRangePickerOptions(true, false),
    }
  },

  methods: {
    getAbnormalSchdFilterDO() {
      let requestData = {
        url: this.commonUrl.URL_GET_ABNORMAL_SCHEDULE_FILTER_DO,
        method: 'GET'
      };
      this.vueRequest(requestData).then(result => {
        if (result == null) return;
        
        this.filterDo.appList = this.commonUtil.map2List(result.data.appMap, true, 'value', 'name');
        this.filterDo.typeList = this.commonUtil.map2List(result.data.typeMap, true, 'value', 'name');
        this.filterDo.statusList = this.commonUtil.map2List(result.data.statusMap, true, 'value', 'name');
      })
    },

    handleChgType(checked, typeVal) {
      if (checked) {
        this.filterForm.type = [typeVal];
      }
    },
    
    handleChgStatus(checked, statusVal) {
      if (checked) {
        this.filterForm.status = [statusVal];
      }
    },

    handleSearch() {
      let type = (this.filterForm.type && this.filterForm.type.length != 0)
        ? this.filterForm.type[0] : '';
      let status = (this.filterForm.status && this.filterForm.status.length != 0)
        ? this.filterForm.status[0] : '';
			this.filterForm.begDate = this.dateRange && this.dateRange.length 
				? this.dateUtil.dateFormat(this.dateRange[0]) : '';
			this.filterForm.endDate = this.dateRange && this.dateRange.length 
				? this.dateUtil.dateFormat(this.dateRange[1]) : '';
      let filterData = { ...this.filterForm, 'type': type, 'status': status};
      this.$emit("refreshPage", filterData);
    }
  },
  
  mounted() {
    this.getAbnormalSchdFilterDO();
  }
}
</script>

<style scoped>
.filter-row {
  margin-bottom: 20px;
}
.filter-col {
  display: flex;
  align-items: center;
  text-align: left;
  border: 0px solid blue;
}
.field-title {
  color: #657180;
  font-size: 14px;
  display: inline-block;
  text-align: right;
}
</style>
