<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-show="!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(item.key)"
            isDropItem
            :clearable="!item.closeClearable"
            :filterable="true"
            :multiple="!!item.multiple"
            v-if="item.type === 'select'"
          ></ps-select>

          <el-date-picker
            v-model="item.value"
            :type="item.type"
            placeholder="请选择"
            @change="operaGetSearchList"
            v-if="item.type === 'date' || item.type === 'month' || item.type === 'year'"
            :value-format="valueFormatObj[item.type]"
          >
          </el-date-picker>
          <el-date-picker
            v-model="item.value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="operaGetSearchList"
            v-if="item.type === 'datetimerange'"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
          <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>
          <el-date-picker
            v-model="item.value"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            @change="operaGetSearchList"
            v-if="item.type === 'monthrange'"
            value-format="yyyy-MM"
          >
          </el-date-picker>
          <ps-cascader
            v-model="item.value"
            :props="{ checkStrictly: true }"
            :ref="item.key"
            :refInfo="item.key"
            :options="item.arr"
            placeholder="请选择"
            @change="operaGetSearchList"
            clearable
            v-if="item.type === 'cascader'"
          ></ps-cascader>
          <slot
            v-if="item.type === 'slot'"
            :name="item.key"
          ></slot>
        </div>
        <slot name="custom"></slot>
        <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: [],
      isClear: false,
      valueFormatObj: {
        date: 'yyyy-MM-dd',
        month: 'yyyy-MM',
        year: 'yyyy',
      },
    };
  },
  created() { },
  methods: {
    operaChange(obj) {
      if (this.allIn) {
        return false;
      }
      this.$emit('change', obj, this.isClear);
    },
    operaSeniorSearch() {
      this.allIn = true;
      this.isSearch = false;
    },
    operaSearch() {
      this.allIn = false;
      this.isSearch = true;
      this.isClear = false;
      this.operaGetSearchList();
    },
    operaResetting() {
      this.allIn = false;
      this.isSearch = false;
      this.isClear = true;
      this.operaDeleteSearchItem('clear');
      this.$emit('clear');
    },
    operaClear() {
      this.allIn = false;
      this.isSearch = false;
      this.operaDeleteSearchItem('clear');
      this.$emit('clear');
    },
    operaGetSearchList(key) {
      if (key) {
        this.$emit('changeField', key);
      }
      let searchInfo = [];
      for (const el of this.searchList) {
        if (
          (el.type === 'datetimerange' || el.type === 'daterange' || el.type === 'monthrange') &&
          el.value &&
          el.value.length
        ) {
          searchInfo.push({
            type: el.type,
            name: el.name,
            desc: `${el.value[0]}~${el.value[1]}`,
            value: el.value,
            key: el.key,
          });
          continue;
        }
        if (el.type === 'cascader' && el.value && el.value.length) {
          const cascaderArr = this.$refs['cascaderkey'][0].getCheckedNode();
          searchInfo.push({
            type: el.type,
            name: el.name,
            desc: cascaderArr && cascaderArr.length ? cascaderArr[0].pathLabels.join('/') : null,
            value: el.value,
            key: el.key,
          });
          continue;
        }
        if (el.value && el.type === 'select') {
          let desc = null;
          if (el.multiple && el.value && el.value.length) {
            desc = JSON.parse(el.value[0]).desc;
          } else {
            desc = JSON.parse(el.value).desc;
          }
          searchInfo.push({
            type: el.type,
            name: el.name,
            desc: desc,
            value: el.value,
            key: el.key,
            multiple: el.multiple,
          });
          continue;
        }
        if (el.type === 'slot') {
          if (el.value || (Array.isArray(el.value) && el.value?.length)) {
            searchInfo.push({
              type: el.type,
              name: el.name,
              desc: el.desc,
              value: el.value,
              key: el.key,
            });
          }
          continue;
        }
        if (el.value && !Array.isArray(el.value)) {
          searchInfo.push({
            type: el.type,
            name: el.name,
            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) {
      if (sItem !== 'clear') {
        this.$emit('clearField', sItem.key);
      }
      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>
