<template>
  <view class="page-wrapper global-wrapper">
    <JHeaderTitle
      title="关于我们"
      bgColor="#7737fe"
      color="#fff"
      imgUrl="/static/iconImg/left-white.svg"
    ></JHeaderTitle>
    <view class="header-card">
      <!-- #ifdef APP-PLUS  -->
      <view>{{ edition }}</view>
      <!-- #endif-->
    </view>
    <JMainCard bgColor="rgba(0, 0, 0, 0.1)" wrapPd="50rpx 50rpx 0 50rpx" pd="40rpx">
      <view class="company-info">
        <view class="company-title">公司名称</view>
        <view>{{ companyInfo.companyName }}</view>
      </view>
      <view class="company-info">
        <view class="company-title" @tap="callPhone(companyInfo.companyTel)">联系电话</view>
        <view>{{ companyInfo.companyTel }}</view>
      </view>
      <view class="company-info">
        <view class="company-title">电子邮箱</view>
        <view>{{ companyInfo.companyEmail }}</view>
      </view>
    </JMainCard>
    <JMainCard bgColor="rgba(0, 0, 0, 0.1)" wrapPd="30rpx 50rpx" pd="0">
      <view class="service-wrapper" @tap="jumpPage('/pages/login/serviceAgreement')">
        服务协议 <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </view>
      <view class="service-wrapper privacy" @tap="jumpPage('/pages/login/privacyPolicy')">
        隐私政策 <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </view>
    </JMainCard>
    <!-- #ifdef APP-PLUS  -->
    <JMainCard bgColor="rgba(0, 0, 0, 0.1)" wrapPd="0 50rpx" pd="0">
      <view class="service-wrapper" @tap="checkCurrVersion(1)">
        检查更新
        <view class="edition">v{{ edition }} <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" /></view>
      </view>
    </JMainCard>
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { $getCompanyInfo } from "@/http/apiManager.js"
import JHeaderTitle from "@/components//newComponents/JHeaderTitle/JHeaderTitle"
import JMainCard from "@/components//newComponents/JMainCard/JMainCard"
import { checkCurrVersion, getCurrentVersionPromise } from "@/util/versionManage.js"
onLoad(() => {
  getCompanyInfo()
  // #ifdef APP-PLUS
  getCurrentVersionPromise().then((res) => {
    edition.value = res.version
  })
  // #endif
})
const companyInfo = ref({})
const edition = ref("v1.0.0")
const getCompanyInfo = () => {
  $getCompanyInfo().then(({ bizData }) => {
    companyInfo.value = bizData
  })
}
const callPhone = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber,
  })
}
const jumpPage = (url) => {
  uni.navigateTo({
    url,
  })
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  background-color: $primaryColor;
  .header-card {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 20rpx;
      background: rgba(255, 255, 255, 0.3);
    }
    view {
      color: rgba(255, 255, 255, 0.6);
      font-size: 27rpx;
    }
    .header-title {
      font-size: 33rpx;
      color: #ffffff;
      margin: 20rpx 0;
    }
  }
  .company-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40rpx;
    font-size: 30rpx;
    view {
      color: #fff;
    }
    .company-title {
      color: rgba(255, 255, 255, 0.6);
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
  .service-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 32rpx 53rpx 32rpx 40rpx;
    font-size: 33rpx;
    color: #ffffff;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .privacy {
    border-top: 1rpx solid #5f2ccb;
  }
  .edition {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
  }
}
</style>
