<script setup lang="ts">
import ShuiWuTop from "@/components/ShuiWuTop.vue";
import { useMemberStore } from "@/stores";
import { http } from "@/utils/http";
const memberStore = useMemberStore();
const getData = async () => {
  const res = await http<string[]>({
    url: `/home/banner`,
    method: "GET",
    header: {},
  });
};

const editUser = () => {
  //跳转到编辑页面
  uni.navigateTo({
    url: "/pages/my/myEdit",
  });
};
const shireFun = () => {
  uni.share({
    provider: "weixin",
    scene: "WXSceneSession",
    type: 1,
    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    },
  });
};
const myInvite = () => {
  //跳转到邀请页面
  uni.navigateTo({
    url: "/pages/my/myInvite",
  });
};

const aboutMy = () => {
  //跳转到关于
  uni.navigateTo({
    url: "/pages/my/aboutMy",
  });
};
const report = () => {
  //跳转到报告页面
  uni.navigateTo({
    url: "/pages/my/reportList",
  });
};

const exit = () => {
  uni.showToast({ title: "已退出" });
  //跳转到报告页面

  setTimeout(() => {
    uni.switchTab({
      url: "/pages/index/index",
    });
  }, 550);
};
</script>

<template>
  <view class="bg">
    <ShuiWuTop />
    <view class="home_top"> 我的 </view>
    <view class="company_top"
      ><image class="company_image" :src="memberStore.userInfo.channelAvatar"></image>
      <view>{{
        memberStore.userInfo.channelName == null ? "" : memberStore.userInfo.channelName
      }}</view>
    </view>
    <view class="my_info">
      <view class="info_out">
        <image class="user_image" :src="memberStore.userInfo.photoPath"></image>
        <view class="user_name">
          <view class="user_name_detail">{{ memberStore.userInfo.userName }}</view>
          <view class="user_name_detail"
            >岗位:&nbsp;&nbsp;{{ memberStore.userInfo.job }}</view
          >
        </view>
      </view>
      <view class="info_detail" style="margin-top: 25rpx"
        >联系电话:&nbsp;&nbsp;{{
          memberStore.userInfo.phone == "NaN" ? "" : memberStore.userInfo.phone
        }}
      </view>
      <view class="info_detail">邮箱:&nbsp;&nbsp;{{ memberStore.userInfo.mail }}</view>
      <view class="info_detail" style="margin-bottom: 15rpx"
        >公司地址:&nbsp;&nbsp;{{ memberStore.userInfo.compAddress }}</view
      >
      <view class="info_edit">
        <button class="button_edit" @click="editUser">编辑</button>
        <button class="button_edit" @click="shireFun" open-type="share">分享</button>
      </view>
    </view>

    <view class="my_tab">
      <view class="my_tab_detail" @click="myInvite">
        <view>
          <image class="tab_icon" src="../../static/images/shequ.png" />
        </view>
        <view class="tab_des"> 我的邀请 </view>
        <view>
          <image class="tab_icon-right" src="../../static/images/right.png" />
        </view>
      </view>
      <ShuiWuLine />
      <view class="my_tab_detail" @click="report">
        <view>
          <image class="tab_icon" src="../../static/images/fankui.png" />
        </view>
        <view class="tab_des"> 报告记录 </view>
        <view>
          <image class="tab_icon-right" src="../../static/images/right.png" />
        </view>
      </view>
      <ShuiWuLine />
      <view class="my_tab_detail" @click="aboutMy">
        <view>
          <image class="tab_icon" src="../../static/images/about.png" />
        </view>
        <view class="tab_des"> 关于我们 </view>
        <view>
          <image class="tab_icon-right" src="../../static/images/right.png" />
        </view>
      </view>
      <ShuiWuLine />
      <view class="my_tab_detail_exit" @click="exit">
        <view>
          <image class="tab_icon" src="../../static/images/exit.png" />
        </view>
        <view class="tab_des"> 退出登录 </view>
      </view>
    </view>
    <view> </view>
    <view> </view>
  </view>
</template>

<style lang="scss">
//
page {
  height: 100%;
}

.bg {
  height: 100%;
  padding: 0rpx 20rpx;
  background: rgb(243, 250, 248);
  .home_top {
    text-align: center;
    font-size: 40rpx;
    margin-bottom: 60rpx;
  }
  .company_top {
    margin-bottom: 20rpx;
    display: flex;
    justify-content: start;
    align-items: center;
    .company_image {
      width: 60rpx;
      height: 60rpx;
      background-color: #eeeeee;
      border-radius: 50%;
      margin-right: 20rpx;
    }
  }
}

.my_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: linear-gradient(rgb(191, 191, 243), rgb(98, 95, 240));
  padding-top: 15rpx;
  border-radius: 15rpx;
  .info_out {
    padding: 0rpx 20rpx;
    display: flex;
    flex-direction: row;
    .user_name {
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .user_name_detail {
        font-size: 36rpx;
      }
    }
  }
  .user_image {
    width: 100rpx;
    height: 100rpx;
    background-color: #eeeeee;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .info_detail {
    color: #ffffff;
    padding: 10rpx 20rpx;
    font-size: 36rpx;
    font-weight: 100;
  }
  .info_edit {
    line-height: 100rpx;
    background-color: #ffffff;
    color: #000000;
    display: flex;
    font-size: 36rpx;
    flex-direction: row;
    justify-content: space-around;
    border-bottom-left-radius: 15rpx;
    border-bottom-right-radius: 15rpx;
    .button_edit {
      background-color: transparent;
    }
  }

  // items-align:center;
}

.user_icon {
  margin-right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.my_tab {
  background-color: #ffffff;
  margin-top: 40rpx;
  border-radius: 30rpx;
  padding: 10rpx 30rpx;
}

.my_tab_detail {
  margin-top: 42rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;

  justify-content: flex-start;
}
.my_tab_detail_exit {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.tab_icon {
  width: 40rpx;
  height: 40rpx;
}

.tab_des {
  font-size: 30rpx;
  margin-left: 30rpx;
  flex: 1;
}

.tab_icon-right {
  width: 20rpx;
  height: 30rpx;
}
</style>
