<template>
  <view class="Navigation">
    <image
      src="../../static/Navigationimg.png"
      mode="scaleToFill"
      class="Navigationimg"
    />
    <image
      @click="Returnfunc"
      src="../../static/Return.png"
      mode="scaleToFill"
      class="Return"
    />
  </view>
  <view class="container">
    <view class="individual">
      <view class="anchor">
        <!-- <image
            src="{{item.anchorIcon}}"
            mode="scaleToFill"
        /> -->
      </view>
      <view>
        <view>主播名称{{ item.anchorId }}</view>
        <view>主播性别{{ item.sex === 1 ? "男" : "女" }}</view>
        <view> 国家{{ item.country }}</view>
      </view>
    </view>

    <view>金币{{ item.coin }}</view>
    <view>PK时间{{ formatDate(item.pkTime) }}</view>

    <view>主播备注{{ item.remark }}</view>
    <button @click="openChat()">聊了个天</button>
    <button @click="open()">立即邀请PK</button>
  </view>
  <!-- 弹窗 -->
  <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
    <view class="popup-content">
      <view class="popup-title">您确定要邀请主播PK吗？</view>
      <view class="popup-btn">
        <button class="invite" type="primary" @click="invite()">邀请</button>
        <button class="cancel" type="default" @click="close()">取消</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import formatDate from "../../components/formatDate.js";
import VerifyLogin from "../../components/VerifyLogin.js";
export default {
  data() {
    return {
      item: {},
    };
  },
  onLoad(options) {
    // 获取源页面的eventChannel对象
    const eventChannel = this.getOpenerEventChannel();
    // 监听itemDetail事件
    eventChannel.on("itemDetail", (data) => {
      this.item = data.item; // 将接收到的数据赋值给item
      console.log("接收到的数据:", this.item);
    });
    
  },
  methods: {
    formatDate: formatDate,
    Returnfunc() {
      uni.navigateBack({
        delta: 1,
      });
    },
    open() {
      this.$refs.popup.open("center");
    },
    invite() {
      // 发送邀请消息
    },
    close() {
      this.$refs.popup.close();
    },
    openChat() {
      //判断用户是否登录
      VerifyLogin().then(() => {
        // 打开聊天页面
        const conversationID = `C2C${this.item.senderId}`;
        uni.redirectTo({
          url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`,
        });
      });
    },
  },
};
</script>

<style scoped>
/* 样式定义 */
.Navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
}
.Navigationimg {
  width: 100%;
  height: 100%;
}
.Return {
  position: absolute;
  left: 60rpx;
  bottom: 40rpx;
  width: 60rpx;
  height: 60rpx;
}
.container {
  position: absolute;
  top: 200rpx;
  left: 0;
  right: 0;
  bottom: 0;
}
.individual {
  display: flex;
  /* justify-content: center; */
  margin-top: 50rpx;
}
.anchor {
  width: 200rpx;
  height: 200rpx;
  background-color: rgba(0, 0, 255, 0.369);
  border-radius: 50%;
}
.popup-content {
  width: 500rpx;
  height: 300rpx;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.popup-title {
  font-size: 30rpx;
  margin-top: 50rpx;
  text-align: center;
}
.popup-btn {
  display: flex;
  justify-content: space-around;
  margin-top: 50rpx;
}
.invite {
  width: 200rpx;
  height: 80rpx;
  font-size: 30rpx;
  line-height: 80rpx;
  border-radius: 20rpx;
  background-color: #1aff0087;
}
.cancel {
  width: 200rpx;
  height: 80rpx;
  font-size: 30rpx;
  line-height: 80rpx;
  margin-left: 30rpx;
  border-radius: 20rpx;
}
</style>
