<template>
  <el-form :inline="true" class="searchForm3 searchCommon">
    <el-form-item :label="searchForm.inputLabel">
      <el-input style="width: 110px;" v-model="input" :placeholder="searchForm.inputPlaceholder"></el-input>
    </el-form-item>

    <el-form-item :label="searchForm.selectLabel" class="selectStatus">
      <el-select class="typeSelect" v-model="typeValue" 
          @change="selectChange" :placeholder="searchForm.selectPlaceholder" clearable>
        <el-option
          v-for="item in searchForm.typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="系统名称" class="selectSystem">
      <el-select class="typeSelect" v-model="systemName" 
          @change="systemSelectChange" placeholder="请选择申请系统" clearable>
        <el-option
          v-for="item in systemOptions"
          :key="item.appId"
          :label="item.appName"
          :value="item.appId"
          >
        </el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item label="起止日期">
      <el-date-picker
        range-separator="  至  "
        v-model="timeValue"
        type="daterange"
        align="right"
        placeholder="选择日期范围"
        :picker-options="pickerOptions"
        @change="dateTimeChange"
        >
      </el-date-picker>
    </el-form-item>

    <el-form-item style="margin-right:0">
      <el-button type="primary" icon="search" :loading="isQuery" @click="searchHandler">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import Api from '@/api/index.js'

  export default { 
    name: 'SearchForm',
    props: [ 'searchForm' ],
    data () { 
      return { 
        input: '', //登录用户名
        typeValue: '', //类型当前选择的值
        systemName: '',//系统当前选择的值
        systemOptions: [],
        activeOpts: [],

        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        timeValue: '',
        startEndDate: [], //起止日期

        isQuery: false,
      }
    },
    watch: {
      activeOpts(newVal) {
        if (newVal.length !== 0) {
          let len = newVal.length,
            id = newVal[len - 1].id;

          this.getRegionList(id, len)
        }
      }
    },
    mounted(){ 
      this.getApplySubmitName()
    },
    methods: { 
      selectChange(val){  //选择类型发生改变后
         this.$emit('selectType', val)
      },
      systemSelectChange(val){ //当选择系统类型发生变化后
      },
      //选择日期
      dateTimeChange(value){ 
        this.startEndDate = value.replace(/\s|-/g, "").split("至")
      },
      searchHandler() {   //点击查询
        this.$emit('submit', [this.input,this.typeValue,this.systemName,this.startEndDate])
      },
      //获取系统名称
      getApplySubmitName(){ 
        Api.getApplySubmitName('')
        .then(data=>{ 
          this.systemOptions = data.results
        })
        .catch(res=>{ 
          this.$message({
            type: 'error',
            message: '申请失败'
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .searchForm3 { 
    height: 56px;
    padding: 10px;

    .el-form-item {
      margin-right: 8px;
      margin-bottom: 0px;
    }
    .el-form-item__label{ 
      /* border: $border; */
      padding: 10px 8px;
      background: #fff;
      //border-radius: 4px 0 0 4px;
    }
    /* .el-input__inner{ 
      border: $border;
      border-left: none;
      border-radius: 0 4px 4px 0;
    } */
    .selectStatus{ 
      .el-input__inner{ 
        padding: 3px 24px 3px 8px;
      }
      .typeSelect { 
        .el-input { 
          width: 110px;
        }
      }
    }
    .selectSystem{ 
      .el-input__inner{ 
        padding: 3px 24px 3px 8px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .typeSelect { 
        .el-input { 
          width: 140px;
        }
      }
    }
  }
</style>