<template>
  <div class="top-collapse">
    <el-collapse v-model="activeNames" @change="collapseChange">
      <el-collapse-item :title="collapseTitle" :name="1">
        <slot name="content" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
export default {
  name: 'HeaderCollapse',
  props: {
    cur: {
      type: Number,
      default: -1
    }
  },
  data() {
    let activeNames = this.cur === -1 ? [] : [this.cur]
    let collapseTitle = this.cur === -1 ? '点击展开搜索' : '点击收缩搜索'
    if (window.location.hostname === 'localhost' && this.cur !== 1) {
      collapseTitle = '点击收缩搜索',
      activeNames = [1]
    }
    return {
      collapseTitleX: '搜索条件：空',
      collapseTitle,
      activeNames
    }
  },
  methods: {
    collapseChange(val) {
      if (val.length === 0) {
        this.collapseTitle = '点击展开搜索'
      } else {
        this.collapseTitle = '点击收缩搜索'
      }
    },
    searchHandle() {
      const oldform = this.$refs.ruleForm.baseForm
      const newForm = { ...oldform }
      let collapseTitle = ''
      for (const k in oldform) {
        if (oldform[k] !== '') {
          this.searchData.forEach(s => {
            if (s.key === k) {
              collapseTitle += `${s.label}:${oldform[k]}；`
            }
          })
        }
      }
      if (collapseTitle) {
        this.collapseTitle = '搜索条件 =>  ' + collapseTitle.slice(0, collapseTitle.length - 1)
      } else {
        this.collapseTitle = this.collapseTitleX
      }
      // let params = {
      //   generic: {
      //     vos: []
      //   }
      // }
      // for (let k in newForm) {
      //   params.generic.vos.push({
      //     propertyName: k,
      //     operation: 'equal',
      //     type: 'string',
      //     values: [newForm[k]]
      //   })
      // }
      this.$emit('change', newForm)
    }
  }
}
</script>
