<template>
  <div class="box-border w-auto border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px mt-10px">
    <div class="flex flex-col justify-center text-[14px] text-[#333333] font-normal">
      <div class="mt-[6px] flex items-center justify-between">
        <div class="flex items-center">
          <el-icon size="32" color="#007AFF"><Iphone /></el-icon>
          <!-- <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" /> -->
          <div class="ml-[19px] w-fit flex flex-col">
            <div class="color-#333 text-15px mb-4px">手机号{{ user.mobile ? '（已绑定）' : '' }}</div
            ><div class="color-#999">手机号可以用于登录帐号{{ user.mobile }}</div></div
          >
        </div>
        <el-button :type="user.mobile ? 'danger' : 'primary'" class="ml-10px">{{ user.mobile ? '解绑' : '绑定' }}</el-button>
      </div>
      <div class="mt-[30px] flex items-center justify-between">
        <div class="flex items-center">
          <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
          <div class="ml-[19px] w-fit flex flex-col">
            <div class="color-#333 text-15px mb-4px">QQ{{ user.qqOpenId ? '（已绑定）' : '' }}</div
            ><div class="color-#999">QQ可以用于登录帐号</div></div
          >
        </div>
        <el-button :type="user.qqOpenId ? 'danger' : 'primary'" class="ml-10px" @click="handleBind('qq')">{{ user.qqOpenId ? '解绑' : '绑定' }}</el-button>
      </div>
      <div class="mt-[30px] flex items-center justify-between">
        <div class="flex items-center">
          <img src="~/assets/images/weixin-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
          <div class="ml-[19px] w-fit flex flex-col">
            <div class="color-#333 text-15px mb-4px">微信{{ user.wxOpenId ? '（已绑定）' : '' }}</div
            ><div class="color-#999">微信可以用于登录帐号</div></div
          >
        </div>
        <el-button :type="user.wxOpenId ? 'danger' : 'primary'" class="ml-10px" @click="handleBind('wx')">{{ user.wxOpenId ? '解绑' : '绑定' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Iphone } from '@element-plus/icons-vue'
  import { onMounted } from 'vue'
  import { handleLoginQQ, handleLoginWechat } from '~/utils/login'
  import { getUserInfo, cancelSocialBind } from '~/api/personal-center/index'
  import type { UserExtendRespVO } from '~/api/personal-center/types'
  import { useMessage } from '~/composables/useMessage'
  const message = useMessage()
  onMounted(() => {
    getUser()
  })

  const user = ref({} as UserExtendRespVO)
  const getUser = async () => {
    const res = await getUserInfo()
    console.log(res)
    user.value = res.data
  }

  const handleBind = async (type: string) => {
    if (type === 'qq') {
      if (user.value.qqOpenId) {
        const res = await message.confirm('确定解绑QQ吗？', '提示')
        if (!res) return
        cancelSocialBind({ type: 35, openid: user.value.qqOpenId }).then((res) => {
          if (res.code === 0) {
            ElMessage.success('解绑成功')
            getUser()
          }
        })
      } else {
        handleLoginQQ()
      }
    }
    if (type === 'wx') {
      if (user.value.wxOpenId) {
        const res = await message.confirm('确定解绑微信吗？', '提示')
        if (!res) return
        cancelSocialBind({ type: 32, openid: user.value.wxOpenId }).then((res) => {
          if (res.code === 0) {
            getUser()
            ElMessage.success('解绑成功')
          }
        })
      } else {
        handleLoginWechat()
      }
    }
  }
</script>

<style scoped></style>
