<!--
 * @Author: zhangyu
 * @Date: 2020-05-08 16:06:03
 * @Info: 
 * @LastEditTime: 2020-05-12 19:31:47
 -->
<template>
  <div class="saga-brand-box" ref="brandBox">
    <div class="saga-brand-header">
      <el-dropdown @command="handleCommand" style="line-height: 40px;">
        <span class="el-dropdown-link">
          {{sort}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(val, key) in sortMap" :key="key" :command="key">{{val}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-input
        placeholder="请输入品牌关键字（Enter检索）"
        style="float: right;width: 240px;"
        @keyup.enter.native="ChangeKeyWord(keyWord)"
        v-model="keyWord">
        <i slot="prefix" class="el-input__icon el-icon-search" style="cursor:pointer;" @click="ChangeKeyWord(keyWord)"></i>
      </el-input>
    </div>
    <div v-for="(list, letter) in brandList" :key="letter" v-show="list.length" class="saga-brand-group">
      <h3 class="saga-brand-letter">{{letter}}</h3>
      <ul class="saga-brand-list">
        <li class="saga-brand-item" :class="{ 'brand-new': item.new, item1200: boxWidth == 1200, item980: boxWidth == 980}" v-for="item in list" :key="item.id" :title="item.zhName">
          <div class="saga-brand-name">
            <p class="saga-brand-zhName">{{item.zhName}}</p>
            <p class="saga-brand-enName" :title="item.enName">{{item.enName}}</p>
          </div>
          <div class="saga-brand-logo">
            <el-image style="width: 52px; height: 52px" :src="item.logoUrl" fit="fill">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </li>
      </ul>
    </div>
    <ul class="saga-letter-ul" :style="`transform:translate(${boxWidth+4}px,0)`" @click.stop="handleClickLetter">
      <li
        v-for="(list, letter, index) in brandList" 
        v-show="list.length"
        :key="`nav-${letter}`"
        :data-index="index"
        class="saga-letter-li"
        :class="{ 'active': index == stepActive}"
        :title="letter">
        {{letter}}
      </li>
    </ul>
  </div>
</template>

<script>
import brandList from "@/data/brandList"
export default {
  components: {},
  created() {
    this.brandList = brandList
  },
  mounted() {
    this.boxWidth = this.$refs.brandBox.clientWidth
    let listener = document.querySelector('.page-content-scroll')
    listener.addEventListener('scroll', this.onScroll)
  },
  data() {
    return {
      sortMap: {
        zh: "中文排序",
        en: "英文排序",
      },
      sort: "中文排序",
      brandList: {},
      boxWidth: 0,
      stepActive: 0, //锚点
      keyWord: "", //检索关键字
    }
  },
  methods: {
    handleCommand(command) {// 切换排序方式
      this.sort = this.sortMap[command]
    },
    ChangeKeyWord(keyWord) {// 品牌检索
      debugger
    },
    handleClickLetter(e) {
      let index = e.target.dataset.index
      if (index) {
        this.stepActive = index
        let jump = document.querySelectorAll('.saga-brand-group'),
          total = jump[index].offsetTop - 127,// 获取需要滚动的距离
          listener = document.querySelector('.page-content-scroll'),
          distance = listener.scrollTop,
          step = total / 50;
        if (total > distance) {
          smoothDown()
        } else {
          let newTotal = distance - total + 100
          step = newTotal / 50
          smoothUp()
        }

        function smoothDown() {
          if (distance < total) {
            distance += step
            listener.scrollTop = distance
            setTimeout(smoothDown, 10)
          } else {
            listener.scrollTop = total
          }
        }

        function smoothUp() {
          if (distance > total) {
            distance -= step
            listener.scrollTop = distance
            setTimeout(smoothUp, 10)
          } else {
            listener.scrollTop = total
          }
        }
      }
    },
    onScroll() {
      let scrolled = document.querySelector('.page-content-scroll').scrollTop
      let jump = document.querySelectorAll('.saga-brand-group')
      for (let i = 0; i < jump.length; i++) {
        if ((jump[i].offsetTop - 127) >= scrolled) {
          this.stepActive = i
          break
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .saga-brand-box {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(255,255,255,1);
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    .saga-brand-header {
      height: 40px;
      margin-bottom: 16px;
      border-bottom: 1px solid #EFF0F1;
    }
    .saga-brand-group {
      .saga-brand-letter {
        margin-bottom: 16px;
        padding-left: 13px;
        height: 34px;
        line-height: 45px;
        font-size: 20px;
        border-bottom: 1px solid #EFF0F1;
      }
      .saga-brand-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .saga-brand-item {
          width:224px;
          height:102px;
          padding: 16px 12px;
          margin-right: 12px;
          margin-bottom: 16px;
          cursor: pointer;
          box-sizing: border-box;
          border-radius:4px;
          border:1px solid #E4E5E7;
          transition: all 0.1s linear 0.01s;
          .saga-brand-name {
            display: inline-block;
            width: 133px;
            height: 100%;
            margin-right: 5px;
            font-size: 14px;
            line-height: 22px;
            .saga-brand-zhName {
              height: 44px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
            .saga-brand-enName {
              color: #8D9399;
              margin-top: 4px;
              height: 22px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .saga-brand-logo {
            width: 52px;
            height: 52px;
            display: inline-block;
            vertical-align: top;
            /deep/ .image-slot {
              font-size: 30px;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: 100%;
              background: #f5f7fa;
              color: #909399;
            }
          }
        }
        .saga-brand-item.brand-new {
          border:1px solid rgba(58,141,222,0.6);
        }
        .saga-brand-item:hover {
          box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
          transform: translate(0,-5px);
        }
        .item1200 {
          width:224px;
        }
        .item980 {
          width:228px;
        }
        .item1200:nth-child(5n) {
          margin-right: 0;
        }
        .item980:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
    .saga-letter-ul {
      position: fixed;
      top: 196px;
      .saga-letter-li {
        width:20px;
        height:20px;
        margin-bottom: 2px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        cursor: pointer;
        color: #8D9399;
        background: #EEEEEE;
      }
      .saga-letter-li.active {
        color: #3A8DDE;
        background: #D1E3F4;
      }
      .saga-letter-li:hover {
        color: #3A8DDE;
        background: #D1E3F4;
      }
    }
  }
  /deep/ .el-dropdown-link {
    cursor: pointer;
    color: #1F2429;
  }
</style>