<template>
  <div class="chat-message-mini-pk">
    <!-- 用户A -->
    <div class="userA">
      <!--  -->
      <div class="Avatar">
        <img class="AvatarImg" :src="ArticleDetailsA.anchorIcon" alt="" />
        <div class="name">{{ ArticleDetailsA.anchorId }}</div>
      </div>
      <!--  -->
      <div class="genderAndCountry">
        <div
          class="gender"
          :style="{
            background: ArticleDetailsA.sex == 1 ? '#59D8DB' : '#F3876F',
          }"
        >
          {{ ArticleDetailsA.sex == 1 ? "男" : "女" }}
        </div>
        <div class="Country">{{ ArticleDetailsA.country }}</div>
      </div>
      <!--  -->
      <div class="time">
        PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
      </div>
      <!--  -->
      <div class="PKinformation">
        <div class="gold">
          <img
            class="gold-img"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
            alt=""
          />
          <div class="sessions-content">
            金币：
            <div class="gold-num">{{ ArticleDetailsA.coin }}K</div>
          </div>
        </div>
        <div class="sessions">
          <img
            class="sessions-img"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
            alt=""
          />
          <div class="sessions-content">
            场次：
            <div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="Remarks">备注：{{ ArticleDetailsA.remark }}</div>
    </div>
    <!-- vs -->
    <div class="messageVS">
      <img class="messageVS-img" src="../../assets/messageVS.png" alt="" />
    </div>
    <!-- 用户B -->
    <div class="userB">
      <!--  -->
      <div class="Avatar">
        <img class="AvatarImg" :src="ArticleDetailsB.anchorIcon" alt="" />
        <div class="name">{{ ArticleDetailsB.anchorId }}</div>
      </div>
      <!--  -->
      <div class="genderAndCountry">
        <div
          class="gender"
          :style="{
            background: ArticleDetailsB.sex == 1 ? '#59D8DB' : '#F3876F',
          }"
        >
          {{ ArticleDetailsB.sex == 1 ? "男" : "女" }}
        </div>
        <div class="Country">{{ ArticleDetailsB.country }}</div>
      </div>
      <!--  -->
      <div class="time">
        PK时间(本地时间):{{ TimestamptolocalTime(PkIDInfodata.pkTime * 1000) }}
      </div>
      <!--  -->
      <div class="PKinformation">
        <div class="gold">
          <img
            class="gold-img"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
            alt=""
          />
          <div class="sessions-content">
            金币：
            <div class="gold-num">{{ ArticleDetailsB.coin }}K</div>
          </div>
        </div>
        <div class="sessions">
          <img
            class="sessions-img"
            src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
            alt=""
          />
          <div class="sessions-content">
            场次：
            <div class="gold-num">{{ PkIDInfodata.pkNumber }}场</div>
          </div>
        </div>
      </div>
      <div class="Remarks">备注：{{ ArticleDetailsB.remark }}</div>
    </div>
    <!-- btn -->
    <div class="btn"  v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId != info.id">
      <div class="messagebtn-left" @click="agree()">同意</div>
      <div class="messagebtn-right" @click="refuse()">拒绝</div>
    </div>
    <div v-if="PkIDInfodata.pkStatus === 1" class="messageHint">已同意邀请</div>

    <div v-if="PkIDInfodata.pkStatus === 2" class="messageHint">已拒绝邀请</div>

    <div
      v-if="PkIDInfodata.pkStatus === 0 && ArticleDetailsB.senderId == info.id"
      class="messageHint"
    >
      等待对方回应（如果已经回应请刷新页面）
    </div>
  </div>

  <!-- 弹窗 -->
  <!-- 同意邀请提示 -->
  <el-dialog v-model="agreedialog" center title="提示" width="400" align-center>
    <div class="dialog-content">
      <div class="dialog-content-text">
        <div>邀请成功后的pk不可修改，不可删除，请谨慎操作！</div>
      </div>
      <!--  -->
      <div class="myanchor-dialog-btn">
        <div class="remindermyAnchorDialogReset" @click="agreedialog = false">取消</div>
        <div class="remindermyAnchorDialogConfirm" @click="agreedialogConfirm">确认</div>
      </div>
    </div>
  </el-dialog>
  <!-- 拒绝邀请提示 -->
  <el-dialog v-model="refusedialog" center title="提示" width="400" align-center>
    <div class="dialog-content">
      <!--  -->
      <div class="dialog-content-text">
        <div>您确定要拒绝该邀请吗？</div>
      </div>

      <div class="myanchor-dialog-btn">
        <div class="remindermyAnchorDialogReset" @click="refusedialog = false">取消</div>
        <div class="remindermyAnchorDialogConfirm" @click="refusedialogConfirm">确认</div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
import { queryPkRecord, pkArticleDetail, updatePkRecordStatus } from "@/api/account";
import {
  setStorage,
  getStorage,
  getPromiseStorage,
  clearStorage,
} from "@/utils/storage.js";
import { TimestamptolocalTime } from "@/utils/timeConversion.js";
import { ElMessage } from "element-plus";
const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});
const info = ref({}); // 用户信息
const PkIDInfodata = ref({}); //pk信息
const ArticleDetailsA = ref({}); //pK文章详情A
const ArticleDetailsB = ref({}); //pk文章详情B
const agreedialog = ref(false); //同意邀请提示
const refusedialog = ref(false); //拒绝邀请提示
const newValitem = ref({});

//确认同意
function agreedialogConfirm() {
  updatePkRecordStatus({
    id: newValitem.value.payload.customData.id,
    pkStatus: 1,
  }).then(() => {
    ElMessage.success("同意成功");
    PkIDInfodata.value.pkStatus = 1;
    agreedialog.value = false;
  });
}

//确认拒绝
function refusedialogConfirm() {
  updatePkRecordStatus({
    id: newValitem.value.payload.customData.id,
    pkStatus: 2,
  }).then(() => {
    ElMessage.success("拒绝成功");
    PkIDInfodata.value.pkStatus = 2;
    refusedialog.value = false;
  });
}

//同意邀请
const agree = () => {
  agreedialog.value = true;
};
//拒绝邀请
const refuse = () => {
  refusedialog.value = true;
};

//监听props传值
watch(
  () => props.item,
  (newVal) => {
    console.log(newVal); // 用户可以替换为自己的方法
    newValitem.value = newVal;
    queryPkRecord({
      id: newVal.payload.customData.id,
    }).then((res) => {
      PkIDInfodata.value = res;
      console.log("PkIDInfodata", res);
    });
    pkArticleDetail({
      id: newVal.payload.customData.pkIdA,
      userId: info.value.id,
      from: 2,
    }).then((res) => {
      ArticleDetailsA.value = res;
      console.log("ArticleDetailsA", res);
    });
    pkArticleDetail({
      id: newVal.payload.customData.pkIdB,
      userId: info.value.id,
      from: 2,
    }).then((res) => {
      ArticleDetailsB.value = res;
      console.log("ArticleDetailsB", res);
    });
  },
  { immediate: true }
);

onMounted(() => {
  getPromiseStorage("user").then((res) => {
    info.value = res;
  });
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
const refname = ref("");
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
</script>

<style scoped>
.chat-message-mini-pk {
  width: 325px;
  height: 820px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.messageVS {
  width: 67px;
  height: 67px;
  margin-top: -33.5px;
  margin-bottom: -33.5px;
  z-index: 2;
}
.messageVS-img {
  width: 67px;
  height: 67px;
}
.userA {
  width: 90%;
  height: 335px;
  background-color: #c0e8e8;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Avatar {
  width: 90%;
  height: 50px;
  margin-top: 15px;
  display: flex;
  align-items: center;
}
.AvatarImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.name {
  width: calc(100% - 60px);
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis;
}
.genderAndCountry {
  width: 90%;
  height: 30px;
  margin-top: 15px;
  display: flex;
  align-items: center;
}
.gender {
  font-size: 14px;
  padding: 5px 20px 5px 20px;
  background-color: #999;
  border-radius: 20px;
  color: #fff;
}
.Country {
  font-size: 14px;
  padding: 5px 20px 5px 20px;
  background-color: #e4f9f9;
  border-radius: 20px;
  color: #03aba8;
  margin-left: 10px;
  margin-right: 10px;
}
.time {
  width: 90%;
  height: 20px;
  margin-top: 10px;
  font-size: 14px;
  color: #999999;
}
.PKinformation {
  width: 90%;
  height: 50px;
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.gold {
  display: flex;
  align-items: center;
}
.gold-img {
  width: 20px;
  height: 20px;
}
.sessions-content {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 16px;
}
.gold-num {
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  margin-left: 5px;
}
.Remarks {
  width: 90%;
  height: 90px;
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
.sessions {
  display: flex;
  align-items: center;
}
.sessions-img {
  width: 20px;
  height: 20px;
}
.userB {
  width: 90%;
  height: 315px;
  background-color: #f8e4e0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.btn {
  margin-top: 20px;
  width: 90%;
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.messageHint {
  margin-top: 20px;
  width: 90%;
  height: 50px;
  font-size: 20px;
  color: #999;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}
.messagebtn-left {
  width: 100px;
  height: 50px;
  background-color: #f0836c;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  transition: all 0.4s ease;
}
.messagebtn-left:hover {
  transform: scale(1.05);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.messagebtn-left:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.messagebtn-right {
  width: 100px;
  height: 50px;
  background-color: #4fcacd;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  transition: all 0.4s ease;
}
.messagebtn-right:hover {
  transform: scale(1.05);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.messagebtn-right:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
/* 弹窗 */
.dialog-content {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dialog-content-text {
  width: 90%;
  height: 200px;
  background-color: #c0e8e8;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #03aba8;
  border: 1px solid #03aba8;
}
.myanchor-dialog-btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
.remindermyAnchorDialogReset {
  width: 150px;
  height: 40px;
  margin-top: 30px;
  text-align: center;
  line-height: 40px;
  background: linear-gradient(0deg, #e4ffff, #ffffff);
  color: #03aba8;
  font-size: 18px;
  transition: all 0.4s ease;
  border-radius: 100px;
  border: 1px solid #4fcacd;
}
.remindermyAnchorDialogReset:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.remindermyAnchorDialogReset:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}

.remindermyAnchorDialogConfirm {
  width: 150px;
  height: 40px;
  margin-top: 30px;
  text-align: center;
  line-height: 40px;
  background: linear-gradient(0deg, #4fcacd, #5fdbde);
  color: #ffffff;
  font-size: 18px;
  transition: all 0.4s ease;
  border-radius: 100px;
}
.remindermyAnchorDialogConfirm:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
  opacity: 0.8;
}
.remindermyAnchorDialogConfirm:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
</style>
