<template>
  <view>
    <u-navbar back-text="" title="新增关注"></u-navbar>
    <scroll-view scroll-y="true" class="scroll">
      <view class="guanzhu">
        <view class="flex-col renzheng" v-if="!vuex_user.isAttestationXY&& false">
          <view class="flex-col section_4">
            <view class="flex-row section_5">
              <text class="text_3">待认证，请先完成认证~</text>
              <text class="text_4" @click="onAuto">去认证 >></text>
            </view>
          </view>
          <view class="flex-col group_3">
            <view class="flex-col">
              <image src="/static/common/img/16535374500948048054.png" class="image_1" />
            </view>
            <text class="text_5">暂无数据，请尽快认证补充资料~</text>
          </view>
        </view>
        <view class="flex-col group_2" v-else>
          <view class="flex-col list">
            <view class="list-item flex-row group_3" v-for="(item, index) in UserFollowList" :key='index'
              @click='toDetail(item.carewUserId, item.userRole, item.carewUserHead)'>
              <u-avatar :src="$u.http.config.imgUrl + item.carewUserHead" class="text_3 image_1"></u-avatar>
              <view class="bottom-text-wrapper justify-between view_1">
                <view class="">
                  <text class="text_5 text_7"><text>{{ item.carewUserName }}</text><text>{{
                    "(" + item.carewName +
                      ")" }}</text></text>
                  <view class="center-text-wrapper flex-col items-end">
                    <text class="text_8">{{ item.school }}</text>
                  </view>
                </view>
                <view v-if='item.carewType == 2 && item.carewName != "管理员"'
                  class="right-text-wrapper flex-col items-center">
                  <text class="text_10">互相关注</text>
                </view>
                <view v-if='item.carewType == 1 && item.carewName != "管理员"'
                  class="right-text-wrapper flex-col items-center view_21">
                  <text class="text_10">已关注</text>
                </view>
              </view>
            </view>
            <view v-if="!UserFollowList.length"
              style="margin-top:20vh;display: flex;justify-content: center;align-items: center;flex-direction: column;">
              <image src="/static/common/img/empty.png" class="image" />
              <view style="color:grey;margin-top: -5vh;">暂无关注</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import noData from '@/components/NoData.vue';
export default {
  components: {
    noData
  },
  data() {
    return {
      list: [],
      UserFollowList: [],
    };
  },
  onLoad() {
    // this.getList()
    //接收系统消息
    this.$connection.on("SystemMessage", (title, content, time) => {
      if (this.route.indexOf('sysList') >= 0) {
        this.list.unshift({
          messageDate: time,
          title: title,
          message: content
        })
      }
    });
  },
  onShow() {
    this.FollowList()

    if (this.vuex_msgList) {
      var msgList = this.vuex_msgList;
      msgList = msgList.replace('SystemMessage,', '')
      this.$u.vuex('vuex_msgList', msgList)
      if (!msgList) {
        var tab = this.vuex_tabbar;
        tab[1].isDot = false;
        this.$u.vuex('vuex_tabbar', tab);
      }
    }
  },
  methods: {
    FollowList() {
			this.$u.api.getFollowList().then(res => {

				this.UserFollowList = res
			})
		},
    toDetail(id, role, head) {
			if (role == 0) {
				this.$u.route({
					url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id + '&type=0'
				})
			} else {
				uni.navigateTo({
					url: "../dialogBox/dialogBox?id=" + id + '&chatType=1&type=0&head=' + head,
				});
			}
		},
    getList() {
      this.$u.api.getSysList().then(res => {
        this.list = res
      })
    },
   
    //返回上一级
    router() {
      uni.switchTab({
        url: '../../message/msgList/msgList'
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.scroll {
//   background-color: rgb(246, 247, 250);
  background-color: #fff;
  width: 100%;
  height: calc(100vh - 0.44rem);
}

.list-item {
  margin-top: 0.1rem;
  padding: 20rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 20rpx;
}

.items-title {
  display: flex;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 2rpx solid #F6F8F9;

  image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .title-time {
    margin-left: 0.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5rpx 0;
    // align-items: flex-start;
  }
}

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

.text_1 {
  // align-self: center;
  color: rgb(193, 196, 204);
  font-size: 0.12rem;
  line-height: 0.095rem;
  // letter-spacing: 0.012rem;
  white-space: nowrap;
}

.bottom-section {
  padding-left: 10rpx;
}

.text_3 {
  color: rgb(2, 2, 2);
  font-size: 28rpx;
  line-height: 0.16rem;
  // letter-spacing: 0.018rem;
  white-space: nowrap;
}

.text_5 {
  margin-left: 0.015rem;
  margin-top: 0.1rem;
  color: #908a8a;
  font-size: 28rpx;
  line-height: 1.5;
  // letter-spacing: 0.01rem;
  // text-indent: 0.3rem;
}

.text_6 {
  margin-top: 0.1rem;
  font-size: 0.16rem;
  line-height: 0.16rem;
  letter-spacing: 0.01rem;

  text {
    margin-left: 0.015rem;
    text-indent: 0.3rem;
    display: block;
    color: #908a8a;
    font-size: 0.14rem;
    margin-top: 0.1rem;
  }
}

.list {
  padding: 0rem 0.15rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.guanzhu {
	.list-item {
		padding: 0.14rem 0 0.1rem;
		align-self: flex-end;
		box-shadow: 0px 0.005rem rgb(234, 234, 234);
		width: 3.02rem;
		position: relative;
	}

	.text_3 {
		color: rgb(2, 2, 2);
		font-size: 0.15rem;
		line-height: 0.14rem;
		letter-spacing: 0.015rem;
		white-space: nowrap;
	}

	.bottom-text-wrapper {
		margin-top: 0.1rem;
		padding: 0.035rem 0;
		// color: rgb(115, 129, 255);
		font-size: 0.11rem;
		line-height: 0.11rem;
		letter-spacing: 0.011rem;
		white-space: nowrap;
		// background-color: rgba(115, 129, 255, 0.1);
		border-radius: 0.09rem;
		color: #3CB5FB;
		background-color: rgba(60,181,251,0.1);
	}

	.text_5 {
		margin-left: 0.1rem;
		margin-right: 0.03rem;
	}

	.center-text-wrapper {
		padding: 0.035rem 0.08rem;
		color: #3CB5FB;
		font-size: 0.11rem;
		line-height: 0.11rem;
		letter-spacing: 0.011rem;
		white-space: nowrap;
		background-color: rgba(60,181,251,0.1);
		border-radius: 0.09rem;
		display: inline-block;
		margin-top: 16rpx;
	}

	.right-text-wrapper {
		// margin-right: 0.06rem;
		// margin-top: 0.03rem;
		// margin-left: 0.06rem;
		// padding: 0.085rem 0.08rem;
		color: #3CB5FB;
		font-size: 24rpx;
		line-height: 58rpx;
		white-space: nowrap;
		// background-color: rgb(46, 155, 255);
		border-radius: 0.15rem;
    	border: 2rpx #3CB5FB solid;
		width: 120rpx;
		height: 64rpx;
		position: relative;
	}

	.text_8 {
		margin-right: 0.03rem;
	}

	.text_10 {
		text-transform: uppercase;
	}

	.text_12 {
		margin-left: 0.05rem;
		color: rgb(2, 2, 2);
		font-size: 0.15rem;
		line-height: 0.14rem;
		letter-spacing: 0.015rem;
		white-space: nowrap;
	}

	.text_14 {
		margin-left: 0.1rem;
		margin-right: 0.03rem;
	}

	.group_2 {
		// padding: 0.11rem 0 4.94rem;
		// flex: 1 1 auto;
		// overflow-y: auto;
		position: relative;
	}

	.text-wrapper {
		// margin-left: 0.17rem;
		padding: 0.11rem 0 0.12rem;
		color: rgb(255, 255, 255);
		font-size: 0.18rem;
		line-height: 0.17rem;
		letter-spacing: 0.018rem;
		white-space: nowrap;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 0.4rem;
		height: 0.4rem;
		margin-top: 0.08rem;
		background: #6574fc;
		border-radius: 50%;

		text {
			display: inline-block;
			width: 100%;
			text-align: center;
		}
	}

	.list {}

	.text_2 {
		color: #fff;
	}

	.group_3 {
		padding: initial;
		align-self: initial;
		box-shadow: initial;
		width: initial;
		position: initial;
		// box-shadow: 0px 0.005rem #eaeaea;
		// padding-left: 0.2rem;
	}

	.group_4 {
		padding: initial;
		align-self: initial;
		box-shadow: initial;
		width: initial;
		position: initial;
		margin-top: 0.015rem;
	}

	.group_5 {
		padding: initial;
		align-self: initial;
		box-shadow: initial;
		width: initial;
		position: initial;
	}

	.group_6 {
		padding: initial;
		align-self: initial;
		box-shadow: initial;
		width: initial;
		position: initial;
	}

	.group_7 {
		padding: initial;
		align-self: initial;
		box-shadow: initial;
		width: initial;
		position: initial;
	}

	.group_8 {
		padding: initial;
		align-self: initial;
		box-shadow: initial;
		width: initial;
		position: initial;
	}

	.group_9 {
		padding: initial;
		align-self: initial;
		box-shadow: initial;
		width: initial;
		position: initial;
	}

	.image_1 {
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 50%;
		overflow: hidden;
		// margin-top: 0.12rem;
		margin-top: 26rpx;
	}

	.view_1 {
		margin-top: initial;
		// padding: 0.1rem 0;
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		background-color: initial;
		border-radius: initial;
		margin-left: 0.08rem;
		margin-right: 0.04rem;
		flex: 1 1 auto;
		position: relative;
		align-items: center;
	}

	.image_2 {
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		align-self: center;
		width: 0.4rem;
		height: 0.4rem;
	}

	.view_4 {
		margin-top: initial;
		padding: 0.14rem 0 0.1rem;
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		background-color: initial;
		border-radius: initial;
		margin-left: 0.12rem;
		flex: 1 1 auto;
		box-shadow: 0px 0.005rem rgb(234, 234, 234);
	}

	.image_3 {
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		align-self: center;
		width: 0.4rem;
		height: 0.4rem;
	}

	.view_8 {
		margin-top: initial;
		padding: 0.15rem 0 0.14rem;
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		background-color: initial;
		border-radius: initial;
		margin-left: 0.13rem;
		flex: 1 1 auto;
		box-shadow: 0px 0.005rem rgb(234, 234, 234);
	}

	.image_4 {
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		align-self: center;
		width: 0.4rem;
		height: 0.4rem;
	}

	.view_12 {
		margin-top: initial;
		padding: 0.17rem 0 0.08rem;
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		background-color: initial;
		border-radius: initial;
		margin-left: 0.12rem;
		flex: 1 1 auto;
		box-shadow: 0px 0.005rem rgb(234, 234, 234);
	}

	.image_5 {
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		align-self: center;
		width: 0.4rem;
		height: 0.4rem;
	}

	.view_16 {
		margin-top: initial;
		padding: 0.15rem 0 0.11rem;
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		background-color: initial;
		border-radius: initial;
		margin-left: 0.16rem;
		flex: 1 1 auto;
		box-shadow: 0px 0.005rem rgb(234, 234, 234);
		height: 0.67rem;
	}

	.image_6 {
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		align-self: center;
		width: 0.4rem;
		height: 0.4rem;
	}

	.view_19 {
		margin-top: initial;
		padding: 0.18rem 0 0.18rem;
		color: initial;
		font-size: initial;
		line-height: initial;
		letter-spacing: initial;
		white-space: initial;
		background-color: initial;
		border-radius: initial;
		margin-left: 0.16rem;
		flex: 1 1 auto;
		box-shadow: 0px 0.005rem rgb(234, 234, 234);
		height: 0.67rem;
		position: relative;

	}

	.text_7 {
		margin-left: initial;
		margin-right: initial;
		color: rgb(2, 2, 2);
		font-size: 28rpx;
		line-height: 0.14rem;
		// letter-spacing: 0.015rem;
		white-space: nowrap;
		display: block;
		font-weight: bold;

		text:nth-child(1) {
			display: inline-block;
			white-space: nowrap;
			max-width: 0.9rem;
			overflow: hidden;
			text-overflow: ellipsis;
			vertical-align: bottom;
		}
	}

	.text_26 {
		margin-left: initial;
		margin-right: initial;
		color: rgb(2, 2, 2);
		font-size: 0.15rem;
		line-height: 0.14rem;
		letter-spacing: 0.015rem;
		white-space: nowrap;
	}

	.view_20 {
		left: -0.03rem;
		bottom: 0.075rem;
	}

	.view_21 {
		// margin-right: 0.06rem;
		// margin-top: initial;
		// padding: 0.09rem 0 0.06rem;
		color: rgb(73, 76, 87);
		background-color: initial;
		border: solid 0.01rem rgb(185, 185, 185);
	}
}

.renzheng {
	padding-bottom: 0rem;

	.section_4 {
		padding: 0.33rem 0 0.34rem;
		background-color: rgb(255, 255, 255);

		.section_5 {
			margin-left: 0.18rem;
			margin-right: 0.24rem;
			padding: 0.2rem 0.18rem 0.18rem 0.24rem;
			background-color: rgb(246, 247, 250);
			justify-between: space-between;

			.text_3 {
				color: rgb(160, 162, 172);
				font-size: 0.15rem;
				line-height: 0.15rem;
				letter-spacing: 0.015rem;
				white-space: nowrap;
			}

			.text_4 {
				margin-left: 0.05rem;
				color: rgb(46, 155, 255);
				font-size: 0.15rem;
				line-height: 0.15rem;
				white-space: nowrap;
				text-transform: uppercase;
			}
		}
	}

	.group_3 {
		margin-top: 0.76rem;
		padding-left: 0.8rem;
		padding-right: 0.69rem;
		color: rgb(163, 182, 202);
		font-size: 0.15rem;
		line-height: 0.15rem;
		white-space: nowrap;

		.text_5 {
			margin-left: 0.02rem;
			margin-top: 0.13rem;
		}

		.image_1 {
			margin-right: 0.14rem;
			width: 2.12rem;
			height: 1.89rem;
		}
	}
}

</style>
