<template>
  <el-form :inline="true" class="searchForm searchCommon">

    <el-form-item :label="searchForm.selectLabel" v-if="showSelect">
      <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="datetimerange"
        value-format="yyyyMMddHHmmss"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00','00:00:00']"
        :picker-options="pickerOptions"
        @change="dateTimeChange"
        >
      </el-date-picker>
    </el-form-item>

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

<script>
import Util from '@/utils/util.js'

  export default { 
    name: 'SearchForm',
    props: {
      searchForm: {
        type: Object,
        default: () => {}
      },
      typeValue: {
        type: String,
        default: ''
      },
      showSelect: {
        type: Boolean,
        default: true
      }
    },
    data () { 
      return { 
        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: [
          new Date(new Date(new Date().setDate(new Date().getDate() - 7)).setHours(0, 0, 0, 0)),
          new Date(new Date().setHours(0, 0, 0, 0))
        ],
        startEndDate: [], // 起止日期
        isQuery: false
      }
    },
    watch: {
      activeOpts (newVal) {
        if (newVal.length !== 0) {
          let len = newVal.length,
              id = newVal[len - 1].id
          this.getRegionList(id, len)
        }
      }
    },
    created () {
      this.stime = Util.getDay(-7, '') + '000000'
      this.etime = Util.getDay(0, '') + '000000'      
      this.startEndDate[0] = this.stime
      this.startEndDate[1] = this.etime      
      },
    mounted () {
      this.typeName = this.typeValue
      if (this.showSelect === true) {
        this.timeValue = []    
        this.startEndDate = []  
      }
    },
    methods: { 
      selectChange (val) { // 选择类型发生改变后
        this.$emit('selectType', val)
      },
      handleItemChange (val) {
        this.activeOpts = val
      },
      // 选择日期
      dateTimeChange (value) {
        this.startEndDate = value
      },
      searchHandler () { // 点击查询
        if (this.startEndDate === null || this.startEndDate.length === 0) {
          this.$message({
          type: 'warning',
          message: '请选择时间！'
          })
        } else {
          if (this.showSelect) {
            this.$emit('submit', [this.typeName, this.startEndDate])     
          } else {
            this.$emit('submit', this.startEndDate)
          }
        }
      }
  }
}
</script>

<style lang="scss">
  .searchForm {
    padding: 10px;
   .search {
     height: 40px !important;
   }
   .searchCommon {
     height: 50px;
   }
    .typeSelect { 
      .el-input { 
        width: 140px;
      }
    }
  }
</style>
