<template>
  <view class="container my-container" v-if="haveData">
    <view class="top-content-box">
      <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
        <van-icon custom-class="search-icon" name="arrow-left" size="24px" @click="goBack" />
      </view>
    </view>
    <view class="my-background">
      <view class="my-notice" v-if="myNotice">
        添加到我的小程序，做您手边的研究素材库👆
        <van-icon @click="myNotice = false" class="my-icon" name="cross" />
      </view>
    </view>
    <view class="my-info">
      <view class="my-top-info">
        <view class="info">
          <view class="info-img">
            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <image class="avatar" v-if="headimgurl" :src="headimgurl"></image>
              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/logo.png" class="avatar" v-else></image>
            </button>
          </view>
          <view class="info-list">
            <block v-if="isLogin">
              <text class="name">{{ userInfo.RealName || "--" }}</text>
              <text class="mobile">{{ userInfo.Mobile || userInfo.Email }}</text>
              <text class="company-name">{{ userInfo.CompanyName || "--" }}</text>
            </block>
            <block v-else>
              <text class="name">Hi，请绑定联系方式～</text>
              <text class="bind-btn" @click="loginHandle">绑定联系方式</text>
            </block>
          </view>
        </view>
        <view class="auth-info">
          <template v-if="isLogin">
            <scroll-view scroll-x="true" scroll-with-animation class="auth-ul" v-if="userInfo.HasPermission === 0">
              <text class="auth-li" v-for="item in authList" :key="item">{{ item }}</text>
            </scroll-view>
            <block v-else>
              <button class="auth-btn" @click="applyAuth" v-if="userInfo.HasPermission != 3">申请开通权限</button>
            </block>
          </template>
          <text v-else class="no-auth">暂无品种权限信息</text>
        </view>
        <view class="info-item">
          <view class="item" @click="itemClickHandle('mySchedulepage')">
            <text class="item-number">{{ userInfo.ScheduleNum }}</text>
            <text class="item-text">活动日程</text>
          </view>
          <view class="item item-label" @click="itemClickHandle('myCollection')">
            <text class="item-number">{{ userInfo.ConNum }}</text>
            <text class="item-text">收藏</text>
          </view>
          <view class="item" @click="itemClickHandle('browseHistory')">
            <text class="item-number">{{ userInfo.HistoryNum }}</text>
            <text class="item-text">足迹</text>
          </view>
        </view>
      </view>
      <view class="info-bot">
        <view class="list-item border_bottom" v-for="type in typeArr" :key="type" @click="itemClickHandle(type)">
          <text>{{ type }}</text>
          <view class="my-bot-box">
            <block v-if="type == '外呼号码'">
              <text v-if="userInfo.OutboundCountryCode && userInfo.OutboundMobile" style="margin-right: 40rpx; font-size: 28rpx">{{ userInfo.OutboundCountryCode }}-{{ userInfo.OutboundMobile }}</text>
              <text v-else style="margin-right: 40rpx; font-size: 28rpx">未设置</text>
            </block>
            <block v-if="type == '关注公众号'">
              <text style="margin-right: 20rpx; font-size: 28rpx">查研观向小助手</text>
            </block>
            <block v-if="type == 'PC网页版'">
              <text @click="copyPcWebUrl" style="margin-right: 20rpx; font-size: 28rpx; color: #3385ff">web.hzinsights.com</text>
            </block>
            <u-icon v-if="type != 'PC网页版'" name="arrow-right" color="#BDBDBD" size="34"></u-icon>
          </view>
        </view>
      </view>
      <view class="bottom-text">您手边的研究素材库</view>
    </view>

    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  </view>
</template>

<script>
import { uploadurl, Mine, checkToken, User } from "@/config/api.js";
import freeCharge from "@/components/freeCharge";
let app = getApp();
export default {
  components: {
    freeCharge,
  },
  data() {
    return {
      isLogin: false, //是否绑定且授权
      haveData: null, //显示页面
      typeArr: ["外呼号码", "活动提问", "我的留言", "优化建议", "关注公众号", "PC网页版"],
      typeObj: new Map([
        ["外呼号码", "editOutbound"],
        ["活动提问", "myAskPage"],
        ["我的留言", "myLeavingMessage"],
        ["优化建议", "advice"],
        ["关注公众号", "accountsOfficial"],
        ["PC网页版", "web.hzinsights.com"],
      ]),
      userInfo: {},
      authList: [],
      myNotice: true,
      headimgurl: "",
    };
  },
  async onShow() {
    await this.$store.dispatch("checkHandle", "noGO");
    this.haveData = true;
    if (!this.$store.state.isAuth && !this.$store.state.isBind) {
      //已授权已绑定
      this.isLogin = true;
      this.getUser();
    } else {
      this.isLogin = false;
    }
  },
  methods: {
    //获取胶囊位置
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
        paddingTop: menuButtonInfo.top - 4 + "px",
        paddingBottom: "4px",
      };
    },
    // 返回
    goBack() {
      uni.navigateBack();
    },
    //点击了头像
    onChooseAvatar(e) {
      this.getRecordTracking("头像");
      let token = this.$db.get("access_token");
      let authHeader = token || "";
      let that = this;
      uni.uploadFile({
        url: uploadurl,
        filePath: e.detail.avatarUrl,
        header: {
          "Content-Type": "multipart/form-data",
          Authorization: authHeader,
        },
        name: "file",
        success(res) {
          let data = JSON.parse(res.data);
          that.headimgurl = data.Data.ResourceUrl;
          User.headimgurlUpdate({ Headimgurl: data.Data.ResourceUrl });
        },
      });
    },
    /* 检查状态 */
    /* 获取用户信息 */
    getUser() {
      Mine.getInfo().then((res) => {
        if (res.Ret === 200) {
          this.authList = res.Data.PermissionName && res.Data.PermissionName.split(",");
          this.userInfo = res.Data;
          this.headimgurl = res.Data.Headimgurl;
          res.Data.Mobile && this.$db.set("mobile", res.Data.Mobile);
        }
      });
    },
    /* 点击登录 检验是否绑定或是否授权*/
    loginHandle() {
      /* 先授权再绑定 */
      if (this.$store.state.isAuth) {
        uni.navigateTo({
          url: "/pageMy/authGuide/authGuide",
        });
      } else {
        this.$store.state.isBind &&
          uni.navigateTo({
            url: "/pageMy/login/login",
          });
      }
    },
    /* 申请开通权限 */
    applyAuth() {
      /* 查看是否是潜在用户 */
      this.userInfo.HasPermission === 1
        ? User.applyTry({
            ApplyMethod: 3,
          }).then((res) => {
            if (res.Ret === 200) {
              uni.navigateTo({
                url: "/pageMy/applyResult/applyResult",
              });
            }
          })
        : this.userInfo.HasPermission === 2
        ? uni.navigateTo({
            url: "/pageMy/applyTrial/applyTrial",
          })
        : this.userInfo.HasPermission === 3
        ? uni.showModal({
            title: "",
            content: "您已经提交过申请了，请耐心等待",
            showCancel: false,
            confirmColor: "#365595",
            success: function (res) {},
          })
        : "";
    },
    /* 路径跳转 */
    itemClickHandle(type) {
      let istype = type === "关注公众号" || type === "优化建议" || type === "外呼号码" ? type : "";
      istype && this.getRecordTracking("istype");
      /* 是否登录 */
      if (this.isLogin) {
        switch (type) {
          case "外呼号码":
            uni.navigateTo({
              url: "/activityPages/editOutbound/editOutbound?title=设置外呼号码&identification=我的",
            });
            break;
          case "活动提问":
            uni.navigateTo({
              url: "/reportPages/myAskPage/myAskPage",
            });
            break;
          case "我的留言":
            uni.navigateTo({
              url: "/pageMy/myLeavingMessage/myLeavingMessage",
            });
            break;
          case "关注公众号":
            uni.navigateTo({
              url: "/activityPages/accountsOfficial/accountsOfficial",
            });
            break;
          case "PC网页版":
            "";
            break;
          case "myCollection":
            uni.navigateTo({
              url: `/pageMy/myCollection/myCollection`,
            });
            break;
          case "browseHistory":
            uni.navigateTo({
              url: `/pageMy/browseHistory/browseHistory`,
            });
            break;
          case "mySchedulepage":
            uni.navigateTo({
              url: `/pageMy/mySchedulepage/mySchedulepage`,
            });
            break;
          default:
            let path = this.typeObj.get(type);
            uni.navigateTo({
              url: `/pageMy/${path}/${path}`,
            });
        }
      } else {
        this.loginHandle();
      }
    },
    // 复制网页链接
    copyPcWebUrl() {
      uni.setClipboardData({
        data: "web.hzinsights.com",
        success: function () {
          uni.showToast({
            title: "复制成功,可在浏览器打开",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
  },
  onLoad() {
    this.initNavBar();
  },
};
</script>

<style lang="scss" scoped>
.my-container {
  background: #f9f9f9;
  position: relative;
  .top-content-box {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
  }
  .nav-bar-wrap {
    width: 100%;
    padding-left: 35rpx;
    display: flex;
    align-items: center;
    position: relative;
    .search-icon {
      position: absolute;
      left: 34rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .nav-bar-wrap {
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
  }
  .my-background {
    height: 480rpx;
    width: 100%;
    background: url("https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/my_bg.jpg") no-repeat;
    background-size: 100% 100%;
    padding-top: 206rpx;
    .my-notice {
      height: 55rpx;
      width: 690rpx;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 8px;
      line-height: 55rpx;
      text-align: center;
      color: #ffffff;
      position: relative;
      padding-right: 20rpx;
      .my-icon {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
  .my-info {
    position: absolute;
    top: 301rpx;
    left: 50%;
    transform: translateX(-50%);
    .my-top-info {
      width: 690rpx;
      margin: 0 auto;
      height: 436rpx;
      background: url("https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/my_log.png") no-repeat;
      background-color: #ffffff;
      background-position: right top;
      background-size: 267rpx 274rpx;
      box-sizing: border-box;
      box-shadow: 0px 0rpx 7rpx 1rpx #f0f3f5;
      border-radius: 8rpx;
      .info {
        padding: 61rpx 0 0 30rpx;
        display: flex;
        .info-img {
          width: 126rpx;
          height: 126rpx;
          background: #c4c4c4;
          border-radius: 50%;
          overflow: hidden;
          .avatar-wrapper {
            width: 126rpx;
            height: 126rpx;
          }
          .avatar {
            width: 126rpx;
            height: 126rpx;
            border-radius: 50%;
          }
        }
        .info-list {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 32rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #666666;
          .name {
            font-size: 30rpx;
            color: #000000;
            line-height: 35rpx;
            font-weight: 500;
          }
          .bind-btn {
            color: #3385ff;
            width: 181rpx;
            height: 49rpx;
            background: #ffffff;
            border-radius: 8rpx;
            border: 2rpx solid #3385ff;
            text-align: center;
            line-height: 47rpx;
          }
        }
      }
      .auth-info {
        width: 100%;
        overflow: hidden;
        margin-top: 36rpx;
        .auth-ul {
          white-space: nowrap;
          padding: 0 30rpx;
          color: #3385ff;
          .auth-li {
            display: inline-block;
            padding: 1rpx 20rpx;
            border: 1rpx solid #3385ff;
            border-radius: 4rpx;
            font-size: 24rpx;
            margin-right: 20rpx;
            background: #edf4ff;
            &:last-child {
              margin-right: 50rpx;
            }
          }
        }
        .no-auth {
          text-align: center;
          font-size: 28rpx;
          color: #999999;
        }
        .auth-btn {
          width: 181rpx;
          height: 49rpx;
          margin: 0 auto;
          color: #3385ff;
          font-size: 24rpx;
          line-height: 47rpx;
          border: 2rpx solid #3385ff;
        }
      }
      .info-item {
        display: flex;
        padding-left: 30rpx;
        margin: 36rpx auto 0;
        .item {
          width: 208rpx;
          height: 76rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          text-align: center;
          .item-number {
            font-size: 40rpx;
            font-weight: 500;
          }
        }
        .item-label {
          border-right: 1rpx solid #ececec;
          border-left: 1rpx solid #ececec;
        }
      }
    }

    .info-bot {
      padding: 0 20rpx;
      background-color: #fff;
      box-shadow: 0px 0rpx 7rpx 1rpx #f0f3f5;
      border-radius: 8rpx;
      margin-top: 20rpx;
      .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 34rpx;
        color: #4a4a4a;
        padding: 33rpx 34rpx;
        .icon-area {
          width: 100rpx;
        }
        &:last-child {
          position: static;
        }
      }
      .my-bot-box {
        display: flex;
      }
    }
  }
  .bottom-text {
    position: absolute;
    bottom: -80rpx;
    right: 0;
    z-index: 9;
    margin-top: 30px;
    font-size: 20rpx;
    color: #999999;
    width: 100%;
    text-align: center;
  }
}
</style>