<template>
  <view class="mine-container" style="margin-top: 220rpx;">
    <uni-row style=" display: flex; flex-direction: row; justify-content: space-around;">
      <uni-col :xs="24" :sm="12" :md="8">
        <u-card margin="30rpx" title="个人资料">
          <template #body>
            <!--  <InfoAvatar style="width:100px; " /> -->

            <!--  <image :src="imageSrc" class="cu-avatar xl" mode="heightFix" style="border-radius: 5px;">
            </image> -->
            <view style="border:1px solid #fff; width: 80px; height: 80px; border-radius: 80px; margin: 0 auto;">
              <u-image :src="imageSrc" style="margin-top:0px; " shape="circle" class="user-avatar" width="80px"
                height="80px" />
            </view>
            <InfoIndex style="width: 100%; margin-top: 20px; " />
          </template>
        </u-card>
      </uni-col>
      <!-- <uni-col :xs="24" :sm="12" :md="6">
        <u-card margin="30rpx" title="修改头像">
          <template #body>
            <InfoAvatar style="width: 100%; " />
          </template>
        </u-card>
      </uni-col> -->
      <uni-col :xs="24" :sm="12" :md="8">
        <u-card margin="30rpx" title="个人资料修改">
          <template #body>
            <InfoEdit style="width: 100%;" />
          </template>
        </u-card>
      </uni-col>
      <uni-col :xs="24" :sm="12" :md="8">
        <u-card margin="30rpx" title="密码修改">
          <template #body>
            <InfoPwd style="width: 100%" />
          </template>
        </u-card>
      </uni-col>
    </uni-row>

    <UniMenu />
  </view>
</template>

<script>
  import useUserStore from '@/store/user';
  import UniMenu from '@/components/uni-menu/uni-menu.vue'
  import InfoAvatar from '@/pages/mine/avatar/index.vue'
  import InfoEdit from '@/pages/mine/info/edit.vue'
  import InfoPwd from '@/pages/mine/pwd/index.vue'
  import InfoIndex from '@/pages/mine/info/index.vue'
  export default {
    components: {
      UniMenu,
      InfoAvatar,
      InfoEdit,
      InfoPwd,
      InfoIndex
    },
    data() {
      return {

      }
    },
    computed: {
      nick() {
        // debugger
        // return  userStore.username
        const userStore = useUserStore();
        return userStore.name
      },
      imageSrc() {

        const userStore = useUserStore();
        return userStore.avatar
      },

      username() {
        // debugger
        // return  userStore.username
        const userStore = useUserStore();
        return userStore.username
      },
      avatar() {
        //debugger
        const userStore = useUserStore();
        return userStore.avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
    // // 监听页面返回
    // onBackPress() {
    //   //debugger
    //   uni.redirectTo({
    //     url: '/pages/index/index'
    //   });
    //   // 阻止界面返回默认操作， 这一步主要是为了防止界面出现异常，uniapp有对onBackPress的详细讲解
    //   return true;
    // },

    onShow() {
      const userStore = useUserStore();
      userStore.setparentmenutitle('我的');
      userStore.setchildrenmenutitle('个人资料');
    },
    onLoad() {
      // this.getUser()
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  //   @import '@/scss/global.scss';
  //   @import '@/scss/colorui.css';

  page {
    background-color: #f5f6f7;
  }
</style>