<template>
  <view class='content'>
    <view class='top-card-view'>
      <image class='bg-image' :src='assetsUrl("test_bg.png")' />
      <image class='avatar-image' :src='userInfo.image' />
      <text>{{userInfo.nickName}}</text>
      <text>会员卡</text>
    </view>

    <view class='basic-info-view c-flex-column'>
      <view class='c-flex-row'>
        <text>头像</text>
        <view class='avatar-view'>
          <image class='avatar-image' :src='userInfo.image' />
          <button class='avatar-btn' open-type='chooseAvatar' />
        </view>
      </view>

      <view class='c-flex-row'>
        <text class='nickname'>姓名</text>
        <input placeholder='请输入姓名' type='nickname' v-model='userInfo.nickName' />
      </view>

      <view class='divider' />
      <view class='c-flex-row'>
        <text>手机号</text>
        <input placeholder='15523653265' v-model='userInfo.telephone'/>
      </view>

      <view class='divider' />
      <view class='c-flex-row'>
        <text>性别</text>
        <view class='c-flex-row' @click.stop='changeGender(0)'>
          <image class='gender-image'
                 :src='assetsUrl(currentGender==0?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
          <text class='gender-text'>男</text>
        </view>
        <view class='c-flex-row' @click.stop='changeGender(1)'>
          <image class='gender-image'
                 :src='assetsUrl(currentGender==1?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
          <text class='gender-text'>女</text>
        </view>
      </view>

      <view class='divider' />
      <view class='c-flex-row'>
        <text>生日</text>
        <picker mode='date' @change='changeDate'>
          <text>请选择生日</text>
        </picker>
      </view>
    </view>

    <button class='primary-button'>保存</button>
  </view>
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { useUserStore } from '@/store';

const store= useUserStore()
const {userInfo} = storeToRefs(store)

const currentGender = ref<number>(0);

const changeGender = (index: number) => {
  currentGender.value = index;
};

const changeDate = (e: any) => {
  console.log(e);
};

</script>

<style lang='scss' scoped>
.top-card-view {
  display: flex;
  height: 338rpx;
  position: relative;
  margin: 30rpx;

  .bg-image {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
    position: absolute;
  }

  .avatar-image {
    width: 95rpx;
    height: 95rpx;
    margin-left: 36rpx;
    margin-top: 60rpx;
    background: #FFFFFF;
    border: 1rpx solid #707070;
    position: relative;
    border-radius: 50%;
  }

  text:nth-of-type(1) {
    font-size: 30rpx;
    font-weight: 800;
    color: #FFFFFF;
    position: absolute;
    top: 64rpx;
    left: 158rpx;
  }

  text:nth-of-type(2) {
    font-size: 24rpx;
    font-weight: 400;
    color: #FFFFFF;
    position: absolute;
    top: 116rpx;
    left: 158rpx;
  }
}

.basic-info-view {
  margin: 0 30rpx 30rpx 30rpx;

  .avatar-view {
    display: flex;
    position: relative;

    .avatar-image {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
    }

    .avatar-btn {
      @extend .avatar-image;
      position: absolute;
      border: none;
      background: #00000000;
    }
  }

  input {
    font-size: 30rpx;
    font-weight: 400;
    color: #333333;
  }

  view:not(.divider):nth-of-type(n+1) {
    padding: 0 20rpx;
    height: 120rpx;

    .gender-image {
      width: 37rpx;
      height: 37rpx;
    }

    .gender-text {
      width: 80rpx;
      color: #333333;
      font-size: 30rpx;
      margin-left: 10rpx;
    }

    text:not(.gender-text):nth-of-type(1) {
      font-size: 30rpx;
      width: 120rpx;
      font-weight: 400;
      color: #7E7E7E;
    }

    .nickname:before {
      content: '*';
      color: #F32B2B;
    }
  }
}
</style>
