<template>
  <transition mode="out-in">
    <div class="waterfall" v-if="tagclick.type == 'waterfall'">
      <div class="waterfallcon">
        <div class="wfheader">
          <img :src="require('@/assets/images/icon/top5.png')" alt="" />
          <ui-icon @click="emit('close')" type="close"></ui-icon>
        </div>
        <ul class="wfcon">
          <li @click.stop="gotoGoods(item)" v-for="(item, i) in tagclick.data.products" :key="i">
            <img v-if="i <= 2" :src="require(`@/assets/images/icon/${i + 1}.svg`)" alt="" />
            <span v-else>{{ i + 1 }}</span>
            <div class="wfavatar" :style="{ backgroundImage: `url(${item.pic})` }"></div>
            <div class="wfinfo">
              <p>{{ item.name }}</p>
              <p>{{ item.symbol }} {{ item.price }} | {{$t('common.view')}} ></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { onMounted, watch, defineEmits, computed, ref, nextTick, defineProps } from "vue";
import { useApp, getApp } from "@/app";
import { useStore } from "vuex";
import browser from "@/utils/browser";
import * as apis from "@/apis/index.js";


import { useI18n, getLocale } from '@/i18n'
const { t } = useI18n({ useScope: 'global' })

const store = useStore();

const tagclick = computed(() => store.getters["tag/tagClickType"]);
const isshoppingguide = computed(() => store.getters["shoppingguide"]);

const emit = defineEmits(["close"]);
const gotoGoods = (item) => {
  if (isshoppingguide.value) {
      return;
  }
  apis.burying_point({ type: 3, productId: item.id });
  browser.openLink(`/pages/item/item?productId=${item.id}`, `https://m.cdfmembers.com/shop/600667208/item?productId=${item.id}`,`/pages/item/item?productId=${item.id}`);
};
</script>

<style lang="scss" scoped>
.waterfall {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: 500px;
  z-index: 101;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  pointer-events: none;
  .waterfallcon {
    text-align: center;
    pointer-events: auto;
    width: 90%;
    padding: 10px 20px;
    margin-top: 20%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    .wfheader {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      > img {
        width: 80px;
      }
    }
    .wfcon {
      color: #fff;
      width: 100%;
      padding-left: 6%;
      max-height: 50vh;
      overflow-y: auto;
      > li {
        display: flex;
        align-items: center;
        margin: 16px 0;
        > img,
        > span {
          display: inline-block;
          width: 20px;
          flex-shrink: 0;
        }
        .wfavatar {
          width: 36px;
          height: 36px;
          background-size: cover;
          margin: 0 10px;
          background-color: #fff;
          border-radius: 4px;
          flex-shrink: 0;
        }
        .wfinfo {
          text-align: left;
          width: calc(90% - 60px);
          > p {
            font-size: 16px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            display: inline-block;
            width: 100%;
            &:last-of-type {
              color: rgba(255, 255, 255, 0.8);
              font-size: 12px;
              margin-top: 6px;
            }
          }
        }
      }
    }
  }
}
</style>
