<template>
  <view class="user-info">
    <view class="card">
      <view class="info-item" @click="avatarUpload">
        <view>头像</view>
        <view class="avatar">
          <uv-image :src="userInfo?.avatar" shape="circle" width="90rpx" height="90rpx" />
          <uv-icon name="arrow-right" size="18" color="#bbb" />
        </view>
      </view>
      <view class="info-item">
        <view>姓名</view>
        <view>{{ userInfo?.realname }}</view>
      </view>
      <view class="info-item">
        <view>身份证号</view>
        <view>{{ userInfo?.idCardNumber }}</view>
      </view>
      <view class="info-item">
        <view>手机号</view>
        <view>{{ userInfo?.phone }}</view>
      </view>
    </view>
    <view class="card">
      <view class="info-item">
        <view>角色</view>
        <view>{{ getRolesName(userInfo?.roles) }}</view>
      </view>
      <view class="info-item">
        <view>公司名称</view>
        <view>{{ userInfo?.drugEntName }}</view>
      </view>
    </view>
    <view class="card signature-box">
      <view>个性签名</view>
      <textarea
        class="textarea"
        v-model="params.userSign"
        placeholder="请输入个性签名..."
        auto-height
      />
    </view>
    <view class="submit">
      <view class="btn" @click="submitClick">保 存</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/store/login'
import { reactive, computed } from 'vue'
import { RoleEnum } from '@/constants/rolesType'
import { fileUpload } from '@/service/modules/uploadFile'
import { updateUserInfo } from '@/service/modules/userInfo'

const loginStore = useLoginStore()
const userInfo: any = computed(() => loginStore.currentUserInfo)

const params = reactive({
  userId: userInfo.value.userId,
  userSign: userInfo.value.userSign || '',
  avatar: userInfo.value.userSign || ''
})

const getRolesName = (roles: number[] | null) => {
  if (!roles?.length) return
  return RoleEnum[roles[0]]
}

// 头像上传
function avatarUpload() {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success(res: any) {
      uni.uploadFile({
        url: fileUpload(),
        filePath: res.tempFilePaths[0],
        name: 'file',
        header: {
          Authorization: `Bearer ${loginStore.accessToken}`
        },
        success: (uploadFileRes: any) => {
          let { data } = JSON.parse(uploadFileRes.data)
          const url = import.meta.env.VITE_APP_URL + data.url
          params.avatar = url
          submitClick()
        },
        fail(e) {
          console.log(e)
        }
      })
    }
  })
}
async function submitClick() {
  const res = await updateUserInfo(params)
  if (res.code === 0) {
    loginStore.getUserInfoByCode()
    uni.showToast({
      title: '更新成功',
      icon: 'success'
    })
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  background-color: #f4f4f4;
  .card {
    padding: 0 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    :last-child {
      border-bottom: none;
    }
  }

  .info-item {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #d8d8d8;
    line-height: 40rpx;
    .avatar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 130rpx;
    }
    .input-box {
      text-align: right;
    }
  }
  .signature-box {
    padding: 22rpx 40rpx;
    background: #ffffff;
    .textarea {
      width: 660rpx;
      padding-top: 30rpx;
      min-height: 400rpx;
    }
  }
  .submit {
    padding: 16rpx 26rpx;
    background: #ffffff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    .btn {
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      background: #6eb657;
      border-radius: 10rpx;
      color: #ffffff;
      font-size: 30rpx;
    }
  }
}
</style>
rpx
