<template>
  <view class="mine-content">
    <view class="user-info">
      <image
        :src="
          isNetAvatar(userInfo.avatar)
            ? userInfo.avatar
            : '/static/img/avatar.png'
        "
        class="avatar"
      ></image>
      <view class="nickname">{{ userInfo.userName }}</view>
    </view>
    <view class="menu-list">
      <view
        class="menu-item"
        v-for="(item, idx) in menuList"
        :key="idx"
        @click="goPage(item.url)"
        v-if="item.show"
      >
        <image :src="item.icon" class="menu-icon"></image>
        <text class="menu-text">{{ item.text }}</text>
        <u-icon name="arrow-right" color="#bbb" size="22"></u-icon>
      </view>
      <view class="btn" @click="handleLogout">退出登录</view>
    </view>
  </view>
</template>

<script>
import { logout } from "@/pages/api";
export default {
  data() {
    return {
      userInfo: {},
      menuList: [
        // {
        //   icon: "/static/img/repair.png",
        //   text: "我的维修记录",
        //   url: "/pagesA/repair/record",
        // },
        // {
        //   icon: "/static/img/report.png",
        //   text: "我的报事记录",
        //   url: "/pagesA/bs/record",
        // },
        {
          icon: "/static/img/巡检记录.png",
          text: "我的巡检记录",
          url: "/pagesA/xjPage/xjRecord",
          show: uni.getStorageSync("showInspection"),
        },
        // {
        //   icon: "/static/img/password.png",
        //   text: "修改密码",
        //   url: "/pagesA/mine/changePwd",
        // },
      ],
    };
  },
  onLoad() {
    if (!uni.getStorageSync("token")) {
      uni.redirectTo({
        url: "/pages/login/login",
      });
    }
    const userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
      this.$store.dispatch("user/setUserInfo", userInfo);
    }
    this.userInfo = userInfo;
  },
  methods: {
    isNetAvatar(url) {
      return typeof url === "string" && /^https?:\/\//.test(url);
    },

    async handleLogout() {
      try {
        await logout();
      } catch (e) { }
      await this.$store.dispatch("user/logout");
      uni.reLaunch({
        url: "/pages/login/login",
      });
    },
    goPage(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.btn {
  width: 414rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 600rpx;
  background: linear-gradient(
    86.25deg,
    rgba(13, 198, 198, 1) 3.03%,
    rgba(19, 194, 194, 1) 3.03%,
    rgba(70, 219, 213, 1) 96.43%
  );
  color: #fff;
  font-size: 34rpx;
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  // top: 200rpx;
  bottom: 60rpx;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}
.mine-content {
  min-height: 100vh;
  background: #f5f6fa;
  .user-info {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 40rpx 0 30rpx 0;
    background: linear-gradient(90deg, #cbf3fb 0%, #e2e7fd 100%);
    height: 228rpx;
    padding-left: 40rpx;
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-bottom: 16rpx;
      object-fit: cover;
    }
    .nickname {
      font-size: 36rpx;
      color: #333;
      margin-left: 30rpx;
      margin-top: 30rpx;
      font-weight: blod;
    }
  }
  .menu-list {
    margin-top: 30rpx;
    .menu-item {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 18rpx;
      margin: -110rpx 24rpx 28rpx 24rpx;
      padding: 44rpx 24rpx;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
      .menu-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 24rpx;
      }
      .menu-text {
        flex: 1;
        font-size: 30rpx;
        color: #222;
      }
    }
  }
}
</style>
