<template>
          <div class="formBox">
            <template v-for="(item,index) in formColumns">
                 <asyncFormItem
                       :key="index" :item='item' :formParms='formParms'
                       :jsoneditorOpenAfter='jsoneditorOpenAfter'
                       @enterInput='enterInput'
                       type='queryArea'
                 ></asyncFormItem>
            </template>
            <template>
            <el-button-group class="isMoreSearchBox">
                <el-button @click="searchSubmit" size='mini' type="primary" icon="el-icon-search"></el-button>
                <el-popover
                    v-if="formColumns.find(item=>item.isMoreSearch)"
                    placement="bottom"
                    width="400"
                    trigger="click"
                    v-model="bill_search_popover_visible">
                    <el-row>
                        <el-col :span="24">
                            <el-form
                            class="isMoreSearchForm"
                            label-position="right"   ref="searchParam" label-width="100px">
                              <template v-for="(item,index) in moreSearchColumn">
                                <el-form-item :label="item.label" :prop="item.prop" :key="index">
                                      <childItem :item='item' :formParms='formParms'
                                        @enterInput='enterInput'
                                        :jsoneditorOpenAfter='jsoneditorOpenAfter'
                                      ></childItem>
                                </el-form-item>
                              </template>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col style="float: right; width: 140px">
                            <el-button size="mini" @click="bill_search_popover_visible=false">取消</el-button>
                            <el-button size="mini" type="primary"  @click="searchSubmit">确定</el-button>
                        </el-col>
                    </el-row>
                    <el-button size='mini' type="primary" slot="reference">
                      更多搜索
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                </el-popover>
              </el-button-group>
            </template>
          </div>
</template>
<script>
import asyncFormItem from './dyncFormItemComponent'
import childItem from './dyncFormItemComponentChild'
export default {
  name: 'dyncFormItemComponentQuery',
  components: {
    asyncFormItem,
    childItem
  },
  props: {
    formParms: {},
    jsoneditorOpenAfter: {
      type: Function
    },
    saveConfigDataFun: {
      type: Function
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    elInfo: {}
  },
  watch: {
    allSourceData: {
      handler: function(newVal) {
        this.initConfig(newVal)
      },
      deep: true
    },
    formColumns: {
      handler: function(newVal) {
        this.initMoreSearchColumn(newVal)
      },
      deep: true
    }
  },
  data() {
    return {
      bill_search_popover_visible: false,
      moreSearchColumn: [],
      formColumns: [],
      configData: {}
    }
  },
  mounted() {
    this.initConfig(this.allSourceData)
  },
  methods: {
    initConfig(data) {
      const { config } = data
      this.configData = config || {}
      if (!config || !config.formColumn) return
      this.formColumns = config.formColumn
      this.initMoreSearchColumn(this.formColumns)
    },
    enterInput(val) {
      const { click } = this.configData
      this.actionEnterInputClick(click)
      this.$emit('enterInput', val)
    },
    actionEnterInputClick(click) {
      const type = typeof click
      if (type === 'function') {
        click()
      }
    },
    initMoreSearchColumn(data) {
      if (!data.length) {
        this.moreSearchColumn = []
        return
      }
      const moreSearchColumn = this.formColumns.filter(item => {
        return item.isMoreSearch && !item.isHide
      })
      this.moreSearchColumn = moreSearchColumn
    },
    searchSubmit() {
      const bank = this.checkRequireColumn(this.formColumns, this.formParms)
      if (!bank) {
        return
      }

      for (const key in this.formParms) {
        const val = this.formParms[key]
        const emptyInvalid = [undefined, null, 'undefined', 'null', '']
        if (emptyInvalid.includes(val)) {
          delete this.formParms[key]
        }
      }
      const { click } = this.configData
      this.actionEnterInputClick(click)
      this.$emit('submit', this.formParms)
      this.bill_search_popover_visible = false
    },
    // 提交数据前判断是否必填
    checkRequireColumn(detailFormColumn, detailForm) {
      const emptyInvalid = [undefined, null, 'undefined', 'null', '']
      const detailFormColumn_ = detailFormColumn.filter(item => !item.isHide && item.isRequired)
      let f = true
      for (const item of detailFormColumn_) {
        const value = detailForm[item.prop]
        if (emptyInvalid.includes(value)) {
          this.$message.error(`${item.label}不能为空!`)
          f = false
          break
        }
      }
      return f
    },
    isShowItem(item) {
      if (item.isMoreSearch) {
        return false
      }
      if (!item.isHide) {
        return true
      }
    }
  }
}
</script>
<style scoped>
.formBox::-webkit-scrollbar
{
    width:5px;
    height:5px;
    background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
.formBox::-webkit-scrollbar-track
{
    border-radius:10px;
    background-color:#F5F5F5;
}
/*定义滑块
 内阴影+圆角*/
.formBox::-webkit-scrollbar-thumb
{
    border-radius:10px;
    background-color: #ddd;
}
.formBox{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.isMoreSearchBox{
  margin-top:5px;
}
.isMoreSearchForm{
  /* height: 300px; */
  overflow: scroll;
}
.isMoreSearchForm::-webkit-scrollbar {display:none}
.isMoreSearchForm >>> .el-form-item{
  margin-bottom: 10px;
}
</style>
