<script setup>
  import { navigateTo } from '@/utils/router'
  import TUIChatEngine, {
    TUIConversationService,
    TUIFriendService
  } from '@tencentcloud/chat-uikit-engine-lite'
  import { TUIGlobal } from '@tencentcloud/universal-api'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import { getUserServiceFree } from '@/api/my-index'

  const customerData = ref({})
  const getList = async () => {
    const res = await getUserServiceFree()
    customerData.value = res?.data || {}
    console.log( customerData.value)
  }

  const handleSwitchConversation = async () => {
    // 在这里可以添加提交验证信息的逻辑
    let source = 'AddSource_Type_Web' // 来源渠道
    // #ifdef H5
    source = 'AddSource_Type_H5'
    // #endif

    // 判断是否为 App（5+ App）
    // #ifdef APP-PLUS
    source = 'AddSource_Type_App'
    // #endif
    await TUIFriendService.addFriend({
      to: customerData.value.imUserId,
      source,
      remark: customerData.value.nickname,
      type: TUIChatEngine.TYPES.SNS_ADD_TYPE_BOTH
    })
    TUIConversationService.switchConversation(
      `C2C${customerData.value.imUserId}`
    )
    TUIGlobal?.navigateTo({
      url: `/TUIKit/components/TUIChat/index?id=${customerData.value.id}`
    })
  }

  onLoad(() => {
    getList()
  })
</script>

<template>
  <view class="customer-service-index">
    <view class="item-box">
      <image
        src="/static/images/my-index/customer-img.png"
        mode="heightFix"
        class="avatar"
      ></image>
      <text class="tisp">Hi~有什么可以帮到你？</text>
      <button
        @tap="navigateTo('/pages/my-index/customer-service/third-party')"
      >
        第三方客服
      </button>
      <button
        v-if="customerData?.imUserId"
        class="btn"
        @click="handleSwitchConversation"
      >
        APP客服
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .customer-service-index {
    height: 100%;
    padding: 0 24rpx;
    .item-box {
      margin-top: 10vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: PingFang SC, PingFang SC;

      text-align: left;
      font-style: normal;
      text-transform: none;
      .avatar {
        height: 192rpx;
      }
      .tisp {
        margin: 32rpx 0 112rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #999999;
      }
      button + button {
        margin-top: 32rpx;
      }
      button {
        width: 100%;
        height: 84rpx;
        line-height: 84rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #ffffff;
        background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
        border-radius: 16rpx;
        box-sizing: border-box;
        &::after {
          display: none;
        }
      }

      .btn {
        background: #ffffff;
        color: #00d993;
        border: 2rpx solid #00d993;
      }
    }
  }
</style>
