<template>
  <view class="skill-detail-page">
    
    <custom-navbar 
      title="技能集市" 
      backgroundColor="#ffffff" 
      titleColor="#333" 
      borderBottom="none">
    </custom-navbar>

    <view class="mock-switch" @click="toggleMockData">
      <text>{{ useMockData ? '关闭模拟数据' : '开启模拟数据' }}</text>
    </view>

    <view class="video-section" v-if="article.videoSrc">
      <view class="video-wrapper">
        
        <video 
          v-if="!tipShow"
          id="customVideo"
          class="main-video"
          :src="article.videoSrc"
          :poster="article.poster"
          :controls="showNativeControls"
          :show-center-play-btn="false"
          :muted="isMuted"
          object-fit="cover"
          @timeupdate="onTimeUpdate"
          @loadedmetadata="onLoadedMetaData"
          @ended="onEnded"
          @play="onPlay"
          @pause="onPause"
          @fullscreenchange="onFullScreenChange"
        >
          <cover-image 
            v-if="!isPlaying && !showNativeControls" 
            class="center-play-icon" 
            src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bb720bb0-4ada-49f6-9ce5-38abfd613d5d.png" 
            @click.stop="togglePlay"
          ></cover-image>

          <cover-view class="custom-control-bar" v-if="!showNativeControls">
            <cover-image class="bar-bg" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ce7f28f8-470d-4f5b-9c7e-ff2bf8635226.png"></cover-image>
            
            <cover-view class="bar-content">
              <cover-image v-if="isPlaying" class="ctrl-icon" :src="iconPause" @click.stop="togglePlay"></cover-image>
              <cover-image v-if="!isPlaying" class="ctrl-icon" :src="iconPlay" @click.stop="togglePlay"></cover-image>
              
              <cover-view class="time-text">{{ formatTime(currentTime) }}</cover-view>
              
              <cover-view class="slider-track">
                <cover-view class="slider-bg"></cover-view>
                <cover-view class="slider-active" :style="activeStyle"></cover-view>
                <cover-view class="slider-thumb" :style="thumbStyle"></cover-view>
              </cover-view>
              
              <cover-view class="time-text">{{ formatTime(duration) }}</cover-view>
              
              <cover-image v-if="!isMuted" class="ctrl-icon mute-icon" :src="iconSoundOn" @click.stop="toggleMute"></cover-image>
              <cover-image v-if="isMuted" class="ctrl-icon mute-icon" :src="iconMute" @click.stop="toggleMute"></cover-image>
              
              <cover-image class="ctrl-icon fullscreen-icon" :src="iconFullscreen" @click.stop="toggleFullScreen"></cover-image>
            </cover-view>
          </cover-view>
        </video>
        
        <image 
          v-else 
          class="main-video fallback-poster" 
          :src="article.poster || article.videoSrc" 
          mode="aspectFill"
        ></image>
      </view>
    </view>

    <view class="article-header" v-if="article.title">
      <view class="title">{{ article.title }}</view>
      <view class="meta-row">
        <view class="author-info" @click="goToAuthorMarket">
          <image class="avatar" :src="article.authorAvatar" mode="aspectFill"></image>
          <text class="author-name">{{ article.authorName }}</text>
          <text class="date">{{ article.date }}</text>
        </view>
        
        <view class="favorite-btn" @click="toggleFavorite">
          <image 
            class="star-icon" 
            :src="isFavorite ? filledStarUrl : emptyStarUrl"
            />
          <text :class="{ 'active-fav': isFavorite }">{{ isFavorite ? '已收藏' : '收藏' }}</text>
        </view>
      </view>
    </view>

    <view class="article-content-wrapper">
      <view class="article-content" v-if="article.htmlContent">
        <rich-text :nodes="formattedHtmlContent"></rich-text>
      </view>
      <view class="empty-content" v-else>
        <text class="empty-text">暂无图文介绍</text>
      </view>
    </view>

    <view class="recommend-section" v-if="recommendList.length > 0">
      <view class="section-header">
        <text class="section-title">相关推荐</text>
        <view class="refresh-btn" @click="refreshList">
          <image class="refresh-icon" :class="{'is-rotating': isRefreshing}" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f2152145-df2a-49ab-87f5-f66b3207d0b0.png"></image>
          <text>换一批</text>
        </view>
      </view>
      
      <view class="list-container">
        <skill-card 
          v-for="(item, index) in recommendList" 
          :key="index" 
          :item="item"
        ></skill-card>
      </view>
    </view>

    <tipsPopup2 :show="tipShow" @closePopup="closePopup" sureText="确认" @okBtn="okBtn">
      {{ tipsText }}
    </tipsPopup2>

  </view>
</template>

<script>
import request from "@/utils/request";
import SkillCard from "@/pages/home/components/skill-card.vue";
import tipsPopup2 from "@/components/tips-popup/tips-popup2"; 

export default {
  components: {
    SkillCard,
    tipsPopup2
  },
  data() {
    return {
      useMockData: false,
      
      articleId: null,
      isFavorite: false,
      emptyStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/53378402-5456-4a80-b2ec-7c18d43d970e.png',
      filledStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/10461305-6bf8-4016-ae76-3415e055ec63.png',
      isRefreshing: false,

      isLogin: false,
      tipShow: false,
      tipsText: "",
      tipType: "",

      videoContext: null,
      isPlaying: false,
      isMuted: false,
      
      showNativeControls: false, 
      
      currentTime: 0,
      duration: 0,
      sliderValue: 0,
      
      iconPlay: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/88ca4fe3-645c-48a9-abda-1f9b45714970.png', 
      iconPause: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cf9d6dd6-e9df-4c46-bafa-e1a72f7ddbcd.png', 
      iconSoundOn: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9f13a630-7efd-4c61-b6fe-b6b282e28e42.png',
      iconMute: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/80f856c1-3d66-4b11-b21a-8eb6a3272a3c.png',
      iconFullscreen: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4286ef33-6849-4851-8866-4230d2523a33.png',
      
      article: {},
      recommendList: []
    }
  },
  computed: {
    formattedHtmlContent() {
      if (!this.article.htmlContent) return '';
      let html = this.article.htmlContent;
      html = html.replace(/<img/gi, '<img style="max-width:100%; height:auto; display:block; border-radius:10px; margin: 20rpx 0;"');
      html = html.replace(/<p/gi, '<p style="margin-bottom: 24rpx; line-height: 40rpx;"');
      return html;
    },
    activeStyle() {
      return `width: ${this.sliderValue}%;`;
    },
    thumbStyle() {
      return `left: ${this.sliderValue}%;`;
    }
  },
  onLoad(options) {
    if (options && options.id) {
      this.articleId = parseInt(options.id, 10);
    } else {
      this.articleId = 1; 
    }
    this.getPageData();
  },
  onShow() {
    this.isLogin = uni.getStorageSync("accessToken") ? true : false;
  },
  methods: {
    // 点击跳回集市专属页面（兼容官方和品牌方）
    goToAuthorMarket() {
      const isOfficial = this.article.linkType === 1 ? '1' : '0';
      const linkId = this.article.linkId || '';
      const name = encodeURIComponent(this.article.authorName || '');
      const avatar = encodeURIComponent(this.article.authorAvatar || '');
      const count = this.article.authorVideoCount || 0;

      uni.navigateTo({
        url: `/pages/jingxuan/selected-skills?showAuthor=1&isOfficial=${isOfficial}&linkId=${linkId}&authorName=${name}&authorAvatar=${avatar}&videoCount=${count}` 
      });
    },

    getVideoContext() {
      if (!this.videoContext) {
        this.videoContext = uni.createVideoContext('customVideo', this);
      }
      return this.videoContext;
    },

    closePopup() {
      this.tipShow = false;
    },
    okBtn() {
      if (this.tipType == "login") {
        uni.navigateTo({
          url: "/pages/blogPopup/blogPopup", 
        });
      }
      this.tipShow = false; 
    },

    formatTime(sec) {
      if (!sec) return '00:00';
      sec = Math.round(sec);
      let m = Math.floor(sec / 60);
      let s = sec % 60;
      return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
    },
    onLoadedMetaData(e) {
      this.duration = e.detail.duration;
    },
    onTimeUpdate(e) {
      if (e.detail.duration && this.duration === 0) {
        this.duration = e.detail.duration;
      }
      this.currentTime = e.detail.currentTime;
      if (this.duration > 0) {
        this.sliderValue = Number(((this.currentTime / this.duration) * 100).toFixed(2));
      }
    },
    onEnded() {
      this.isPlaying = false;
      this.currentTime = 0;
      this.sliderValue = 0;
      if (this.showNativeControls) {
        const ctx = this.getVideoContext();
        if (ctx) ctx.exitFullScreen();
      }
    },
    onPlay() { this.isPlaying = true; },
    onPause() { this.isPlaying = false; },
    
    onFullScreenChange(e) {
      const isFull = e.detail.fullScreen;
      if (!isFull) {
        this.showNativeControls = false;
      } else {
        this.showNativeControls = true;
      }
    },
    
    togglePlay() {
      const ctx = this.getVideoContext();
      if (!ctx) return;
      if (this.isPlaying) {
        ctx.pause();
      } else {
        ctx.play();
      }
    },
    toggleMute() {
      this.isMuted = !this.isMuted;
    },
    
    toggleFullScreen() {
      const ctx = this.getVideoContext();
      if (!ctx) return;
      this.showNativeControls = true;
      this.$nextTick(() => {
        ctx.requestFullScreen({ direction: 90 });
      });
    },

    toggleMockData() {
      this.useMockData = !this.useMockData;
      uni.showToast({ title: this.useMockData ? 'Mock已开启' : 'Mock已关闭', icon: 'none' });
      this.getPageData();
    },

    getPageData() {
      if (this.useMockData) {
        this.injectMockData();
        return;
      }
      uni.showLoading({ title: '加载中...' });
      request.post("/sj/skill/details", { 
        id: this.articleId 
      }).then((res) => {
        if (res.code == 200 && res.data) {
          const data = res.data;
          this.article = {
            title: data.name || '暂无标题', 
            // 【预留接口字段解析】：这里需要后端配合返回以下字段，如果没有的话目前会使用默认值
            linkType: data.link_type || 1,        // 1=官方 2=品牌
            linkId: data.link_id || 0,
            authorName: data.author_name || '美融融平台', 
            authorAvatar: data.author_avatar || 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bbe832bf-aae6-4579-b3cc-246d252488c3',
            authorVideoCount: data.link_publish_num || 0, // 关联者发布数

            date: data.create_time ? data.create_time.substring(0, 10).replace(/-/g, '.') : '', 
            videoSrc: data.video || '',
            poster: data.cover_img || '',
            htmlContent: data.detail || ''
          };
          this.isFavorite = data.collect_state === 1;
          this.loadMockRecommend(); 
        } else {
          uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' });
        }
      }).catch((err) => {
        console.error('获取技能集市详情异常', err);
      }).finally(() => {
        uni.hideLoading();
      });
    },

    toggleFavorite() {
      if (!this.isLogin) {
        if(this.isPlaying) {
          this.getVideoContext().pause();
        }
        this.tipsText = "您现在还未登录，是否确定前往登录？";
        this.tipShow = true;
        this.tipType = "login";
        return; 
      }

      if (this.useMockData) {
        this.isFavorite = !this.isFavorite;
        uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
        return;
      }
      
      uni.showLoading({ title: '处理中' });
      const targetState = this.isFavorite ? 2 : 1;
      
      request.post("/sj/skill/collect", { 
        id: this.articleId, 
        state: targetState 
      }).then(res => {
        if(res.code == 200) {
          this.isFavorite = !this.isFavorite;
          uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
        } else {
          uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
        }
      }).catch(err => {
        uni.showToast({ title: '网络异常', icon: 'none' });
      }).finally(() => {
        uni.hideLoading();
      });
    },
    
    refreshList() {
      if(this.isRefreshing) return;
      this.isRefreshing = true;
      uni.showLoading({ title: '加载中' });
      setTimeout(() => {
        this.recommendList = this.recommendList.sort(() => Math.random() - 0.5);
        this.isRefreshing = false;
        uni.hideLoading();
      }, 600);
    },

    injectMockData() {
      this.isFavorite = false;
      this.article = {
        title: '穿戴甲的操作视频扫码验券操作',
        
        // Mock作者相关数据(测试品牌跳转，将linkType改为2)
        linkType: 2,
        linkId: 101, 
        authorName: '蜜丝卡伦官方品牌',
        authorAvatar: 'https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80',
        authorVideoCount: 658,

        date: '2026.03.03',
        videoSrc: 'https://vjs.zencdn.net/v/oceans.mp4',
        poster: 'https://images.unsplash.com/photo-1610992015732-2449b76344bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
        htmlContent: `
          <p>最近，一向以平价、良心、宠粉著称的胖东来，突然因为一条毛巾被推上风口浪尖。</p>
          <p>4月下旬，抖音博主“惊梦人-”连续发布多条探店视频，称自己跑遍许昌5家胖东来门店，发现一边是几块钱的玻璃水、洗衣液等亲民好物，另一边却摆着标价249元的高端毛巾，价格形成反差。</p>
          <img src="https://dummyimage.com/800x400/ff6b81/ffffff.png&text=占位图" alt="会员权益"/>
        `
      };
      this.loadMockRecommend();
    },

    loadMockRecommend() {
      this.recommendList = [
        {
          id: 1,
          title: '穿戴甲的操作视频扫码验券操作教程...',
          coverSrc: 'https://images.unsplash.com/photo-1604654894610-df63bc536371?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          type: '平台课程',
          typeIcon: 'https://dummyimage.com/100x100/e6505f/fff.png&text=融',
          views: 836000,
          time: '7小时前'
        },
        {
          id: 2,
          title: '脸部按摩操作步骤详情',
          coverSrc: 'https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          type: '脸缘品牌',
          typeIcon: 'https://dummyimage.com/100x100/e6505f/fff.png&text=缘',
          views: 8334,
          time: '1天前'
        }
      ];
    }
  }
}
</script>

<style lang="scss" scoped>
.skill-detail-page {
  background-color: #ffffff;
  min-height: 100vh;
  padding-bottom: 60rpx;
  position: relative;
}

.mock-switch {
  position: fixed;
  right: 20rpx;
  top: 200rpx;
  background: #E5505F;
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  z-index: 999;
  box-shadow: 0 4rpx 10rpx rgba(229, 80, 95, 0.4);
}

.video-section {
  width: 100%;
  height: 420rpx;
  
  .video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    
    .main-video {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .fallback-poster {
      z-index: 1;
    }

    .center-play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80rpx;
      height: 80rpx;
      z-index: 99;
    }

    .custom-control-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70rpx;
      z-index: 99;
      
      .bar-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70rpx;
        z-index: 100;
      }
      
      .bar-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70rpx;
        z-index: 101; 
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 10rpx;
        box-sizing: border-box;
        
        .ctrl-icon {
          width: 25rpx;
          height: 30rpx;
          margin: 0 10rpx;
          flex-shrink: 0;
        }
        .mute-icon {
          width: 38rpx;
          height: 30rpx;
          flex-shrink: 0;
        }
        .fullscreen-icon {
          width: 30rpx;
          height: 30rpx;
          flex-shrink: 0;
        }
        
        .time-text {
          font-size: 22rpx;
          color: #ffffff;
          line-height: 70rpx;
        }
        
        .slider-track {
          flex: 1;
          height: 70rpx;
          margin: 0 20rpx;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          
          .slider-bg {
            position: absolute;
            top: 33rpx; 
            left: 0;
            width: 100%;
            height: 4rpx;
            background-color: rgba(255, 255, 255, 0.4);
          }
          
          .slider-active {
            position: absolute;
            top: 33rpx;
            left: 0;
            height: 4rpx;
            background-color: #FF4767;
          }
          
          .slider-thumb {
            position: absolute;
            top: 25rpx; 
            margin-left: -10rpx; 
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background-color: #FF4767;
          }
        }
      }
    }
  }
}

.article-header {
  padding: 30rpx 30rpx 20rpx;
  
  .title {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    line-height: 45rpx;
    margin-bottom: 24rpx;
  }
  
  .meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .author-info {
      display: flex;
      align-items: center;
      
      .avatar {
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        margin-right: 12rpx;
      }
      
      .author-name {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 33rpx;
        margin-right: 16rpx;
      }
      
      .date {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 33rpx;
      }
    }
    
    .favorite-btn {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 33rpx;
        
        .star-icon {
            width: 26rpx;
            height: 26rpx;
            margin-right: 6rpx;
            margin-top: -2rpx;
        }
        
        .active-fav {
            color: #FD5A8C ; 
        }
    }
  }
}

.article-content-wrapper {
  .article-content {
    padding: 0 30rpx 40rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #2A2A2A;
    line-height: 40rpx;
    
    ::v-deep p {
      margin-bottom: 24rpx;
      line-height: 40rpx;
    }
    ::v-deep img {
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: 10rpx;
      margin: 20rpx 0;
    }
  }

  .empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50rpx 0 80rpx;
    
    .empty-icon {
      width: 140rpx;
      height: 140rpx;
      margin-bottom: 24rpx;
      opacity: 0.8;
    }
    
    .empty-text {
      font-size: 26rpx;
      color: #A9A9A9;
    }
  }
}

.recommend-section {
  padding: 0 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 42rpx;
    }
    
    .refresh-btn {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #999999;
      
      .refresh-icon {
        width: 24rpx;
        height: 28rpx;
        margin-right: 8rpx;
        transition: transform 0.5s ease;
        
        &.is-rotating {
          transform: rotate(360deg);
        }
      }
    }
  }
}
</style>