<template>
  <view class="container">
    <view class="background">
      <image
        style="width: 100%; height: 100%"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Navigation">
      <view class="Return" @click="goBack">
        <image class="Return" src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png" mode="scaleToFill" />
      </view>
    </view>
    <view class="Content">
      <!-- 发布者 -->
      <view class="sender">
        <view class="sengderIcon">
          <image class="Icon" :src="SenderData.anchorIcon" mode="scaleToFill" />
        </view>

        <view class="Individual">
          <view class="name">{{ SenderData.anchorId }}</view>

          <view class="GenderAndAge">
            <view class="male" v-if="SenderData.sex === '1'">
              <view>
                <image
                  style="width: 20rpx; height: 20rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/male.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="age"> {{ SenderData.sex == 1 ? "男" : "女" }} </view>
            </view>

            <view class="female" v-else>
              <view>
                <image
                  style="width: 20rpx; height: 20rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/female.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="age">{{ SenderData.sex == 1 ? "男" : "女" }}</view>
            </view>
          </view>
          <view class="nation">{{ SenderData.country }}</view>
        </view>
        <view class="Time">PK时间:{{ formatDate(SenderData.pkTime) }}</view>
        <view class="SessionAndGoldCoin">
          <view class="goldCoin">
            <image
              style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
              mode="scaleToFill"
            />
            <view class="goldcard">
              <view class="goldnumber">{{ SenderData.coin }}</view>
              <view class="goldtext">金币</view>
            </view>
          </view>
          <view class="Session">
            <image
              style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
              mode="scaleToFill"
            />
            <view class="goldcard">
              <view class="goldnumber">{{ SenderData.pkNumber }}</view>
              <view class="goldtext">PK场数</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 被邀请者 -->
      <view class="sender">
        <view class="sengderIcon">
          <image class="Icon" :src="ReceiverData.anchorIcon" mode="scaleToFill" />
        </view>

        <view class="Individual">
          <view class="name">{{ ReceiverData.anchorId }}</view>

          <view class="GenderAndAge">
            <view class="male" v-if="ReceiverData.sex === '1'">
              <view>
                <image
                  style="width: 20rpx; height: 20rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/male.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="age"> {{ ReceiverData.sex == 1 ? "男" : "女" }} </view>
            </view>

            <view class="female" v-else>
              <view>
                <image
                  style="width: 20rpx; height: 20rpx"
                  src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/female.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="age">{{ ReceiverData.sex == 1 ? "男" : "女" }}</view>
            </view>
          </view>
          <view class="nation">{{ ReceiverData.country }}</view>
        </view>
        <view class="Time">PK时间:{{ formatDate(ReceiverData.pkTime) }}</view>
        <view class="SessionAndGoldCoin">
          <view class="goldCoin">
            <image
              style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
              mode="scaleToFill"
            />
            <view>
              <view class="goldnumber">{{ ReceiverData.coin }}</view>
              <view class="goldtext">金币</view>
            </view>
          </view>
          <view class="Session">
            <image
              style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
              src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
              mode="scaleToFill"
            />
            <view>
              <view class="goldnumber">{{ ReceiverData.pkNumber }}</view>
              <view class="goldtext">PK场数</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 邀请信息 -->
      <view class="button" v-if="PkIDInfodata.pkStatus === 0 && ReceiverData.senderId !== id">
        <button class="accept" @click="operation(1)">接受邀请</button>
        <button class="reject" @click="operation(2)">拒绝邀请</button>
      </view>
      <view v-if="ReceiverData.senderId === id && PkIDInfodata.pkStatus === 0" class="button buttontext">等待对方接受邀请</view>
      <view v-if="PkIDInfodata.pkStatus === 1" class="button buttontext">已接受邀请</view>
      <view v-if="PkIDInfodata.pkStatus === 2" class="button buttontext">已拒绝邀请</view>
    </view>
  </view>
</template>

<script>
import request from "../../components/request.js";
import formatDate from "../../components/formatDate.js";
export default {
  data() {
    return {
      customData: {},
      SenderData: {},
      ReceiverData: {},
      PkIDInfodata: {},
      id: "",
    };
  },
  onLoad(options) {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.id = res.data.id;
      },
    });
    this.customData = JSON.parse(options.customData);
    this.getPkyourInfo();
    this.getPkmineInfo();
    this.getPkIDInfo();
  },
  methods: {
    //根据当前消息ID查询pk信息
    async getPkIDInfo() {
      const res = await request({
        url: "pk/singleRecord",
        method: "POST",
        data: {
          id: this.customData.id,
        },
        userInfo: true
      }).then((res) => {
        this.PkIDInfodata = res.data;
      });
    },
    //发布者
    async getPkyourInfo() {
      const res = await request({
        url: "pk/pkInfoDetail",
        method: "POST",
        data: {
          id: this.customData.pkIdA,
        },
        userInfo: true,
      }).then((res) => {
        this.SenderData = res.data;
      });
    },
    //被邀请者
    async getPkmineInfo() {
      const res = await request({
        url: "pk/pkInfoDetail",
        method: "POST",
        data: {
          id: this.customData.pkIdB,
        },
        userInfo: true,
      }).then((res) => {
        this.ReceiverData = res.data;

      });
    },
    //返回上一页
    goBack() {
      wx.navigateBack({
        delta: 1,
      });
    },
    formatDate: formatDate,
    async operation(status) {
      const res = await request({
        url: "pk/updatePkStatus",
        method: "POST",
        data: {
          id: this.customData.id,
          pkStatus: status,
        },
        userInfo: true,
      }).then((res) => {
        const Hinttext = status === 1 ? "接受邀请成功" : "拒绝邀请成功";
        if (res.code === 200) {
            this.getPkIDInfo()
            wx.showToast({
              title: Hinttext,
              icon: "success",
              duration: 2000,
            });
            wx.navigateBack({
              delta: 1,
            });
        }else {
            wx.showToast({
              title: "操作失败",
              icon: "none",
              duration: 2000,
            });
        }
      });
    },
  },
};
</script>

<style scoped>
.background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.Navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  display: flex;
  align-items: center;
  padding: 0 60rpx;
  z-index: 1;
}
.Return {
  width: 60rpx;
  height: 60rpx;
  margin-top: 20rpx;
}
.Content {
  position: absolute;
  top: 200rpx;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sender {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80rpx;
}
.sengderIcon {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.Individual {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 34.35rpx;
}
.name {
  font-size: 30.53rpx;
  color: #161616;
  margin-right: 16.22rpx;
}
.nation {
  width: 56.3rpx;
  height: 29.58rpx;
  font-size: 17.18rpx;
  color: #666666;
  text-align: center;
  line-height: 29.58rpx;
  background-color: #fff;
  border-radius: 50rpx;
  padding: 6rpx 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.male {
  width: 56.3rpx;
  height: 29.58rpx;
  background-color: #5bced1;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rpx 12rpx;
  margin-right: 12rpx;
}
.female {
  width: 56.3rpx;
  height: 29.58rpx;
  background-color: #f3876f;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rpx 12rpx;
  margin-right: 12rpx;
}
.age {
  font-size: 17.18rpx;
  color: #fff;
  margin-left: 4rpx;
}
.Time {
  color: #666666;
  font-size: 26.72rpx;
  margin-top: 48.7rpx;
}
.goldCoin {
  background-image: url("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Backgroundofgoldcoins.png");
  width: 334.83rpx;
  height: 124.05rpx;
  margin-right: 21rpx;
  display: flex;
  align-items: center;
}
.Session {
  background-image: url("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Fieldnumberbackground.png");
  width: 334.83rpx;
  height: 124.05rpx;
  display: flex;
  align-items: center;
}
.SessionAndGoldCoin {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
  display: flex;
  justify-content: center;
}
.goldtext {
  font-size: 28.63rpx;
  color: #929292;
}
.goldnumber {
  font-size: 34.35rpx;
  color: #161616;
  font-weight: bold;
}
.goldcard {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 150rpx;
}
.buttontext{
  font-size: 40rpx;
  color: #666666;
  font-weight: bold;
  
}
.accept {
  width: 325.38rpx;
  height: 77.29rpx;
  margin-right: 35.5rpx;
  border-radius: 50rpx;
  background-color: #fff;
  border: 1rpx solid #03aba8;
  color: #03aba8;
  font-size: 28.63rpx;
  line-height: 77.29rpx;
}
.reject {
  width: 325.38rpx;
  height: 77.29rpx;
  border-radius: 50rpx;
  background-color: #03aba8;
  border: 1rpx solid #03aba8;
  color: #fff;
  font-size: 28.63rpx;
  line-height: 77.29rpx;
}
</style>
