<template>
  <div class="adb-filter-drawer filters">
    <el-drawer
      :title="$tc('adb-filter.filterTitle')"
      :visible.sync="showDrawer"
      style="width: 100%"
      :with-header="false"
      class="filters-drawer"
    >
      <div class="filters-header">
        <h2>{{ $tc('adb-filter.filterTitle') }}</h2>
        <div class="close-btn" @click="() => (showDrawer = false)">
          <i class="el-icon-close" />
        </div>
      </div>
      <div class="filters-main">
        <div class="filters-tool">
          <el-button
            type="text"
            class="clear-all-filter-btn"
            @click="handleReset('all')"
          >
            <adb-icon icon-class="spb-clear" />
            <span class="ml-8">{{ $tc('adb-filter.clearAll') }}</span>
          </el-button>
          <el-button
            type="text"
            class="expand-filter-btn"
            :class="{ active: isExpand }"
            @click="isExpand = !isExpand"
          >
            <span class="mr-8">{{
              isExpand
                ? $tc('adb-filter.collapseAll')
                : $tc('adb-filter.expandAll')
            }}</span>
            <adb-icon
              :icon-class="isExpand ? 'spb-arrow-up' : 'spb-arrow-down'"
            />
          </el-button>
        </div>
        <el-collapse
          v-model="allExpand"
          class="collapse"
          @change="handleChangeCollapse"
        >
          <el-collapse-item
            v-for="opt in validateOptions.filter((d) => !d.is_button)"
            :key="opt.key"
            :title="opt.label"
            :name="opt.key"
            :disabled="opt.disabled"
            class="collapse-item"
          >
            <template slot="title">
              <span class="title">{{ opt.label }}</span>
              <div
                v-if="showValueOnTitle(opt.type, filters[opt.key])"
                class="value-wrapper"
                :class="opt.type"
              >
                <template v-if="opt.type === 'radio'">
                  <span
                    :title="
                      $_.find(
                        opt.options,
                        (option) => option.value === filters[opt.key]
                      )
                        ? $_.find(
                            opt.options,
                            (option) => option.value === filters[opt.key]
                          ).label
                        : ''
                    "
                    >{{
                      $_.find(
                        opt.options,
                        (option) => option.value === filters[opt.key]
                      )
                        ? $_.find(
                            opt.options,
                            (option) => option.value === filters[opt.key]
                          ).label
                        : ''
                    }}</span
                  >
                </template>
                <template v-if="opt.type === 'checkbox'">
                  <span
                    :loading="!opt.options.length"
                    :title="fnShowCheckbox(opt)"
                    >{{ fnShowCheckbox(opt) }}</span
                  >
                  <!--                  <span>{{ filters[opt.key].join(',') }}</span>-->
                </template>
                <template v-else-if="opt.type === 'amount-range'">
                  <span class="amount-icon">$</span>
                  <!-- <span>{{ filters[opt.key].join('~') }}</span>-->
                  <span class="amount-value">{{ filters[opt.key][0] }}</span>
                  <span class="amount-icon-center">~</span>
                  <span class="amount-value">{{ filters[opt.key][1] }}</span>
                </template>
                <template v-else-if="opt.type === 'number-range'">
                  <span class="amount-value">{{ filters[opt.key][0] }}</span>
                  <span class="amount-icon-center">~</span>
                  <span class="amount-value">{{ filters[opt.key][1] }}</span>
                </template>
                <template v-else-if="opt.type === 'date-picker'">
                  <span>{{ $adbDayjs.getDate(filters[opt.key][0]) }}</span>
                  <span class="center">-</span>
                  <span>{{ $adbDayjs.getDate(filters[opt.key][1]) }}</span>
                </template>
                <template v-else-if="opt.type === 'date-time-picker'">
                  <span>{{ $adbDayjs.getDate(filters[opt.key][0]) }}</span>
                  <span class="center">-</span>
                  <span>{{ $adbDayjs.getDate(filters[opt.key][1]) }}</span>
                </template>
                <template v-else-if="opt.type === 'select'">
                  <span
                    :title="
                      $_.find(
                        opt.options,
                        (option) => option.value === filters[opt.key]
                      )
                        ? $_.find(
                            opt.options,
                            (option) => option.value === filters[opt.key]
                          ).label
                        : ''
                    "
                    >{{
                      $_.find(
                        opt.options,
                        (option) => option.value === filters[opt.key]
                      )
                        ? $_.find(
                            opt.options,
                            (option) => option.value === filters[opt.key]
                          ).label
                        : ''
                    }}</span
                  >
                </template>
              </div>
            </template>
            <adb-filter-operation
              :item="opt"
              v-model="filters[opt.key]"
              @bind="handleBind"
            ></adb-filter-operation>

            <el-button
              type="text"
              class="filters-clear"
              :title="$tc('adb-filter.clearFilter')"
              @click="handleReset(opt.key, opt.type)"
            >
              <adb-icon icon-class="spb-clear" />
            </el-button>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="filters-foot">
        <el-button
          class="shipber-btn-icon btn-main btn-large"
          :disabled="isOldFilter"
          @click="confirm"
        >
          {{ $tc('adb-filter.commitFilter') }}
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { resetDate, resetItem } from '@adber/shipber-ui/utils/filters';
import AdbIcon from '@adber/shipber-ui/packages/base/adb-icon';
import commonMessage from '@adber/shipber-ui/packages/locale';

export default {
  name: 'adb-filter-drawer',
  i18n: {
    sharedMessages: commonMessage,
  },
  components: { AdbIcon },
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    value: {
      type: Object,
      default: () => ({}),
    },
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      filters: this.$_.cloneDeep(this.value),
      cuKey: '',
      allExpand: [],
    };
  },
  computed: {
    isOldFilter() {
      return this.$_.isEqual(this.filters, this.value);
    },
    validateOptions() {
      return this.options.filter((option) => !option.is_hide);
    },
    isExpand: {
      get() {
        return this.validateOptions.every(
          (option) => this.allExpand.indexOf(option.key) !== -1
        );
      },
      set(bool) {
        this.allExpand = bool
          ? this.validateOptions.map((option) => option.key)
          : [];
      },
    },
    showDrawer: {
      get: function () {
        return this.show;
      },
      set: function (show) {
        this.$emit('update:show', show);
      },
    },
  },
  watch: {
    value: {
      handler(val) {
        if (this.$_.isEqual(val, this.filters)) return;
        this.filters = this.$_.cloneDeep(val);
      },
      deep: true,
    },
  },
  methods: {
    handleReset(key, type) {
      if (key === 'all') {
        // Object.keys(this.filters).forEach(item => clearData(item));
        this.filters = resetDate(this.options, this.filters);
        this.options.forEach((item) => {
          this.fnWatchFilterItemChangee(item.key, this.filters[item.key]);
        });
      } else {
        const filters = this.$_.cloneDeep(this.filters);
        filters[key] = resetItem(type);
        this.filters = filters;
        this.fnWatchFilterItemChangee(key, filters[key]);
      }
    },

    confirm() {
      this.$emit('update:show', false);
      this.$emit('input', this.filters);
    },

    showValueOnTitle(type, value) {
      let bool = false;
      switch (type) {
        case 'radio':
          bool = this.showRadioValue(value); // value !== undefined;
          break;
        case 'checkbox':
          if (this.$_.isArray(value) && value.length) {
            bool = true;
          }
          break;
        case 'amount-range':
          if (
            this.$_.isArray(value) &&
            value.some((d) => !this.$_.isUndefined(d))
          ) {
            bool = true;
          }
          break;
        case 'number-range':
          if (
            this.$_.isArray(value) &&
            value.some((d) => !this.$_.isUndefined(d))
          ) {
            bool = true;
          }
          break;
        case 'date-picker':
          if (this.$_.isArray(value) && value.length && value.some((d) => d)) {
            bool = true;
          }
          break;
        case 'date-time-picker':
          if (this.$_.isArray(value) && value.length) {
            bool = true;
          }
          break;
        case 'select':
          bool = this.showRadioValue(value);
          break;
        default:
          bool = !!value;
          break;
      }
      return bool;
    },

    handleChangeCollapse(str) {
      this.cuKey = str;
      if (this.$refs[str]) {
        if (this.$refs[str][0]) this.$refs[str][0].toggleMenu();
      }
    },

    fnWatchFilterItemChangee(key, value) {
      const item = this.$_.find(this.options, (d) => d.key === key);
      if (item) {
        item.change && item.change(this.filters[key], value);
      }
    },

    showRadioValue(value) {
      if (this.$_.isUndefined(value)) return false;
      if (typeof value === 'string') return !!value.length;
      return true;
    },

    fnShowCheckbox(opt) {
      return this.$_.chain(this.filters[opt.key])
        .map((value) =>
          this.$_.find(opt.options, (item) => item.value === value)
            ? this.$_.find(opt.options, (item) => item.value === value).label
            : ''
        )
        .value()
        .join(',');
    },
    handleBind(key) {
      const opt = this.options.find((opt) => opt.key === key);
      if (!opt) return;
      this.handleReset(key, opt.type);
    },
  },
};
</script>

<style lang="scss" scoped>
@import '~@adber/shipber-ui/packages/theme/scss/basic.scss';

.adb-filter-drawer {
  font-size: 14px;
  position: relative;
  /deep/ .el-button--text {
    border: none;
  }
  .ml-8 {
    margin-left: $shipber-num-M;
  }
  .mr-8 {
    margin-right: $shipber-num-M;
  }
  .el-button--text {
    border: none;
  }

  .filters-drawer {
    box-shadow: 16px 0 20px 0 rgba(87, 101, 117, 0.25);

    .filters-header {
      height: 56px;
      width: 100%;
      background: #e3e9f1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 $shipber-num-L;
      border-bottom: 1px solid #c5ccd3;

      & > h2 {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #32363b;
        line-height: 22px;
      }

      .close-btn {
        font-size: 24px;
        cursor: pointer;
        color: #bdc3c9;
      }
    }

    .filters-main {
      height: calc(100vh - 114px);
      overflow: auto;

      .filters-tool {
        padding: 16px 20px;
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaedf0;
        position: fixed;
        background-color: white;
        width: calc(30vw - 40px);
        min-width: 300px;
        max-width: 460px;
        z-index: 100;
        box-sizing: content-box;

        .clear-all-filter-btn {
          color: #7c8794;

          &:hover {
            color: #4097fd;
          }
        }

        .expand-filter-btn {
          color: #7c8794;

          &.active {
            color: #4097fd;
          }
        }
      }

      .collapse {
        font-size: 14px;
        border-top: none;
        padding: 0 8px;
        margin-top: 81px;

        .title {
          min-width: 100px;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        /deep/ .el-collapse-item__header.focusing:focus:not(:hover) {
          color: #303133;
        }

        /deep/.el-collapse-item {
          font-size: 14px;
          padding: 16px 0;
          border-bottom: 1px solid #eaedf0;

          .el-collapse-item__header {
            padding: 0 12px;
            font-size: 14px;
            border-bottom: none !important;
            border-radius: 6px;

            &:hover {
              background: #f3f4f4;
              border: 1px solid #ffffff;
            }

            &.is-active {
              background: #f3f4f4;
            }
          }

          .el-collapse-item__content {
            margin: 0 12px;
            padding-bottom: 0;

            .search-wrapper {
              margin-top: 8px;
              margin-bottom: 16px;
            }

            .filters-radio,
            .filters-checkbox {
              //max-height: 15rem;
              max-height: 150px;
              overflow: auto;
            }
          }

          .el-collapse-item__wrap {
            margin-top: 16px;
            border-bottom: none;
          }
        }
      }

      .filters-checkbox,
      .filters-radio {
        display: flex;
        flex-direction: column;
        font-size: 14px;
      }

      .filters-radio > .el-radio {
        &:not(:first-child) {
          margin-top: 12px;
        }
      }

      .filters-clear {
        padding-bottom: 0;
        padding-top: 8px;
        color: #7c8794;

        &:hover {
          color: #4097fd;
        }
      }
    }

    .filters-foot {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 58px;
      border-top: 1px solid #eaedf0;
      display: flex;
      padding: 0 12px;
      //justify-content: space-between;
      justify-content: flex-end;
      align-items: center;
      background-color: #ffffff;
    }

    /deep/ .el-drawer {
      outline: none;
      min-width: 340px;
      max-width: 500px;

      @media screen and (max-width: $mobile-width) {
        min-width: 100vw;
      }
    }

    .el-button {
      font-size: 14px;
    }
  }

  /deep/ .el-drawer__title {
    max-width: 500px;
  }
}

.amount-range-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #c6cdd5;

  /deep/ .el-input {
    input {
      border: 0;
    }
  }

  > * {
    flex: 1 1 auto;
  }

  .min-amount-wrapper {
    display: flex;
    align-items: center;

    .amount-input {
      flex: 1 1 auto;
    }

    .min-amount__icon {
      margin-left: 12px;
      margin-right: 10px;
      color: #32363b;
    }
  }

  .center {
    margin: 0 8px;
    flex: 0 0 auto;
    color: #32363b;
  }
}

.date-wrapper {
  /deep/ .el-date-editor {
    width: 100%;
  }
}

.value-wrapper {
  height: 22px;
  background: #ebf4fe;
  border-radius: 4px;
  line-height: 22px;
  margin: 0 16px;
  padding: 0 8px;
  color: #4097fd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  &.amount-range {
    .amount-icon {
      margin-right: 4px;
    }

    .amount-value {
      min-width: 20px;
      display: inline-block;
      text-align: center;
    }

    .amount-icon-center {
      margin: 0 4px;
    }
  }

  &.date-picker,
  &.date-time-picker {
    .center {
      margin: 0 4px;
    }
  }

  .select-text {
    margin-right: 4px;
  }
}
</style>
