<script setup>
import { handleFindWebview } from '@/utils/common'
import noClockAfterWork from '@/static/image/chatBotMessageCard/noClockAfterWork.png'
import noClockBeforeWork from '@/static/image/chatBotMessageCard/noClockBeforeWork.png'
import copy from '@/static/image/chatBotMessageCard/copy.png'
import errorClock from '@/static/image/chatBotMessageCard/errorClock.png'
import prompt from '@/static/image/chatBotMessageCard/prompt.png'

const emits = defineEmits(['openPromptDrawer'])

const props = defineProps({
  extra: Object,
  data: Object,
})

//聊天助手发送的系统消息卡片图片
const getMessageCard = computed(() => {
  switch (props.data.msg_type) {
    case 1117: //催办提醒
      return prompt
    case 1118: //上班未打卡
      return noClockBeforeWork
    case 1119: //下班未打卡
      return noClockAfterWork
    case 1120: //待审批
      return prompt
    case 1121: //抄送
      return copy
    case 1122: //缺卡
      return errorClock
    case 1123: //迟到
      return errorClock
    case 1124: //早退
      return errorClock
    default:
      return ''
  }
})

//聊天助手发送的系统消息文字颜色
const getTextColor = computed(() => {
  const msgType = props.data.msg_type
  //审批催办、审批
  if ([1117, 1120].includes(msgType)) return '#2668BF'
  //上班未打卡、下班未打卡
  if ([1118, 1119].includes(msgType)) return '#46299D'
  //抄送
  if (msgType === 1121) return '#2099BE'
  //缺卡、迟到、早退
  if ([1122, 1123, 1124].includes(msgType)) return '#933BA3'
  return ''
})

//聊天助手发送的系统消息文字内容
const getTextContent = computed(() => {
  const msgType = props.data.msg_type
  //审批催办、审批
  if ([1117, 1120].includes(msgType)) return '立即审批'
  //上班未打卡、下班未打卡
  if ([1118, 1119].includes(msgType)) return '立即打卡'
  //抄送、缺卡、迟到、早退
  if ([1121, 1122, 1123, 1124].includes(msgType)) return '立即查看'
  return ''
})

//点击向webview通信，处理智能助手系统消息
const handleSysMessagePush = () => {
  if (props?.extra?.url) {
    //直接返回地址的，直接在当前页面弹出抽屉打开
    emits('openPromptDrawer', encodeURIComponent(props?.extra?.url))
  } else {
    handleFindWebview(
      `handleChatRobotSysMessagePush('${encodeURIComponent(
        JSON.stringify({
          url: props?.extra?.url,
          msg_type: props?.data?.msg_type,
        }),
      )}')`,
    )
    uni.reLaunch({
      url: '/pages/index/index',
    })
  }
}
</script>

<template>
  <div class="sys-message-push" @click="handleSysMessagePush">
    <div class="sys-message-push-card">
      <span class="sys-message-push-card-title">{{ props.extra.title }}</span>
      <span
        class="sys-message-push-card-message"
        v-html="props.extra.message"
      ></span>
      <img :src="getMessageCard" alt="" />
    </div>
    <div class="sys-message-push-card-btn">
      <span :style="{ color: getTextColor }">{{ getTextContent }}</span>
    </div>
  </div>
</template>

<style lang="less" scoped>
.sys-message-push {
  border-radius: 0 16rpx 16rpx 16rpx;
  overflow: hidden;
  box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
  .sys-message-push-card {
    position: relative;
    width: 486rpx;
    height: 270rpx;
    .sys-message-push-card-title {
      position: absolute;
      top: 28rpx;
      left: 30rpx;
      font-size: 24rpx;
      line-height: 34rpx;
      color: rgba(255, 255, 255, 0.73);
      font-weight: 500;
    }
    .sys-message-push-card-message {
      position: absolute;
      bottom: 44rpx;
      left: 30rpx;
      font-size: 40rpx;
      line-height: 58rpx;
      color: #fff;
      font-weight: bold;
      min-width: 326rpx;
      max-width: 100%;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
  .sys-message-push-card-btn {
    background-color: #fff;
    width: 486rpx;
    height: 78rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text {
      color: #000;
      font-size: 28rpx;
      line-height: 40rpx;
      font-weight: 500;
    }
  }
}
</style>
