<template>
  <el-popover
    v-model="visiblePopup"
    class="adb-filter-button"
    placement="bottom"
    width="400"
    :popper-class="popupClass"
    @click="visiblePopup = !visiblePopup"
  >
    <template>
      <div class="adb-filter-popup__body">
        <adb-filter-operation :item="item" v-model="model" @bind="handleBind">
          <span slot="optionItem" slot-scope="{ option }">
            <slot name="optionItem" :option="option"></slot>
          </span>
        </adb-filter-operation>
      </div>
      <div class="adb-filter-popup__footer">
        <div class="left">
          <el-button
            class="filters-clear"
            :title="$tc('adb-filter.clearFilter')"
            @click="handleReset"
          >
            <adb-icon icon-class="spb-clear" />
          </el-button>
        </div>
        <div class="right">
          <el-button
            v-if="notSimple"
            class="filters-commit"
            :title="$tc('adb-filter.commitFilter')"
            type="primary"
            :disabled="isDisabled"
            @click="handleCommit"
          >
            <adb-icon icon-class="spb-icon-confirm" />
          </el-button>
        </div>
      </div>
    </template>
    <el-button slot="reference" class="adb-filter-button__btn">
      <span>
        <span class="adb-filter-button__btn__label">{{ item.label }}</span>
        <i
          class="el-icon-arrow-up adb-filter-button__btn__suffix"
          :class="{ 'is-reverse': visiblePopup }"
          slot="suffix"
        >
        </i>
      </span>
    </el-button>
  </el-popover>
</template>

<script>
import { resetItem } from '@adber/shipber-ui/utils/filters';
import AdbFilterOperation from '@adber/shipber-ui/packages/custom/filter-item-operation/index';
import commonMessage from '@adber/shipber-ui/packages/locale';

export default {
  name: 'adb-filter-button-item',
  i18n: {
    sharedMessages: commonMessage,
  },
  components: { AdbFilterOperation },
  props: {
    item: {
      type: Object,
      default: () => ({}),
      required: false,
    },
    value: {
      default: undefined,
      required: false,
    },
  },
  data() {
    return {
      model: this.$_.cloneDeep(this.value) || {},
      visiblePopup: false,
      arrSimple: ['date-picker', 'select', 'radio'],
    };
  },
  watch: {
    visiblePopup: {
      handler() {
        this.model = this.$_.cloneDeep(this.value);
      },
    },
    model: {
      handler(newVal) {
        if (!this.notSimple && !this.$_.isEqual(newVal, this.value)) {
          this.visiblePopup = false;
          this.$emit('input', newVal);
        }
      },
      deep: true,
    },
  },
  computed: {
    popupClass() {
      return 'adb-filter-popup adb-filter-popup__' + this.item.type;
    },
    notSimple() {
      return this.arrSimple.indexOf(this.item.type) === -1;
    },
    isDisabled() {
      let bool = this.$_.isEqual(this.value, this.model);
      if (bool) return bool;
      switch (this.item.type) {
        case 'amount-range':
          bool = this.model.some((d) => this.$_.isNil(d));
          break;
        case 'number-range':
          bool = this.model.some((d) => this.$_.isNil(d));
          break;
        default:
          break;
      }
      return bool;
    },
  },
  methods: {
    handleReset() {
      const value = resetItem(this.item.type);
      this.model = value;
      this.fnChange(this.item.key, value);
      this.$emit('input', value);
    },
    fnChange(key, value) {
      this.item.change && this.item.change(this.model, value);
    },
    handleCommit() {
      this.$emit('input', this.model);
      this.visiblePopup = !this.visiblePopup;
    },
    handleBind(key) {
      const opt = this.options.find((opt) => opt.key === key);
      if (!opt) return;
      this.handleReset(key, opt.type);
    },
  },
};
</script>

<style lang="scss" scoped>
.adb-filter-button {
  &__btn {
    &__label {
      margin-right: 8px;
    }

    &__suffix {
      color: #c0c4cc;
      font-size: 14px;
      transition: transform 0.3s;
      transform: rotateZ(180deg);
      cursor: pointer;
      &.is-reverse {
        transform: rotateZ(0);
      }
    }
  }
}
.adb-filter-popup {
  // width: auto !important;
  max-width: 400px;
  min-width: 180px;
  padding: 20px 12px;
  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0 0;
    .el-button {
      padding: 8px 30px;
    }
  }
}
</style>
