<template>
  <view>
    <!-- 领主信息展示区域 - 显示当前领主的头像、昵称和占领信息 -->
    <view class="lingzhu center" v-if="localBossCardData && localBossCardData.king_user">
      <view class="lingzhu-img relative ml30">
        <image :src="localBossCardData.king_user.headimg" mode="aspectFill"></image>
        <image :src="$img1('index/king.png')"></image>
      </view>
      <view class="lingzhu-content ml30 flex-1">
        <view class="">{{ localBossCardData.king_user.nickname }}</view>
        <view class="">
          第
          <text>{{ localBossCardData.king_user.count }}</text>
          发晋升领主
          已占领
          <text>{{ localBossCardData.king_user.z_nums }}</text>
          发
        </view>
        <view class="" v-if="localBossCardData.king_user == null">
          虚位以待
        </view>
      </view>
      <view class="flex ml40 mr30" @click="openBossPop">
        <text style="font-size: 20rpx; color: #999999;">查看更多 ></text>
      </view>
    </view>

    <!-- 领主弹窗 - 显示领主详细信息和挑战人数/领主记录 -->
    <uni-popup ref="bossPop" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
      <view v-if="localBossCardData" class="boss-pop relative">
        <!-- 弹窗标题 -->
        <view class="boss-pop-title">
          <text>领主接力</text>
        </view>

        <!-- 关闭按钮 -->
        <view @click="close('bossPop')" class="close flex">
          <image class="img100" :src="$img1('index/close.png')"></image>
        </view>

        <!-- 领主头像和皇冠 -->
        <view class="boss-avatar relative">
          <image :src="localBossCardData.king_user.headimg"></image>
          <image :src="$img1('index/king.png')"></image>

          <view class="boss-name hang1">
            {{ (localBossCardData.king_user == null ? "虚位以待" : localBossCardData.king_user.nickname) }}
          </view>

          <!-- 规则按钮 -->
          <view class="boss-pop-guize align-center" @click="open('playPop')">
            <image :src="$img1('common/ic_rule.png')" mode=""></image>
          </view>
        </view>

        <!-- 奖励说明 -->
        <view class="flex row center" style="font-size: 20rpx; color: #999999; margin-top: 24rpx;">
          <text>挑战领主获得UU币奖励</text>
          <text class="get-money-one">玩家每挑战一发,领主可获得</text>
          <text class="get-money-three">{{ localBossCardData.goods.lingzhu_fan }}UU币</text>
        </view>

        <!-- 标签页切换 -->
        <view class="boss-tab">
          <view class="boss-tab-item" v-for="(item, i) in bossTab" :key="i" :class="{
            act: bossTabCur == i
          }" @click="bossTabChange(i)">
            <text>{{ item.title }}</text>
          </view>
        </view>

        <!-- 滚动列表区域 - 显示挑战人数或领主记录 -->
        <child-scroll class="list-wrap" height="350rpx" ref="bossScroll" :fixed="false" :size="20" @up="getBossData">
          <view class="boss-list">
            <template v-for="(item, i) in bossList">
              <!-- 挑战人数列表项 -->
              <view v-if="bossTab[bossTabCur].id == 1" class="people-item mt30" :key="i">
                <view class="avatar flex">
                  <image class="img100" :src="item.headimg"></image>
                </view>
                <view class="name hang1">{{ item.nickname }}</view>
              </view>

              <!-- 领主记录列表项 -->
              <view v-if="bossTab[bossTabCur].id == 2" class="boss-log" :key="i">
                <view class="flex center">
                  <view class="avatar flex" style="width: 52rpx; height: 52rpx;">
                    <image class="img100" :src="item.headimg"></image>
                  </view>
                  <view class="name hang1">{{ item.nickname }}</view>
                </view>

                <view class="place">
                  <text>占领领主{{ item.time }}</text>
                </view>
              </view>
            </template>
          </view>
        </child-scroll>
      </view>
    </uni-popup>

    <!-- 玩法规则弹窗 - 显示领主玩法的详细规则说明 -->
    <uni-popup ref="playPop" type="center">
      <view v-if="localBossCardData" class="play-pop common_bg">
        <!-- 弹窗标题和关闭按钮 -->
        <view class="close align-center justify-between">
          <view class="close-icon"></view>
          <view class="close-title">玩法规则</view>
          <view class="close-icon flex" @click="close('playPop')">
            <image class="img100" :src="$img1('index/close.png')"></image>
          </view>
        </view>

        <!-- 轮播图展示领主可获得的物品 -->
        <swiper class="p-swiper">
          <swiper-item class="p-item" v-for="(item, i) in localBossCardData.ling_goods_list" :key="i">
            <view class="play-pic flex">
              <image class="img100" :src="item.imgurl"></image>
            </view>
            <view class="play-name hang1">
              {{ item.title }}
            </view>
          </swiper-item>
        </swiper>

        <!-- 规则文本区域 -->
        <view class="pd30 br20" style="background: #D8D8D8;">
          <scroll-view class="rule-text" scroll-y>
            <!-- 注意：使用v-html可能有XSS风险，但这里的内容来自服务器后台配置，相对可控 -->
            <view v-html="playRuleData"></view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
/**
 * 领主功能组件
 * 
 * 功能描述：
 * 1. 显示当前领主信息
 * 2. 提供领主弹窗展示挑战人数和领主记录
 * 3. 提供玩法规则弹窗说明领主玩法
 * 
 * 使用方式：
 * <detail-wuxian-lingzhu :goods="goods" :goods-num="0"></detail-wuxian-lingzhu>
 */
export default {
  name: 'DetailWuxianLingzhu',
  props: {
    // 商品信息对象
    goods: {
      type: Object,
      default: () => ({})
    },
    // 商品数量
    goodsNum: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 领主数据，包含king_user、goods等信息
      localBossCardData: null,
      // 标签页配置
      bossTab: [{
        id: 1,
        title: '挑战人数'
      },
      {
        id: 2,
        title: '领主记录'
      }
      ],
      // 当前选中的标签页索引
      bossTabCur: 0,
      // 挑战人数/领主记录列表数据
      bossList: [],
      // 玩法规则HTML内容
      playRuleData: ''
    }
  },
  mounted() {
    // 组件挂载时自动获取领主数据
    this.fetchBossData();
  },
  methods: {
    /**
     * 获取领主数据
     * 请求接口获取领主信息并存储到localBossCardData
     */
    fetchBossData() {
      this.req({
        url: 'ling_zhu_king',
        data: {
          page: 1,
          goods_id: this.goods.id,
          type: 1 // 默认只请求挑战人数类型
        },
        Loading: true,
        success: res => {
          if (res.status == 1) {
            this.localBossCardData = res.data;
            this.bossList = this.bossList.concat(res.data.list.data);
          }
        }
      });
    },

    /**
     * 打开领主弹窗
     */
    openBossPop() {
      this.$refs.bossPop.open();

      // // 打开弹窗的同时加载挑战人数数据
      // this.$nextTick(() => {
      //   // 确保bossList是空的，避免重复加载
      //   this.bossList = [];
      //   // 重置滚动区域
      //   if (this.$refs.bossScroll) {
      //     this.$refs.bossScroll.mescroll.resetUpScroll();
      //     this.$refs.bossScroll.mescroll.scrollTo(0, 0);
      //   }

      //   // 主动获取挑战人数数据
      //   this.getBossData({ num: 1, init: false });
      // });
    },

    /**
     * 打开指定弹窗
     * @param {String} popName - 弹窗引用名称
     */
    open(popName) {
      this.$refs[popName].open();

      // 如果是玩法规则弹窗，需要获取规则数据
      if (popName === 'playPop') {
        this.$c.getRule(14).then(res => {
          if (res.status == 1) {
            this.playRuleData = res.data;
          }
        });
      }
    },

    /**
     * 关闭指定弹窗
     * @param {String} popName - 弹窗引用名称
     */
    close(popName) {
      this.$refs[popName].close();
    },

    /**
     * 切换标签页
     * @param {Number} i - 标签页索引
     */
    bossTabChange(i) {
      this.bossTabCur = i;
      this.bossList = [];

      // 重置滚动区域
      this.$refs.bossScroll.mescroll.resetUpScroll();
      this.$refs.bossScroll.mescroll.scrollTo(0, 0);
    },

    /**
     * 获取挑战人数/领主记录列表数据
     * @param {Object} params - 参数对象
     * @param {Number} params.num - 页码
     * @param {Boolean} params.init - 是否初始化
     */
    getBossData({ num, init }) {
      this.req({
        url: 'ling_zhu_king',
        data: {
          page: num,
          goods_id: this.goods.id,
          type: this.bossTab[this.bossTabCur].id
        },
        Loading: true,
        success: res => {
          if (res.status == 1) {
            // 只更新列表数据，不改变整个localBossCardData
            if (!init) {
              if (num == 1) {
                this.bossList = [];
              }

              this.bossList = this.bossList.concat(res.data.list.data);
              this.$refs.bossScroll.mescroll.endByPage(
                res.data.list.data.length,
                res.data.list.last_page
              );
            }
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
/* 领主信息展示区域样式 */
.lingzhu {
  width: 686rpx;
  height: 158rpx;
  margin: 0rpx auto;
  background: #F8F8F8;

  &-img {
    width: 122rpx;
    height: 106rpx;

    /* 领主头像 */
    >image:nth-child(1) {
      width: 75rpx;
      height: 76rpx;
      position: absolute;
      bottom: 4rpx;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      border-radius: 50rpx;
    }

    /* 皇冠图标 */
    >image:nth-child(2) {
      width: 122rpx;
      height: 120rpx;
      position: absolute;
      top: 5rpx;
      left: 0;
      z-index: 3;
    }
  }

  &-content {

    /* 领主昵称 */
    >view:nth-child(1) {
      font-weight: normal;
      font-size: 28rpx;
      color: #333333;
    }

    /* 领主信息文本 */
    >view:nth-child(2) {
      margin-top: 6rpx;
      font-weight: normal;
      font-size: 24rpx;
      color: #999999;

      /* 高亮数字 */
      >text {
        color: #333333;
      }
    }
  }
}

/* 领主弹窗样式 */
.boss-pop {
  width: 750rpx;
  box-sizing: border-box;
  padding: 0 46rpx 40rpx;
  position: relative;
  background: #F7F7F7;
  border-radius: 16rpx 16rpx 0rpx 0rpx;

  /* 弹窗顶部装饰 */
  &::after {
    content: '';
    position: absolute;
    top: -62rpx;
    left: 0;
    width: 750rpx;
    height: 62rpx;
  }

  /* 弹窗标题 */
  .boss-pop-title {
    padding: 40rpx 0;
    text-align: center;
    font-weight: 400;
    font-size: 44rpx;
    color: #333333;
  }

  /* 规则按钮 */
  .boss-pop-guize {
    position: absolute;
    top: 24rpx;
    right: 24rpx;
    color: #FFFFFF;
    font-size: 28rpx;

    >image {
      width: 30rpx;
      height: 30rpx;
    }
  }

  /* 关闭按钮 */
  .close {
    position: absolute;
    width: 30rpx;
    height: 30rpx;
    top: 50rpx;
    right: 36rpx;
  }

  /* 领主头像区域 */
  .boss-avatar {
    margin: 20rpx auto 0;
    width: 686rpx;
    height: 264rpx;
    background-color: #FFFFFF;

    /* 领主头像 */
    >image:nth-child(1) {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 112rpx;
      width: 98rpx;
      height: 98rpx;
      border-radius: 50%;
      z-index: 1;
    }

    /* 皇冠图标 */
    >image:nth-child(2) {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 181rpx;
      height: 173rpx;
      bottom: 80rpx;
      z-index: 2;
    }
  }

  /* 领主昵称 */
  .boss-name {
    margin: 30rpx auto 0;
    width: 200rpx;
    text-align: center;
    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 32rpx;
  }

  /* 奖励文本样式 */
  .get-money-one {
    font-weight: 400;
    font-size: 26rpx;
    color: #999999;
  }

  .get-money-three {
    font-weight: 400;
    font-size: 26rpx;
    color: #999999;
  }

  /* 标签页样式 */
  .boss-tab {
    padding: 30rpx 0;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .boss-tab-item {
      width: 33%;
      height: 60rpx;
      font-size: 20rpx;
      font-weight: 400;
      color: #8A8A8A;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      background-color: #FFFFFF;
      border-radius: 8rpx;

      /* 激活状态 */
      &.act {
        font-weight: 500;
        font-size: 20rpx;
        color: #333333;
        background-color: #E6F791;
        border-radius: 8rpx;
      }
    }
  }

  /* 列表区域样式 */
  .list-wrap {
    .boss-list {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;

      /* 挑战人数列表项 */
      .people-item {
        display: flex;
        align-items: center;
        width: 30%;

        .avatar {
          width: 52rpx;
          height: 52rpx;
          background: #9d9d9d;
          border-radius: 50%;
          box-sizing: border-box;
          overflow: hidden;
        }

        .name {
          width: calc(100% - 70rpx);
          box-sizing: border-box;
          padding-left: 10rpx;
          font-size: 20rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #999999;
        }
      }

      /* 领主记录列表项 */
      .boss-log {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 10rpx;

        .avatar {
          width: 60rpx;
          height: 60rpx;
          background: #9d9d9d;
          border-radius: 50%;
          overflow: hidden;
        }

        .name {
          width: 100rpx;
          margin-left: 20rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #999999;
        }

        .place {
          margin-left: 30rpx;
          font-size: 20rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #999999;

          text {
            padding-left: 4rpx;
            color: #999999;
          }
        }
      }
    }
  }
}

/* 玩法规则弹窗样式 */
.play-pop {
  width: 680rpx;
  box-sizing: border-box;
  padding: 0 46rpx 40rpx;
  position: relative;
  background: #FFFFFF;
  border-radius: 30rpx;

  /* 弹窗标题栏 */
  .close {
    padding: 30rpx 0;

    .close-title {
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
    }

    .close-icon {
      width: 30rpx;
      height: 30rpx;
    }
  }

  /* 轮播图区域 */
  .p-swiper {
    margin-top: 10rpx;
    width: 100%;
    height: 300rpx;

    .p-item {

      /* 物品图片 */
      .play-pic {
        margin: 0 auto 0;
        width: 200rpx;
        height: 200rpx;
        position: relative;
      }

      /* 物品名称 */
      .play-name {
        width: 310rpx;
        margin: 16rpx auto 0;
        text-align: center;
        font-size: 20rpx;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  /* 规则文本区域 */
  .rule-text {
    width: 560rpx;
    height: 200rpx;
    margin: 20rpx auto 0;
    font-size: 24rpx;
    font-weight: 400;
    color: #8A8A8A;
  }
}
</style>