<template>
  <div class="search-form">
    <el-form :inline="true" class="base-form">
      <el-row type="flex" :gutter="30">
        <template v-for="(item,index) in form">
          <el-col :key="index" :xs="24" :sm="24" :md="md" :lg="lg" :xl="xl"
                  :class="{ 'hidden': index >= hiddenIndex && !isOpen }">
            <el-form-item :label="item.label" :key="index">
              <el-input
                v-if="item.type === 'input'"
                v-model="searchForm[item.model]"
                :placeholder="item.placeholder"
                clearable/>
              <el-select
                v-if="item.type === 'select'"
                v-model="searchForm[item.model]"
                :placeholder="item.placeholder"
                style="width:100%"
              >
                <el-option
                  v-for="option in item.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value">
                </el-option>
              </el-select>
              <el-date-picker
                v-if="item.type === 'daterange'"
                :style="{ 'width': item.width || '' }"
                v-model="searchForm[item.model]"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                label-suffix=":"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="item.pickerOptions"
              />
              <el-date-picker
                v-if="item.type === 'date'"
                :style="{ width: item.width || '150px' }"
                v-model="searchForm[item.model]"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"/>
            </el-form-item>
          </el-col>
        </template>
        <el-col :xs="24" :sm="24" :md="md" :lg="lg" :xl="xl" class="text-right mb20" :offset="offset">
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleClick">查询</el-button>
          <el-button type="text" v-if="showOpen" @click="handleOpen" size="medium">{{isOpen ? '收起' : '展开'}}<i
            :class="[isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// 初始化默认值
const resetUtil = (searchForm, form) => {
  form.map(item => {
    if (item.type === 'select') {
      searchForm[item.model] = item.value || 0
    } else {
      searchForm[item.model] = item.value || ''
    }
  })
}
// 根据屏幕宽度，显示对应表单个数
const getResult = (formLength, isOpen, mode) => {
  const w = document.documentElement.clientWidth
  let len = 0
  let hiddenIndex = 0
  let offset = 0
  let showOpen = true
  let md = 12// 1200px以下，一行2列
  let lg = 8// 1200px以上，一行显示3列
  let xl = 6// 1920px以上，一行显示4列
  if (mode === 'dialog') {
    if (isOpen) {
      hiddenIndex = 0
      offset = formLength % 2 === 0 ? 12 : 0
    } else {
      hiddenIndex = 1
      offset = formLength > 1 ? 0 : 12
    }
    md = 12
    lg = 12
    xl = 12
  } else {
    if (w >= 1920) {
      hiddenIndex = 3
      len = formLength % 4
      if (isOpen) {
        if (len === 0) offset = 18
        if (len === 1) offset = 12
        if (len === 2) offset = 8
        if (len === 3) offset = 0
      } else if (formLength > 3) {
        offset = 0
      } else {
        if (len === 0) offset = 0
        if (len === 1) offset = 12
        if (len === 2) offset = 6
        if (len === 3) offset = 0
      }
    } else if (w >= 1200) { // 一行显示三列
      hiddenIndex = 2
      len = formLength % 3
      if (isOpen) {
        if (len === 0) offset = 16
        if (len === 1) offset = 8
        if (len === 2) offset = 0
      } else if (formLength > 2) {
        offset = 0
      } else {
        if (len === 0) offset = 0
        if (len === 1) offset = 8
        if (len === 2) offset = 0
      }
    } else if (w >= 992) { // 一行显示三列
      hiddenIndex = 1
      if (isOpen) {
        if (formLength % 2 === 0) offset = 12
      }
    } else {
      hiddenIndex = 1
    }
    if (formLength <= hiddenIndex) {
      showOpen = false
    }
  }

  return {
    hiddenIndex,
    offset,
    showOpen,
    md,
    lg,
    xl,
    w
  }
}
export default {
  name: 'BussBaseForm',
  props: {
    mode: {
      type: String
    },
    form: {
      type: Array
    }
  },
  data () {
    // 动态生成model值
    let searchForm = {}
    resetUtil(searchForm, this.form)
    return {
      md: 12, // 992-1200 , 默认加载两列
      lg: 8, // 1200 - 1920 , 默认加载3列
      xl: 6, // >=1920 , 默认加载四列
      showOpen: true, // 显示展开/收起按钮
      isOpen: false, // 当前是否为展开状态
      hiddenIndex: 0, // 需要隐藏的索引
      offset: 0, // 便宜的列数
      screenWidth: 0, // 当前屏幕可用宽度
      searchForm// v-model表单
    }
  },
  created () {
    let { hiddenIndex, offset, showOpen, md, lg, xl, w } = getResult(this.form.length, this.isOpen, this.mode)
    this.hiddenIndex = hiddenIndex
    this.offset = offset
    this.showOpen = showOpen
    this.md = md
    this.lg = lg
    this.xl = xl
    this.screenWidth = w
  },
  methods: {
    // 重置
    handleReset () {
      // this.$refs.searchForm1.resetFields()
      resetUtil(this.searchForm, this.form)
    },
    // 默认触发查询点击事件
    handleClick () {
      const params = {
        page: 1,
        ...this.searchForm
      }
      // 日期格式处理
      let date = this.searchForm.date
      if (date && Array.isArray(date)) {
        params.start_time = date[0]
        params.end_time = date[1]
        delete params.date
      } else {
        params.start_time = ''
        params.end_time = ''
      }
      this.$emit('handleQuery', params)
    },
    handleOpen () {
      this.isOpen = !this.isOpen
      let res = getResult(this.form.length, this.isOpen, this.mode)
      this.hiddenIndex = res.hiddenIndex
      this.offset = res.offset
      this.md = res.md
      this.lg = res.lg
      this.xl = res.xl
    }
  }
}
</script>
<style lang="scss" scoped>
  .search-form{
    background-color: #ffffff;
    margin-bottom: 20px;
    padding: 20px 20px 0;
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    // 通过flex布局 控制表单自动折行
    .base-form {
      .hidden{
        display: none;
      }
      ::v-deep .el-row--flex {
        flex-wrap: wrap;
      }

      ::v-deep .el-form-item {
        display: flex;
      }

      ::v-deep .el-form-item__content {
        flex: 1;

        .el-date-editor {
          width: 100%;
        }
      }
    }
  }
</style>
