<template>
  <view class="page-wrapper">
    <JeepayCustomNavbar bgDefaultColor="#fff" title="账号设置" backCtrl="back" />
    <view class="user-photo">
      <view class="title">用户头像</view>
      <view class="right" @tap="uploadImg.preview()">
				<JeepayUploadImg ref="uploadImg" v-model:src="vdata.userInfo.avatarUrl" bizType="applyment" mode="viewbtn" @change="modifyUser" />
        <!-- <image class="user-img" src="/static/orderImg/ysf.svg" mode="scaleToFill" /> -->
        <image style="width: 100rpx; height: 120rpx" src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
      </view>
    </view>
    <view class="user-name-wrapper" @tap="go.to('PAGES_EDIT_FORM', { realname: vdata.userInfo.realname })">
      <view class="title">用户姓名</view>
      <view class="right">
        <view>{{ vdata.userInfo.realname }}</view>
        <image style="width: 100rpx; height: 120rpx" src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
      </view>
    </view>
    <view class="user-name-wrapper remover" @tap="phone.open(vdata.callPhone)">
      <view class="title">注销账号</view>
      <view class="right">
        <image style="width: 100rpx; height: 120rpx" src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
      </view>
    </view>
  </view>
  <CallPhone ref="phone" @callPhone="callPhone" />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app';
import { $modifyUser, $userInfo } from '@/http/apiManager.js'
import storageManage from '@/commons/utils/storageManage.js'
import go from '@/commons/utils/go.js'
import infoBox from '@/commons/utils/infoBox.js'
import CallPhone from './components/CallPhone.vue'

const uploadImg = ref()
const phone = ref(null)
const vdata = reactive({
	userInfo: storageManage.userInfo(),
	siteInfos: storageManage.siteInfos(),
	callPhone: {
	}
})

onMounted(() => {
	vdata.callPhone = {
		tips: '为了您的账户安全，请联系客服进行账号注销处理，客服电话：',
		phone: vdata.siteInfos.siteInfo.companyTel,
		confirmText: '拨打电话'
	}
})

onShow(() => {
	userInfo()
})

const userInfo = () => {
	$userInfo().then(({bizData}) => {
		vdata.userInfo = bizData
		// 保存用户数据
		storageManage.userInfo(bizData)
	})
}

const modifyUser = (ossFileUrl) => {
	$modifyUser({
		avatarUrl: ossFileUrl
	}).then(() => {
		return infoBox.showToast("保存成功")
	})
}

const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: vdata.siteInfos.companyTel
  })
}
</script>

<style lang="scss" scoped>
.title {
  margin-left: 40rpx;
  color: #666666;
}
.right {
  display: flex;
  align-items: center;
}
.user-photo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 240rpx;
  background-color: #fff;
  font-size: 32rpx;

  .user-img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 26rpx;
  }
}
.user-name-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  background-color: #fff;
}
.remover {
  margin-top: 30rpx;
  padding: 0;
}
</style>
