<template>
  <div class="bg-F5">
    <div class="container">
      <div class="x-title">
        {{ $t("page.views.shops.details.honor.qualificationHonor") }}
      </div>
      <div class="content" v-if="curr">
        <img :src="`${$basePath}${curr.img}`" />
        <div class="desc">
          <span>{{ curr.title }}</span>
          <p>
            {{ curr.des }}
          </p>
        </div>
      </div>
      <div class="control">
        <img class="left" src="@assets/left.png" alt="" @click="prev" />
        <el-carousel
          :autoplay="false"
          arrow="never"
          indicator-position="none"
          ref="carousel"
          class="marquee"
        >
          <el-carousel-item
            v-for="(imgs, index) in list"
            :key="`carousel-list-${index}`"
          >
            <img
              v-for="({ img }, i) in imgs"
              :key="`imgs-${index}-${i}`"
              :class="{ curr: currIndex === `${index}-${i}` }"
              :src="`${$basePath}${img}`"
              @click="currIndex = `${index}-${i}`"
            />
          </el-carousel-item>
        </el-carousel>

        <img class="right" src="@assets/right.png" alt="" @click="next" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import { ElCarousel } from "element-ui/types/carousel";
import { chunk } from "lodash";
@Component
export default class extends Vue {
  private pIndex = 0;
  private index = 0;
  @Prop() private shopInfo!: IAny;
  get list() {
    return chunk(this.shopInfo.companyHonours, 5);
  }
  get currIndex() {
    return `${this.pIndex}-${this.index}`;
  }
  set currIndex(val) {
    [this.pIndex, this.index] = val.split("-").map(x => Number(x));
  }
  get curr() {
    if (!this.list.length) return null;
    return this.list[this.pIndex][this.index];
  }
  prev() {
    if (this.index) return this.index--;
    if (!this.pIndex) return;
    this.pIndex--;
    this.index = 4;
    (this.$refs.carousel as ElCarousel).prev();
  }
  next() {
    if (this.index < this.list[this.pIndex].length - 1) return this.index++;
    if (!(this.pIndex < this.list.length - 1)) return;
    this.pIndex++;
    this.index = 0;
    (this.$refs.carousel as ElCarousel).next();
  }
}
</script>
<style lang="scss" scoped>
.container {
  padding: 30px 0 80px 0;
  .x-title {
    margin-bottom: 40px;
  }
  .content {
    margin-left: 156px;
    margin-bottom: 60px;
    img {
      width: 324px;
      height: 484px;
      margin-right: 60px;
    }
    .desc {
      display: inline-block;
      margin-top: 80px;
      width: 473px;
      vertical-align: top;
      span {
        font-size: 18px;
        color: rgb(51, 51, 51);
        margin-bottom: 30px;
        display: inline-block;
      }
      p {
        font-size: 14px;
        color: rgb(102, 102, 102);
        line-height: 2;
      }
    }
  }
  .control {
    height: 258px;
    position: relative;
    > img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      z-index: 3;
      &.left {
        left: 0;
      }
      &.right {
        right: 0;
      }
    }
    .marquee {
      padding-left: 56px;
      display: inline-block;
      box-sizing: border-box;
      height: 100%;
      width: 100%;

      img {
        display: inline-block;
        width: 188px;
        height: 100%;
        margin: 0 10px;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        box-sizing: border-box;
        cursor: pointer;
        &.curr {
          border: 1px solid #fd5522;
        }
      }
    }
  }
}
</style>
