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

    <el-form-item label="分公司" prop="regionData">
      <el-cascader
        style="width: 355px;"
        v-model="ruleFrom.regionData"
        :options="regionOpts"
        change-on-select
        clearable
        :props="props"
        @change="handleCascaderChange"
        @active-item-change="handleItemChange"
        placeholder="请选择分公司"
      ></el-cascader>
    </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: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 { 
    props: [ 'searchForm' ],
    data () { 
      return { 
        input: '', // 登录用户名
        cityId: '', // 当前选择城市的id
        rules: {
          regionData: [
            {required: true, type: 'array', message: '选择区域范围', trigger: 'change'}
          ]
        },
        ruleFrom: {
          regionData: [],
          name: ''
        },
        regionOpts: [], 
        props: {
          label: 'label',
          value: 'value',
          children: 'children'
        },
        regionActive: [],
        activeOpts: [],
        restaurants: [],

        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.getRegionList(null)
    },
    methods: { 
      // 获取区域列表
      getRegionList (id, len) { 
        let arr = []
        if (id === null) { 
          this.areaId = 1
        } else { 
          this.areaId = id
        }
        Api.getRegionList(id).then(data => {
          if (data) {
            data.forEach((item, index) => {
              if (len === 2) {
                arr.push({
                  label: item.name,
                  value: item
                })
              } else {
                arr.push({
                  label: item.name,
                  value: item,
                  children: []
                })
              }
            })
          } else {
            console.error('机构列表获取失败')
            this.$message({
              type: 'error',
              message: '机构列表获取失败'
            })
          }
          if (!id) {
            this.regionOpts = arr
            this.regionActive[0] = arr
          } else {
            if (len <= 2) {
              this.regionActive[len - 1].forEach(item => {
                let obj = this.activeOpts[len - 1]
                if (item.value === obj) {
                  // console.log(idx)
                  item.children = arr
                }
              })
              this.regionActive[len] = arr
            }
          }
        })
      },
      // 区域值的改变
      handleCascaderChange (val) {
        this.activeOpts = val
        this.ruleFrom.regionData = val
        if (val.length !== 0) { 
          this.cityId = val[val.length - 1].id
        } else { 
          this.cityId = ''
        }
      },
      // 值的选择
      handleItemChange (val) {
        this.activeOpts = val
      },
      // 日期的选择
      dateTimeChange (value) { 
        this.startEndDate = value.replace(/\s/g, '').split('至')
      },
      // 点击查询
      searchHandler () {
        this.$emit('submit', [this.input, this.cityId, this.startEndDate])
      }
    }
  }
</script>

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

    .el-form-item {
      float: left;
      margin-bottom:0px;
    }
    /* .el-input__inner{ 
      border: solid 1px #43a7a3;
      border-left: none;
      border-radius: 0 4px 4px 0;
    } */
    .typeSelect { 
      .el-input { 
        width: 140px;
      }
    }
  }
</style>
