<template>
  <div :id="shop.houseNumber" class="group-item" :class="{ isRow, isFood, isGuide, isActive }" @click="handleShop">
    <div class="logo-wrapper" :class="{ hasFood: isFood && shop.foodMaterialList.length }">
      <img loading="lazy" :src="config.sourceUrl + shop.logoUrl" alt="" class="shop-logo" />
    </div>
    <p class="name">
      <span class="shop-name">{{ switchLanguage(shop, 'shopName') }}</span>
      <span class="name-right" v-if="$route.path === '/guide'"> {{ shop.distance ? shop.distance + '米' : '' }}<img v-if="shop.dir" class="dir" :src="shop.dir" /> </span>
      <span class="name-right" v-else>{{ shop.floor }}</span>
    </p>
    <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
      <div v-if="isActive && !isRow" class="qrcode-wrapper">
        <QRCodeFromText
          class="qrcode"
          :size="120"
          :text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置&e=${shop.houseNumber}`"
        ></QRCodeFromText>
        <div class="qrcode-meta">扫码导航</div>
      </div>
    </Transition>
    <Teleport to="body">
      <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
        <div v-if="isActive && isRow" class="qrcode-modal" @click="deactivate">
          <div class="content" @click.stop="void 0">
            <div
              class="close"
              :style="{
                backgroundImage: `url(${theme.images.brandQrcodeClose}) `
              }"
              @click="deactivate"
            ></div>
            <QRCodeFromText
              class="qrcode"
              :size="135"
              :text="`${config.mobileNav}?s=${currentFloor.floorOrder}_${currentFloor.location}_屏幕的位置&e=${shop.houseNumber}`"
            ></QRCodeFromText>
            <div class="qrcode-meta">扫码导航</div>
          </div>
        </div>
      </Transition></Teleport
    >
  </div>
</template>

<script setup>
import QRCodeFromText from '@/components/QRCodeFromText/QRCodeFromText.vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'

const store = useStore()
const { currentFloor, config, theme } = storeToRefs(store)

const props = defineProps({
  shop: Object,
  config: Object,
  isRow: Boolean,
  isFood: Boolean,
  isGuide: Boolean,
  isActive: Boolean
})

const emits = defineEmits(['click'])
function handleShop() {
  emits('click', props.shop)
}
const deactivate = () => store.SET_SHOP(null)
</script>

<style lang="scss" scoped>
.group-item {
  width: 230px;
  height: 200px;
  background: var(--brand-background);
  border-radius: var(--global-radius, 8px);
  overflow: hidden;
  .logo-wrapper {
    width: 100%;
    height: 160px;
    padding: 20px 55px;
    background-color: #fff;
  }
  .shop-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 12px;
  }
  .shop-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: var(--brand-color, rgba(0, 0, 0, 0.8));
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .name-right {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    font-family: 'font_bold';
    color: var(--brand-metaColor, rgba(0, 0, 0, 0.4));
  }
  .dir {
    width: 20px;
    height: 20px;
    margin-left: 7px;
    background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
    border-radius: var(--guide-arrowRadius);
  }
  &.isRow {
    display: flex;
    width: 460px;
    height: 76px;
    padding-left: 12px;
    align-items: center;
    .logo-wrapper {
      width: 64px;
      height: 64px;
      flex: 0 0 64px;
      padding: 7px;
    }
    .name {
      flex: 1;
      padding: 0 24px;
    }
    .shop-name {
      font-weight: 700;
      font-size: 18px;
      line-height: 21px;
    }
    .name-right {
      font-weight: 500;
      font-size: 18px;
      line-height: 21px;
    }
    .dir {
      width: 32px;
      height: 32px;
      background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
      border-radius: var(--guide-arrowRadius);
    }
  }
  &.isFood {
    display: flex;
    flex-direction: column;
    width: 230px;
    height: 242px;
    background: var(--food-background);
    border-radius: var(--global-radius, 40px);
    align-items: center;
    .logo-wrapper {
      width: 180px;
      height: 180px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 200px;
      padding: 30px;
      &.hasFood {
        padding: 0;
      }
      .shop-logo {
        border-radius: 200px;
      }
    }
    .name {
      display: block;
      width: 100%;
    }
    .shop-name {
      display: block;
      margin-top: 12px;
      text-align: center;
    }
    .name-right {
      display: block;
      text-align: center;
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 700;
      font-size: 14px;
      line-height: 17px;
      color: var(--food-metaColor, --brand-mataColor, rgba(0, 0, 0, 0.6));
      margin-top: 6px;
    }
  }
  &.isActive {
    position: relative;

    .qrcode-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
    }
    .qrcode {
      height: 160px;
      background: #ffffff;
      border-radius: var(--global-radius, 8px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .qrcode-meta {
      font-weight: 700;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.8);
      text-align: center;
      line-height: 40px;
    }
    &.isFood {
      .qrcode-wrapper {
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .qrcode {
        height: 180px;
      }
      .qrcode-meta {
        width: 194px;
        height: 45px;
        background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
        border-radius: var(--global-radius, 100px);
        line-height: 45px;
        margin-top: 9px;
      }
    }
    &.isRow {
      background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
    }
  }
}
.qrcode-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  .content {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 391px;
    bottom: 427px;
    background: var(--brand-qrcodeBg, rgba(255, 255, 255, 0.8));
    box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(7px);
    border-radius: var(--global-radius, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    .close {
      position: absolute;
      width: 56px;
      height: 56px;
      right: 8px;
      top: 8px;
      background: center / cover no-repeat;
    }
    .qrcode {
      width: 150px;
      height: 150px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 60px;
    }
    .qrcode-meta {
      font-weight: 700;
      font-size: 20px;
      line-height: 23px;
      text-align: center;
      margin-top: 27px;
      color: var(--brand-qrcodeTextColor, rgba(0, 0, 0, 0.8));
    }
  }
}
@media (min-aspect-ratio: 1/1) {
  .group-item {
    &.isGuide {
      width: 190px;
      &.isActive {
        position: relative;
      }
    }
    &.isRow {
      width: 388px;
      left: auto;
      right: 105px;
      &.isActive {
        left: auto;
        position: static;
      }
    }
  }
  .qrcode-modal {
    .content {
      left: auto;
      right: 112px;
      bottom: 280px;
    }
  }
}
</style>
