<template>
  <view class="chat-more-message-invitation" @click.stop>
    <!-- 对方主播 -->
    <view class="chat-more-message-invitation-title">邀请对方参与PK</view>
    <view class="oppositeAnchor" @click="showPopup(1)">
      <view class="card" v-if="oppositselect != null">
        <view class="card-select-select">
          <view class="Avatarimg-select">
            <image class="avatar" :src="oppositselect.anchorIcon" mode="scaleToFill" />
          </view>
          <view class="NameMoney">
            <view class="TimeMoney">
              <view class="NameMoney_Name-select">{{ oppositselect.anchorId }}</view>
            </view>
            <view class="TimeMoney_Time">
              <view class="pkTimeimg">
                <image
                  style="width: 31.49rpx; height: 31.49rpx; margin-top: 3rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/time.png"
                  mode="scaleToFill"
                />
              </view>
              <view>{{ TimeFormatting(oppositselect.pkTime) }}</view>
              <view class="goldimg">
                <image
                  style="width: 31.49rpx; height: 31.49rpx; margin-top: 4rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="goldnb">{{ oppositselect.coin }}K</view>
            </view>
          </view>
        </view>
      </view>
      <view class="noselect" v-if="oppositselect == null"
        >点击选择您要参与PK的对方主播</view
      >
    </view>
    <view class="footervs">
      <view class="footervs_left">V</view>
      <view class="footervs_right">S</view>
    </view>
    <view class="oppositeAnchor" @click="showPopup(0)">
      <view class="card" v-if="myselect != null">
        <view class="card-select-select">
          <view class="Avatarimg-select">
            <image class="avatar" :src="myselect.anchorIcon" mode="scaleToFill" />
          </view>
          <view class="NameMoney">
            <view class="TimeMoney">
              <view class="NameMoney_Name-select">{{ myselect.anchorId }}</view>
            </view>
            <view class="TimeMoney_Time">
              <view class="pkTimeimg">
                <image
                  style="width: 31.49rpx; height: 31.49rpx; margin-top: 3rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/time.png"
                  mode="scaleToFill"
                />
              </view>
              <view>{{ TimeFormatting(myselect.pkTime) }}</view>
              <view class="goldimg">
                <image
                  style="width: 31.49rpx; height: 31.49rpx; margin-top: 4rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="goldnb">{{ myselect.coin }}K</view>
            </view>
          </view>
        </view>
      </view>
      <view class="noselect" v-if="myselect == null">点击选择您要参与的主播</view>
    </view>
    <view class="Sendpkbtn" @click="sendMessage()"> 发送PK消息 </view>
  </view>
  <!-- 弹出框 -->
  <uni-popup
    class="popup"
    ref="oppositepopup"
    background-color="#fff"
    @change="change"
    border-radius="30px"
  >
    <view class="popup-content">
      <view class="popup-title">{{
        select == 1 ? "点击选择您要参与PK的对方主播" : "点击选择您要参与的主播"
      }}</view>
      <scroll-view
        show-scrollbar="false"
        scroll-y="true"
        class="scroll"
        v-if="list.length > 0"
      >
        <!--  -->
        <view class="card" v-for="(item, index) in list" :key="index">
          <view
            class="card-content"
            @click="Select(item.id, index)"
            :style="{
              background: selectedId === item.id ? '#b8ff8c74' : '#ffffff',
            }"
          >
            <view class="Avatarimg">
              <image class="avatar" :src="item.anchorIcon" mode="scaleToFill" />
            </view>
            <view class="NameMoney">
              <view class="TimeMoney">
                <view class="NameMoney_Name">{{ item.anchorId }}</view>
              </view>
              <view class="TimeMoney_Time">
                <view class="pkTimeimg">
                  <image
                    style="width: 31.49rpx; height: 31.49rpx; margin-top: 3rpx"
                    src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/time.png"
                    mode="scaleToFill"
                  />
                </view>
                <view>{{ TimeFormatting(item.pkTime) }}</view>
                <view class="goldimg">
                  <image
                    style="width: 31.49rpx; height: 31.49rpx; margin-top: 4rpx"
                    src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
                    mode="scaleToFill"
                  />
                </view>
                <view class="goldnb">{{ item.coin }}K</view>
              </view>
            </view>
          </view>
        </view>
        <!--  -->
      </scroll-view>
      <view class="nodata" v-if="list.length == 0">{{
        select == 1 ? "对方还没有发布过pk" : "您还没有发布过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>
  <uni-popup
    ref="confirmpopup"
    background-color="#fff"
    @change="change"
    border-radius="30px"
  >
    <view class="popup-content">
      <view class="popup-title">提示</view>
      <view class="popup-content-text">
          <view class="popup-content-text-content">您确定要发送PK邀请消息吗？邀请成功后的pk不可修改，不可删除，请谨慎操作！</view>
        </view>
      <view class="popup-btn">
        <button class="invite" type="primary" @click="send()">确定</button>
        <button class="cancel" type="default" @click="confirmClose()">取消</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import request from "../../../../components/request.js";
import TimeFormatting from "../../../../components/TimeFormatting.js";
import { sendCustomMessage } from "../../../../components/goEasyTool/tool.js";
export default {
  props: {
    oppositeId: {
      type: String,
      required: true,
    },
    myId: {
      type: String,
      required: true,
    },
    nickname: {
      type: String,
      required: true,
    },
    avatar: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      select: null, // 选择主播对象（1:对方主播，0：自己主播）
      mylist: [], // 自己主播列表
      oppositlist: [], // 对方主播列表
      selectedId: null, // 选择的主播id
      selectIndex: null, // 选择的主播索引
      myselect: null, // 自己选择的主播对象
      oppositselect: null, // 对方选择的主播对象
      list: [], // 渲染的主播列表
    };
  },
  created() {
    this.getAnchorList(this.oppositeId);
    this.getAnchorList(this.myId);
  },
  methods: {
    //发送pk消息
    send() {
      request({
        url: "pk/createPkRecord",
        method: "POST",
        data: {
          pkIdA: this.oppositselect.id,
          pkIdB: this.myselect.id,
          userIdA: this.oppositeId,
          userIdB: this.myId,
          pkTime: this.oppositselect.pkTime,
          pkNumber: this.oppositselect.pkNumber,
          anchorIdA: this.oppositselect.anchorId,
          anchorIdB: this.myselect.anchorId,
          anchorIconA: this.oppositselect.anchorIcon,
          anchorIconB: this.myselect.anchorIcon,
          piIdA: this.oppositselect.id,
          piIdB: this.myselect.id,
        },
        userInfo: true,
      }).then((res) => {
        if (res.code == 200) {
          const customData = {
            id: res.data.id,
            pkIdA: this.oppositselect.id,
            pkIdB: this.myselect.id,
          };
          let order = {
            customData: customData,
            link: "https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pk.png",
            text: "PK邀请消息",
          };
          let type = "pk";
          sendCustomMessage(
            this.$goeasy,
            type,
            this.oppositeId,
            order,
            this.avatar,
            this.nickname
          ).then((res) => {
            this.$emit("refreshMessage", { message: res });
          });
          this.$refs.confirmpopup.close();
          this.$refs.oppositepopup.close();
          this.myselect = null;
          this.oppositselect = null;
          uni.showToast({
            title: "发送成功",
            icon: "none",
          });
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    confirmClose() {
      this.$refs.confirmpopup.close();
    },
    //发送pk消息
    sendMessage() {
      if (this.myselect && this.oppositselect) {
        this.$refs.confirmpopup.open("center");
      } else {
        uni.showToast({
          title: "请选择相应的主播",
          icon: "none",
        });
      }
    },
    //选中
    Select(id, index) {
      if (this.selectedId === id) {
        this.selectedId = null;
        this.selectIndex = null;
      } else {
        this.selectedId = this.selectedId === id ? null : id;
        this.selectIndex = index;
      }
    },
    //取消
    close() {
      this.$refs.oppositepopup.close();
    },
    //确定
    invite() {
      if (this.selectedId) {
        if (this.select == 1) {
          this.oppositselect = this.oppositlist[this.selectIndex];
          this.selectedId = null;
          this.selectIndex = null;
        } else {
          this.myselect = this.mylist[this.selectIndex];
          this.selectedId = null;
          this.selectIndex = null;
        }
      } else {
        uni.showToast({
          title: "请选择主播",
          icon: "none",
        });
      }
      this.$refs.oppositepopup.close();
    },
    TimeFormatting: TimeFormatting,
    //获取主播列表
    getAnchorList(id) {
      request({
        url: "pk/listUninvitedPublishedAnchorsByUserId",
        method: "POST",
        data: {
          userId: id,
        },
        userInfo: false,
      }).then((res) => {
        if (res.code == 200) {
          if (id == this.myId) {
            this.mylist = res.data;
            console.log("mylist", this.mylist);
          } else {
            this.oppositlist = res.data;
            console.log("oppositlist", this.oppositlist);
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    showPopup(select) {
      if (select == 1) {
        this.list = this.oppositlist;
      } else {
        this.list = this.mylist;
      }
      this.select = select;
      this.$refs.oppositepopup.open("center");
    },
  },
};
</script>

<style scoped>
.chat-more-message-invitation-title {
  font-size: 60rpx;
  width: 100%;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-weight: bold;
  margin-top: 70rpx;
  letter-spacing: 5rpx;
  font-style: italic;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde); /* 渐变方向和颜色 */
  -webkit-background-clip: text; /* Chrome/Safari */
  background-clip: text; /* Firefox/Edge */
  color: transparent; /* 文字本身透明，显示背景渐变 */
  -webkit-text-fill-color: transparent; /* 兼容旧版 Webkit */
}
.chat-more-message-invitation {
  width: 100%;
  height: 100%;
  border-radius: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
}
.oppositeAnchor {
  width: 600rpx;
  height: 150rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 20rpx;
  margin-top: 50rpx;
  margin-bottom: 50rpx;
  border: 2rpx solid #e4e4e4;
}
.footervs {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footervs_left {
  font-size: 50rpx;
  color: #ff65e5;
  font-weight: bold;
  font-style: italic;
}
.footervs_right {
  font-size: 50rpx;
  color: #65e8ff;
  font-weight: bold;
  font-style: italic;
}
.popup-title {
  width: 100%;
  height: 100rpx;
  color: #000;
  font-size: 40rpx;
  text-align: center;
  line-height: 100rpx;
  font-weight: bold;
  margin-top: 10rpx;
}
.popup-content-text {
  width: 600rpx;
  height: 450rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-content-text-content{
  color: #999;
  font-size: 28rpx;
  text-align: center;
  font-weight: bold;
  line-height: 70rpx;
}
.popup-content {
  width: 700rpx;
  height: 730rpx;
  background-color: #fff;
  border-radius: 30rpx;
  background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/chard1.png);
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* card */
.scroll {
  width: 600rpx;
  height: 450rpx;
  border-radius: 10px;
  /* background-color: #f5f5f5; */
}
.scroll ::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
.nodata {
  width: 600rpx;
  height: 450rpx;
  border-radius: 10px;
  text-align: center;
  line-height: 450rpx;
  font-size: 30rpx;
  color: #999;
  font-weight: bold;
}
.card-content {
  /* width: 445rpx; */
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  /* border: 2px solid #afafaf; */
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: rgb(127, 127, 127);
  margin-top: 20rpx;
}
.card-select-select {
  width: 100%;
  height: 150rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: rgb(127, 127, 127);
}
.card-select {
  /* width: 445rpx; */
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  /* border: 2px solid #afafaf; */
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: rgb(127, 127, 127);
  margin-top: 20rpx;
}
.noselect {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 20rpx;
  text-align: center;
  line-height: 150rpx;
  font-size: 30rpx;
  color: #999;
  font-weight: bold;
}
.Avatarimg {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #dddddd;
  margin-right: 20rpx;
  margin-left: 20rpx;
}
.Avatarimg-select {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #dddddd;
  margin-right: 20rpx;
  margin-left: 20rpx;
}
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.NameMoney {
  display: flex;
  flex-direction: column;
}
.TimeMoney {
  width: 300rpx;
  display: flex;
  font-weight: bold;
  font-size: 27rpx;
  color: #161616;
}
.NameMoney_Name {
  width: 400rpx;
  text-align: left;
  font-weight: bold;
  font-size: 27rpx;
  color: #161616;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.NameMoney_Name-select {
  width: 500rpx;
  text-align: left;
  font-weight: bold;
  font-size: 32rpx;
  color: #161616;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
}
.TimeMoney_Time {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}
.pkTimeimg {
  width: 31.49rpx;
  height: 31.49rpx;
  margin-right: 10rpx;
}
.goldimg {
  width: 31.49rpx;
  height: 35rpx;
  margin-left: 40rpx;
}
.goldnb {
  display: flex;
  margin-left: 5rpx;
}
.popup-btn {
  display: flex;
  justify-content: space-around;
  margin-top: 50rpx;
}
.invite {
  width: 225.19rpx;
  height: 78.24rpx;
  font-size: 28.63rpx;
  line-height: 80rpx;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
}
.cancel {
  width: 225.19rpx;
  height: 78.24rpx;
  font-size: 28.63rpx;
  line-height: 80rpx;
  margin-left: 30rpx;
  color: #03aba8;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  border: 1rpx solid #03aba8;
}
.Sendpkbtn {
  width: 90%;
  height: 100rpx;
  margin-top: 50rpx;
  background-image: linear-gradient(135deg, #4fcacd, #5fdbde);
  color: #ffffff;
  font-weight: bold;
  border-radius: 60rpx;
  font-size: 35rpx;
  text-align: center;
  line-height: 100rpx;
  font-weight: bold;
  letter-spacing: 6rpx;
}
</style>
