<!-- 海外 -->
<template>
  <view class="vipContainer">
    <!-- 精选推荐 -->
    <view class="recommendedContainer">
      <!-- <view class="need-pay" v-if="isPay">
        <view class="need-pay-text"
          >订阅「{{ columnName }}」，解锁全部资讯</view
        >
        <view class="need-pay-btn">
          <button class="btn" @click="handleShowPay">立即订阅</button>
        </view>
      </view> -->

      <view v-if="bannerList.length != 0">
        <Swiper :data="props.bannerList" @handleSwiperJump="handleSwiperJump" />
      </view>

      <view class="recommendedTitle" v-if="hotNewsList.length != 0">
        <view>编辑精选</view>
      </view>
      <view class="recommendedList" v-if="hotNewsList.length != 0">
        <u-scroll-list :indicator="false">
          <view class="recommendedList-item" v-for="(item, index) in hotNewsList" :key="item.id">
            <RecommendedItem :data="{ item }" @handleClick="doDetail" :noPayShow="true" />
          </view>
        </u-scroll-list>
      </view>
    </view>

    <!-- 文章列表 -->
    <view class="articleListModule">
      <view class="articleListHeader">
        <view class="headerLeft">
          <view class="articleListTitle">全部</view>
        </view>
      </view>
      <!-- 文章列表区域 -->
      <view class="listModule">
        <List :data="newsList" @onClick="doDetail" />
      </view>
    </view>

    <!-- 订阅 支付 -->
    <Pay :show="payShow" @onClick="handleClose" @handleSub="handleClickPay" />
    <!-- 登录弹框 -->
    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose" @handlePopupSuccessCallback="handlePopupSuccessCallback" />
  </view>
</template>

<script setup lang="ts">
import { computed, ref, toRefs, watch } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import Swiper from "@/components/swiperCom/index.vue";
import RecommendedItem from "./recommendedItem.vue";
import List from "@/components/articleList/index.vue";
import Pay from "@/components/pay/index.vue";
import LoginPopup from "@/components/loginPopup/index.vue";
import { Session } from "@/utils/storage";
import { unlockColumn } from "@/api";

const emit = defineEmits(["onChange"]);
const props = defineProps({
  hotNewsList: {
    type: Array,
    default: () => [],
  },
  newsList: {
    type: Array,
    default: () => [],
  },
  columnName: {
    type: String,
    default: () => "",
  },
  columnId: {
    type: Number,
    default: () => 0,
  },
  bannerList: {
    type: Array,
    default: () => [],
  },
});

const { newsList } = toRefs(props);
const payShow = ref(false);

// login 弹框是否显示
const LoginShow = ref(false);
const isPay = ref(true);

watch(
  () => props.newsList,
  (newValue, oldValue) => {
    const token = Session.get("token");
    isPay.value = !token ? true : newValue[0]?.needpay ? newValue[0]?.needpay : false;
  }
);

// 点击关闭订阅弹框
const handleClose = () => {
  payShow.value = false;
};

// 点击显示订阅弹框
const handleShowPay = () => {
  if (!Session.get("token")) {
    LoginShow.value = true;
  } else {
    payShow.value = true;
  }
};

// 点击订阅
const handleClickPay = async () => {
  if (!Session.get("token")) {
    LoginShow.value = true;
  } else {
    const res = await unlockColumn({
      columnId: props.columnId,
    });
    payShow.value = false;
    if (res.code === 200) {
      emit("onChange");
    }
  }
};

// 跳转到新闻详情
const doDetail = (item: any) => {
  // console.log("🚀 ~ handleClickNews ~ item:", item);
  // if (!Session.get("token")) {
  //   LoginShow.value = true;
  // } else if (item.needpay) {
  //   payShow.value = true;
  // } else {
  //   uni.navigateTo({
  //     url: `/pages/detail/index?id=${item.id}&type=${props.columnId}`,
  //   });
  // }

  if (!Session.get("token")) {
    LoginShow.value = true;
  } else {
    uni.navigateTo({
      url: `/pages/detail/index?id=${item.id}`,
    });
  }
};

// 点击轮播图进入详情
const handleSwiperJump = (item: any) => {
  // if (item.needpay) {
  //   // 需要先弹出订阅的弹框
  //   handleShowPay(item);
  // } else {
  //   uni.navigateTo({
  //     url: `/pages/detail/index?id=${item.id}&type=${item.type}`,
  //   });
  // }

  if (!Session.get("token")) {
    LoginShow.value = true;
  } else {
    uni.navigateTo({
      url: `/pages/detail/index?id=${item.id}`,
    });
  }
};

// 关闭弹框
const handlePopupClose = () => {
  LoginShow.value = false;
};
// 登录成功回调
const handlePopupSuccessCallback = () => {
  LoginShow.value = false;
  emit("onChange");
};
</script>

<style lang="scss" scoped>
.vipContainer {
  padding-top: 256rpx;
  // min-height: 100vh;
  background-color: #f5f5f5;

  .vipHeader {
    height: 168rpx;
    background-image: url(@/assets/images/headerBg.png);
    background-size: cover;
    box-sizing: border-box;
    padding: 24rpx 32rpx 6rpx 40rpx;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    position: sticky;
    top: 0;
    z-index: 9999;
    .search {
      width: 100vw;
      display: flex;
      height: 60rpx;
      gap: 20rpx;
      .logo {
        width: 124rpx;
        height: 72rpx;
      }
      .search_icon {
        width: 80rpx;
        height: 60rpx;
        margin-top: 3rpx;
      }

      .search_input {
        background: rgba(118, 118, 128, 0.12);
        height: 70%;
        border-radius: 20rpx;
        padding: 0 20rpx;
        color: #fff;
      }
    }

    .tabsContainer {
      width: 100vw;
      height: 48rpx;
      // border: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #fff;
      .tabItem {
        box-sizing: border-box;
        padding-bottom: 9rpx;
        display: flex;
        align-items: center;
        &.active {
          position: relative;
          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: calc(50% - 22rpx);
            display: block;
            width: 44rpx;
            height: 6rpx;
            background: url("@/assets/images/icon_dot.png") no-repeat center;
            background-size: 100% 100%;
          }
        }
      }
    }
  }

  .menuContainer {
    background-color: #fff;
    box-sizing: border-box;
    padding: 42rpx 0;

    .gridImg {
      width: 96rpx;
      height: 96rpx;
      border-radius: 16rpx;
      background-color: #fff0d5;
      margin-bottom: 15rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 68rpx;
        height: 68rpx;
      }
    }
    .gridText {
      font-size: 12px;
      color: #333;
    }
  }

  .recommendedContainer {
    background-color: #fff;
    box-sizing: border-box;
    padding: 30rpx 42rpx;

    .recommendedTitle {
      // background-color: red;
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      .recommendedIcon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 12rpx;
      }
    }

    .recommendedList {
      box-sizing: border-box;

      .recommendedList-item {
        padding: 30rpx 0 16rpx;
      }
    }
  }

  .tabsListContainer {
    padding: 12rpx 30rpx;
    background-color: #fff;
  }
}

// 新闻
.articleListModule {
  box-sizing: border-box;
  // padding: 20rpx 30rpx 0 30rpx;
  background-color: #fff;
  margin-top: 24rpx;
  .articleListHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 20rpx 30rpx 0 30rpx;
    // padding-bottom: 21rpx;
    .headerLeft {
      display: flex;
      align-items: center;
      .articleListTitle {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
      .articleListTabs {
        margin-left: 12rpx;
        .articleListTabsItem {
          ::v-deep {
            .u-tabs__wrapper__nav__item {
              padding: 0 15rpx;
            }
            .u-tabs__wrapper__nav__item__text {
              font-size: 24rpx;
            }
          }
          // font-size: 60rpx !important;
          // background-color: red;
        }
      }
    }
    .select {
      ::v-deep {
        .u-checkbox {
          .u-checkbox__icon-wrap {
            width: 24rpx !important;
            height: 24rpx !important;
          }
          uni-text {
            span {
              font-size: 24rpx;
            }
          }
        }
      }
    }
  }
}

.u-grid-item {
  &:nth-child(1) {
    .gridImg {
      background-color: #d5f7ff;
    }
  }
  &:nth-child(2) {
    .gridImg {
      background-color: #fff0c2;
    }
  }
  &:nth-child(3) {
    .gridImg {
      background-color: #e2eeff;

      .img {
        width: 62rpx;
        height: 88rpx;
      }
    }
  }
  &:nth-child(4) {
    .gridImg {
      background-color: #d5f7ff;
    }
  }
  &:nth-child(5) {
    .gridImg {
      background-color: #fff0c2;
    }
  }
}

.sub-tabs-box {
  background-color: #ffffff;
  border-bottom: 2rpx solid #f5f5f5;
}

.need-pay {
  // margin-bottom: 24rpx;
  padding: 40rpx 0;
  border-radius: 8rpx;
  background: linear-gradient(90deg, rgba(255, 250, 240, 1) 0%, rgba(254, 238, 210, 1) 100%);

  .need-pay-text {
    font-size: 28rpx;
    color: #8f212a;
    text-align: center;
  }
  .need-pay-btn {
    margin-top: 24rpx;
    .btn {
      width: 448rpx;
      height: 76rpx;
      line-height: 76rpx;
      font-size: 32rpx;
      color: #fff;
      border-radius: 20rpx;
      background: linear-gradient(90deg, rgba(252, 92, 105, 1) 0%, rgba(231, 48, 63, 1) 100%);
    }
  }
}
</style>
