<template>
  <div class="pass-shop-wrapper animate__animated animate__fadeInDown animate__faster">
    <div class="left">
      <div class="dir">
        <img :class="direction.class" class="animate__infinite animate__animated" :src="direction.icon" alt="" />
        <p class="content">
          <i>{{ direction.text }}</i>
          请您面向屏幕
        </p>
      </div>
      <div class="qrcode-wrapper">
        <QRCodeFromText
          :text="`https://cdn.1000my.cn/qrcode/5aae5c33-cb8e-4737-b243-ed735bce68e2/?e=${shop.houseNumber}&s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置`"
          :size="88"
        ></QRCodeFromText>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <template v-if="currentFloor.floorOrder > shop.floorOrder">
          <div class="floor-box">
            <div class="meta">终点</div>
            <h1 class="floor">{{ shop.floor }}</h1>
          </div>
          <div class="thumb-arrow">
            <img src="../../../assets/images/nav/floor_up.svg" class="thumb-icon animate__animated animate__fadeInRight animate__infinite" alt="" />
          </div>
          <div class="floor-box start">
            <div class="meta">起点</div>
            <h1 class="floor">{{ currentFloor.floor }}</h1>
          </div>
        </template>
        <template v-else>
          <div class="floor-box start">
            <div class="meta">起点</div>
            <h1 class="floor">{{ currentFloor.floor }}</h1>
          </div>
          <div class="thumb-arrow">
            <img src="../../../assets/images/nav/floor_down.svg" class="thumb-icon animate__animated animate__fadeInLeft animate__infinite" alt="" />
          </div>
          <div class="floor-box">
            <div class="meta">终点</div>
            <h1 class="floor">{{ shop.floor }}</h1>
          </div>
        </template>
      </div>
      <div class="flex">
        <ScrollView scrollbar :list="list" class="middle-scroll">
          <div class="pass-content">
            <div class="pass-item">
              <p class="pass">您在{{ currentFloor.floor }}，{{ direction.text }}</p>
            </div>

            <div class="pass-item" v-for="item of list" :key="item.shopCode">
              <p class="pass">{{ switchLanguage(item, 'shopName') }}</p>
            </div>

            <div class="pass-item active">
              <p class="pass">{{ switchLanguage(shop, 'shopName') }}</p>
            </div>
          </div>
        </ScrollView>
      </div>
    </div>
  </div>
</template>

<script setup>
import ScrollView from '@/base/ScrollView/ScrollView.vue'
import QRCodeFromText from '@/components/QRCodeFromText/QRCodeFromText.vue'

defineProps({
  shop: {
    type: Object,
    default: () => ({})
  },
  config: {
    type: Object,
    default: () => ({})
  },
  currentFloor: {
    type: Object,
    default: () => ({})
  },
  direction: {
    type: Object,
    default: () => ({})
  },
  list: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="scss" scoped>
.pass-shop-wrapper {
  display: flex;
  align-items: stretch;
  position: absolute;
  width: 100vw;
  height: 688px;
  left: 0;
  bottom: 0;

  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 360px;
    background: rgba(255, 255, 255, 0.4);
    .dir {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 320px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      .content {
        padding-top: 25px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: rgba(0, 0, 0, 0.6);
        text-align: center;
        i {
          display: block;
          font-weight: 700;
          font-size: 34px;
          line-height: 50px;
          color: rgba(0, 0, 0, 0.8);
          margin-bottom: 6px;
        }
      }
    }
    .qrcode-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 180px;
      height: 192px;
      background: center / cover no-repeat url(./qrcodeBg.png);
      margin-top: 29px;
      padding-top: 39px;
    }
    .floor {
      font-weight: 700;

      font-size: 48px;
      line-height: 56px;
      color: rgba(0, 0, 0, 0.6);
      padding-right: 8px;
    }
    .icon-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .icon {
      width: 18px;
      height: 18px;
      margin-bottom: 5px;
    }
    .text {
      font-weight: 700;
      font-size: 12px;
      line-height: 14px;

      color: rgba(0, 0, 0, 0.4);
    }
    .thumb-arrow {
      display: flex;
      align-items: center;
      overflow: hidden;
      height: 94px;
      margin-left: 40px;
    }
    .group {
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      .icon-box {
        width: 36px;
        height: 36px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 6px;
        margin-right: 12px;
        padding: 9px;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .group-right {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .tip-name {
          font-size: 12px;
          transform: scale(0.83);
          color: rgba(0, 0, 0, 0.4);
          padding-bottom: 6px;
        }
        .name {
          font-weight: 700;

          font-size: 12px;
          line-height: 14px;
          color: rgba(0, 0, 0, 0.6);
        }
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    background: rgba(255, 255, 255, 0.6);
    .flex {
      display: flex;
      flex: 1;
      align-items: stretch;
    }
    .top {
      display: flex;
      height: 152px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      padding: 0 68px;
      flex: 0 0 152px;
      align-items: center;
      justify-content: space-between;
      .floor-box {
        width: 231px;
        height: 96px;
        background: #ffffff;
        border-radius: 8px;
        padding-top: 17px;
        padding-left: 26px;
        border: 2px solid rgba(0, 0, 0, 0.1);
        .floor {
          font-weight: 700;
          font-size: 32px;
          line-height: 38px;
          color: rgba(0, 0, 0, 0.8);
        }

        .meta {
          font-weight: 700;
          font-size: 14px;
          line-height: 18px;
          color: rgba(0, 0, 0, 0.6);
          margin-bottom: 6px;
        }
        &.start {
          border: 2px solid rgba(67, 90, 205, 1);
        }
      }
    }
    .middle-scroll {
      position: relative;
      flex: 1;
      overflow: hidden;
      height: 415px;
      padding-top: 21px;
      :deep(.bscroll-vertical-scrollbar) {
        top: 102px !important;
        width: 48px !important;
        background: center / 6px 250px no-repeat url(@/assets/images/scrollBar.png);
        border-radius: 6px;
        opacity: 1 !important;
        height: 250px !important;
        &::after {
          position: absolute;
          content: '';
          left: 0;

          top: 120px;
          margin: auto;
          width: 48px;
          height: 61px;
          background: center / cover no-repeat url(@/assets/images/scrollHand.png);
        }
        .bscroll-indicator {
          height: 95px !important;
          width: 6px !important;
          left: 0;
          right: 0;
          margin: auto;
          background: #ffffff !important;
          border-radius: 6px !important;
          border: none !important;
        }
      }
      .pass-content {
        position: relative;
        padding-left: 68px;
        &::before {
          content: '';
          position: absolute;
          left: 34px;
          height: 100%;
          border-left: 1px dashed rgba(0, 0, 0, 0.1);
          transform: translateY(-25px);
        }
      }
      .pass-item {
        position: relative;
        display: flex;
        align-items: center;
        height: 50px;
        width: max-content;
        border-radius: 4px;
        padding: 0 16px;
        background: #ffffff;
        margin-bottom: 12px;
        &::after {
          content: '';
          position: absolute;
          left: -37px;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          border: 1px solid rgba(0, 0, 0, 0.4);
          background: #ffffff;
        }
        &.active {
          &::after {
            background: #516dd8;
            border: 1px solid #516dd8;
          }
        }
      }
      .pass {
        position: relative;
        z-index: 4;
        font-weight: 700;
        font-size: 20px;

        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
}
</style>
