<template>
  <view
    class="my"
    :style="{
      backgroundImage: vuex_baseImgUrl && `url(${vuex_baseImgUrl}myBg.png)`,
      paddingTop: navigationBarHeight + 120 + 'rpx' + ';' + vuex_theme,
    }"
  >
    <view class="navbar" :style="{ height: navigationBarHeight + 'rpx' }">
      <view class="bg_wrap" :style="{ top: marginTop }">
        <view
          :class="roleType == 2 ? 'bg_wrap1 text' : 'text'"
          @click="linkOther('student_recruit')"
          >学生</view
        >
        <view
          v-if="vuex_appId != 'wx2a515776284cae17'"
          :class="roleType == 1 ? 'bg_wrap1 text' : 'text'"
          @click="linkOther('social_recruit')"
          >职场人</view
        >
        <!-- <view
        :class="roleType == 3 ? 'bg_wrap1 text' : 'text'"
        @click="linkOther('b_recruit')"
        >去招聘</view
      > -->
      </view>
    </view>

    <view class="container">
      <view class="avatar">
        <u-image
          :src="
            vuex_token != ''
              ? reversedAvatarUrl
              : '/static/img/my/default_avatar.png'
          "
          shape="circle"
          width="190rpx"
          height="190rpx"
        />
      </view>
      <view class="top">
        <view class="box">
          <view v-if="vuex_token != ''" class="title">
            <text class="name1">{{ reversedName }}</text>
            <!-- <u-icon class="arrowRight" name="arrow-right" color="#B2B2B2" size="28"></u-icon>
						<text class="edit-name">{{"查看/编辑资料"}}</text> -->
          </view>
          <view v-else class="title" @click="link('login')">
            <text class="name">登录/注册</text>

            <view style="margin-right: 15px">
              <text class="edit-name">请先登录注册</text>
              <u-icon
                class="arrowRight"
                name="arrow-right"
                color="#B2B2B2"
                size="28"
              ></u-icon>
            </view>
          </view>

          <view class="events" style="">
            <u-grid :col="3" :border="false">
              <u-grid-item v-for="(item, index) in cus_events" :key="index">
                <view
                  style="flex-direction: column; display: flex"
                  @click="link(item.type)"
                >
                  <text class="bold_count">{{ item.count }}</text>
                  <text style="margin-top: 20rpx" class="text">{{
                    item.name
                  }}</text>
                </view>
              </u-grid-item>
            </u-grid>
          </view>

          <view
            style="
              margin: 15px 15px 20px;
              display: flex;
              justify-content: space-between;
            "
          >
            <image
              @click="link('resume')"
              style="width: 150px; height: 75px"
              lazy-load="true"
              :src="vuex_baseImgUrl && `${vuex_baseImgUrl}my_grjl.png`"
            ></image>
            <image
              @click="link('recommend')"
              style="width: 150px; height: 75px"
              src="https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/excellet-working/my_wdtj.png"
              lazy-load="true"
            ></image>
          </view>
        </view>

        <!-- <view class="box2">
          <text
            style="
              padding-left: 10px;
              font-size: 36rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #000000;
            "
            >学习服务</text
          >
          <view style="margin-top: 40rpx">
            <u-grid :col="4" :border="false">
              <u-grid-item
                v-for="(item, index) in studet_events"
                :key="index"
                @click="link(item.type)"
              >
                <image
                  :src="item.path"
                  style="width: 48rpx; height: 48rpx"
                ></image>
                <text style="margin-top: 16rpx" class="text">{{
                  item.name
                }}</text>
              </u-grid-item>
            </u-grid>
          </view>
        </view> -->

        <view class="box2">
          <text
            style="
              padding-left: 10px;
              font-size: 36rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #000000;
            "
            >其他功能</text
          >
          <view style="margin-top: 40rpx">
            <u-grid :col="4" :border="false">
              <u-grid-item
                v-for="(item, index) in other_events"
                :key="index"
                @click="link(item.type)"
              >
                <image
                  :src="item.path"
                  style="width: 48rpx; height: 48rpx"
                ></image>
                <text style="margin-top: 16rpx" class="text">{{
                  item.name
                }}</text>
                <view
                  v-if="index == 0 && vuex_user.esignAuthStatus == 'unverified'"
                  style="position: absolute; left: 52%; top: 5px"
                >
                  <img
                    style="width: 34px; height: 17px"
                    src="/static/img/my/noauth1.png"
                  />
                </view>
              </u-grid-item>
            </u-grid>
          </view>
        </view>

        <view class="bottom_extra">
          <view>
            <text class="text" @click="call01">客服电话:{{ phoneNum01 }}</text>

            <text class="text" @click="call02"
              >、投诉电话:{{ phoneNum01 }}</text
            >
          </view>

          <view>
            <text class="text" @click="showPic01">营业执照</text>

            <text class="text" @click="showPic02">、人力资源服务许可证</text>
          </view>

          <view class="text">京B2-20191864</view>
        </view>
      </view>
    </view>

    <u-tabbar
      :list="vuex_role == 'student' ? vuex_tabbar_inter : vuex_tabbar"
      :mid-button="false"
      :before-switch="beforeSwitch"
      :active-color="'var(--primary-color)'"
    ></u-tabbar>
    <u-popup v-model="yxlyLoginShow" mode="bottom" border-radius="18">
      <yxly-login
        @clickX="yxlyLoginShow = false"
        @callBack="sucesslogin"
      ></yxly-login>
    </u-popup>

    <!-- <mantis-chat id="mantisChat" companyId="8280" probeId="638dc373a19bd60001998fd9"
			chatPageUrl="https://pg-chatn4.bjmantis.net/chat/t1/chat.html?mcid=8280&mpid=638dc373a19bd60001998fd9" /> -->
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  data() {
    return {
      roleType: 0,
      yxlyLoginShow: false,
      customStyle: {
        color: "#000000",
        background: "#FFFFFF",
      },
      detailObj: {
        name: "",
      },
      marginTop: 0,
      navigationBarHeight: 0,
      avatarUrl: "",
      cus_events: [
        {
          count: 0,
          name: "已投递",
          type: "commited",
        },
        {
          count: 0,
          name: "待面试",
          type: "interview",
        },
        {
          count: 0,
          name: "收藏",
          type: "collected",
        },
      ],

      studet_events: [
        {
          name: "我的课程",
          type: "myclass",
        },
        {
          name: "我的服务",
          type: "myfw",
        },
        {
          name: "报名记录",
          type: "myhis",
        },
        {
          name: "我的订单",
          type: "order",
        },
      ],

      other_events: [
        // {
        //   path: "",
        //   name: "实名认证",
        //   type: "stu_authen",
        // },
        // {
        //   path: "",
        //   name: "学籍认证",
        //   type: "school_authen",
        // },
        // {
        //   path: "",
        //   name: "问卷调查",
        //   type: "query_list",
        // },
        {
          path: "",
          name: "设置中心",
          type: "setting",
        },
      ],

      phoneNum01: "400-822-7611",

      phoneNum02: "400-822-7611",

      lisence01:
        "https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/excellet-working/yyzz.png",

      lisence02:
        "https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/excellet-working/xkz.png",

      mantisChat: null,
    };
  },

  onLoad() {
    this.getSystemInfo();

    this.studet_events[0].path = `${this.vuex_baseImgUrl}myclass1.png`;
    this.studet_events[1].path = `${this.vuex_baseImgUrl}myclass2.png`;
    this.studet_events[2].path = `${this.vuex_baseImgUrl}myclass3.png`;
    this.studet_events[3].path = `${this.vuex_baseImgUrl}myclass4.png`;
    // this.other_events[0].path = `${this.vuex_baseImgUrl}stu_authen.png`;
    // this.other_events[1].path = `${this.vuex_baseImgUrl}school_authen.png`;
    // this.other_events[2].path = `${this.vuex_baseImgUrl}query_list.png`;
    this.other_events[0].path = `${this.vuex_baseImgUrl}setting.png`;
  },

  onReady() {
    // this.tanglanginit()
  },

  onShow() {
    this.cus_events[0].count = 0;
    this.cus_events[1].count = 0;
    this.cus_events[2].count = 0;
    if (JSON.stringify(this.vuex_user) != "{}") {
      this.getStatics();
      // this.getUserInfo();
      this.getResumeDetail();
    }

    console.log("23124324234", this.vuex_role);
    if (this.vuex_role == "student") {
      this.roleType = 2;
    } else if (this.vuex_role == "work") {
      this.roleType = 1;
    }
  },

  computed: {
    ...mapState({
      vuex_user: "vuex_user",
      vuex_token: "vuex_token",
      vuex_weixinUserInfo: "vuex_weixinUserInfo",
      student: (state) => state.vuex_user.student,
      userBasicInfo: (state) => state.vuex_user.userBasicInfo,
      vuex_weixinUserInfo: (state) => state.vuex_weixinUserInfo,
    }),

    reversedName() {
      return this.detailObj.name
        ? this.detailObj.name
        : this.vuex_user.name;
      // return (this.userBasicInfo && this.userBasicInfo.name) ? this.userBasicInfo.name : this.vuex_user.username;
    },

    reversedStatusText() {
      return this.student && this.student.status == "verified"
        ? "已认证"
        : "未认证";
    },

    reversedAvatarUrl() {
      if (this.detailObj.image_path) {
        return this.detailObj.image_path + "?" + Date.now();
      }
      return "/static/img/my/default_avatar.png";
    },
  },

  methods: {
    // ...mapActions("user", {
    //   getUserInfo: "getUserInfo",
    // }),

    beforeSwitch(index) {
      return true;
    },

    async tanglanginit() {
      setTimeout(() => {
        let mantisChat = this.selectComponent("#mantisChat");
        this.mantisChat = mantisChat;
        console.log("螳螂实例==", mantisChat);
      }, 1000);
    },

    sucesslogin() {
      console.log(this.vuex_user, "type--");
      if (JSON.stringify(this.vuex_user) != "{}") {
        this.getStatics();
        // this.getUserInfo();
        this.getResumeDetail();
      }
    },

    getSystemInfo() {
      uni.getSystemInfo({
        success: (res) => {
          let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
          let menuLeft = menuButtonInfo.left;
          let menuHeight = menuButtonInfo.height;
          let menuTop = menuButtonInfo.top;
          // 状态栏高度
          let statusBarHeight = res.statusBarHeight;
          let platform = res.platform;
          let winWidth = res.windowWidth;

          let excludeStatusBarHeight = 44;
          if (platform == "android") {
            excludeStatusBarHeight = 48;
          }

          let paddingTop = menuTop + menuHeight;

          let proportion = 750 / winWidth;
          console.log(menuTop, winWidth, proportion, "===");

          // this.searchWidth = (menuLeft * proportion) + 'rpx';
          // this.searchHeight = (menuHeight * proportion) + 'rpx';
          // this.marginTop = menuTop * proportion + "rpx";
          // this.paddingTop = (paddingTop * proportion + 82) + 'rpx';

          let navigationBarHeight = statusBarHeight + excludeStatusBarHeight;

          this.navigationBarHeight = navigationBarHeight * proportion;

          // console.log(this.searchHeight, this.navigationBarHeight)
        },
        complete: function (res) {},
      });
    },

    getResumeDetail() {
      this.$u.api.getResumeDetailApi().then((res) => {
        this.detailObj = res;
        console.log(res, "------");
      });
    },

    getStatics() {
      let that = this;
      this.$u.api.myUserStaticsAPI().then((res) => {
        console.log("getStatics...", res);
        that.cus_events[0].count = res.delivery_count || 0;
        that.cus_events[1].count = res.interview_count || 0;
        that.cus_events[2].count = res.collect_count || 0;
      });
    },

    link(type) {
      console.log(this.vuex_token, 'type--', type)
      if (JSON.stringify(this.vuex_user) == "{}") {
        if (type == "setting") {
          this.$u.route(
            "/pages/student/my/setting-container/setting-container"
          );
        } else {
          this.goLogin();
        }
        return;
      }

      const { dispatch } = this.$store;

      switch (type) {
        case "user":
          // this.$u.route('/pages/student/my/personal-info/personal-info');
          this.$u.route("/pages/student/my/edit-resume/edit-resume");
          break;
        case "commited":
          this.$u.route(
            "/pages/student/my/recruit_history/recruit_history" + "?status=new"
          );
          break;
        case "interview":
          this.$u.route(
            "/pages/student/my/recruit_history/recruit_history" +
              "?status=interview"
          );
          break;
        case "collected":
          this.$u.route("/pages/student/my/collected/collected");
          break;
        case "resume":
          // if (this.detailObj && this.detailObj.id) {
          this.$u.route("/pages/student/my/edit-resume/edit-resume");
          // } else {
          // 	uni.$u.route({
          // 		url: '/pages/student/my/firstLogin-resume/firstLogin-resume',
          // 		params: {
          // 			jump: '2'
          // 		}
          // 	})
          // }
          break;
        case "recommend":
          this.$u.route("/pages/student/my/recommendList/recommendList");
          break;

        case "order":
          this.$u.route("/pages/student/my/promote-order/promote-order");
          break;

        case "school_authen":
          if (this.student && this.student.status == "verified") {
            this.$u.route(
              "/pages/student/my/student-authen-detail/student-authen-detail"
            );
          } else {
            this.$u.route("/pages/common/student-done/student-done");
          }
          break;
        case "stu_authen":
          this.$u.api
            .getAuthUrlApi({
              redirectPath: "wechat://back",
            })
            .then(async (res) => {
              if (res) {
                if (this.vuex_user.esignAuthStatus == "unverified") {
                  this.$u.route({
                    url: `/pages/common/webview/webview?navtitle=实名认证&type=treary&url=${encodeURIComponent(
                      res.data.authUrl
                    )}`,
                  });
                } else {
                  this.$u.toast("已实名认证");
                }
              }
            });
          break;
        case "query_list":
          this.$u.route("/pages/student/my/question-list/question-list");
          break;

        case "setting":
          this.$u.route(
            "/pages/student/my/setting-container/setting-container"
          );
          break;

        case "myclass":
          this.$u.route("/pages/student/my/my-course/my-course");
          break;

        case "myfw":
          this.$u.route("/pages/student/my/my-service/my-service");
          break;

        case "myhis":
          this.$u.route("/pages/student/my/my-record/my-record");
          break;
      }
    },

    linkOther(type) {
      if (type == "social_recruit") {
        this.$u.vuex("vuex_role", "work");
        this.roleType = 1;
        uni.$emit("handleSuccess", true);
      } else if (type == "student_recruit") {
        this.$u.vuex("vuex_role", "student");
        this.roleType = 2;
        uni.$emit("handleSuccess", true);
      } else if (type == "b_recruit") {
        my.navigateToMiniProgram({
          appId:
            this.vuex_appId == "wx2a515776284cae17"
              ? "wx1d61898f341c39ec"
              : "wxb17739e83e2f94f2", //优学乐业B端
          path: "pages/tabBar/home/home",
          // envVersion: 'develop',
          success(res) {
            console.info(res);
          },
        });
      }
    },

    goLogin() {
      this.yxlyLoginShow = true;
      // this.$u.toast('未登录,请重新登录!');
      // setTimeout(() => {
      // 	// 此为uView的方法,详见路由相关文档
      // 	this.$u.route('/pages/student/my/login/login')
      // }, 1500)
    },

    call01() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNum01,
      });
    },

    call02() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNum02,
      });
    },

    showPic01() {
      uni.previewImage({
        urls: [this.lisence01],
      });
    },

    showPic02() {
      uni.previewImage({
        urls: [this.lisence02],
      });
    },

    // 发起会话时调用
    mantisRequestChat() {
      this.mantisChat._requestChat();
    },

    // 留言表单提交时调用
    handleSubmit() {
      let formValue = {
        phone: 13123123123,
      };
      this.mantisChat._sendPage(formValue);
    },
  },
};
</script>

<style>
page {
  background-color: #fdfdfd;
}
</style>

<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: 100% 627px;
  background-repeat: no-repeat;
  padding: 0 16px;

  .navbar {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    display: flex;
    align-items: flex-end;
    padding-left: 40upx;
    padding-bottom: 8px;
  }

  .bg_wrap {
    min-height: 52rpx;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 28rpx;
    // position: absolute;
    display: flex;
    text-align: center;

    .bg_wrap1 {
      background: #ffffff;
      border-radius: 28rpx;
    }

    .text {
      font-size: 24rpx;
      font-family: PingFangSC-Light, PingFang SC;
      font-weight: 300;
      color: #000000;
      width: 132rpx;
      height: 56rpx;
      line-height: 54rpx;
    }
  }

  .box {
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
    border-radius: 20px 20px 8px 8px;
    overflow: hidden;
    background-color: #fff;
  }

  .box1 {
    margin-top: 10px;
    padding: 30px 0;
    border-radius: 10px 10px;
    background: #ffffff;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
  }

  .box2 {
    margin-top: 10px;
    padding: 20px 10px;
    border-radius: 10px 10px;
    background: #ffffff;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
  }

  // .box3 {
  // 	margin: 53px 0;
  // 	display: flex;
  // 	flex-direction: column;
  // 	align-items: center;

  // 	.box3-t {
  // 		margin-bottom: 6rpx;
  // 		font-size: 12px;
  // 		font-family: PingFangSC-Regular, PingFang SC;
  // 		font-weight: 400;
  // 		color: rgba(0, 0, 0, 0.45);
  // 	}
  // }

  .bottom_extra {
    margin: 43px 0;
    text-align: center;

    .text {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 8rpx;
    }
  }

  .container {
    width: 100%;
    position: relative;
    // top: 320rpx;
    // left: 0;
    // background-color: #ffffff;
    // padding: 0 0 100rpx 0;
    // overflow: hidden;

    .avatar {
      position: absolute;
      top: -95rpx;
      left: 32rpx;
    }

    .top {
      // background: #FFFFFF;
      // box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.03);
      // border-top-left-radius: 20px;
      // border-top-right-radius: 20px;

      .title {
        padding: 30rpx 0 0 234rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          display: inline-block;
          width: 200rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 38rpx;
          line-height: 54rpx;
          font-size: 500;
        }

        .name1 {
          display: inline-block;
          width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 38rpx;
          line-height: 54rpx;
          font-size: 500;
        }

        .edit-name {
          // float: right;
          font-size: 26rpx;
          line-height: 36rpx;
          padding: 12rpx 6rpx 0 0;
          color: rgba(0, 0, 0, 0.65);
        }

        .arrowRight {
          // float: right;
          padding: 18rpx 32rpx 0 0;
        }
      }

      .cell {
        margin: 62rpx 0 0 0;
      }

      .cell /deep/ .u-cell {
        padding: 36rpx 32rpx;
      }
    }

    .events {
      .bold_count {
        font-size: 40rpx;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #121212;
        line-height: 40rpx;
      }

      .text {
        font-size: 26rpx;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #646464;
        line-height: 26rpx;
      }
    }

    .grid_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .text1 {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        margin: 10rpx 0 0 0;
      }

      .text2 {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
      }
    }
  }
}
</style>