<template>
  <view class="container">
    <view class="p15">
      <!-- 用户信息 -->
      <view class="user-info" @tap="next('/pages/me/userInfo')">
        <view class="fl1 flex ai-c">
          <u-avatar size="48"></u-avatar>
          <view class="ml10 fs16 fw600">
            <view>{{ isLogin ? userInfo?.userName : '点击登陆' }}</view>
            <view class="fs12 cor-999">{{ isLogin ? userInfo?.phone : '未登录' }}</view>
          </view>
        </view>
        <u-icon name="arrow-right" size="16"></u-icon>
      </view>

      <!-- cells 列表 -->
      <u-cell-group :customStyle="{ 'background-color': '#fff', 'margin-top': '10px', 'border-radius': '8px' }">
        <u-cell icon="thumb-up" size="large" title="我的点赞" isLink @tap="next('/pages/me/good')"></u-cell>
        <u-cell icon="heart" size="large" title="我的收藏" isLink @tap="next('/pages/me/like')"></u-cell>
        <!-- <button open-type="share" class="share">
          <u-cell icon="share" title="分享" size="large" isLink></u-cell>
        </button> -->
        <!-- <u-cell v-if="isLogin" icon="thumb-up" size="large" title="我的关注" isLink @tap="next('/pages/me/look')"></u-cell> -->

        <u-cell icon="level" size="large" title="当前版本" :value="version"></u-cell>
        <u-cell icon="phone" size="large" title="联系我们" :value="contactInfo.configDesc" isLink @tap="makePhone"></u-cell>
      </u-cell-group>

      <!-- 退出登陆 -->
      <u-button v-if="isLogin" plain :customStyle="{ 'margin-top': '20px' }" @tap="logout">退出登录</u-button>
    </view>
  </view>
</template>

<script>
import { getSysConfig } from '@/jtools/api/index';
import { mapState, mapActions } from 'pinia'; //引入映射函数
import useUserStore from '@/jtools/store/user'; //引入store
export default {
  computed: {
    ...mapState(useUserStore, ['userInfo', 'isLogin'])
  },
  data() {
    return {
      version: uni.getAppBaseInfo().appVersion,
      contactInfo: {
        configValue: '18056811878',
        configDesc: '周老师'
      }
    };
  },
  onLoad() {
    getSysConfig({ configKey: 'AppletContact', driverTypeId: -1 }).then(res => {
      this.contactInfo = res.data;
    });
  },
  methods: {
    ...mapActions(useUserStore, ['logout']),
    next(url) {
      if (this.isLogin) {
        uni.navigateTo({
          url: url
        });
      } else {
        uni.navigateTo({
          url: '/pages/me/login'
        });
      }
    },
    makePhone() {
      uni.makePhoneCall({
        phoneNumber: this.contactInfo.configValue
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, rgb(242, 242, 242), #fff); // 线性渐变
  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
  }
  .share {
    background-color: #fff;
    width: 100%;
    padding: 0;
    text-align: left;
    border: 0;
  }
}
</style>
