<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-11-15 15:48:58
 * @FilePath: /swx/src/pages/myFollowUser/index.vue
 * @Description: 陪伴的用户页面
-->
<template>
  <div class="my-create-activity-page">
    <view id="page-header" style="width: 100%; background-image: url(http://gyzs.onwall.cn/userinfo_bg-top%402x.png); background-size: contain; background-repeat: no-repeat;">
      <view style="height: 4rem; padding: 1rem;">
        <van-row>
          <van-col span="18">
            <view style="position: relative;">
              <AtAvatar circle size="large" :image='icon_company' style="display: inline-block;"></AtAvatar>
              <view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
                <text style="font-size: 1.05rem;">{{ host_name }}</text>
                <!-- <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> -->
              </view>
            </view>
          </van-col>
          <van-col span="6">
            <view @tap="show_host_popup=true" style="background-color: #DABE73; color: white; padding: 0.5rem 0; border-radius: 1rem; text-align: center; font-size: 0.85rem;margin-top: 1rem;">切换主办方</view>
          </van-col>
        </van-row>
      </view>
      <view class="my-create-activity-header">
        <view class="activity-title">
          <view class="box">
            <text class="bg-gradient" style="font-size: 1.15rem;">用户统计</text>
          </view>
        </view>
        <view class="header-info">
          <view class="activity">
            <view><text style="font-size: 1.25rem;">{{ new_count }}</text>人</view>
            <view>
              <text style="font-size: 0.9rem; color: #999999;">新用户</text>
            </view>
          </view>
          <view class="job">
            <text style="font-size: 1.25rem;">{{ no_partner_note_count }}</text>人
            <view>
              <text style="font-size: 0.9rem; color: #999999;">待陪伴</text>
            </view>
          </view>
          <view class="job">
            <text style="font-size: 1.25rem;">{{ player_count }}</text>人
            <view>
              <text style="font-size: 0.9rem; color: #999999;">用户总数</text>
            </view>
          </view>
          <view class="sign">
            <view><text style="font-size: 1.25rem;">{{ note_count }}</text>次</view>
            <view>
              <text style="font-size: 0.9rem; color: #999999;">跟踪总数</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="list-wrapper" style="margin: 1rem;">
      <view id="navbar-page" style="background-color: white; border-radius: 0.65rem; padding: 1rem;overflow: auto; margin-bottom: 1px;">
        <view style="display: inline-block; margin-right: 1rem; line-height: 60rpx;">
          <view @tap="toggleColum('activity')" :class="[activated === 1 ? 'bg-gradient' : 'inactivate']" style="font-size: 1rem;">全部用户</view>
        </view>
        <view style="display: inline-block; line-height: 60rpx; position: relative;">
          <view @tap="toggleColum('join')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">待陪伴</view>
          <view v-if="no_partner_note_count" style="position: absolute; right: -1rem; top: 0; color: white; background-color: red; border-radius: 0.58rem; width: 1rem; height: 1rem; font-size: 0.8rem; line-height: 1rem; text-align: center;">{{ no_partner_note_count }}</view>
        </view>
      </view>
      <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
        <view v-if="member_list.length">
          <view v-for="(item, index) in member_list" :key="index" class="list-item">
            <van-row>
              <van-col span="6">
                <view @tap="goToUserInfo(item.id)" class="avatar" :style="{ backgroundImage: `url(${item.avatar ? item.avatar : 'http://gyzs.onwall.cn/tou%402x.png'})`, position: 'relative' }">
                  <view v-if="item.is_new" style="position: absolute; right: -0.5rem; top: -0.5rem; background-color: #FCEAE7; border-radius: 0.58rem; width: 1.2rem; height: 1.2rem; font-size: 0.7rem; line-height: 1.2rem; text-align: center; color: #E21A1A;">新</view>
                </view>
              </van-col>
              <van-col span="18">
                <view class="content">
                  <view class="title">{{ item.name }}</view>
                  <view v-if="activated === 2" class="phone" @tap="onPhoneClick(item.phone)">
                    <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
                    {{ item.phone }}
                  </view>
                  <view v-if="activated === 1 && item.last_partner_note">
                    <view style="color: #999999;">{{ formatDate(item.last_partner_note.created_time) }}</view>
                    <view style="color: #999999;" class="van-ellipsis">{{ item.last_partner_note.note }}</view>
                  </view>
                </view>
              </van-col>
            </van-row>
          </view>
        </view>
        <!-- TODO: 缺省页 -->
        <van-empty v-else description="暂无陪伴的用户" class="custom-image" :image="icon_no_partner" />
      </scroll-view>
    </view>
    <view style="height: 2rem;"></view>
  </div>

  <!-- 切换主办方弹出框 -->
  <van-popup :show="show_host_popup" position="bottom" custom-style="height: 50%;" :lock-scroll="true">
    <van-picker :show-toolbar="true" title="" confirm-button-text="确定" :columns="host_columns"
      :default-index="defaultHostIndex"
      toolbar-class="picker-toolbar" @confirm="onHostConfirm" @cancel="onHostCancel" />
  </van-popup>

  <van-toast id="van-toast" />

</template>

<script setup>
import { ref } from "vue";
import icon_vip from '@/images/icon/vip@2x.png';
import Taro from '@tarojs/taro';
import { AtAvatar } from 'taro-ui-vue3';
import "taro-ui-vue3/dist/style/components/avatar.scss";
import icon_tel from '@/images/icon/tel@2x.png';
import icon_company from '@/images/icon/zhubanfang@2x.png';
import icon_no_partner from '@/images/icon/no-peiban@2x.png';
import Toast from '@/components/vant-weapp/toast/toast';
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getCurrentPageParam } from "@/utils/weapp";
import { hostListAPI } from '@/api/Host/index'
import { formatDate } from '@/utils/tools.js'

const onPhoneClick = (number) => {
  Taro.makePhoneCall({
    phoneNumber: number
  })
}

const goToUserInfo = (member_id) => {
  Taro.navigateTo({
    url: '../userInfo/index?member_id=' + member_id
  })
}
</script>

<script>
import "./index.less";
import { traceMemberAPI } from '@/api/Member/index'
import { hostStore } from '@/stores/host'

export default {
  name: "myFollowUserPage",
  mixins: [mixin.init],
  async onShow () {
    // 先看一下有没有缓存过参加主办方ID
    const id = hostStore().join_id;
    let host_id = '';
    if (id) {
      host_id = id;
    } else {
      host_id = getCurrentPageParam().host_id;
    }
    // 获取主办方列表信息
    const host = await hostListAPI({ is_join: 1 });
    if (host.code) {
      host.data.join_hosts.forEach((item, index) => {
        if (item.id == host_id) {
          this.host_id = item.id;
          this.host_name = item.name;
          this.defaultHostIndex = index;
        }
        item.text = item.name;
        item.key = item.id;
      });
      this.host_columns = host.data.join_hosts;
    }
    // 获取我陪伴的用户列表
    const params = {
      host_id: this.host_id,
      is_partner_note: this.activated === 1 ? '' : 0,
      search: this.search,
      page: this.page,
      limit: this.limit
    }
    const { code, data } = await traceMemberAPI(params);
    if (code) {
      this.member_list = data.member_list;
      this.new_count = data.new_count;
      this.no_partner_note_count = data.no_partner_note_count;
      this.player_count = data.player_count;
      this.note_count = data.note_count;
      this.page = this.page + 1;
      this.flag = true;
    }
  },
  onHide () { // 离开当前页面
    this.page = 0;
    this.flag = true;
  },
  mounted () {
    // 设置滚动列表可视高度
    const windowHeight = wx.getWindowInfo().windowHeight;
    setTimeout(async () => {
      const headerHeight = await $('#page-header').height();
      const navHeight = await $('#navbar-page').height();
      this.scrollStyle = {
        height: windowHeight - headerHeight - navHeight - 50 + 'px'
      }
    }, 500);
  },
  data() {
    return {
      member_list: [],
      activated: 1,
      flag: true,
      page: 0,
      limit: 10,
      scrollStyle: { height: '1000rpx' },
      search: '',
      new_count: 0,
      no_partner_note_count: 0,
      player_count: 0,
      note_count: 0,
      show_host_popup: false,
      defaultHostIndex: 0,
      host_columns: [],
      host_id: '',
      host_name: '',
    };
  },
  methods: {
    formatDate (date) {
      return moment(date).format('YYYY-MM-DD HH:mm')
    },
    onScrollToLower () {
      if(!this.flag){
        return
      }
      this.flag = false;
      this.getList();
    },
    async getList () {
      // 获取我陪伴的用户列表
      const params = {
        host_id: this.host_id,
        is_partner_note: this.activated === 1 ? '' : 0,
        search: this.search,
        page: this.page,
        limit: this.limit
      }
      const { code, data } = await traceMemberAPI(params);
      if (code) {
        if (data.member_list.length) {
          this.member_list = this.member_list.concat(data.member_list);
          this.new_count = data.new_count;
          this.no_partner_note_count = data.no_partner_note_count;
          this.player_count = data.player_count;
          this.note_count = data.note_count;
          this.page = this.page + 1;
          this.flag = true;
        } else {
          this.new_count = data.new_count;
          this.no_partner_note_count = data.no_partner_note_count;
          this.player_count = data.player_count;
          this.note_count = data.note_count;
          Toast('没有数据')
        }
      }
    },
    onHostConfirm (event) {
      const { picker, value, index } = event.detail;
      this.show_host_popup = false;
      this.host_id = value.key;
      this.host_name = value.text;
      // 缓存参加主办方ID
      const store = hostStore();
      store.addJoin(value.key);
      // 查询数据
      this.member_list = [];
      this.flag = true;
      this.page = 0;
      this.getList();
    },
    onHostCancel (event) {
      this.show_host_popup = false;
    },
    toggleColum (type) {
      if (type === 'activity') { // 全部用户
        this.activated = 1;
      } else { // 待陪伴
        this.activated = 2;
      }
      // 重置条件
      this.page = 0;
      this.member_list = [];
      this.flag = false;
      this.getList();
    },
  },
};
</script>