<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-08 15:21:37
 * @FilePath: /swx/src/pages/myFollowUser/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="my-create-activity-page">
    <view 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='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar>
              <view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
                <text style="font-size: 1.05rem;">周三读书会（主办方）</text>
                <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
              </view>
            </view>
          </van-col>
          <van-col span="6">
            <view @tap="editInfo()" 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;">5</text>人</view>
            <view>
              <text style="font-size: 0.9rem; color: #999999;">新用户</text>
            </view>
          </view>
          <view class="job">
            <text style="font-size: 1.25rem;">24</text>人
            <view>
              <text style="font-size: 0.9rem; color: #999999;">待陪伴</text>
            </view>
          </view>
          <view class="job">
            <text style="font-size: 1.25rem;">24</text>人
            <view>
              <text style="font-size: 0.9rem; color: #999999;">用户总数</text>
            </view>
          </view>
          <view class="sign">
            <view><text style="font-size: 1.25rem;">233</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 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 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;">2</view>
        </view>
      </view>
      <view>
        <view v-for="(item, index) in activityList" :key="index" class="list-item">
          <van-row>
            <van-col span="6">
              <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }">
                <view 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 class="phone" @tap="onPhoneClick(item.phone)">
                  <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
                  {{ item.phone }}
                </view> -->
                <view style="color: #999999;">时间描述</view>
                <view style="color: #999999;" class="van-ellipsis">对比上次净妙这次参与活动明显的能够融入进</view>
              </view>
            </van-col>
          </van-row>
        </view>
      </view>
    </view>
    <view style="height: 2rem;"></view>
  </div>

</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'

const activityList = ref([{
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '净妙',
  phone: '18789800786',
  status: '1',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '人在路途',
  phone: '18789800786',
  status: '2',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '寒潭秋月心如洗',
  phone: '18789800786',
  status: '3',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '净妙',
  phone: '18789800786',
  status: '1',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '人在路途',
  phone: '18789800786',
  status: '2',
}, {
  avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  name: '寒潭秋月心如洗',
  phone: '18789800786',
  status: '3',
}])

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

const activated = ref(1);
const toggleColum = (type) => {
  if (type === 'activity') {
    activityList.value = [{
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '净妙',
      phone: '18789800786',
      status: '1',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '人在路途',
      phone: '18789800786',
      status: '2',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '寒潭秋月心如洗',
      phone: '18789800786',
      status: '3',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '净妙',
      phone: '18789800786',
      status: '1',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '人在路途',
      phone: '18789800786',
      status: '2',
    }, {
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      name: '寒潭秋月心如洗',
      phone: '18789800786',
      status: '3',
    }];
    activated.value = 1
  } else {
    activityList.value = [];
    activated.value = 2
  }
}

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

<script>
import "./index.less";
export default {
  name: "demoPage",
};
</script>