<template>
  <view class="my" :class="{ 'my-page--elder': localUiStyle === 'elder' }">
    <view class="head">
      <image
        class="avatar"
        mode="aspectFill"
        :src="userInfo.avatarUrl || '/static/images/common/avatar.png'"
      >
      </image>
      <view class="user">
        <view class="user-name">{{ userInfo.nickName }}</view>
        <!-- <view class="user-phone">{{userInfo.phoneWx}} | {{doorplateAddr}}</view> -->
        <view class="user-phone">{{ userInfo.phoneWx }}</view>
        <view class="doorplate-addr">{{ doorplateAddr }}</view>
      </view>
    </view>
    <view class="content">
      <view class="button" @click="handleSuitOlder">
        <view class="left">
          <image
            class="icon"
            mode="aspectFit"
            src="/static/images/my/familyMember.png"
          />
          <view class="text">{{ suitLabel }}</view>
        </view>
        <image
          style="width: 20px; height: 20px"
          mode="scaleToFill"
          src="/static/images/common/arrow.png"
        />
      </view>
      <view class="button" @click="checkDetail('familyDoor')">
        <view class="left">
          <image
            class="icon"
            mode="aspectFit"
            src="/static/images/common/icon_house.png"
          />
          <view class="text">我的家庭门牌</view>
        </view>
        <image
          style="width: 20px; height: 20px"
          mode="scaleToFill"
          src="/static/images/common/arrow.png"
        />
      </view>
      <view class="button" @click="checkDetail('enterpriseDoor')">
        <view class="left">
          <image
            class="icon"
            mode="aspectFit"
            src="/static/images/common/icon_enterprise.png"
          />
          <view class="text">我的企业门牌</view>
        </view>
        <image
          style="width: 20px; height: 20px"
          mode="scaleToFill"
          src="/static/images/common/arrow.png"
        />
      </view>
      <view class="button" @click="checkDetail('alarm')">
        <view class="left">
          <image
            class="icon"
            mode="aspectFit"
            src="/static/images/my/alarmRecord.png"
          />
          <view class="text">反映记录</view>
        </view>
        <image
          style="width: 20px; height: 20px"
          mode="scaleToFill"
          src="/static/images/common/arrow.png"
        />
      </view>
      <view class="button" @click="checkDetail('help')">
        <view class="left">
          <image
            class="icon"
            mode="aspectFit"
            src="/static/images/my/helpRecord.png"
          />
          <view class="text">求助记录</view>
        </view>
        <image
          style="width: 20px; height: 20px"
          mode="scaleToFill"
          src="/static/images/common/arrow.png"
        />
      </view>
      <!-- 浙里办上架暂时删除 -->
    <!--   <view class="button" @click="checkDetail('tool')">
        <view class="left">
          <image
            class="icon"
            mode="aspectFit"
            src="/static/images/my/wgTool.png"
          />
          <view class="text">网格员工具</view>
        </view>
        <image
          style="width: 20px; height: 20px"
          mode="scaleToFill"
          src="/static/images/common/arrow.png"
        />
      </view> -->
      <view class="button" @click="checkDetail('family')">
        <view class="left">
          <image
            class="icon"
            mode="aspectFit"
            src="/static/images/my/familyMember.png"
          />
          <view class="text">家庭成员</view>
        </view>
        <image
          style="width: 20px; height: 20px"
          mode="scaleToFill"
          src="/static/images/common/arrow.png"
        />
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view
      v-if="!hasBaseInfo"
      class="auth-mask"
      @click="handleAuthProfile"
    ></view>
    <!-- #endif -->
    <!-- #ifdef MP-ALIPAY -->
    <button
      v-if="!hasBaseInfo"
      class="auth-mask"
      open-type="getAuthorize"
      scope="userInfo"
      hover-class="none"
      @getAuthorize="handleAuthProfile"
      @error="onAuthError"
    ></button>
    <!-- #endif -->
    <auth-dialog
      ref="authDialogRef"
      class="custom-auth-popup"
      @close="authDialogClose"
    >
    </auth-dialog>
  </view>
</template>

<script>
import {getUserInfo, updateUserInfo, getMyDoorplateAll, getPersonalHouseNumber} from "@/api/user";
import { storageUserInfo } from "@/utils/index";
import { DOOR_TYPE } from "@/utils/const";
import Vue from "vue";
const app = getApp();

export default {
  name: "my",
  components: {},
  props: {},
  data() {
    return {
      userInfo: {
        nickName: "",
        phoneWx: "",
        avatarUrl: "",
      },
      doorplateAddr: "",
      hasBaseInfo: false,
      userStatus: false,
      bindStatus: "",
      localUiStyle: Vue.prototype.$uiStyle,
      suitLabel: "", //Vue.prototype.$uiStyle==='elder'?'开启常规版':'开启长辈版'
    };
  },
  watch: {
    localUiStyle: {
      immediate: true,
      handler(newVal) {
        if (newVal === "elder") {
          this.suitLabel = "开启常规版";
        } else {
          this.suitLabel = "开启长辈版";
        }
      },
    },
  },
  onLoad() {
    this.userInfo = uni.getStorageSync("userInfo") || {};
    this.bindStatus = app.globalData.bindStatus;
    this.getUserInfo();
  },
  onShow() {
    if (app.globalData.doorplateInfo.code) {
      this.doorplateAddr = app.globalData.doorplateInfo.bzdz;
    } else {
      this.doorplateAddr = app.globalData.doorInfo.baseInfo.bzdz;
    }
    this.userInfo = uni.getStorageSync("userInfo") || {};



    if(this.userInfo.phoneWx) {
      // 做脱敏处理
      const phone = this.userInfo.phoneWx;
      this.userInfo.phoneWx = phone.substring(0, 3) + "****" + phone.substring(7);
      this.userInfo.nickName = "*" + this.userInfo.nickName.substring(1);
    }


    if (this.userInfo.avatarUrl && this.userInfo.phoneWx) {
      this.hasBaseInfo = true;
    }
    if (this.userInfo.uuid) {
      this.getMyDoorplateAll();
    }
  },

  methods: {
    handleSuitOlder() {
      this.localUiStyle = this.localUiStyle === "normal" ? "elder" : "normal";
      Vue.prototype.$uiStyle = this.localUiStyle;
    },
    // 获取个人信息
    getUserInfo() {
      getUserInfo({ openId: app.globalData.openid }).then((res) => {
        if (res.data.uuid) {
          const userInfoStored = uni.getStorageSync("userInfo") || {};
          this.userInfo = { ...userInfoStored, ...res.data };
          storageUserInfo(res.data);
          this.getMyDoorplateAll();
        }
        if (this.userInfo.avatarUrl && this.userInfo.phoneWx) {
          this.hasBaseInfo = true;
        }
      });
    },

    // 完善用户信息
    handleAuthProfile() {
      const _that = this;
      if (!this.userInfo.avatarUrl) {
        // #ifdef MP-WEIXIN
        uni.getUserProfile({
          desc: "用于完善用户资料",
          success: (res) => {
            // updateUserInfo({
            //   openId: app.globalData.openid,
            //   nickName: res.userInfo.nickName,
            //   phoneWx: ''
            // });
            storageUserInfo(res.userInfo);
            _that.userInfo = { ..._that.userInfo, ...res.userInfo };
            _that.$refs.authDialogRef.open();
          },
        });
        // #endif
        // #ifdef MP-ALIPAY
        uni.getUserInfo({
          success: function (res) {
            // updateUserInfo({
            //   openId: app.globalData.openid,
            //   nickName: res.userInfo.nickName,
            //   phoneWx: ''
            // });
            storageUserInfo(res.userInfo);
            _that.userInfo = { ..._that.userInfo, ...res.userInfo };
            _that.$refs.authDialogRef.open();
          },
          fail: function (error) {
            console.log("获取会员基本信息失败：", error);
          },
        });
        // #endif
      } else if (!this.userInfo.phoneWx) {
        _that.$refs.authDialogRef.open();
      }
    },

    // 支付宝授权用户基本信息失败
    onAuthError() {
      const _this = this;
      uni.showModal({
        title: "提示",
        content: "取消授权，可能会使部分服务无法使用，或页面信息不完整",
        showCancel: false,
        confirmText: "我知道了",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
          } else if (res.cancel) {
            console.log("用户取消授权");
          }
        },
      });
    },

    // 授权手机号码弹窗被关闭
    authDialogClose() {
      this.getUserInfo();
    },

    // 查看当前用户是否已绑定门牌
    //修改这个的接口
    getMyDoorplateAll() {
      getPersonalHouseNumber({ idCard: this.userInfo.uuid }).then((res) => {
        if (res.data && res.data.length > 0) {
          this.userStatus = true;
        }
      });
    },

    // 查看各模块详情
    checkDetail(val) {
      if (val === "familyDoor") {
        if (!this.userStatus) {
          uni.navigateTo({
            url: "/subPages/pages/bind/bind",
          });
        } else {
          uni.navigateTo({
            url: `/pages/my/changeDoorplate?doorplateType=${DOOR_TYPE.HOUSE.VALUE}`,
          });
        }
      } else if (val === "enterpriseDoor") {
        if (!this.userStatus) {
          uni.navigateTo({
            url: "/subPages/pages/bind/bind",
          });
        } else {
          uni.navigateTo({
            url: `/pages/my/changeDoorplate?doorplateType=${DOOR_TYPE.ENTERPRISE.VALUE}`,
          });
        }
      } else if (val === "alarm") {
        uni.navigateTo({
          url: "/subPages/pages/alarm/alarmRecord",
        });
      } else if (val === "help") {
        uni.navigateTo({
          url: "/subPages/pages/help/helpRecord",
        });
      } else if (val === "tool") {
        app.globalData.jumpUrl =
          "https://mopaisystem-history.onein.cn/page/49723c06-05a2-4bb2-bc2f-2fccf4816c7a";
        // #ifdef MP-WEIXIN
        uni.navigateTo({
          url: "/subPages/pages/webview/webview",
        });
        // #endif
        // #ifdef MP-ALIPAY
        if (uni.getEnvVersion() === "develop") {
          uni.navigateTo({
            url: "/subPages/pages/webview/webview",
          });
        } else {
          uni.showToast({ title: "暂未开放", duration: 1000 });
        }
        // #endif
      } else if (val === "family") {
        if (!this.userStatus) {
          uni.navigateTo({
            url: "/subPages/pages/bind/bind",
          });
        } else {
          uni.navigateTo({
            url: "/subPages/pages/familyMember/familyMember",
          });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my {
  display: flex;
  flex-direction: column;
  .head {
    padding: 14px;
    // background: linear-gradient(to bottom, rgb(94, 189, 226), rgba(255,255,255,0));
    background-image: url("data:image/png;base64,[encoded data, 120908 characters]");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin: 0 15px;
    }
    .user {
      width: calc(100% - 130px);
      color: #fff;
      .user-name {
        font-size: 16px;
        margin-bottom: 5px;
      }
      .user-phone {
        font-size: 14px;
        margin-bottom: 5px;
      }
      .doorplate-addr {
        width: 100%;
        font-size: 14px;
        // display: inline-block;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
    }
  }
  .content {
    flex:1;
    width: 100%;
    padding-bottom: 50px;
    .button {
      height: 45px;
      line-height: 45px;
      margin: 10px 0;
      padding: 0 10px;
      background-color: #fff;
      border-bottom: 0.5px solid #eee9e9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: calc(100% - 30px);
        display: flex;
        align-items: center;
        .icon {
          width: 25px;
          height: 25px;
          margin-right: 7px;
        }
      }
    }
  }
  /* 授权蒙版层 */
  .auth-mask {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: absolute;
    top: 0;
    z-index: 10;
    // left:0;
    // right: 0;
    // top:0;
    // bottom: 0;
  }
}
.my-page--elder {
  .head {
    .avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin: 0 15px;
    }
    .user {
      width: calc(100% - 130px);
      .user-name {
        font-size: calc(16px * $zlb-elder-font-scale);
        margin-bottom: 5px;
      }
      .user-phone {
        font-size: calc(14px * $zlb-elder-font-scale);
        margin-bottom: 5px;
      }
      .doorplate-addr {
        font-size: calc(14px * $zlb-elder-font-scale);
        // display: inline-block;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
    }
  }
  .content {
    .button {
      padding: 5px 10px;
      .left {
        display: flex;
        align-items: center;
        .icon {
          width: calc(25px * $zlb-elder-font-scale);
          height: calc(25px * $zlb-elder-font-scale);
          margin-right: calc(7px * $zlb-elder-font-scale);
        }
        .text {
          font-size: calc(14px * $zlb-elder-font-scale);
        }
      }
    }
  }
}
</style>
