<template>
  <view class="contai_warp">
    <view class="top_area_warp">
      <view class="top_status_area" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="top_nav_warp">我的</view>
      <view class="mine_area_warp">
        <view class="mimicry" @click="navigateToAccountSettings('/pages/mine/update')">
          <view class="mine_area_left" >
            <image class="mine_avater" :src="'https://online.totustec.com/upload' + userInfo.avatar"></image>
            <!-- <view class="mine_avater"></view> -->
            <view class="mine_info_warp">
              <view class="mine_info_txt1" v-if="userInfo.nikeName">{{
                userInfo.nikeName
              }}</view>
              <view class="mine_info_txt1" @click="getLoginCode()" v-else>登录</view>
              <view class="mine_info_txt2" >账户设置</view>
            </view>
          </view>
          <image class="mine_area_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
        </view>
      </view>

      <view class="top_area_backimg">
        <image class="bg-image" src="https://online.totustec.com/upload/minePage/top_area_warp.png"></image>
      </view>
    </view>

    <view class="function_area1_warp">
      <view style="padding: 0 20rpx">
        <view class="function_area1_content">
          <view class="area1_content_title">常用工具</view>
          <view class="area1_content_warp">
            <view v-for="(item, index) in area1ContentList" :key="index" class="area1_content_item"
              :style="index === 1 ? 'margin: 0 73rpx;' : ''" @click="toPage(item.text)">
              <image class="area1_content_icon" :src="item.icon" mode="widthFix"></image>
              <view class="area1_content_txt">{{ item.text }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="function_area2_warp">
      <view class="function_area2_content">
        <!-- <view class="function_area2_item" style="border-top-left-radius: 20rpx; border-top-right-radius: 20rpx">
          <view class="area2_item_left">
            <image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon1.png">
            </image>
            <view class="area2_item_txt">使用向导</view>
          </view>
          <image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
        </view> -->

        <view class="function_area2_item"  open-type="share"  style="
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
          ">
          <view class="area2_item_left">
            <image class="area2_item_icon1" src="https://online.totustec.com/upload/minePage/area2_item_icon2.png">
            </image>
            <view class="area2_item_txt">分享小程序</view>
          </view>
          <button open-type="share" class="area2_item_right_btn">
            <image class="area2_item_right" src="https://online.totustec.com/upload/minePage/mine_area_right.png"></image>
          </button>
        </view>
      </view>
    </view>

    <!-- <video style="width: 100%;height: 200rpx;" src="http://broadcasting.totustec.com/live/12345678.m3u8"></video> -->
  </view>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello",
      statusBarHeight: 0,
      area1ContentList: [
        {
          icon: "https://online.totustec.com/upload/minePage/area1_content_icon1.png",
          text: "设备管理",
        },
        {
          icon: "https://online.totustec.com/upload/minePage/area1_content_icon2.png",
          text: "预警管理",
        },
        // {
        //   icon: "https://online.totustec.com/upload/minePage/area1_content_icon3.png",
        //   text: "我的收藏",
        // },
      ],
      userInfo: {
      },
    };
  },
  onLoad () {
    const systemInfo = wx.getSystemInfoSync();
    const {
      statusBarHeight, // 状态栏高度（单位：px）
    } = systemInfo;

    this.statusBarHeight = statusBarHeight;

    // 页面加载时获取缓存用户信息
    this.getUserInfoFromCache();

  },
  methods: {
    getUserInfoFromCache () {
      const userInfo = uni.getStorageSync("userInfo");
      console.log('userInfo',userInfo);
      
      if (userInfo) {
        this.userInfo = userInfo;
      }
    },
    toPage (pageName) {
      if (pageName == "设备管理") {
        uni.navigateTo({
          url: "/pages/selectDevice/index",
        });
      }
    },
	
	navigateToAccountSettings(path) {	
	   uni.navigateTo({
	     url: path,
	   });
	  },
    getLoginCode () {
      uni.login({
        success: (res) => {
          if (res.code) {
            this.loginWithPhoneNumber(res.code);
          }
        },
      });
    },
    async loginWithPhoneNumber (code) {
      try {
        const res = await uni.request({
          url: "https://online.totustec.com/api/api/front/wechat/authorize/login",
          method: "POST",
          data: { code },
          header: {
            "Content-Type": "application/x-www-form-urlencoded", // 关键配置
          },
        });
        if (res.statusCode == 200) {
          this.userInfo = res.data;
          console.log('this.userInfo', this.userInfo);
          // 存储用户信息到本地缓存（uni-app接口）
          uni.setStorageSync("userInfo", this.userInfo);
          uni.showToast({ title: "登录成功" });
        }
      } catch (error) {
        uni.showToast({ title: "登录失败", icon: "none" });
      }
    },
    onShareAppMessage() {
      return {
        title: '欢迎体验Totustec',
        path: '/pages/index/index',
        imageUrl: 'https://online.totustec.com/upload/indexPage/company_logo1.png'
      }
    },
  },
};
</script>

<!-- 临时样式 -->
<style scoped>
.area2_item_right {
  width: 28rpx;
  height: 28rpx;
}

.area2_item_txt {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  margin-left: 23rpx;
}

.area2_item_icon1 {
  width: 30rpx;
  height: 32rpx;
}

.area2_item_left {
  display: flex;
  align-items: center;
}

.function_area2_content {
  display: flex;
  flex-direction: column;
  padding: 0 20rpx;
}

.function_area2_item {
  height: 110rpx;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 23rpx 0 37rpx;
}

.function_area2_warp {
  width: 100%;
  margin-top: 24rpx;
}

.area1_content_txt {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #333333;
}

.area1_content_icon {
  width: 60rpx;
  height: 60rpx;
}

.area1_content_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.area1_content_warp {
  display: flex;
  margin-left: 38rpx;
  align-items: center;
  margin-top: 39rpx;
}

.area1_content_title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 32rpx;
  color: #000000;
  margin: 19rpx 0 0 28rpx;
}

.function_area1_content {
  width: 100%;
  height: 238rpx;
  background: #ffffff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
}

.function_area1_warp {
  width: 100%;
  margin-top: -20rpx;
}

.area2_item_right_btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
}
</style>
<style scoped>
.contai_warp {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: PingFang SC, PingFang SC !important;
  min-height: 100vh;
  background-color: #f1f6fc;
}

.top_area_warp {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.top_status_area {
  width: 100%;
}

.top_nav_warp {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #000000;
  position: relative;
  z-index: 5;
}

.bg-image {
  width: 100%;
  height: 100%;
}

.top_area_backimg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.mine_area_right {
  width: 28rpx;
  height: 28rpx;
}

.mine_info_txt2 {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #666666;
}

.mine_info_txt1 {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #030303;
}

.mine_info_warp {
  display: flex;
  flex-direction: column;
  margin-left: 23rpx;
}

.mine_avater {
  width: 120rpx;
  height: 120rpx;
  border-radius: 100%;
}

.mine_area_left {
  display: flex;
  align-items: center;
}

.mimicry {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mine_area_warp {
  height: 229rpx;
  padding: 26rpx 34rpx 0 47rpx;
  position: relative;
  z-index: 5;
}
</style>
