<script lang="ts" setup>

import { useTokenStore, useUserStore } from '@/store'

definePage({
  style: {
    navigationBarTitleText: '关于我们',
    navigationBarBackgroundColor: "#fff"
  },
  excludeLoginPath: false,
})

const userStore = useUserStore();
const tokenStore = useTokenStore()

const phoneNumber = '4000616985'

const makePhoneCall = () => {
  uni
    .makePhoneCall({
      phoneNumber: phoneNumber,
    })
    .catch((err) => {
      console.error(err)
    })
}

const handleLogout = () => {
  userStore.clearUserInfo()
  tokenStore.clearToken()
  uni.switchTab({ url: "/pages/index/index" })
}

const handleClickUserAgreement = () => {
  uni.navigateTo({
    url: '/pages-fg/login/userAgreement',
  })
}

const handleClickPrivacyPolicy = () => {
  uni.navigateTo({
    url: '/pages-fg/login/privacyPolicy',
  })
}

</script>

<template>
  <view class="flex flex-col bg-[#f8f8f8] h-screen">
    <view class="mx-[32rpx] bg-[#fff] rounded-[20rpx] mt-[32rpx] text-[30rpx] text-[#303030]">
      <view class="flex items-center justify-between mr-[16rpx] ml-[32rpx] py-[28rpx] not-last-child">
        <text>客服电话</text>
        <view class="flex items-center gap-[16rpx]" @click="makePhoneCall">
          <text>{{ phoneNumber }}</text>
          <view class="w-[18rpx] h-[36rpx] ml-[14rpx] flex items-center">
            <image src="https://lwzk.ycymedu.com/img/qt/tb_jiantou.png" mode="scaleToFill"
              class="w-[18rpx] h-[36rpx]" />
          </view>
        </view>
      </view>
      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx] not-last-child">
        <text>Email</text>
        <view class="flex items-center">
          <text>yly@ycymedu.com</text>
        </view>
      </view>

      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx] not-last-child"
        @click="handleClickUserAgreement">
        <text>用户协议</text>
        <view class="w-[18rpx] h-[36rpx] ml-auto flex items-center">
          <image src="https://lwzk.ycymedu.com/img/qt/tb_jiantou.png" mode="scaleToFill" class="w-[18rpx] h-[36rpx]" />
        </view>
      </view>

      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx]" @click="handleClickPrivacyPolicy">
        <text>隐私协议</text>
        <view class="w-[18rpx] h-[36rpx] ml-auto flex items-center">
          <image src="https://lwzk.ycymedu.com/img/qt/tb_jiantou.png" mode="scaleToFill" class="w-[18rpx] h-[36rpx]" />
        </view>
      </view>
    </view>

    <view
      :class="`${tokenStore.hasLogin ? 'text-[#979797]' : 'text-[#979797]'} text-[32rpx] text-center mx-[30rpx] bg-white rounded-full py-[22rpx] mt-[80rpx]`"
      @click="handleLogout">退出登录</view>
  </view>
</template>


<style lang="scss" scoped>
.not-last-child {
  border-bottom: 2rpx solid #f8f8f8;
}
</style>
