<template>
  <!-- 个人信息 -->
  <view>
    <nav-shadow></nav-shadow>
    <view class="bg-white px-base py-base flex items-center justify-between border-b border-txBorder" @tap="uploadImge">
      <view class="text-md text-txBase">头像</view>
      <view class="flex items-center">
        <cu-avatar size="120" :src="user.avatar ? user.avatar : ''"></cu-avatar>
        <!-- <u-avatar size="108"
          :src="user.avatar?user.avatar:'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'"></u-avatar> -->
        <u-icon class="ml-10rpx" color="#383838" name="arrow-right" size="32"></u-icon>
      </view>
    </view>
    <view class="bg-white px-base py-30rpx flex items-center justify-between border-b border-txBorder">
      <view class="text-md text-txBase">手机号</view>
      <view>{{ user.phone }}</view>
    </view>
    <view class="bg-white px-base py-30rpx flex items-center justify-between border-b border-txBorder">
      <view class="text-md text-txBase">昵称</view>
      <input class="text-md text-txBase text-right" v-model="user.nickname" type="text" placeholder="请输入昵称" />
    </view>
    <view @tap="sexShow = true" class="bg-white px-base py-30rpx flex items-center justify-between border-b border-txBorder">
      <view class="text-md text-txBase">性别</view>
      <view class="flex items-center">
        <view class="text-md text-txBase">{{ user.gender | filterGender }}</view>
        <u-icon class="text-md" color="#383838" name="arrow-right" size="32"></u-icon>
      </view>
    </view>
    <view @tap="dateShow = true" class="bg-white px-base py-30rpx flex items-center justify-between">
      <view class="text-md text-txBase">出生日期</view>
      <view class="flex items-center">
        <view v-if="user.birthday" class="text-md text-txBase">{{ user.birthday }}</view>
        <view v-else class="text-md text-txGray">请选择出生日期</view>
        <u-icon class="ml-10rpx" color="#383838" name="arrow-right" size="32"></u-icon>
      </view>
    </view>
    <view class="login-btn mx-base mt-80rpx" @tap="onSubmit">保存</view>
    <!-- 选择性别弹窗 -->
    <cu-select v-model="sexShow" :list="sexList" @confirm="sexConfirm" confirm-color="#378264"></cu-select>
    <!-- 出生日期弹窗 -->
    <u-picker v-model="dateShow" mode="time" @confirm="dateConfirm" confirm-color="#378264"></u-picker>
    <!-- 上传头像 -->
   <!-- <upload v-model="show" @result="result"></upload> -->
    <!-- 是否放弃修改弹窗 -->
    <cu-modal v-model="upShow" @confirm="canceConfirm" confirm-color="#378264" show-cancel-button content="是否放弃本次修改"> </cu-modal>
  </view>
</template>

<script>
import uploadImage from '@/utils/ossutil/uploadFile.js';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      show: false,
      sexShow: false,
      sexList: [
        {
          value: 'unknown',
          label: '未知',
        },
        {
          value: 'male',
          label: '男',
        },
        {
          value: 'female',
          label: '女',
        },
      ],
      dateShow: false,
      upShow: false,
      user: {},
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'user',
    }),
  },
  watch: {
    userInfo: {
      deep: true,
      immediate: true,
      handler(e) {
        this.user =Object.assign({}, e);
      },
    },
  },
  onLoad(){
    this.$store.dispatch('user/getUserInfo')
  },
  onBackPress() {
    if (this.show || this.sexShow || this.dateShow) {
      this.show = false;
      this.sexShow = false;
      this.dateShow = false;
      this.upShow = true;
      return true;
    } else {
      return false;
    }
  },
  methods: {
    //上传头像
    uploadImge(){
      console.log(2222)
      uni.chooseImage({
        count: 1,
        crop:{
        		width:'80',
        		height:'80',
        },
        success: (res) => {
          this.user.avatar = res.tempFilePaths[0];
        },
        fail: (err) => {
          console.log(err)
        }
      })
    },
    canceConfirm() {
      uni.navigateBack();
    },
    result(e) {
      this.user.avatar = e;
    },
    //性别选择
    sexConfirm(e) {
      this.user.gender = e[0].value;
    },
    //日期选择
    dateConfirm(e) {
      this.user.birthday = `${e.year}-${e.month}-${e.day}`;
    },
    async uploads() {
      const arr = [];
      try {
        const resData = await this.$api.post('/v1/oss-sts');
        // const host = `https://${resData.bucket}.${resData.region_id}.aliyuncs.com/`;
       const host = `https://${resData.bucket}.${resData.host}/`;
        var upFile = new Promise((r) => {
          uploadImage(
            this.user.avatar,
            {
              uploadImageUrl: host,
              AccessKeySecret: resData.AccessKeySecret,
              OSSAccessKeyId: resData.AccessKeyId,
              stsToken: resData.SecurityToken,
              timeout: 3600,
              dir: 'app/avatar/',
            },
            (result) => {
              console.log(result);
              this.user.avatar = result;
              r();
              console.log(result);
            },
            (err) => {
              console.log(err);
            },
          );
        });
        arr.push(upFile);
      } catch (err) {
        console.log(err);
        this.$u.toast(err.message || err.errMsg);
      }
      return Promise.all(arr);
    },
    //提交
    async onSubmit() {
      if (!this.user.birthday) {
        return this.$u.toast('请选择出生日期');
      }
      if (this.user.avatar != this.$store.getters.user.avatar) {
        await this.uploads();
      }
      let val = this.user;
      let obj = {
        birthday: val.birthday,
      };
      if (val.nickname) {
        obj.nickname = val.nickname;
      }
      if (val.avatar) {
        obj.avatar = val.avatar;
      }
      if (val.gender) {
        obj.gender = val.gender;
      }
      let res = await this.$api.put('/v1/me', obj, {
        custom: {
          loading: true,
        },
      });
      this.$u.toast('修改成功');
      this.$store.dispatch('user/getUserInfo');
      let info = {
        phone: this.user.phone,
        avatar: this.user.avatar,
        nickname: this.user.nickname,
      };
      this.$store.commit('user/SET_REFRESH', info);
    },
  },
};
</script>

<style lang="scss"></style>
