<template>
  <div class="ps-search">
    <div class="ps-search--presentier">
      <!-- hide-height  all-in-->
      <div :class="['presentier-search', isMore && 'is-more', !allIn && 'hide-height', allIn && 'all-in']"
        v-if="!isSearch">
        <div class="ps-search--item" v-for="(item, index) in searchList" :key="index">
          <label>{{ item.name }}：</label>
          <ps-input placeholder="请输入信息" v-model="item.value" @input="operaGetSearchList" v-if="item.type === 'input'">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </ps-input>
          <ps-select placeholder="请选择" v-model="item.value" :dataSource="item.arr"
            :defalutProps="{ id: 'code', desc: 'desc' }" @change="operaGetSearchList" isDropItem clearable
            v-if="item.type === 'select'"></ps-select>

          <el-date-picker v-model="item.value" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="operaGetSearchList" v-if="item.type === 'daterange'"
            value-format="yyyy-MM-dd">
          </el-date-picker>
          <ps-cascader v-model="item.value"  :props="{ checkStrictly: true }" :ref="item.key" :refInfo="item.key" :options="item.arr" @change="operaGetSearchList" clearable v-if="item.type === 'cascader'"></ps-cascader>
        </div>
        <div class="ps-search--height" v-if="!isMore && !allIn && searchList.length > 3">
          <ps-button type="text" @click="operaSeniorSearch">高级筛选<i class="el-icon-arrow-down"></i></ps-button>
        </div>
        <div class="ps-search--button">
          <ps-button @click="operaResetting">重置</ps-button>
          <ps-button type="primary" @click="operaSearch">查询</ps-button>
        </div>
      </div>
      <div class="ps-search--constant" v-if="isSearch">
        <ps-text class="ps-text-label">已选筛选：</ps-text>
        <div class="ps-s--constant">
          <div class="constant--item" v-for="(item, index) in searchParams" :key="index">
            <ps-text>{{ item.name }}：{{ item.desc }}</ps-text>
            <i class="el-icon-error" @click="operaDeleteSearchItem(item)"></i>
          </div>

          <div class="ps-s--opera">
            <ps-button type="text" @click="operaSeniorSearch">重新筛选<i class="el-icon-arrow-down"></i></ps-button>
            <ps-button type="text" @click="operaClear"><i class="el-icon-refresh-left"></i>清空</ps-button>
          </div>
        </div>
      </div>
      <div class="ps-search--derive">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'PsSearch',
  props: {
    searchList: {
      type: Array,
      default: () => []
    },
    isMore: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      allIn: false,
      isSearch: false,
      searchParams: []
    };
  },
  created() {
  },
  methods: {
    operaChange(obj) {
      if (this.allIn) {
        return false
      }
      this.$emit('change', obj)
    },
    operaSeniorSearch() {
      this.allIn = true
      this.isSearch = false
    },
    operaSearch() {
      this.allIn = false
      this.isSearch = true
      this.operaGetSearchList()
    },
    operaResetting() {
      this.allIn = false
      this.isSearch = false
      this.operaDeleteSearchItem('clear')
    },
    operaClear() {
      this.allIn = false
      this.isSearch = false
      this.operaDeleteSearchItem('clear')
    },
    operaGetSearchList() {
      let searchInfo = []
      this.searchList.forEach(el => {
        if (el.type === 'daterange' && el.value.length) {
          searchInfo.push({
            type: el.type,
            name: el.name,
            desc: `${el.value[0]}~${el.value[1]}`,
            value: el.value,
            key: el.key
          })
        } else if (el.type === 'cascader' && el.value.length) {
          const cascaderArr = this.$refs['cascaderkey'][0].getCheckedNode()
          searchInfo.push({
            type: el.type,
            name: el.name,
            desc: cascaderArr[0].pathLabels.join('/'),
            value: el.value,
            key: el.key
          })
        }else if (el.value && !Array.isArray(el.value)) {
          searchInfo.push({
            type: el.type,
            name: el.name,
            desc: el.type === 'select' ? JSON.parse(el.value).desc : el.value,
            value: el.value,
            key: el.key
          })
        }
      })
      this.searchParams = searchInfo
      if (this.searchParams.length < 1 && !this.allIn) {
        this.allIn = false
        this.isSearch = false
      }
      this.operaChange(searchInfo)
    },
    operaDeleteSearchItem(sItem) {
      this.searchList.forEach(el => {
        if (sItem === 'clear') {
          el.value = null
        } else {
          if (sItem.key === el.key) {
            el.value = null
          }
        }
      })
      this.operaGetSearchList()
      setTimeout(() => {
        // this.allIn = this.searchParams.length > 0 ? false : true
        this.isSearch = this.searchParams.length > 0 ? true : false
      })
    }
  }
}
</script>

<style></style>
