<template>
  <div
    class="category-filter"
    id="categoryFilter">
    <div class="flex between title-wrap">
      <div class="">Advanced Filter</div>

      <div
        class="btn-reset"
        @click="resetFilter">
        RESET
      </div>
    </div>
    <el-collapse
      v-model="activeNames"
      class="metal-content-left-item">
      <el-collapse-item
        title="Minimum Order Quantity"
        name="1">
        <div class="slider-wrap">
          <custom-el-slider
            :marks="marks"
            v-model="quantity"
            :step="1"
            :min="1"
            :max="1000"
            @input="handleInputQuantity1"
            @change="handleChangeQuantity">
          </custom-el-slider>
        </div>
        <div class="flex center qty-input-wrap">
          <div class="el-input--mini">
            <input
              class="el-input__inner"
              v-model="quantity2"
              @change="handleInputQuantity2"
              type="number"
              :step="1"
              :min="1"
              :max="10000" />
          </div>
        </div>
      </el-collapse-item>

      <el-collapse-item
        title="Price (GBP)"
        name="2">
        <div class="slider-wrap price">
          <el-slider
            ref="sliderRef" 
            :marks="marksForPrice"
            v-model="priceRange"
            range
            :step="0.01"
            :min="priceRange1"
            :max="priceRange2"
            @input="$forceUpdate()"
            @change="handleInputPrice">
          </el-slider>
        </div>
        <div class="flex between price-input-wrap">
          <div class="flex column">
            <div class="price-input-label">Price Min</div>
            <div class="flex">
              <div class="dollar-sign">£</div>
              <el-input
                style="width: 120px"
                v-model.number="priceRange[0]"
                type="number"
                :step="1"
                :min="priceRange1"
                :max="priceRange2"
                @change="handleInputPrice"
                size="mini"></el-input>
            </div>
          </div>
          <div class="horizontal-line"></div>
          <div class="flex column">
            <div class="price-input-label">Price Max</div>
            <el-input
              style="width: 120px"
              v-model.number="priceRange[1]"
              type="number"
              :step="1"
              :min="priceRange1"
              :max="priceRange2"
              @change="handleInputPrice"
              size="small"></el-input>
          </div>
        </div>
        <!-- </div> -->
      </el-collapse-item>
      <el-collapse-item
        title="Lead Time"
        v-show="leadTimeList.length && !$route.query.lead_time"
        name="3">
        <div class="metal-content-left-item-content flex column stretch">
          <el-radio-group
            v-model="checkedLeadtime"
            @input="handleChangeLeadtime">
            <el-radio
              v-for="item in leadTimeList"
              :label="item.id"
              :key="item.id">
              <div class="flex between">
                <div>{{ item.name }}</div>
                <div>({{ item.count }})</div>
              </div>
            </el-radio>
          </el-radio-group>
        </div>
      </el-collapse-item>
      <el-collapse-item
        title="Colour"
        v-show="colourList.length"
        name="4">
        <el-checkbox-group v-model="checkedColor">
          <div
            class="metal-content-left-item-content colour flex column stretch"
            :class="{ 'hide-some': !showallOfColor && colourList.length > 5 }">
            <el-checkbox
              @change="handleChangeColor"
              v-for="item in colourList"
              :label="item.id"
              :key="item.id">
              <div class="flex between">
                <div class="flex">
                  <div class="img-wrap">
                    <div
                      class="background"
                      :style="{
                        backgroundImage: `url(${
                          item.img && !$mediaRegExp.test(item.img)
                            ? $OSS_PREFIX + item.img
                            : item.img
                        })`,
                      }"></div>
                  </div>
                  <div>{{ item.name }}</div>
                </div>
                <div>({{ item.count }})</div>
              </div>
            </el-checkbox>
          </div>
          <div class="flex between">
            <div
              @click="showallOfColor = !showallOfColor"
              v-if="colourList.length > 5"
              class="show-more">
              {{ showallOfColor ? 'SHOW LESS' : 'SHOW MORE' }}
            </div>
            <div v-else>&nbsp;</div>
            <div
              class="show-more"
              @click="clearColor">
              CLEAR
            </div>
          </div>
        </el-checkbox-group>
      </el-collapse-item>
      <el-collapse-item
        title="Decoration"
        name="5"
        v-show="decorationList.length">
        <el-checkbox-group
          v-model="checkedDecoraiton"
          @change="handleChangeDecoration">
          <div
            class="metal-content-left-item-content flex column stretch"
            :class="{
              'hide-some': !showallOfDecoration && decorationList.length > 5,
            }">
            <el-checkbox
              v-for="item in decorationList"
              :label="item.id"
              :key="item.id">
              <div class="flex between">
                <div>{{ item.name }}</div>
                <div>({{ item.count }})</div>
              </div></el-checkbox
            >
          </div>
          <div
            @click="showallOfDecoration = !showallOfDecoration"
            v-show="decorationList.length > 5"
            class="show-more">
            {{ showallOfDecoration ? 'SHOW LESS' : 'SHOW MORE' }}
            SHOW MORE
          </div>
        </el-checkbox-group>
      </el-collapse-item>
      <el-collapse-item
        title="Features"
        v-show="featureList.length"
        name="6">
        <el-checkbox-group
          v-model="checkedFeature"
          @change="handleChangeFeature">
          <div
            class="metal-content-left-item-content flex column stretch"
            :class="{
              'hide-some': !showallOfFeature && featureList.length > 5,
            }">
            <el-checkbox
              v-for="item in featureList"
              :label="item.id"
              :key="item.id">
              <div class="flex between">
                <div>{{ item.name }}</div>
                <div>({{ item.count }})</div>
              </div>
            </el-checkbox>
          </div>
          <div class="flex between">
            <div
              @click="showallOfFeature = !showallOfFeature"
              v-if="featureList.length > 5"
              class="show-more">
              {{ showallOfFeature ? 'SHOW LESS' : 'SHOW MORE' }}
            </div>
            <div v-else>&nbsp;</div>
            <div
              class="show-more"
              @click="clearFeature">
              CLEAR
            </div>
          </div>
        </el-checkbox-group>
      </el-collapse-item>
      <el-collapse-item
        title="Collections"
        v-show="collectionsList.length"
        name="7">
        <el-checkbox-group
          v-model="checkedCollection"
          @change="handleChangeCollection">
          <div
            class="metal-content-left-item-content flex column stretch"
            :class="{
              'hide-some': !showallOfCollection && collectionsList.length > 5,
            }">
            <el-checkbox
              v-for="(item, i) in collectionsList"
              :label="item.name"
              :key="i">
              <div class="flex between">
                <div>{{ item.name }}</div>
                <div>({{ item.count }})</div>
              </div>
            </el-checkbox>
          </div>
          <div class="flex between">
            <div
              @click="showallOfCollection = !showallOfCollection"
              v-if="collectionsList.length > 5"
              class="show-more">
              {{ showallOfCollection ? 'SHOW LESS' : 'SHOW MORE' }}
            </div>
            <div v-else>&nbsp;</div>
            <div
              class="show-more"
              @click="clearCollection">
              CLEAR
            </div>
          </div>
        </el-checkbox-group>
      </el-collapse-item>
      <el-collapse-item
        title="Compliance Resource"
        v-show="complianceList.length"
        name="8">
        <el-checkbox-group
          v-model="checkedCompliance"
          @change="handleChangeCompliance">
          <div
            class="metal-content-left-item-content flex column stretch"
            :class="{
              'hide-some': !showallOfCompliance && complianceList.length > 5,
            }">
            <el-checkbox
              v-for="item in complianceList"
              :label="item.id"
              :key="item.id">
              <div class="flex between">
                <div>{{ item.name }}</div>
                <div>({{ item.count }})</div>
              </div>
            </el-checkbox>
          </div>
          <div class="flex between">
            <div
              @click="showallOfCompliance = !showallOfCompliance"
              v-if="complianceList.length > 5"
              class="show-more">
              {{ showallOfCompliance ? 'SHOW LESS' : 'SHOW MORE' }}
            </div>
            <div v-else>&nbsp;</div>
            <div
              class="show-more"
              @click="clearCompliance">
              CLEAR
            </div>
          </div>
        </el-checkbox-group>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: 'CategoryFilter',
  components: {},
  props: {
    leadTimeList: {
      type: Array,
      default: () => {
        return []
      },
    },
    colourList: {
      type: Array,
      default: () => {
        return []
      },
    },
    collectionsList: {
      type: Array,
      default: () => {
        return []
      },
    },
    featureList: {
      type: Array,
      default: () => {
        return []
      },
    },
    decorationList: {
      type: Array,
      default: () => {
        return []
      },
    },
    complianceList: {
      type: Array,
      default: () => {
        return []
      },
    },
    priceRange1: {
      type: Number,
      default: 1,
    },
    priceRange2: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8'],
      priceList: [],
      marks: {
        1: '1',
        25: '25',
        50: '50',
        100: '100',
        250: '250',
        500: '500',
        1000: '1000+',
      },
      // 滑块绑定的是quantity, 输入框绑定的是quantity2. 要将两者分开, 且拖动滑块时同时更新quantity2, 需要中间变量用来判断当前是哪个组件在变更值
      quantityFlag: 1,
      quantity: 1000,
      quantity2: 1000,
      priceRange: [1, 10000],
      marksForPrice: {},
      checkedLeadtime: '',
      checkedColor: [],
      checkedDecoraiton: [],
      checkedFeature: [],
      checkedCollection: [],
      checkedCompliance: [],
      showallOfColor: false,
      showallOfFeature: false,
      showallOfCollection: false,
      showallOfDecoration: false,
      showallOfCompliance: false,
    }
  },
  computed: {},
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        if (to.query.lead_time) {
          const temp = Number(to.query.lead_time)
          if ([1, 2, 3, 4, 5, 6, 7].includes(temp)) {
            this.checkedLeadtime = typeof temp === 'number' ? temp : ''
          }
        } else {
          this.checkedLeadtime = ''
        }

        if (to.query.qty) {
          const qty = Number(to.query.qty)
          if (typeof qty === 'number') {
            this.quantity = qty
            this.quantity2 = qty
          }
        } else {
          this.quantity = 1000
          this.quantity2 = 1000
        }
        if (to.query.feature) {
          this.checkedFeature = [Number(to.query.feature)]
        } else {
          this.checkedFeature = []
        }
      },
    },
    priceRange1() {
      this.priceRange[0] = this.priceRange1
    },
    priceRange2() {
      this.priceRange[1] = this.priceRange2
    },
  },
  created() {},
  beforeMount() {},
  mounted() {},
  updated() {},
  beforeDestroy() {},
  methods: {
    // 滑块组件实时变动时的响应逻辑
    handleInputQuantity1(value) {
      if (this.quantityFlag === 1) {
        this.quantity2 = value
      }
    },
    // 滑块组件变动后(鼠标按键放起)的响应逻辑
    handleChangeQuantity(value) {
      if (value) {
        this.quantity = value
      } else {
        this.quantity = 1
      }
      this.$emit('handleChangeQuantity', value)
    },
    handleInputQuantity2(e) {
      this.quantityFlag = 2
      if (!e) {
        this.quantity = 1
      } else {
        this.quantity = Number(this.quantity2)
        this.quantity2 = Number(this.quantity2)
      }
      this.$nextTick(() => {
        this.$emit('handleChangeQuantity', Number(e.target?.value || 1))
      })

      setTimeout(() => {
        this.quantityFlag = 1
      }, 2000)
    },
    handleChangePrice(value) {
      this.$emit('handleChangePrice', this.priceRange)
    },
    handleInputPrice(isInput=true) {
      if (this.priceRange[1] > 10000) {
        const min = this.priceRange[0]
        this.priceRange = [min, 10000]
      }

      if (this.priceRange[0] > this.priceRange[1]) {
        this.priceRange[1] = this.priceRange[0]
      }
      // 输入框数值触发el-slider视图
      if(isInput){
        this.$refs.sliderRef._data.firstValue = this.priceRange[0];
        this.$refs.sliderRef._data.secondValue = this.priceRange[1];
      }

      this.handleChangePrice();
    },
    handleChangeLeadtime() {
      this.$emit('handleChangeLeadtime', this.checkedLeadtime)
    },
    handleChangeFeature() {
      this.$emit('handleChangeFeature', this.checkedFeature)
    },
    clearFeature() {
      this.checkedFeature = []
      this.handleChangeFeature()
    },
    handleChangeColor() {
      this.$emit('handleChangeColor', this.checkedColor)
    },
    clearColor() {
      this.checkedColor = []
      this.handleChangeColor()
    },
    handleChangeCollection() {
      this.$emit('handleChangeCollection', this.checkedCollection)
    },
    clearCollection() {
      this.checkedCollection = []
      this.handleChangeCollection()
    },
    handleChangeCompliance() {
      this.$emit('handleChangeCompliance', this.checkedCompliance)
    },
    clearCompliance() {
      this.checkedCompliance = []
      this.handleChangeCompliance()
    },
    handleChangeDecoration() {
      this.$emit('handleChangeDecoration', this.checkedDecoraiton)
    },
    resetFilter() {
      if (!this.$route.query.qty) {
        this.quantity = 1000
        this.quantity2 = 1000
      }
      this.priceRange = [this.priceRange1, this.priceRange2]
      this.checkedCollection = []
      this.checkedCompliance = []
      this.checkedLeadtime = ''
      this.checkedColor = []
      this.checkedDecoraiton = []
      this.checkedFeature = []
      this.$emit('reset')
    },
  },
}
</script>
<style lang="scss">
.category-filter {
  box-sizing: border-box;
  $mainColor: #00213b;
  .el-checkbox {
    display: flex;
    align-content: flex-start; // 侧轴方向 行与行的对齐
    align-items: center;
    color: $mainColor;
    margin-right: 0;
    position: relative;
    margin-bottom: 16px;
    .el-checkbox__input {
      margin-top: 1px;
    }
    .el-checkbox__label {
      width: calc(100% - 15px);
      font-size: 16px;
    }
  }
  .el-checkbox__input.is-checked {
    .el-checkbox__inner {
      background-color: $mainColor;
      border-color: $mainColor;
    }
    & + .el-checkbox__label {
      color: $mainColor;
    }
  }
  .el-input__inner {
    border: 1px solid #e7e7e7;
    height: 48px;
    line-height: 48px;
    min-width: 120px;
    font-size: 14px;
    text-align: center;
    padding:0;
  }
  .el-slider {
    margin-top: 0;
    .el-slider__button {
      border: 1px solid transparent;
      // border-color: #003465;
      width: 16px;
      height: 16px;
      border-radius: 6px;
      box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.25),
        0px 0px 2px 0px rgba(0, 0, 0, 0.25);
    }
    .el-slider__bar {
      background-color: #003465;
    }
  }
  .el-collapse {
    border-top: none;
  }
  .slider-wrap {
    .el-slider__marks-text {
      font-family: ProximaNova-Regular, sans-serif;
      font-weight: 400;
      // font-size: 18px;
      color: $mainColor;
      word-break: normal;
    }
    &.price {
      .el-slider__marks-text:nth-of-type(2) {
        right: -18% !important;
        position: absolute;
      }
    }
  }
  .el-collapse-item__header {
    padding-left: 0;
    padding-right: 0;
    border-bottom: none;
    font-size: 20px;
    height: 52px;
    line-height: 52px;
    font-family: ProximaNova-Semibold;
    font-weight: bold;
    color: $mainColor;
    border-bottom: 1px solid #e7e7e7;
    font-family: ProximaNova-Semibold, sans-serif;
    color: $mainColor;
    transition: none;
  }
  .el-collapse-item {
    &.is-active {
      .el-collapse-item__header {
        transition: none;
        border-bottom: none;
      }
    }
    &:nth-of-type(2).is-active {
      .el-collapse-item__header {
        padding-top: 22px;
      }
    }
  }
  .el-collapse-item__content {
  }
  .el-raido-group {
    display: flex;
    align-content: flex-start; // 侧轴方向 行与行的对齐
    align-items: stretch;
    flex-direction: column;
  }
  .el-radio {
    width: 100%;
    display: flex;
    align-content: flex-start; // 侧轴方向 行与行的对齐
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
    &.is-checked {
      .el-radio__inner {
        background-color: $mainColor;
        border-color: $mainColor;
      }
      .el-radio__label {
        color: $mainColor;
        font-weight: bold;
      }
    }
  }
  .el-radio__label {
    font-size: 16px;
    line-height: 19px;
    flex: auto;
    color: $mainColor;
  }
}
</style>
<style lang="scss" scoped>
$mainColor: #00213b;
#categoryFilter {
  overflow: hidden;
  margin-top: 15px;
  .title-wrap {
    font-family: ProximaNova-Semibold, sans-serif;
    font-size: 26px;
    padding: 0;
    font-weight: 600;
    color: $mainColor;
    margin-bottom: 10px;
    cursor: default;
    .btn-reset {
      color: #003465;
      font-size: 18px;
      font-weight: 400;
      cursor: pointer;
      &:hover {
        color: #ef4135;
      }
    }
  }
  .slider-wrap {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 8px;
  }
  .img-wrap {
    width: 52px;
    height: 14px;
    margin-right: 6px;
    position: relative;
    border: 1px solid #eee;
    .background {
      background-size: 120%;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
    }
  }
  .metal-content-left-item {
    // border: 1px solid #c4cbd9;
    background: #ffffff;
    .metal-content-left-item-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        width: 180px;
        height: 46px;
        font-size: 18px;
        font-family: Lincoln - Proxima Nova;
        font-weight: 600;
        color: $mainColor;
        line-height: 46px;
      }
      div {
        display: inline-block;
        border-bottom: 2px solid;
        border-right: 2px solid;
        width: 10px;
        height: 10px;
        border-color: $mainColor;
        transform: rotate(-135deg);
      }
    }
    .metal-content-left-item-content {
      margin-top: 10px;
      transition: all 1s linear;
      height: unset;
      &.hide-some {
        height: 175px;
        overflow: hidden;
      }
    }
    .show-more {
      cursor: pointer;
      margin-top: 4px;
      font-size: 18px;
      font-family: Proxima Nova, sans-serif;
      font-weight: bold;
      text-decoration: underline;
      color: #003465;
    }
  }
  input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
    &:hover {
      -moz-appearance: textfield;
      appearance: textfield;
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
}
.qty-input-wrap {
  margin-top: 32px;
}
.price-input-wrap {
  margin-top: 14px;
  padding: 0 8px;
  .horizontal-line {
    height: 1px;
    width: 16px;
    margin-top: 30px;
    background-color: $mainColor;
  }
  .dollar-sign {
    margin-right: 4px;
    font-size: 18px;
    font-weight: bold;
    color: $mainColor;
  }
  .price-input-label {
    font-weight: bold;
    font-size: 18px;
  }
}
</style>
