<template>
  <div class="detail">
    <div class="other" v-if="type === '5'">
      {{ '个人话术' }}<span>已使用:{{ form?.pv || 0 }}次</span>
    </div>
    <div class="time">{{ form?.addTime }}</div>
    <div class="title">{{ form?.title }}</div>
    <div class="text" v-if="type === '5'">
      {{ form?.content }}
    </div>
    <div class="content" v-if="type !== '5'">
      <div v-html="form?.content" v-if="type === '4'" />
      <div class="file-content" v-if="type === '3'">
        <van-image :src="getFileImg(form?.waters as string).img" />
      </div>
      <div class="img-content" v-if="type === '1'">
        <div class="item" v-for="(img, i) in form?.waters" :key="i">
          <van-image
            fit="contain"
            width="100%"
            height="100%"
            :src="img"
            @click.native="shopImagePreviews(i)"
          />
        </div>
      </div>
      <div class="video-tontent" v-if="type === '2'">
        <video
          id="myVideoRef"
          ref="myVideoRef"
          class="video-js vjs-default-skin"
          controls
          autoplay
          x5-video-player-fullscreen="true"
          x5-video-player-type="h5"
          controlslist="nodownload"
        >
          <source :src="(form?.waters as string)" />
        </video>
      </div>
    </div>
    <p class="foot-mark">随便看看</p>
    <p class="foot-mark">{{ form?.shopName }}</p>
    <p class="foot-mark">{{ form?.keywords }}</p>
    <div class="data-btn">
      <data-button
        @handle-emit="handleClick"
        backgroundColor="#FFF"
        color="#FF5B00"
        label="查看文件"
        v-if="type === '3'"
      />
      <data-button
        @handle-emit="useCopyText(form?.content!)"
        backgroundColor="#FFF"
        color="#FF5B00"
        label="复制文本"
        v-if="type === '5'"
      />
      <data-button
        @handle-emit="useWeChatShare({ type: form?.type!, id: form?.id!, imageUrl: imageLink, spId: serviceProviderId as number, isShowToast: true })"
        backgroundColor="#FFF"
        color="#FF5B00"
        label="分享"
        v-if="type !== '5'"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import useCopyText from "@/Hooks/useCopyText";
import useWeChatShare from "@/Hooks/useWeChatShare";
import { getArchiveFormDetails } from "@/api/context/context";
import { DArchiveResultData } from "@/types/api/context.type";
import { ChangeTabEmit } from "@/types/views/database.type";
import { showImagePreview } from "vant";
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import getFileImg from "@/Hooks/useFileImage";
import { useUserInfoState } from "@/store/user/user";
import { myDecrypt } from "@/util/authStorage";
const route = useRoute();
const router = useRouter();
const { userId, serviceProviderId } = useUserInfoState();
const form = ref<DArchiveResultData>();
const id = computed<string>(() => String(route.query.id));
const type = computed<ChangeTabEmit>(() => route.query.t as ChangeTabEmit);
const handleClick = () => {
  router.push("/preview?t=" + type.value + "&id=" + id.value + "&isSp=" + 1);
};
const imageLink = computed<string>(() => {
  if (form.value!.type !== '1') return form.value!.image as string
  else return getFileImg(form.value!.waters![0]).img as string
})
const getArchiveForm = async () => {
  const { data } = await getArchiveFormDetails({
    id: id.value,
    userId: userId as string,
  });
  const DcreptoList = { ...data, ...{ waters: myDecrypt(data!.waters! as string[]) } };
  form.value = DcreptoList;
  console.log(data);
};
const shopImagePreviews = (index: number) => {
  console.log(index);
  showImagePreview({
    images: form.value?.waters! as string[],
    startPosition: index,
  });
};

onMounted(() => {
  getArchiveForm();
});
</script>

<style scoped lang="scss">
.detail {
  padding: 24px 15px;
  .other {
    font-size: 15px;
    color: $basicColor-content;
    margin-bottom: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    span {
      background: #f5f5f5;
      color: #666;
      padding: 5px;
      margin-left: 10px;
      font-size: $basicFS-foot;
      border-radius: 2px;
    }
  }
  .time {
    font-size: $basicFS;
    color: $basicColor-content;
    margin-bottom: 12px;
    font-weight: bold;
  }
  .title {
    font-size: $basicFS;
    color: $basicColor-content;
    margin-bottom: 8px;
  }
  .text {
    font-size: $basicFS;
    color: $basicColor-foot;
    line-height: 21px;
    margin-bottom: 24px;
  }
  .content {
    margin-bottom: 18px;
    .img-content {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 12px;
      .item {
        border: 1px solid #e1e1e1;
        width: 106px;
        height: 106px;
      }
    }
    .video-tontent {
      width: 100%;
      height: 210px;
      video {
        height: 100%;
        width: 100%;
      }
    }
    .file-content {
      height: 128px;
      width: 100%;
      @include display-flex-center;
      :deep() {
        .van-image {
          width: 86px;
          height: 86px;
        }
      }
    }
  }
  .foot-mark {
    color: $basicColor-foot;
    font-size: $basicFS-foot;
    margin-bottom: 9px;
  }
  .data-btn {
    margin-top: 35px;
    padding: 0 13px;
  }
}
:deep() {
  .van-button {
    border: 1px solid $basicColor;
    border-radius: 1px;
    margin-bottom: 12px;
  }
}
</style>
