<template>
  <div class="custom">
    <template
      v-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.SERVICE"
    >
      <div>
        <h1>
          <label>{{ extension.title }}</label>
          <a
            v-if="extension.hyperlinks_text"
            :href="extension.hyperlinks_text.value"
            target="view_window"
          >
            {{ extension.hyperlinks_text.key }}
          </a>
        </h1>
        <ul v-if="extension.item && extension.item.length > 0">
          <li v-for="(item, index) in extension.item" :key="index">
            <a
              v-if="isUrl(item.value)"
              :href="item.value"
              target="view_window"
            >
              {{ item.key }}
            </a>
            <p v-else>
              {{ item.key }}
            </p>
          </li>
        </ul>
        <article>{{ extension.description }}</article>
      </div>
    </template>
    <template
      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.EVALUATE"
    >
      <div class="evaluate">
        <h1>
          {{ TUITranslateService.t('message.custom.对本次服务评价') }}
        </h1>
        <ul class="evaluate-list">
          <li
            v-for="(item, index) in Math.max(customData.score, 0)"
            :key="index"
            class="evaluate-list-item"
          >
            <Icon :file="star" class="file-icon" />
          </li>
        </ul>
        <article>{{ customData.comment }}</article>
      </div>
    </template>
    <template
      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.ORDER"
    >
      <div class="order" @click="openLink(customData.link)">
        <img :src="customData.imageUrl" />
        <main>
          <h1>{{ customData.title }}</h1>
          <p>{{ customData.description }}</p>
          <span>{{ customData.price }}</span>
        </main>
      </div>
    </template>
    <template
      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.LINK"
    >
      <div class="textLink">
        <p>{{ customData.text }}</p>
        <a :href="customData.link" target="view_window">
          {{ TUITranslateService.t('message.custom.查看详情>>') }}
        </a>
      </div>
    </template>
    <template
      v-else-if="
        customData.businessID === CHAT_MSG_CUSTOM_TYPE.RED_ENVELOPE
      "
    >
      <!-- 红包 -->
      <view
        :style="{ background: isBackground }"
        class="red-envelope"
        @click="onClaim"
      >
        <view class="top-title">
          <Icon
            :file="isOpen ? kaiEnvelope : unopenedEnvelope"
            width="78rpx"
            height="80rpx"
          />
          <text class="title">
            {{ customData.title }}
          </text>
        </view>
        <text class="bottom-text">积分红包</text>
        <!-- 需要处理报错 -->
        <!-- <text>
          {{ claimStatus }}
        </text> -->
      </view>
    </template>
    <!-- 商品详情 -->
    <template
      v-else-if="customData.businessID === CHAT_MSG_CUSTOM_TYPE.GOODS"
    >
      <view class="goods-box" @click="onGoods">
        <image
          mode="heightFix"
          :src="goodsData.cover"
          class="img-box"
        ></image>
        <view class="right-box">
          <text class="name">{{ goodsData.title }}</text>
          <text class="price">¥ {{ goodsData.price }}</text>
        </view>
      </view>
    </template>
    <template v-else>
      <span v-html="content.custom" />
    </template>
  </div>
</template>

<script lang="ts" setup>
  import {
    watchEffect,
    ref,
    watch,
    computed,
    reactive
  } from '../../../../adapter-vue'
  import {
    TUITranslateService,
    IMessageModel
  } from '@tencentcloud/chat-uikit-engine-lite'
  import { isUrl, JSONToObject } from '../../../../utils/index'
  import { CHAT_MSG_CUSTOM_TYPE } from '../../../../constant'
  import { ICustomMessagePayload } from '../../../../interface'
  import Icon from '../../../common/Icon.vue'
  import star from '../../../../assets/icon/star-light.png'
  import unopenedEnvelope from '../../../../assets/icon/unopened-envelope.svg'
  import kaiEnvelope from '../../../../assets/icon/kai-unopened-envelope.svg'
import { navigateTo } from '../../../../../utils/router'

  interface Props {
    messageItem: IMessageModel
    content: any
  }

  interface IEmit {
    (key: 'claim'): void
  }

  const emits = defineEmits<IEmit>()

  const props = withDefaults(defineProps<Props>(), {
    messageItem: undefined,
    content: undefined
  })

  // console.log(props.messageItem, '获取到红包信息后更新UI')

  const custom = ref()
  const message = ref<IMessageModel>()
  const extension = ref()
  const customData = ref<ICustomMessagePayload>({
    businessID: ''
  })

  props.messageItem?.cloudCustomData &&
    JSON.parse(props.messageItem?.cloudCustomData)
  // 红包领取状态
  const claimStatus = reactive({
    in: props.messageItem?.cloudCustomData
      ? JSON.parse(props.messageItem?.cloudCustomData).in
      : false,
    out: props.messageItem?.cloudCustomData
      ? JSON.parse(props.messageItem?.cloudCustomData).out
      : false
  })

  /** 红包样式 */
  const isOpen = computed(() => claimStatus.in || claimStatus.out)
  const isBackground = computed(() => {
    if (props.messageItem.type === 'in') {
      return claimStatus.in ? '#ffaf55' : '#f3901f'
    } else {
      return claimStatus.out ? '#ffaf55' : '#f3901f'
    }
  })

  /** 商品详情显示数据 */
  const goodsData = computed(() => {
    return JSON.parse(props.messageItem.payload.data)
  })

  /** 点击商品详情 */
  const onGoods = () => {
    navigateTo('/pages/mall/detail', { productId: goodsData.value.id })
  }

  watchEffect(() => {
    custom.value = props.content
    message.value = props.messageItem
    const { payload } = props.messageItem
    customData.value = payload.data || ''
    customData.value = JSONToObject(payload.data)
    if (payload.data === CHAT_MSG_CUSTOM_TYPE.SERVICE) {
      extension.value = JSONToObject(payload.extension)
    }
  })

  const openLink = (url: any) => {
    window.open(url)
  }

  /** 红包领取 */
  const onClaim = () => {
    // console.log(customData.value)
    emits('claim')
  }

  // Vue3组件抛出方法
  defineExpose({
    // 修改领取红包后状态
    updateClaimStatus(data: any) {
      // console.log('更新红包领取状态')
      claimStatus.in = data.in
      claimStatus.out = data.out
    }
  })
</script>
<style lang="scss" scoped>
  @import '../../../../assets/styles/common';

  a {
    color: #679ce1;
  }

  .custom {
    font-size: 14px;

    h1 {
      font-size: 14px;
      color: #000;
    }

    h1,
    a,
    p {
      font-size: 14px;
    }

    .evaluate {
      ul {
        display: flex;
        padding: 10px 0;
      }

      &-list {
        display: flex;
        flex-direction: row;

        &-item {
          padding: 0 2px;
        }
      }
    }

    .order {
      display: flex;

      main {
        padding-left: 5px;

        p {
          font-family: PingFangSC-Regular;
          width: 145px;
          line-height: 17px;
          font-size: 14px;
          color: #999;
          letter-spacing: 0;
          margin-bottom: 6px;
          word-break: break-word;
        }

        span {
          font-family: PingFangSC-Regular;
          line-height: 25px;
          color: #ff7201;
        }
      }

      img {
        width: 67px;
        height: 67px;
      }
    }
  }

  .red-envelope {
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;
    padding: 20rpx;
    .top-title {
      display: flex;
      align-items: center;
      padding-bottom: 10rpx;
      margin-bottom: 10rpx;
      border-bottom: 2rpx solid #ffffff;
      .title {
        width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
      }
    }
    .bottom-text {
      font-size: 24rpx;
      color: #ffffff;
    }
  }

  .goods-box {
    display: flex;
    .img-box {
      flex-shrink: 0;
      width: 180rpx;
      height: 240rpx;
      border-radius: 12rpx;
      overflow: hidden;
      background: rgb(182, 182, 182);
      margin-right: 20rpx;
    }
    .right-box {
      width: 50vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
      }
      .price {
        font-size: 28rpx;
        font-weight: 500;
        color: #ff7201;
      }
    }
  }
</style>
