<template>
  <transition mode="out-in" appear>
    <div class="goodlist" v-show="tagclick.type == 'goodlist'">
      <div>
        <div id="goodlist">
          <ul>
            <li>
              <div class="head-close">
                <ui-icon @click.stop="close" type="state_f"></ui-icon>
              </div>
              <viewimg
                v-if="tagImages"
                :list="tagImages"
                :keyid="`viewimg_1`"
                :index="tagImageIndex"
                @change="(index) => imageSwitch(index)"
              />
              <div class="info">
                <p>{{ tagclick.data.title }}</p>
              </div>
              <div class="content" v-html="tagclick.data.content"></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </transition>
</template>

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

// get_product_info
const store = useStore();
const role = computed(() => store.getters["rtc/role"]);
const socket = computed(() => store.getters["rtc/socket"]);
const isshoppingguide = computed(() => store.getters["shoppingguide"]);

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

const tagImages = computed(() => {
  if (
    tagclick.value &&
    tagclick.value.data &&
    tagclick.value.data.type == "image" &&
    tagclick.value.data.media["image"]
  ) {
    return tagclick.value.data.media["image"];
  }
  return null;
});

const emit = defineEmits(["close"]);

const current = ref(0);

const imageSwitch = (index) => {
  if (isshoppingguide.value) {
    if (role.value == "leader") {
      store.commit("tag/setTagImageIndex", index);
      socket.value &&
        socket.value.emit("action", {
          type: "tag-image-index",
          data: {
            index: index,
          },
        });
    }
  }
};

const close = () => {
  emit("close");
   store.commit("tag/setTagImageIndex", null);
};
</script>

<style lang="scss">
.goodlist {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.2);
  > div {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 500px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .head-close {
    position: absolute;
    right: -21px;
    top: -21px;
    z-index: 10000;
    > i {
      color: #fff;
      font-size: 20px;
    }
  }
  #goodlist {
    width: 100%;
    padding-right: 2px;
    position: relative;
    > ul {
      display: flex;
      justify-content: center;
      > li {
        width: 76%;
        border-radius: 2px;
        position: relative;
        font-size: 0;
        background: #fff;
        padding-bottom: 14px;

        .info,
        .content {
          color: #131d34;
          padding: 14px 20px;
          p {
            font-size: 16px;
            width: 100%;
            line-height: 1.5;
            word-break: break-all;
            font-weight: bold;
          }
        }
        .content {
          padding-top: 0;
          p {
            line-height: 20px;
            color: #444;
            font-weight: normal;
          }
        }
      }
    }
  }
}
</style>
