<template>
  <view class="setting-container">
    <view class="form-item" @click="skipuUserInfo">
      <view class="user-info">
        <u--image
          class="user-img"
          :src="userInfo.user_avatar || '../../static/user-img.png'"
          shape="circle"
          width="60"
          height="60"
        ></u--image>
        <view class="user-box">
          <view class="user-nickname">账号：{{ userInfo.user_nickname }}</view>
          <view class="user-num">用户编号：{{ userInfo.user_level_id }}</view>
        </view>
      </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item" style="margin-top: 40rpx">
      <view class="item-label"> 铃声设置 </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item" style="margin-top: 40rpx" @click="skipuProtocol">
      <view class="item-label"> 隐私政策 </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item" @click="skipuAboutUs">
      <view class="item-label"> 关于我们 </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item" style="margin-top: 40rpx" @click="skipuVersions">
      <view class="item-label"> 版本信息 </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item btn-outLogin" @click="outLogin">
      <view class="item-label"> 退出登录 </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    skipuContract() {
      uni.navigateTo({
        url: "/pages/my/contract",
      });
    },
    skipuUserInfo() {
      uni.navigateTo({
        url: "/pages/my/userInfo",
      });
    },
    skipuProtocol() {
      uni.navigateTo({
        url: "/pages/my/protocol/protocol",
      });
    },
    skipuAboutUs() {
      uni.navigateTo({
        url: "/pages/my/aboutUs/aboutUs",
      });
    },
    skipuVersions() {
      uni.navigateTo({
        url: "/pages/my/versions",
      });
    },
    outLogin() {
      this.$store.dispatch("user/LoginOut");
    },
  },
};
</script>

<style lang="scss">
.setting-container {
  height: calc(100vh - 88rpx);
  background: #f6f6f6;

  .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1px solid #f4f4f4;
    background: #fff;

    .user-info {
      display: flex;
      align-items: center;

      .user-img {
        margin-right: 20rpx;
      }

      .user-nickname {
        margin-bottom: 12rpx;
      }

      .user-num {
        font-size: 24rpx;
        color: #aaaaaa;
      }
    }
  }

  .btn-outLogin {
    position: fixed;
    width: 92%;
    bottom: 0;
    text-align: center;

    .item-label {
      margin: 0 auto;
    }
  }
}
</style>