<template>
  <view>
    <u-navbar back-text="" title="个人主页"></u-navbar>
    <!-- 用户信息详情 -->
    <view class="user-detail">
      <!-- 背景图 -->
      <view class="user-bg">
        <image :src="mybg"></image>
      </view>
      <!-- 详细信息 -->
      <view class="user-detail-info">
        <view class="user-detail-top">
          <!-- 头像 私信 关注 -->
          <view class="user-avatar-box">
            <view class="user-detail-info-avatar">
              <u-avatar class="image_2" size="144" :src="$u.http.config.imgUrl + userInfo.baseData.head">
              </u-avatar>
            </view>
            <view class="user-operate">
              <u-button shape="circle" v-if="userInfo.carewState&&vuex_user.id !== userId" :type="userInfo.carewState.includes('未关注') ? 'primary' : 'default'" @click="onFollow">{{
                userInfo.carewState.includes('未关注')?'关注':userInfo.carewState }}</u-button>
              <view class="user-message" @click="GoChat" v-if="vuex_user.id !== userId">
                <image src="/static/common/img/homepage/message.png"></image>
              </view>
              <view v-else style="height: 96rpx;"></view>
            </view>
          </view>
          <!-- 用户姓名 -->
          <view class="user-name">
            <text>{{ attestation.name||userInfo.baseData.name || "-" }}</text>
            <image v-if="userInfo.isCertifyStatus" src="/static/common/img/homepage/frame.png"></image>
          </view>
          <!-- 用户学校信息 -->
          <view class="user-school" v-if="baseShow === true && otherUserType === 0">
            <text>{{ findRow.schoolName || "-" }}</text>
            <!-- 学院 -->
            <text v-if="findRow.college">{{
              findRow.college
            }}</text>
            <text class="text_2" style="margin-right: 0.05rem" v-if="findRow.major">{{ findRow.major }}</text>
            <!-- 年级 -->
            <text class="text_2" v-if="findRow.startYear">{{
              findRow.startYear + "级"
            }}</text>
          </view>
          <!-- 用户地址 先不放开 -->
          <view class="user-identity"> </view>
          <!-- 获赞 粉丝 关注 -->
          <!-- <view class="user-like">
            <view class="likes" v-for="(item, index) in userlikes" :key="index">
              <text class="like-num">{{ item.num }}</text>
              <text class="like-name">{{ item.name }}</text>
            </view>
          </view> -->
          <view class="user-tabs">
            <view class="user-tabs-item" :class="{ 'tabs-active': swiperCurrent == index }"
              v-for="(item, index) in userTabs" :key="index" @click="tabsChange(index)">
              <image :src="swiperCurrent == index ? item.selectedImage : item.image"></image>
              <text>{{ item.name }}</text>
            </view>
          </view>
        </view>

        <view class="content">
          <view class="release-content" v-if="swiperCurrent == 0">
            <information :list="userList" @onStar="onStar" type="1" :schoolId="schoolId" route="2" :flag="type" :borderRadius="true">
            </information>
          </view>
          <view class="user-info" v-if="swiperCurrent == 1">

            <view class="userinfo-box" v-if="userInfo">
              <view class="userinfo-title">
                <text>基本信息</text>
              </view>
              <view class="userinfo-detail">
                <view class="justify-between detail-row">
                  <text class="detail-title">手机号码</text>
                  <text class="detail-content">{{ userInfo.baseData.phone }}</text>
                </view>
                <view class="justify-between detail-row">
                  <text class="detail-title">年龄</text>
                  <text class="detail-content">{{
                    userInfo.baseData.age
                  }}</text>
                </view>
                <view class="justify-between detail-row">
                  <text class="detail-title">现居地（区）</text>
                  <text class="detail-content">{{
                    userInfo.baseData.address
                  }}</text>
                </view>
                <view class="justify-between detail-row">
                  <text class="detail-title">工作领域</text>
                  <text class="detail-content">{{
                    userInfo.baseData.workField
                  }}</text>
                </view>
              </view>
            </view>
            <!-- 教育经历 -->
            <view class="" v-if="userInfo && otherUserType === 0">
              <view class="userinfo-title"><text class="">教育经历</text>
              </view>
              <view class="userinfo-detail">
                <view class="detail-row school-row" v-for="(item, index) in userInfo.edcationList"
                  v-if="item.certifyStatus == 1 || true" :key="index">
                  <view class="detail-row-item">
                    <image :src="$u.http.config.imgUrl + item.schoolLogo.slice(1)" />
                    <view class="school-info">
                      <view class="school-name">
                        <view class="text_24">{{ item.schoolName }}</view>
                        <view class="text_25 status-box" :class="item.certifyStatus == 0
                          ? 'color2'
                          : item.certifyStatus == 1
                            ? 'color1'
                            : 'color3'
                          ">{{ certifyArr[item.certifyStatus] }}</view>
                      </view>
                      <view class="professional-info">
                        <view>{{ item.startYear }}届</view>
                        <view class="text_27">{{ item.major }}</view>
                        <view class="text_28">{{ item.educationStr }}生</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>


            </view>
            <!-- 任职院校 -->
            <view class="" v-if="userInfo && otherUserType === 1">
              <view class="userinfo-title"><text class="text_21">任职院校</text>
              </view>
              <view class="userinfo-detail">
                <view class="detail-row school-row" v-for="(item, index) in userInfo.edcationList"
                  v-if="item.certifyStatus == 1 || true" :key="index">

                  <view class="detail-row-item">
                    <image :src="$u.http.config.imgUrl + item.logo.slice(1)" class="image_17" />
                    <view class="school-info">
                      <view class="school-name">
                        <text class="text_24">{{ item.school }}</text>
                        <text class="text_25 status-box" :class="item.certifyStatus == 0
                          ? 'color2'
                          : item.certifyStatus == 1
                            ? 'color1'
                            : 'color3'
                          ">{{ certifyArr[item.certifyStatus] }}</text>
                      </view>
                      <view class="flex-row group_20">
                        <text>{{ item.schoolJob }}</text>
                        <!-- <text>{{item.startYear}}年入学</text> -->
                        <!-- <text class="text_27">{{item.major}}</text> -->
                        <!-- <text class="text_28">{{item.educationStr}}</text> -->
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import information from "../../../components/Information.vue";
import release from "@/static/common/img/homepage/released.png";
import releaseSelected from "@/static/common/img/homepage/released-selected.png";
import person from "@/static/common/img/homepage/person.png";
import personSelected from "@/static/common/img/homepage/person-selected.png";
import mybg1 from '@/static/common/img/my/mybg1.png'
import mybg2 from '@/static/common/img/my/mybg2.png'
import mybg3 from '@/static/common/img/my/mybg3.png'
import mybg4 from '@/static/common/img/my/mybg4.png'
import mybg5 from '@/static/common/img/my/mybg5.png'
import mybg6 from '@/static/common/img/my/mybg6.png'
import mybg7 from '@/static/common/img/my/mybg7.png'
import mybg8 from '@/static/common/img/my/mybg8.png'
import mybg9 from '@/static/common/img/my/mybg9.png'
import mybg10 from '@/static/common/img/my/mybg10.png'
import mybg11 from '@/static/common/img/my/mybg11.png'
import mybg12 from '@/static/common/img/my/mybg12.png'
import mybg13 from '@/static/common/img/my/mybg13.png'
import mybg14 from '@/static/common/img/my/mybg14.png'
import mybg15 from '@/static/common/img/my/mybg15.png'
import mybg16 from '@/static/common/img/my/mybg16.png'
import mybg17 from '@/static/common/img/my/mybg17.png'
import mybg18 from '@/static/common/img/my/mybg18.png'
import mybg19 from '@/static/common/img/my/mybg19.png'
import mybg20 from '@/static/common/img/my/mybg20.png'
export default {
  components: {
    information: information,
  },
  data() {
    return {
      userId: "",
      swiperCurrent: 0,
      current: 0,
      schoolId: "",
      type: "",
      userList: [],
      navList: [
        {
          name: "个人信息",
        },
        {
          name: "Ta的发布",
        },
      ],
      certifyArr: {
        0: "未认证",
        1: "已认证",
        2: "审核中",
      },
      userInfo: {},
      word: "",
      otherUserType: true,
      attestation: {},
      // 基础信息
      findRow: {},
      // 企业信息
      qyRow: {},
      // 企业与基础信息切换
      baseShow: true,
      // 企业按钮是否存在
      qyShow: false,
      userlikes: [
        {
          num: 200,
          name: "获赞",
        },
        {
          num: 200,
          name: "粉丝",
        },
        {
          num: 200,
          name: "关注",
        },
      ],
      userTabs: [
        {
          image: release,
          selectedImage: releaseSelected,
          name: "发布",
        },
        {
          image: person,
          selectedImage: personSelected,
          name: "个人信息",
        },
      ],
      mybg1,
      mybg2,
      mybg3 ,
      mybg4 ,
      mybg5 ,
      mybg6 ,
      mybg7 ,
      mybg8 ,
      mybg9 ,
      mybg10,
      mybg11,
      mybg12,
      mybg13,
      mybg14,
      mybg15,
      mybg16,
      mybg17,
      mybg18,
      mybg19,
      mybg20,
      mybg: '',
    };
  },
  computed: {
    randomBg() {
      const bgArray = [
        this.mybg1, this.mybg2, this.mybg3, this.mybg4, this.mybg5,
        this.mybg6, this.mybg7, this.mybg8, this.mybg9, this.mybg10,
        this.mybg11, this.mybg12, this.mybg13, this.mybg14, this.mybg15,
        this.mybg16, this.mybg17, this.mybg18, this.mybg19, this.mybg20
      ];
      const randomIndex = Math.floor(Math.random() * bgArray.length);
      return bgArray[randomIndex];
    }
  },
  created() {
    this.mybg = this.randomBg;
  },
  onLoad(e) {
    if (!e.id) {
      uni.switchTab({
        url: "../../main/index/index",
      });
      return;
    }
    this.type = e.type;
    this.userId = e.id;
    this.word = e.word;
    // this.getDetail();
    // this.getUserSchool();
  },
  onShow() {
    
    this.getDetail();
    this.mybg = this.randomBg;
    // 改为在getDetail中调接口
    /* if (this.current == 0) {
      setTimeout(() => {
        
        this.getUserHelp();
      }, 500);
    } */
  },
  methods: {
    lookQY() {
      console.log(7777777);
    },
    getUserHelp() {
      console.log('this.findRow--------------',this.findRow);
      
      const data = {
        userId: this.userId,
        schoolId:this.findRow.schoolId,
        pageIndex: 1,
        pageSize: 10,
      };
      this.$u.apiList.Publishs(data).then((res) => {
        this.userList = res.items;
      });
      // 改成只能看本校的
      /* this.$u.apiList.UserHelp(data).then((res) => {
        this.userList = res.items;
      }); */
    },
    getDetail() {
      this.$u.api
        .getUserInfo({
          userId: this.userId,
        })
        .then((res) => {
          console.log('res-----',res);
          
          this.userInfo = res;
          this.attestation = Object.assign(this.attestation, res.attestation);
          this.otherUserType = res.userType;
          // console.log(this.userInfo, 1)
          this.findRow = res.edcationList[0];
          if (res.qyAttestation) {
            this.qyShow = true;
            this.qyRow = res.qyAttestation;
          }
          // 获取个人信息、拿到学校id之后 再查发布（需要学校id）
          this.getUserHelp();
        });
    },
    //   去聊天
    GoChat() {
      uni.navigateTo({
        url:
          "../../message/dialogBox/dialogBox?id=" + this.userId + "&chatType=0",
      });
    },
    // tabs通知swiper切换
    tabsChange(index) {
      if (index == 0) {
        this.getUserHelp();
      }
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问速切题，快换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    onFollow() {
      const data = {
        userId: this.vuex_user.id,
        carewId: this.userId,
      };
      this.$u.apiList.InsertOrDelFollow(data).then((res) => {
        this.getDetail();
      });
    },
    getUserSchool() {
      this.$u.apiList.GetUserSchool().then((res) => {
        // 学生时
        if ([0,2].includes(this.vuex_user.userType)) {
          this.schoolId = res.items.schoolId;
        }
        // 教师时
        if (this.vuex_user.userType === 1) {
          this.schoolId = res.jzgItems.schoolId;
        }
      });
    },
    async onStar(val) {
      console.log("收藏--");
      // 判断当前学校是否认证，未认证不可收藏
      const req = {
        userId: this.vuex_user.id,
      };
      const result = await this.$u.apiList.MyPage(req);
      console.log(JSON.parse(JSON.stringify(result)), "result");
      const edcationList = result.edcationList;
      if (!edcationList.length) {
        return this.$refs.uToast.show({
          title: "认证后可进行收藏操作",
          type: "none",
        });
      }
      // const findRow = edcationList.find((x) => x.isSelected === true);
      const findRow = edcationList[0];
      if ([0, 2].includes(findRow.certifyStatus)) {
        return this.$refs.uToast.show({
          title: "认证后可进行收藏操作",
          type: "none",
        });
      }
      // return
      const data = {
        id: val.id,
        type: val.type,
      };
      this.$u.apiList
        .LikeCollect(data)
        .then((res) => {
          if (val.type == 0) {
            if (val.isCllect) {
              val.isCllect = false;
              val.collectCount -= 1;
              this.$refs.uToast.show({
                title: "取消收藏成功",
                type: "success",
              });
            } else {
              val.isCllect = true;
              val.collectCount += 1;
              this.$refs.uToast.show({
                title: "收藏成功",
                type: "success",
              });
            }
          } else if (val.type == 1) {
            if (val.isCllect) {
              val.isCllect = false;
              val.collectCount -= 1;
              this.$refs.uToast.show({
                title: "取消收藏成功",
                type: "success",
              });
            } else {
              val.isCllect = true;
              val.collectCount += 1;
              this.$refs.uToast.show({
                title: "收藏成功",
                type: "success",
              });
            }
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: "收藏失败",
            type: "error",
          });
        });
    },
    //返回上一级
    router() {
      if (this.type == 0) {
        uni.switchTab({
          url: "../../message/msgList/msgList",
        });
      } else if (this.type == 1) {
        uni.navigateTo({
          url:
            "../../message/dialogBox/dialogBox?id=" +
            this.userId +
            "&chatType=0&type=0",
        });
      } else if (this.type == 2) {
        this.$u.route({
          url: "pages/AlumniCircle/Alumni/Alumni",
        });
      } else if (this.type == 3) {
        let url = "pages/main/search/search";
        if (this.word) {
          url = "pages/main/search/search?word=" + this.word;
        }
        this.$u.route({
          url: url,
        });
      } else if (this.type == 4) {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.switchTab({
          url: "pages/main/index/index",
        });
      }
    },
    // scroll-view到底部加载更多
    onreachBottom() { },
  },
};
</script>

<style lang="scss" scoped>
.user-detail {
  position: relative;
  background: #f6f8fa;
  width: 100%;
  min-height: 100vh;
}

.user-bg {
  position: absolute;
  width: 100%;
  height: 320rpx;
  overflow: hidden;

  image {
    width: 100%;
    object-fit: cover;
  }
}

.user-detail-info {
  width: 100%;
  position: absolute;
  top: 320rpx;

  .user-detail-top {
    padding: 0 48rpx;
    background: #fff;
  }

  .user-avatar-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .user-operate {
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      width: 300rpx;
      justify-content: space-between;
      padding-top: 20rpx;

      .user-message {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
        background: #f6f8f9;
        display: flex;
        align-items: center;
        justify-content: center;


        image {
          width: 48rpx;
          height: 48rpx;
        }
      }
    }
  }

  .user-detail-info-avatar {
    width: 154rpx;
    height: 154rpx;
    border-radius: 50%;
    background-color: #fefcff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -50rpx;
    left: 48rpx;
  }
}

.user-name {
  margin-top: 15rpx;
  margin-bottom: 16rpx;
  font-size: 32rpx;
  font-weight: 800;
  color: #1f2232;
  display: flex;
  align-items: center;

  image {
    width: 40rpx;
    height: 40rpx;
    margin-left: 10rpx;
  }
}

.user-school {
  text {
    display: inline-block;
    background: #f6f8f9;
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 10rpx;
    margin-right: 16rpx;
    font-size: 24rpx;
    margin-bottom: 16rpx;
  }
}

.user-like {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  padding: 30rpx 30rpx;

  .likes {
    display: flex;
    flex-direction: column;
    align-items: center;

    .like-num {
      font-weight: 800;
      font-size: 36rpx;
      color: #1f2232;
    }

    .like-name {
      font-weight: 500;
      font-size: 24rpx;
      color: #616977;
    }
  }
}

.user-tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .user-tabs-item {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 4rpx solid #fff;
    padding-bottom: 20rpx;
    color: #8697ac;
    font-weight: bold;

    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 20rpx;
    }
  }

  .tabs-active {
    border-bottom: 4rpx solid #48adde;

    text {
      color: #3cb5fb;
    }
  }
}

.user-info {
  padding: 32rpx;
}

.userinfo-title {
  font-weight: bold;
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.9);
  height: 60rpx;
}

.userinfo-box {
  margin-bottom: 32rpx;
}

.userinfo-detail {
  padding:10rpx 32rpx;
  background: #fff;
  border-radius: 32rpx;
  border: 3rpx solid;
  border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)) 3 3;

  .detail-row {
    height: 106rpx;
    line-height: 106rpx;
    border-bottom: 2rpx solid #F6F8F9;



    &:last-child {
      border-bottom: none;
    }

    .detail-title {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.9);
    }

    .detail-content {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.6);
    }

    image {
      width: 102rpx;
      height: 102rpx;
    }

    .detail-row-item {
      height: 106rpx;
      display: flex;
      flex-direction: row;
      align-items: center;

      image {
        margin-right: 30rpx;
      }
    }

    .school-info {
      display: flex;
      flex-direction: column;
      height: 102rpx;

      .school-name {
        // height: 50%;
        height: 51rpx;
        line-height: 51rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.9);

        view {
          display: inline-block;
        }
      }

      .professional-info {
        height: 51rpx;
        line-height: 51rpx;

        view {
          display: inline-block;
          margin-right: 20rpx;
          font-size: 24rpx;
          color: #8697AC;
        }
      }
    }
  }

  .school-row {
    // line-height: 126rpx;
    height: 126rpx;
    display: flex;
    align-items: center;
  }
  .status-box{
    width: 100rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 12rpx;
    font-size: 24rpx;
    margin-left: 20rpx;
    font-weight: normal;
    display: inline-block;

    &.color1 {
      background-color: #3cb4fb;
      color: #fff;
    }

    &.color2 {
      background-color: #ffeceb;
      color: #ff453a;
    }

    &.color3 {
      background-color: #FFB800;
      color: #fff;
    }
  }

}
</style>
