<template>
  <div>
    <el-form :model="newFormValue"
             ref="searchForm">
      <el-row type="flex"
              align="bottom">
        <el-col>
          <template v-for="(it, ind) in componentList">
            <el-col v-if="(it.showFlag === undefined  || it.showFlag === true) ? true : false"
                    :xs="layout === false ? 12 : 24"
                    :sm="layout === false ? 12 : 24"
                    :md="layout === false ? 12 : 24"
                    :lg="layout === false ? 8 : 12"
                    :xl="layout === false ? 8 : 12"
                    :key="ind">
              <el-form-item :label="it.label"
                            :label-width="it.lableWidth ? it.lableWidth : '100px'"
                            :prop="it.prop">
                <component class="searchForm"
                           :placeholder="it.placeholder ? it.placeholder : '请选择'"
                           :clearable="it.clearable"
                           :reload="it.reload"
                           :multiple="it.multiple"
                           :options="it.options"
                           :disabled="it.disabled"
                           :type="it.type"
                           :tags="true"
                           :name="it.name"
                           :isFestival="it.isFestival"
                           :isShowbefore="it.isShowbefore"
                           :loadApi="it.loadApi"
                           :queryParas="buildQueryParas(it.queryName, it.queryValue)"
                           :cascaderProps="it.cascaderProps"
                           :selectedField="it.selectedField"
                           v-model="newFormValue[it.value]"
                           :value-format="it.format"
                           :is="it.componentName"
                           :collapsetags="true"
                           :dictTypeCode="it.dictTypeCode"
                           :amount.sync="newFormValue[it.amount]"
                           :api="it.api"
                           :tagCode="it.tagCode"
                           :default-time="it.defaultTime"
                           :picker-options="it.pickerOptions"
                           @selectChanged="selectChanged">
                </component>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item style="float:right">
            <auth-button size="medium"
                         v-if="isShowSearchBtn"
                         :openPerms="false"
                         type="primary"
                         :label="$t('common.search')"
                         :menuCode="menuCode"
                         :perms="searchPerms"
                         icon="el-icon-search"
                         @click="handleFilter"></auth-button>
            <auth-button size="medium"
                         v-if="isShowResetBtn"
                         :openPerms="false"
                         :label="$t('common.reset')"
                         :menuCode="menuCode"
                         :perms="resetPerms"
                         icon="el-icon-refresh"
                         @click="clearParam"></auth-button>
            <slot name="btnArea"></slot>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import BaseSelect from '@/components/element/BaseSelect.vue'
import dict from '@/components/element/SelectDictionary.vue'
import AuthButton from '@/components/auth/authButton'
import SelectEnterprise from '@/components/element/SelectEnterprise'
import SelectCoreEnterprise from '@/components/element/cyjg/SelectCoreEnterprise.vue'
import SelectBigArea from '@/components/element/cyjg/SelectBigArea.vue'
import SelectSmallArea from '@/components/element/cyjg/SelectSmallArea.vue'
import SelectProduct from '@/components/element/cyjg/SelectProduct.vue'
import SelectAreaCoordinator from '@/components/element/SelectAreaCoordinator.vue'
import SelectCommissioner from '@/components/element/SelectCommissioner.vue'
import SelectContacts from '@/components/element/SelectContacts.vue'
import SelectCoordinator from '@/components/element/cyjg/SelectCoordinator.vue'
import SelectProCoreEnterprise from '@/components/element/cyjg/SelectProCoreEnterprise.vue'
import SelectPlanManager from '@/components/element/cyjg/SelectPlanManager.vue'
import SelectPeriod from '@/components/element/cyjg/SelectPeriod.vue'
export default {
  components: {
    BaseSelect,
    dict,
    AuthButton,
    SelectEnterprise,
    SelectCoreEnterprise,
    SelectBigArea,
    SelectSmallArea,
    SelectProduct,
    SelectAreaCoordinator,
    SelectCommissioner,
    SelectContacts,
    SelectCoordinator,
    SelectProCoreEnterprise,
    SelectPlanManager,
    SelectPeriod
  },
  props: {
    // 所属菜单Code-->全局唯一
    menuCode: {
      type: String,
      default: null
    },
    // 搜索按钮权限标识，外部使用者传入
    searchPerms: {
      type: String,
      default: null
    },
    // 重置按钮权限标识，外部使用者传入
    resetPerms: {
      type: String,
      default: null
    },
    componentList: {
      type: [Array],
      required: false
    },
    formValue: {
      type: [Object]
    },
    // 布局
    layout: {
      type: Boolean,
      default: false
    },
    // 是否显示搜索按钮
    isShowSearchBtn: {
      type: Boolean,
      default: true
    },
    // 是否显示重置按钮
    isShowResetBtn: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      selectObj: {}
    }
  },
  computed: {
    newFormValue: {
      get: function () {
        return this.formValue
      },
      set: function (value) {
        this.$emit('update:formValue', value)
      }
    },
    rowCount () {
      let s = parseInt(this.componentList.length / 3)
      let y = this.componentList.length % 3
      if (y === 0) {
        return s
      } else {
        return s + 1
      }
    }
  },
  methods: {
    handleFilter () {
      this.$emit('handleFilter')
    },
    clearParam () {
      this.$emit('clearParam')
    },
    selectChanged (index, name, row) {
      this.selectObj[name + 'Info'] = row
      this.$emit('selectChanged', this.selectObj)
    },
    buildQueryParas (queryName, queryValue) {
      let obj = {}
      if (typeof queryName === 'string') {
        obj[queryName] = this.formValue[queryValue]
      } else if (queryName !== undefined) {
        queryName.forEach((item, index) => {
          let v = queryValue[index]
          if (item === 'areaType') {
            obj[item] = v
          } else {
            obj[item] = this.formValue[v]
          }
        })
      }
      return obj
    }
  }
}
</script>
