<template>
  <view class="main">
    <view class="title" :class="{ mohu: !isLogin }">{{ props.data.title }}</view>
    <view class="author">
      <view class="name" :class="{ mohu: !isLogin }">
        <text class="text">来源:</text>
        <text class="text" v-if="intoType === 'etf'">中国证券报</text>
        <text class="text" v-else>{{ props.data.tag ? props.data.tag : "中国证券报" }}</text>
      </view>

      <!-- <view class="name" v-if="props.data.editor">
        <text class="text">编辑:</text>
        <text class="text">{{ props.data.editor }}</text>
      </view> -->
      <view class="time" :class="{ mohu: !isLogin }">{{ props.data.publishTime }}</view>
    </view>

    <!-- 两个标签 start -->
    <view class="r_r_tags" :class="{ mohu: !isLogin }">
      <view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 95vw">
        <view class="r_tags">
          <view
            class="tag"
            style="background-color: #fff9ec; color: #ffb100"
            v-for="(item, index) in props.data.conceptLabels"
            :key="index"
            >{{ item }}</view
          >
        </view>
      </view>

      <view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 100vw">
        <view class="r_tags">
          <view
            class="tag"
            style="background-color: #f5f8fe; color: #007aff"
            v-for="(item, index) in props.data.industryLabels"
            :key="index"
            >{{ item }}</view
          >
        </view>
      </view>
    </view>
    <!-- 两个标签 end -->

    <!-- 摘要 -->
    <view class="desc" v-if="props.data.summary" :class="{ mohu: !isLogin }">
      <!-- <view class="bill_icon"></view> -->
      <image :src="zhaiyaoImg" mode="scaleToFill" class="zhaiyao_icon" />
      <view>
        {{ props.data.summary }}
      </view>
    </view>

    <view class="thumbnail" v-if="props.data.picture">
      <image :src="props.data.picture" mode="widthFix" />
    </view>

    <view style="padding: 35rpx" :class="{ mohu: !isLogin }">
      <text
        class="articleDes"
        :class="props?.data?.needpay && 'needpay'"
        style="white-space: pre-wrap"
        v-html="props.data.content"
      >
      </text>
    </view>

    <!-- <view
      class="articleDes"
      :class="props?.data?.needpay && 'needpay'"
      v-html="props.data.content"
    >
    </view> -->

    <view class="author" style="justify-content: flex-start; margin-top: -30rpx">
      <view class="name" v-if="props.data.editor">
        <text class="text">编辑:</text>
        <text class="text">{{ props.data.editor }}</text>
      </view>

      <view class="name" style="margin-left: 40rpx" v-if="props.data.secondReviewer">
        <text class="text">二校:</text>
        <text class="text">{{ props.data.secondReviewer }}</text>
      </view>
    </view>

    <view class="r_etf" style="margin-top: 80rpx" v-if="intoType == 'etf'">
      <text class="etf_title">AI关联标的</text>
      <view class="etfs">
        <view v-for="(item, index) in data.etfs" class="etf_item" :key="index" @click="goEtfDetail(item)">
          {{ item.name }}
        </view>
      </view>
    </view>

    <LoginPopup
      :show="LoginShow"
      @handlePopupClose="handlePopupClose"
      @handlePopupSuccessCallback="handlePopupSuccessCallback"
      @handlePopupErrorCallback="handlePopupErrorCallback"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLaunch, onShow, onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import articleMock from "@/mock/article.js";
import LoginPopup from "@/components/loginPopup/index.vue";
import { Session } from "@/utils/storage";
import zhaiyaoImg from "../../assets/zixun/zhaiyao_icon.png";

const isLogin = ref(Session.get("token"));
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});
const tagList1 = ref([
  {
    name: "医药生物-生物制药",
  },
  {
    name: "医药生物-化学制药",
  },
  {
    name: "医药生物-医疗服务",
  },
]);
const LoginShow = ref(false);
// 关闭弹框
const handlePopupClose = () => {
  LoginShow.value = false;
  isLogin.value = Session.get("token");
};
// 登录成功回调
const handlePopupSuccessCallback = () => {
  isLogin.value = Session.get("token");
  console.log("🚀 ~ handlePopupSuccessCallback ~  isLogin.value:", isLogin.value);
};

const tagList2 = ref([
  {
    name: "医药生物-生物制药",
  },
  {
    name: "医药生物-化学制药",
  },
  {
    name: "医药生物-医疗服务",
  },
]);

const show = ref(false);
const type = ref("");
const handleClick = (value: any) => {
  show.value = value;
};

const intoType = ref(null);
onLoad((option) => {
  type.value = option?.type || "list";
  intoType.value = option?.intoType || null;

  if (!isLogin.value) {
    LoginShow.value = true;
  }
});

function goEtfDetail(item) {
  console.log("🚀 ~ goEtfDetail ~ item:", item);
  uni.navigateTo({
    url: `/pages/realtimeInfo/indexEtfInfo?name=${item.name}&code=${item.code}`,
  });
}

const handleSub = () => {
  if (type.value === "list") {
    let mainItemId = uni.getStorageSync("mainItem");
    let arr = uni.getStorageSync("list");
    let subArr = arr.filter((item) => {
      if (item.id == mainItemId.id) {
        item.needpay = false;
      }
      return item;
    });
    uni.setStorageSync("list", subArr);
  } else if (type.value === "vipList") {
    let mainItemId = uni.getStorageSync("vipItem");
    // console.log("mainItemId", mainItemId)
    let arr = uni.getStorageSync("vipList");
    let subArr = arr.filter((item) => {
      if (item.id == mainItemId.id) {
        item.needpay = false;
      }
      return item;
    });
    uni.setStorageSync("vipList", subArr);
  } else if (type.value === "newsList") {
    let mainItemId = uni.getStorageSync("newsItem");
    let arr = uni.getStorageSync("newsList");
    let subArr = arr.filter((item) => {
      if (item.id == mainItemId.id) {
        item.needpay = false;
      }
      return item;
    });
    uni.setStorageSync("newsList", subArr);
  } else if (type.value === "handpickList") {
    let mainItemId = uni.getStorageSync("handpickItem");
    let arr = uni.getStorageSync("handpickList");
    let subArr = arr.filter((item) => {
      if (item.id == mainItemId.id) {
        item.needpay = true;
      }
      return item;
    });
    uni.setStorageSync("handpickList", subArr);
  }
  props.data.needpay = false;

  show.value = false;
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  background-color: #fff;
  padding-bottom: 120rpx;

  .title {
    padding-top: 16rpx;
    padding: 0 40rpx;
    // font-size: 40rpx;
    font-size: 20px;
    color: #333;
    // font-weight: 700;
    white-space: normal;
    /* 允许换行 */
    overflow-wrap: break-word;
    /* 在必要时单词内部断行 */
    font-family: "SourceHanSansCN-Medium";
  }

  .author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16rpx;
    padding: 0 40rpx;

    .text {
      // font-size: 26rpx;
      font-size: var(--h3-font-size);
      color: rgba(51, 51, 51, 0.6);
      margin-right: 12rpx;
    }

    .time {
      // font-size: 26rpx;
      font-size: var(--h3-font-size);
      color: rgba(51, 51, 51, 0.6);
    }
  }

  // 摘要
  .desc {
    padding: 12rpx;
    box-sizing: border-box;
    background-color: #f2f4fa;
    width: 700rpx;
    margin: 30rpx auto;
    color: #666666;
    // font-size: 28rpx;
    font-size: var(--h2-font-size);
    // text-indent: 0.5em;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    line-height: 40rpx;

    /* 在必要时单词内部断行 */
    .bill_icon {
      width: 28rpx;
      height: 28rpx;
      float: left;
      margin-right: 12rpx;
      margin-top: 6rpx;
      background-size: contain;
      background-image: url(@/static/icon_act_lt.png);
    }
  }

  .thumbnail {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
  }
}

.articleDes {
  // padding: 0 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  line-height: 50rpx;
  text-align: justify;
  white-space: pre-wrap;

  ::v-deep {
    p {
      margin: 30rpx 0;
      // font-size: 28rpx;
      font-size: var(--h2-font-size);
      color: #333;
      //text-indent: 2em;
      line-height: 48rpx;
      // white-space: normal;
      /* 允许换行 */
      overflow-wrap: break-word;
      /* 在必要时单词内部断行 */
    }

    img {
      width: 100%;
      margin-left: -2em;
      // margin: 0 auto;
    }
  }

  &.needpay {
    height: 730rpx;
    overflow: hidden;
  }
}

.r_r_tags {
  margin-left: 20rpx;
}

.r_tags {
  display: flex;
  gap: 10rpx;

  .tag {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #3f80fa;

    padding: 5rpx 20rpx;
    border-radius: 10rpx;

    white-space: nowrap;
  }
}

.mohu {
  filter: blur(4px);
}

.zhaiyao_icon {
  width: 72rpx;
  height: 51rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.r_etf {
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;

  .etfs {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-top: 20rpx;
  }

  .etf_title {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #222222;
    line-height: 42rpx;
    text-align: left;
    font-style: normal;
  }

  .etf_item {
    width: calc(50vw - 80rpx);
    height: 64rpx;
    background: #edf1f5;
    border-radius: 8rpx;

    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    line-height: 44rpx;
    text-align: left;
    font-style: normal;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rpx 20rpx;
  }
}
</style>
