<script setup>
defineOptions({
  name: 'TakeIndex',
})
import { computed, ref } from 'vue'
import { ElButton, ElDrawer, ElMessage } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import router from '@/router'
import {
  getMessageFromService,
  getSendUserService,
  userConfirmMessageService,
  userDeleteMessageService,
  pickUpExpressService,
} from '@/api/user.js'
import { useInfoStore } from '@/stores/info.js'

const infoStore = useInfoStore()
const visible = ref(false)
const msgList = ref([])

// 获取别人发给用户的信息
const getMessageFromOthers = async () => {
  let result = await getMessageFromService(infoStore.info.id)
  for (const msg of result.data) {
    msg.senderName = await getWhoSendMsg(msg.sendUserId) // 获取发件人姓名并保存到消息中
  }
  msgList.value = result.data
}

getMessageFromOthers()

const getWhoSendMsg = async id => {
  let result = await getSendUserService(id)
  return result.data
}

// 用户确认收到消息
const confirm = async id => {
  let result = await userConfirmMessageService(id)
  if (result.code == 200) {
    ElMessage({
      message: result.message,
      type: 'success',
      grouping: true,
    })
    getMessageFromOthers()
  }
}

const calculate = computed(() => {
  return msgList.value.filter(msg => msg.mark === 1).length
})

// 转换日期格式
const formatDate = cellValue => {
  const date = new Date(cellValue)
  return date.toLocaleString()
}

// 用户删除消息
const deleteMsg = async id => {
  let result = await userDeleteMessageService(id)
  if (result.code == 200) {
    ElMessage({
      message: result.message,
      type: 'success',
      grouping: true,
    })
    getMessageFromOthers()
  }
}

// 一键已读
const clearDot = async () => {
  const unreadMessages = msgList.value.filter(msg => msg.mark === 1)
  if (unreadMessages.length === 0) {
    ElMessage({
      message: '没有未读消息!',
      type: 'warning',
    })
    return
  }
  // 循环处理每一条未读消息
  for (const msg of unreadMessages) {
    // 调用确认消息服务，传入消息 ID
    let result = await userConfirmMessageService(msg.id)
    if (result.code !== 200) {
      // 如果某条消息处理失败，给出提示
      ElMessage({
        message: `消息ID ${msg.id} 确认失败: ${result.message}`,
        type: 'error',
      })
    }
  }
  ElMessage({
    message: '消息确认成功!',
    type: 'success',
  })
  // 处理完后，重新获取消息列表
  getMessageFromOthers()
}

const goToChat = userName => {
  router.push({
    name: 'Chat',
    params: {
      userName: userName,
    },
  })
}

// 代取快递模组
const PickUpExpressDTO = ref({
  master: '',
  expressCode: '',
  claimCode: '',
})

// 代取快递
const pickUp = async () => {
  let result = await pickUpExpressService(PickUpExpressDTO.value)
  if (result.code == 200) {
    ElMessage({
      message: result.message,
      type: 'success',
      grouping: true,
    })
  } else {
    ElMessage({
      message: result.message,
      type: 'warning',
      grouping: true,
    })
  }
  clear()
}

const clear = () => {
  ;(PickUpExpressDTO.value.master = ''),
    (PickUpExpressDTO.value.expressCode = ''),
    (PickUpExpressDTO.value.claimCode = '')
}
</script>

<template>
  <div class="container">
    <div class="bg">
      <el-row :gutter="0">
        <el-col :span="3">
          <img
            src="@/assets/gsl/logo1.png"
            style="width: 100px; height: 100px; margin: 0 25px"
          />
        </el-col>
        <el-col :span="3" @click="router.push('/alLogin')">
          <p class="div-p">首页</p>
        </el-col>

        <el-popover placement="bottom" :width="150" trigger="hover">
          <template #reference>
            <el-col :span="3">
              <p class="div-p">快递服务</p>
            </el-col>
          </template>
          <div class="funcs" @click="router.push('/get')">收件</div>
          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
          <div class="funcs" @click="router.push('/send')">寄件</div>
          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
          <div class="funcs" @click="router.push('/query')">查询快递</div>
          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
          <div class="funcs" @click="router.push('/take')">代取快递</div>
        </el-popover>
        <el-popover placement="bottom" :width="150" trigger="hover">
          <template #reference>
            <el-col :span="3">
              <p class="div-p">可持续发展</p>
            </el-col>
          </template>
          <div class="funcs">ESG</div>
          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
          <div class="funcs">零碳未来</div>
          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
          <div class="funcs">社会关怀</div>
        </el-popover>

        <el-popover placement="bottom" :width="150" trigger="hover">
          <template #reference>
            <el-col :span="3">
              <p class="div-p">关于我们</p>
            </el-col>
          </template>
          <div class="funcs">企业介绍</div>
          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
          <div class="funcs">联系方式</div>
          <el-divider style="margin-top: 10px; margin-bottom: 10px" />
          <div class="funcs">开发人员</div>
        </el-popover>

        <div class="userPic">
          <button class="inbox-btn" @click="visible = true">
            <svg
              viewBox="0 0 512 512"
              height="16"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
              ></path>
            </svg>
            <!-- msg-count是新消息的数量 -->
            <span class="msg-count">{{ calculate }}</span>
          </button>
          <el-drawer v-model="visible" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
              <!-- 消息头 -->
              <h4 :id="titleId" :class="titleClass">消息列表</h4>
              <!-- 一键已读功能按钮 -->
              <p class="readAll" @click="clearDot">一键已读</p>
              <!-- 关闭抽屉功能 -->
              <el-button type="danger" @click="close">
                <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                Close
              </el-button>
              <div></div>
              <br /><br />
            </template>
            <!-- 卡片，数组名叫 msgList-->
            <el-card
              style="max-width: 560px; margin-bottom: 10px"
              v-for="item in msgList"
              :key="item.id"
            >
              <template #header>
                <div class="card-header">
                  <!-- 发件人 -->
                  <el-badge v-if="item.mark == 1" is-dot class="item"></el-badge
                  ><span @click="goToChat(item.senderName)"
                    >发件人：{{ item.senderName }}
                  </span>
                  <br />
                  <span>发送时间：{{ formatDate(item.createTime) }}</span>
                  <!-- 删除功能 -->
                  <el-icon
                    color="red"
                    style="float: right; cursor: pointer"
                    @click="deleteMsg(item.id)"
                    ><Close
                  /></el-icon>
                </div>
              </template>
              <!-- 内容 -->
              <p class="text item">{{ item.content }}</p>
              <!-- 确认功能 -->
              <el-button
                size="default"
                type="primary"
                style="float: right; margin-bottom: 10px"
                @click="confirm(item.id)"
                v-if="item.mark == 1"
                >确认</el-button
              >
            </el-card>
          </el-drawer>
        </div>
      </el-row>
    </div>

    <br />
    <span>
      <div class="title">
        <strong style="font-size: 50px; color: red; letter-spacing: 5px"
          >代取快递</strong
        >
      </div>

      <!-- 代取主体 -->
      <form class="form" :model="PickUpExpressDTO">
        <input
          placeholder="请输入快递主人姓名"
          class="input2"
          type="text"
          v-model="PickUpExpressDTO.master"
        />
        <input
          placeholder="请输入快递码"
          class="input2"
          type="text"
          v-model="PickUpExpressDTO.expressCode"
        />
        <input
          placeholder="请输入取件码"
          class="input2"
          type="text"
          v-model="PickUpExpressDTO.claimCode"
        />
        <button @click="pickUp" class="pButton" type="button">代取</button>
      </form>
    </span>
  </div>
</template>

<style scoped>
body {
  background: #f5f7fa;
}
.container {
  width: 125vh;
  height: 100vh;
  background-color: white;
  margin: 0 auto;
  position: relative;
}
a {
  color: inherit; /* 使链接文本颜色继承父元素的颜色 */
  text-decoration: none; /* 移除下划线 */
}

/* 如果你还想改变鼠标悬停时的样式 */
a:hover {
  text-decoration: none; /* 悬停时仍然没有下划线 */
  cursor: auto; /* 改变鼠标指针样式为默认，或根据需要设置其他样式 */
}

.el-row {
  margin-bottom: 20px;
  justify-content: space-between;
}
.el-col {
  border-radius: 4px;
  margin-right: 50px;
  width: 100px;
  height: 100px;
}
.userPic {
  height: 90px;
  width: 90px;
  margin-top: 15px;
}
.el-col:last-child {
  margin-right: 0px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.inbox-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #464646;
  cursor: pointer;
  transition: all 0.3s;
}
.inbox-btn svg path {
  fill: white;
}
.inbox-btn svg {
  height: 17px;
  transition: all 0.3s;
}
.msg-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
  font-size: 0.7em;
  color: red;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inbox-btn:hover {
  transform: scale(1.1);
}
.div-p {
  font-size: 13px;
  text-align: center;
  margin-top: 20%;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-col:hover {
  cursor: pointer;
  border-bottom: 1px solid red;
  color: red;
}
.funcs {
  text-align: center;
  cursor: pointer;
}
.funcs:hover {
  color: red;
}
.title {
  width: 1169px;
  height: 150px;
  /* background-color: aqua; */
  text-align: center;
  padding-top: 50px;
}
.queryArea {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-top: 100px;
  margin-left: 315px;
}
.el-button,
.el-button.is-round {
  padding: 20px 20px;
}
:root {
  --el-border-radius-base: 1px 5px 5px 1px;
}
.el-input__wrapper {
  border-radius: 5px 0 0 5px;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.demo-collapse {
  position: absolute;
  left: 10%;
}
.item {
  margin-top: 10px;
  margin-right: 10px;
}
.goodsInfo {
  width: 1000px;
  height: 50px;
  border-radius: 25px;
  background-color: #eea8b8;
  margin-bottom: 20px;
}
.goodsInfo > p {
  margin-top: 15px;
  margin-left: 16px;
}
.goodsInfo:hover {
  background-color: pink;
  height: 200px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  background-color: transparent;
  position: relative;
}

.btn:hover > .icon {
  transform: scale(1.2);
  cursor: pointer;
  transition: 0.2s linear;
}

.btn:focus > .icon {
  fill: #fd1853;
  animation: grosseur 0.2s linear;
}

@keyframes grosseur {
  0% {
    width: 50px;
    height: 50px;
    fill: #fd1853;
  }

  100% {
    width: 30px;
    height: 30px;
    fill: #fd1853;
  }
}
.readAll {
  font-size: 10px;
  margin-right: 20px;
  cursor: pointer;
}
.readAll:hover {
  color: deepskyblue;
}
.expandable {
  width: 1000px;
  height: 50px;
  background-color: #eea8b8;
  border-radius: 25px;
  margin-bottom: 25px;
  overflow: hidden;
  transition: all 1s ease;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
}

.expandable.expanded {
  height: auto; /* 或者设置具体的像素值 */
}

.hidden-content {
  display: none;
  transition:
    opacity 0.8s ease,
    max-height 0.8s ease;
}

.expandable.expanded .hidden-content {
  display: block;
}

/* From Uiverse.io by aboalsim114 */
.form {
  margin-left: 25%;
  width: 600px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: linear-gradient(to bottom, #0077be, #3b8df2);
  border-radius: 10px;
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
  transform: rotateX(-10deg);
  transition: all 0.3s ease-in-out;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  animation: form-animation 0.5s ease-in-out;
}

@keyframes form-animation {
  from {
    transform: rotateX(-30deg);
    opacity: 0;
  }

  to {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

.input2 {
  padding: 10px;
  border-radius: 5px;
  background-color: transparent;
  transition:
    border-color 0.3s ease-in-out,
    background-color 0.3s ease-in-out,
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  color: rgb(255, 255, 255);
  border: 2px solid #3b8df2;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.input2::placeholder {
  color: #fff;
}

.input2:hover,
.input2:focus {
  border-color: #3b8df2;
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05) rotateY(20deg);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  outline: none;
}

.pButton {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #3b8df2;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateX(-10deg);
  transition: all 0.3s ease-in-out;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.pButton:hover {
  background-color: #0077be;
  font-size: 17px;
  transform: scale(1.05) rotateY(20deg) rotateX(10deg);
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
</style>
