<template>
  <view class="p-bind-inedx g_w_all g_h_all g_bg_f_5 g_kuaishou">
    <!-- 搜索栏 -->
    <view class="m-top">
      <view class="m-search g_p_10 g_pb_0 g_position_rela g_p_12 g_bg_f_5">
        <u-search height="80" v-model="keyword" :placeholder="tabInfo.active == 0 ? '搜索已关注的发单号' : '搜索我的粉丝'" @btnSearch="getSearch" bg-color="#fff" :show-action="false" @change="getSearch" @clear="getSearch" @custom="getSearch" @search="getSearch" search-icon-color="#999999" :maxlength="20"></u-search>
      </view>
    </view>
    <view class="m-panel">
      <view class="center">
        <!-- 列表区 -->
        <view class="m-list">
          <view class="link" :class="isShow ? '' : ''">
            <view class="item g_flex_row_between g_pt_12 g_pb_12 g_pl_16 g_pr_16 g_bg_f" @click="goApply" style="border-bottom: 1rpx solid #eee" v-if="tabInfo.active == 1">
              <view class="g_flex_1 g_flex_row_start">
                <view class="g_flex_column_center g_pr_16 g_flex_none">
                  <view class="g_w_48 g_h_48 g_radius_8 g_flex_c" style="background-color: #ffeceb">
                    <i class="iconfont icon-xindeshenqing g_fs_22" style="color: #ff7b7b; font-size: 22px"></i>
                  </view>
                </view>
                <view class="g_flex_column_center g_flex_1">
                  <view class="g_ell_1 g_fs_18 g_c_3">{{ tabInfo.active == 0 ? "新的关注" : "新的粉丝" }}</view>
                  <view class="g_ell_1 g_fs_14 g_c_9 g_mt_4" v-if="tabInfo.active == 0" :style="{
											color: Number(waitNum_downs) == 0 ? '#fff' : '#999',
										}">您有{{ waitNum_downs }}条信息等待对方通过</view>
                  <view class="g_ell_1 g_fs_14 g_c_9 g_mt_4" v-else :style="{
											color: Number(waitNum_downs) == 0 ? '#fff' : '#999',
										}">您有{{ waitNum_downs }}条新的粉丝申请</view>
                </view>
              </view>
              <view class="g_flex_none g_h_all g_flex_column_center g_pl_20 g_h_48" v-if="Number(waitNum_ups) > 0">
                <view class="tip g_w_16 g_h_16 g_bg_f0a g_c_f g_flex_c g_fs_14 g_radius_50">{{ waitNum_ups }}</view>
              </view>
            </view>
            <rh-loading :loading="loading" v-if="loading && speed == -1" />
            <view v-if="!loading && speed == 0 && inviteNum <= 0" class="g_pt_130" style="padding-top:130px">
              <rh-empty :text="isLogin ? '暂无数据' : '请登录'" />
            </view>
            <view v-if="speed > 0 || inviteNum > 0">
              <view v-if="inviteNum > 0" class="item g_flex_row_between flex_center g_pl_16 g_pr_16 g_pb_12 g_pt_12 g_bg_f g_border_e_b" @click="goInviteList">
                <view class="g_flex_row_start flex_center">
                  <rh-image size="96" radius="6" />
                  <view class="g_ml_16">
                    <view class="g_ell_1 g_fs_18 g_c_0 g_flex_none" style="max-width: 460rpx">关注邀请</view>
                    <view class="g_mt_4 g_text_c">有{{ inviteNum }}个发单号向你发出邀请</view>
                  </view>
                </view>
                <view class="g_dot_18 g_bg_f40 g_c_f g_text_c" v-if="showDot">{{ inviteNum }}</view>
              </view>
              <div class="g_h_10"></div>
              <div class="r_box g_ml_10 g_mr_10" style="overflow: hidden">
                <view class="item g_flex_row_between g_pl_16 g_pr_16 g_pb_6 g_pt_6 g_bg_f" hover-class="thover" v-for="(item, index) in query.list" :key="index" @click="goMain(item)" :class="index == 0 ? 'g_pt_12' : ''" :style="{ 'border-bottom': index == query.list.length - 1 ? '1rpx solid #fff' : '1rpx solid #eee' }">
                  <view class="g_flex_none g_flex_row_start">
                    <view class="g_flex_column_center g_pr_16 g_flex_none" style="position: relative">
                      <rh-image :url="item.logo || 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/dailibaoming/qiyelogo0610.svg'" size="96" radius="50" />

                      <!-- <view v-if="item.supplierAccount == 1" style="position: absolute; left: 0; width: 48px; height: 48px" class="g_flex_row_end">
											<view class="g_flex_c" style="position: absolute; overflow: hidden; width: 20px; height: 10px; right: -2px; top: 0px">
												<image :src="cdnBaseImg + 'fadanhao.svg'" mode="widthFix" style="width: 16px; height: 13px"></image>
											</view>
                      </view>-->
                    </view>
                  </view>

                  <view class="g_flex_1 g_h_all g_flex_column_center g_h_60 _right">
                    <view class="g_flex_row_between">
                      <view class="g_flex_column_center g_flex_1 g_mr_12">
                        <view class="g_flex_row_start flex_center">
                          <view class="g_ell_1 g_fs_18 g_c_0 g_flex_none" style="max-width: 100%">{{ item.fullName || item.agencyName || "-" }}</view>
                          <!-- <view class="g_ml_6 g_text_c g_flex_1">
													<view class="g_w_36 g_h_18 g_fs_12 g_redius_4" style="background-color: #f2f7ff; color: #1677ff" v-if="item.teamType == 2">团队</view>
													<view class="g_w_36 g_h_18 g_fs_12 g_redius_4" style="background-color: #fff5f5; color: #ff4d4f" v-if="item.teamType == 1">个人</view>
                          </view>-->
                        </view>
                        <view class="g_fs_14 g_c_9 g_mt_4">
                          <view class="g_flex_row_start">
                            <!-- <view class="g_flex_row_start">
                              <view>总职位</view>
                              <view class="g_mr_8">{{ item.jobNum ? item.jobNum : "0" }}</view>
                            </view> -->
                            <view class="g_flex_row_start">
                              <view>在招</view>
                              <view class="g_mr_8">{{ item.recruitmentJobNum ? item.recruitmentJobNum : "0" }}</view>
                            </view>
                            <view class="g_flex_row_start">
                              <view>粉丝</view>
                              <view class="g_mr_8">{{ item.downNum ? item.downNum : "0" }}</view>
                            </view>
                          </view>
                        </view>
                      </view>

                      <view class="g_flex_column_center g_mb_12" v-if="tabInfo.active == 1">
                        <view v-if="item.recordStatus == 1 && item.supplierAccount == 1 && item.recordStatus == 5">
                          <view class="g_radius_14 g_h_28 g_border_e g_fs_14 g_pr_8 g_pl_8 g_flex_row_center flex_center" :style="{color: themeColor}" @click.stop="goApplyForm(item, index)" hover-class="thover" hover-stop-propagation>
                            <i class="iconfont icon-tianjia g_fsi_12 g_mr_6"></i>
                            等待通过
                          </view>
                        </view>
                        <view v-if="item.recordStatus == 1 && item.supplierAccount == 1 && item.recordStatus == 6">
                          <view class="g_radius_14 g_h_28 g_border_e g_fs_14 g_pr_8 g_pl_8 g_flex_row_center flex_center" :style="{color: themeColor}" @click.stop="goApplyForm(item, index)" hover-class="thover" hover-stop-propagation>
                            <i class="iconfont icon-tianjia g_fsi_12 g_mr_6"></i>
                            已过期
                          </view>
                        </view>
                        <view v-if="item.recordStatus == 1 && item.supplierAccount == 1">
                          <view class="g_radius_14 g_h_28 g_border_e g_fs_14 g_pr_8 g_pl_8 g_flex_row_center flex_center" :style="{color: themeColor}" @click.stop="goApplyForm(item, index)" hover-class="thover" hover-stop-propagation>
                            <i class="iconfont icon-tianjia g_fsi_12 g_mr_6"></i>
                            关注
                          </view>
                        </view>
                        <view v-if="item.recordStatus == 2">
                          <view class="g_radius_14 g_h_28 g_border_e g_fs_14 g_c_6 g_pr_8 g_pl_8 g_flex_row_center flex_center">
                            <i class="iconfont icon-a-bianzu11beifen2 g_fsi_12 g_mr_6"></i>
                            互相关注
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </div>
            </view>
          </view>
        </view>
        <view v-if="isShow && speed > 0" class="g_bg_f_5">
          <g-panel-hr :str="query.isFinish >= 0 && query.isFinish < query.size ? speed + '个发单号' : '加载中'" />
        </view>
        <!-- #ifdef H5 -->
        <view style="height: 50px"></view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  onReady() {
    this.G.setNavStyle()
  },
  onShareAppMessage() {
    return this.G.shareFun()
  },
  data() {
    return {
      themeColor: getApp().globalData.themeColor,
      cdnBaseImg: this.G.store().cdnBaseImg,
      isLogin: null,
      isShow: false,
      loading: true,
      showDot: true,
      speed: -1,
      query: {
        page: 1,
        size: 50,
        list: [],
        isFinish: -1,
      },
      keyword: '',
      scrollTop: 0,
      domHeight: 0,
      waitNum_downs: 0,
      waitNum_ups: 0,

      cardTab: [
        {
          icon: 't-icon-xunzhaoshangyou',
          title: '搜索发单号',
          remark: '关注更多单子的更新',
        },
        {
          icon: 't-icon-fazhanxiayou',
          title: '发展代理',
          remark: '让更多代理关注我',
        },
      ],
      tabInfo: {
        list: [
          {
            name: '关注(0)',
            num: 0,
            tip: 0,
            cate_count: 0,
          },
          {
            name: '粉丝(0)',
            num: 0,
            tip: 1,
            cate_count: 0,
          },
        ],
        active: 0,
      },
      tabFansInfo: {
        list: [
          {
            name: '新的代理',
          },
          {
            name: '全部粉丝',
          },
        ],
        active: 0,
      },
      inviteNum: 0, //邀请关注粉丝的数量
    }
  },
  onLoad(options) {
    let that = this
    that.tabInfo.active = options.active
    // if (that.tabInfo.active == 0) {
    // 	uni.setNavigationBarTitle({
    // 		title: "发单号",
    // 	});
    // } else {
    // 	if (that.tabInfo.active == 1) {
    // 		uni.setNavigationBarTitle({
    // 			title: "我的粉丝",
    // 		});
    // 	}
    // }
    const query = uni.createSelectorQuery().in(this)
    query
      .select('.m-top')
      .boundingClientRect((data) => {
        that.domHeight = data.height + 34
      })
      .exec()
  },
  onShow() {
    let that = this
    that.themeColor = getApp().globalData.themeColor
    that.isLogin = uni.getStorageSync('apply-token')
    if (uni.getStorageSync('watch_invite')) {
      if (uni.getStorageSync('watch_invite') == 1) {
        that.showDot = false // 小红点数字显示
      }
    }

    if (!that.isLogin) {
      that.waitNum_downs = 0
      that.waitNum_ups = 0
      that.tabInfo.list[0].name = '关注(0)'
      that.tabInfo.list[1].name = '粉丝(0)'
      that.isShow = true
      that.speed = 0
      that.loading = false
      that.query.list = []
    } else {
      that.query.page = 1
      that.getWaitNum()
      that.getNum()
      that.getList()
      that.getInviteNum()

      that.getPoint()
    }
  },
  onReachBottom() {
    let that = this
    if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
      that.query.page++
      that.getList('concat')
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  methods: {
    handleUpdateFensTab(e) {},
    getPoint() {
      let that = this
      that.G.Get(
        that.api.bind_getWaitNum + '/2',
        {
          type: 2,
        },
        (res) => {
          that.tabInfo.list[1].cate_count = res.unread
        }
      )
    },
    getWaitNum() {
      let that = this
      that.G.Get(
        that.api.bind_getWaitNum + '/' + (that.tabInfo.active * 1 + 1),
        {
          type: that.tabInfo.active * 1 + 1,
        },
        (res) => {
          that.waitNum_downs = res.total
          that.waitNum_ups = res.unread
          console.log('获取指定数量：', res)
          that.$forceUpdate()
        }
      )
    },
    getNum() {
      let that = this
      that.G.Post(
        that.api.bind_getListNum,
        {
          keys: that.keyword,
        },
        (res) => {
          that.tabInfo.list[0].name = '关注(' + res.ups + ')'
          that.tabInfo.list[1].name = '粉丝(' + res.downs + ')'
        }
      )
    },
    getInviteNum() {
      let that = this
      that.G.Get(that.api.user_getInviteNum, {}, (res) => {
        console.log(res)
        that.inviteNum = res
      })
    },
    getList($type = 'init') {
      let that = this
      that.isShow = false
      that.G.Post(
        that.api.bind_list,
        {
          pageNum: that.query.page,
          pageSize: that.query.size,
          keys: that.keyword,
          platform: 'pc',
          type: that.tabInfo.active * 1 + 1,
          formdata: true,
        },
        (res) => {
          that.isShow = true
          that.speed = res.recordCount
          if (that.speed == 0) {
            that.loading = false
          } else {
            that.loading = true
          }
          that.query.isFinish = res.recordList.length
          if ($type == 'init') {
            that.query.list = []
            that.query.list = res.recordList
          } else {
            that.query.list = that.query.list.concat(res.recordList)
          }
        }
      )
    },
    getSearch(e) {
      if (e == 'string') {
        this.keyword = e
      }
      this.G.isLogin()
      if (this.G.isLogin()) {
        this.speed = -1
        this.query.page = 1
        this.getList()
      }
    },

    handleUpdateTab(e) {
      this.G.isLogin()
      if (this.G.isLogin()) {
        this.tabInfo.active = e
        this.speed = -1
        this.query.page = 1
        this.getList()
        this.getWaitNum()
        this.getNum()
        this.getPoint()
      }
    },
    goMain($item) {
      let that = this
      this.G.isLogin()
      if (this.G.isLogin()) {
        if ($item.supplierAccount == 1) {
          let params = {
            id: $item.agencyId,
            type: that.tabInfo.active * 1 + 1,
            bindid: $item.id,
            isShowMore: false,
            isShowJob: false,
            shareForm:'apply'
          }

          if (that.tabInfo.active == 0) {
            // 关注
            params.isShowMore = true
            params.isShowJob = true
          } else {
            // 粉丝
            if ($item.recordStatus == 1) {
              // 已关注
              params.isShowMore = true
              params.isShowJob = false
            } else {
              // 相互关注
              params.isShowMore = true
              params.isShowJob = true
            }
          }

          uni.navigateTo({
            url: '/root/detail/userShare?' + that.G.objToStr(params),
          })
        } else {
          // 直接前往操作页
          uni.navigateTo({
            url: '/root/bind/more?delta=1&id=' + $item.agencyId + '&himSee=' + $item.himSee + '&lookHim=' + $item.lookHim + '&type=' + 2 + '&hid=' + $item.id,
          })
        }
      }
    },
    goApply() {
      let that = this,
        str = ''
      this.G.isLogin()
      if (this.G.isLogin()) {
        uni.navigateTo({
          url: '/root/bind/applyList?active=2',
        })
      }
    },
    goSearch($item, $index) {
      let that = this
      that.G.isLogin()
      if (that.G.isLogin()) {
        uni.navigateTo({
          url: '/root/bind/search?active=' + $index,
        })
      }
    },
    goApplyForm($item, $index) {
      let that = this
      if ($item.recordStatus == 5 || $item.recordStatus == 6) {
      } else {
        uni.navigateTo({
          url: '/root/bind/applyForm?code=' + $item.agencyId + '&form=1',
        })
      }
    },
    goInviteList() {
      uni.navigateTo({
        url: '/root/bind/inviteList?active=0',
      })
    },
  },
}
</script>

<style lang="scss">
.p-bind-inedx {
  .m-card {
    padding-left: 10px;
    padding-right: 10px;

    .item {
      width: calc(50% - 5px);
    }
  }

  .showdoc {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 6px rgba(0, 0, 0, 0.02);
  }

  .suffix {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    border-top-right-radius: 110rpx;
    border-bottom-right-radius: 110rpx;
  }

  .tab-fixed {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 44px;
    background-color: #fff;
    z-index: 1;
  }

  .m-search {
    // .u-icon-wrap{
    // 	position: absolute;
    // 	left: 190rpx;
    // }
  }

  .m-search-active {
    .u-icon-wrap {
      position: inherit;
      left: 0rpx;
    }
  }
}
</style>
