<template>
  <el-form :inline="true" class="searchForm searchCommon">
    <el-form-item :label="searchForm.inputLabel">
      <el-input style="width: 172px;" v-model="input" :placeholder="searchForm.inputPlaceholder" @keyup.enter.native="serchEnterHandle"></el-input>
    </el-form-item>

    <el-form-item :label="searchForm.selectLabel">
      <el-select class="typeSelect" v-model="typeName" 
          @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="起止日期">
      <el-date-picker
        range-separator="  至  "
        v-model="timeValue"
        type="daterange"
        value-format="yyyy-MM-dd"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="dateTimeChange"
        >
      </el-date-picker>
    </el-form-item>

    <el-form-item style="margin:0 0 0 10px;">
      <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: {
        type: Object,
        default: () => {}
      },
      typeValue: {
        type: String,
        default: ''
      }
    },
    data () { 
      return { 
        input: '', // 登录用户名
        typeName: '',
        rules: {
          regionData: [
            {required: true, type: 'array', message: '选择区域范围', trigger: 'change'}
          ]
        },
        ruleFrom: {
          regionData: [],
          name: ''
        },
        regionOpts: [], 
        props: {
          label: 'label',
          value: 'value',
          children: 'children'
        },
        regionActive: [],
        activeOpts: [],
        restaurants: [],

        pickerOptions: {
          disabledDate (time) {
            return time.getTime() > Date.now()
          },
          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: [], // 起止日期

        /* startDate: null,
        endDate: null, */
        isQuery: false
        /* pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        timeOnOff: true */
      }
    },
    watch: {
      activeOpts (newVal) {
        if (newVal.length !== 0) {
          let len = newVal.length,
              id = newVal[len - 1].id

          this.getRegionList(id, len)
        }
      }
    },
    mounted () {
      this.typeName = this.typeValue
    },
    methods: { 
      selectChange (val) { // 选择类型发生改变后
        this.$emit('selectType', val)
      },
      handleItemChange (val) {
        this.activeOpts = val
      },
      // 选择日期
      dateTimeChange (value) {
        this.startEndDate = []
        if (value !== null) {
          for (let i = 0; i < value.length; i++) {
            this.startEndDate.push(value[i].replace(/\s|-/g, ''))
          }
        }
      },
      /* sDateChangeHandler(val) {
        this.startDate = val;
      },
      eDateChangeHandler(val) {
        this.endDate = val;
      },
      handleTime(){ //起止日期判断操作
        this.timeOnOff = true
        let startDay,endDay,start,end

        var month = new Date().getMonth() + 1;
        var strDate = new Date().getDate();

        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }

        let curDates = new Date().getFullYear()+""+month+""+strDate;

        if( this.startDate !== undefined && this.endDate !== undefined ){
          start = this.startDate.split('-').join("");
          end = this.endDate.split('-').join("");

          if( start>end ){ 
            this.endDate = ""
            this.$message({
              showClose: true,
              message: '结束日期不能小于开始日期',
              type: 'warning'
            })
            this.timeOnOff = false
            return
          }
        }
      }, */
      searchHandler () { // 点击查询
        this.$emit('submit', [this.input, this.typeName, this.startEndDate])
      },
      serchEnterHandle () {
        this.searchHandler()
      }
    }
  }
</script>

<style lang="scss">
  .searchForm {
    padding: 10px;

    .el-form-item {
      margin-right: 8px;
      margin-bottom: 0px;
    }

    .typeSelect { 
      .el-input { 
        width: 140px;
      }
    }
  }
</style>
