<template>
  <view class="list-top-filters" :class="{'show-popup': showDownPopup, 'filter-right': !!$slots.filters, 'filter-form': !!$slots.form, 'filter-top': !!$slots.top, 'filter-bottom': !!$slots.bottom}">
    <view class="list-top-filters-warpper">
      <view class="list-top-filters-top">
        <slot name="top"></slot>
      </view>
      <view class="list-top-filters-statistics">
        <slot name="statistics"></slot>
      </view>
      <view v-if="showSearch" class="list-top-filters-search">
        <ml-search-bar v-model="searchName" :placeholder="placeholder" :editable="!showDownPopup" clearable @input="inputEvent" @confirm="searchEvent" @clear="clearEvent"></ml-search-bar>
        <view class="list-top-filters-search-right">
          <slot name="filters"></slot>
        </view>
        <view v-if="showPulldown" class="list-top-filters-pulldown-icon" @click="toggleDownPopup">
          <ml-icon name="filter-filling" />
        </view>
      </view>
      <view class="list-top-filters-form">
        <slot name="form"></slot>
      </view>
      <view class="list-top-filters-bottom">
        <slot name="bottom"></slot>
      </view>
      <view v-if="showDownPopup" class="list-top-filters-pulldown-warpper" @tap="tabMaskaEvent">
        <view class="list-top-filters-pulldown-form" @tap.stop>
          <view class="list-top-filters-pulldown-body">
            <slot name="pulldown"></slot>
          </view>
          <view class="list-top-filters-pulldown-footer">
            <ml-button size="medium" @click="resetDownEvent">重置</ml-button>
            <ml-button size="medium" status="primary" @click="confirmDownEvent">确认</ml-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XEUtils from 'xe-utils'

export default {
  name: 'MlHeaderFilterForm',
  props: {
    value: String,
    filterForm: Object,
    offsetTop: String,
    showSearch: Boolean,
    showPulldown: Boolean,
    placeholder: String
  },
  data () {
    return {
      searchName: '',
      showDownPopup: false
    }
  },
  mounted () {
    this.searchName = this.value
  },
  methods: {
    toggleDownPopup () {
      this.showDownPopup = !this.showDownPopup
    },
    tabMaskaEvent () {
      this.showDownPopup = false
    },
    resetDownEvent () {
      const { filterForm } = this
      const newValue = {}
      XEUtils.each(filterForm, (item, key) => {
        if (XEUtils.isArray(item)) {
          newValue[key] = []
        } else if (XEUtils.isBoolean(item)) {
          newValue[key] = false
        } else {
          newValue[key] = null
        }
      })
      this.$emit('update:filterForm', newValue)
      this.$emit('reset')
    },
    confirmDownEvent () {
      this.showDownPopup = false
      this.$emit('confirm')
      this.$emit('query')
    },
    inputEvent () {
      this.$emit('input', this.searchName)
    },
    clearEvent () {
      this.$emit('search')
      this.$emit('query')
    },
    searchEvent () {
      this.$emit('search')
      this.$emit('query')
    }
  }
}
</script>

<style lang="scss">
.list-top-filters {
  position: relative;
  width: 100%;
  font-size: $ml-describe-font-size;
  background: #ffffff;
  .list-top-filters-warpper {
    display: flex;
    flex-direction: column;
    padding: $ml-page-interval-margin $ml-page-interval-margin 0 $ml-page-interval-margin;
  }
  .list-top-filters-top {
    display: none;
  }
  &.filter-top {
    .list-top-filters-top {
      display: block;
    }
  }
  .list-top-filters-search {
    display: flex;
    flex-direction: row;
    padding: $ml-page-interval-margin 0;
    background: #ffffff;
    border-radius: $ml-border-radius;
    margin-bottom: $ml-page-interval-margin;
    .list-top-filters-pulldown-icon {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding-left: $ml-page-interval-margin;
      font-size: 60rpx;
      color: $ml-theme-primary-color;
      // #ifdef H5
      cursor: pointer;
      // #endif
    }
  }
  &.filter-right {
    .list-top-filters-search {
      padding-right: 0;
    }
    .list-top-filters-search-right {
      display: block;
    }
  }
  .list-top-filters-form {
    display: none;
    flex-direction: column;
    background: #ffffff;
    border-radius: $ml-border-radius;
    margin-bottom: $ml-page-interval-margin;
  }
  &.filter-form {
    .list-top-filters-form {
      display: block;
    }
  }
  .list-top-filters-bottom {
    display: none;
  }
  &.filter-bottom {
    .list-top-filters-bottom {
      display: block;
    }
  }
}
.list-top-filters-search-right {
  display: none;
  flex-shrink: 0;
}
.list-top-filters-pulldown-form {
  position: relative;
  background: #ffffff;
  .list-top-filters-pulldown-body {
    max-height: 70vh;
    // #ifndef H5
    overflow: auto;
    // #endif
  }
  .list-top-filters-pulldown-footer {
    display: flex;
    flex-direction: row;
    padding: $ml-page-interval-margin;
    background: #F0F2F5;
  }
}
.list-top-filters-pulldown-warpper {
  position: fixed;
  top: 0;
  left: 0;
  width: $ml-page-full-width;
  height: 100vh;
  z-index: 777;
  background-color: rgba(0, 0, 0, 0.4);
  // #ifdef H5
  left: 50%;
  transform: translateX(-50%);
  // #endif
}
</style>
