<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-10 14:39:20
 * @FilePath: /swx/src/pages/userManage/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='icon_p' style="display: inline-block;"></AtAvatar>
              <view style="display: inline-block; position: absolute; top: 30%; left: 28%;">
                <text style="font-size: 1.05rem;">{{ $query.name }}</text>
              </view>
            </view>
          </van-col>
          <van-col span="6">
            <view @tap="editInfo($query.id)" 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 style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
        <view style="display: flex; text-align: center;">
          <view @tap="goToAddUser" style="flex: 1;">
            <van-icon :name="icon_add" size="3.5rem" color="" style="vertical-align: middle;" />
            <text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;添加成员</text>
          </view>
          <view @tap="goToSearchUser" style="flex: 1; border-left: 1px solid #F5F5F5;">
            <van-icon :name="icon_user" size="3.5rem" color="" style="vertical-align: middle;" />
            <text style="font-size: 1.1rem; color: #222; vertical-align: middle;">&nbsp;搜索用户</text>
          </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>
      </view>
      <view>
        <view v-for="(item, index) in activityList" :key="index" class="list-item" style="position: relative;">
          <van-row>
            <van-col span="6">
              <view @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})`, position: 'relative' }"></view>
            </van-col>
            <van-col span="14">
              <view class="content">
                <view class="title">{{ item.name }}</view>
                <view style="color: #199A74; margin-top: 0.5rem;" class="phone" @tap="onPhoneClick(item.phone)">
                  <van-icon :name="icon_tel" color="" size="1.25rem" style="vertical-align: sub;" />
                  {{ item.phone }}
                </view>
              </view>
            </van-col>
            <van-col span="4">
              <view style="margin-top: 0.5rem;">
                <van-tag v-if="item.status === '1'" :round="true" color="#FFF5E4" text-color="#FF7808" size="large">待分配</van-tag>
                <van-tag v-else :round="true" color="#D7FFD7" text-color="#019200" size="large">已分配</van-tag>
              </view>
            </van-col>
          </van-row>
          <view style="position: absolute; right: 0; bottom: 0.75rem;">
            <view @tap="addUser" style="color: #FFFFFF; background-color: #199A74; border-bottom-left-radius: 0.85rem; border-top-left-radius: 0.85rem; padding: 0.25rem 0.5rem 0.25rem 1rem; font-size: 0.9rem;">添加成员</view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 2rem;"></view>
  </div>
  <van-dialog id="van-dialog" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import icon_vip from '@/images/icon/vip@2x.png'
import icon_p from '@/images/icon/zhubanfang@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_add from '@/images/icon/chengyuan@2x.png'
import icon_user from '@/images/icon/yonghu@2x.png'
import Dialog from '@vant/weapp/dist/dialog/dialog';

let instance = Taro.getCurrentInstance();
const $query = ref('');
onMounted(() => {
  // 获取页面参数
  $query.value = instance.router.params;
})

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'
  })
}

const goToAddUser = () => {
  Taro.navigateTo({
    url: '../userAdd/index'
  })
}

const goToSearchUser = () => {
  Taro.navigateTo({
    url: '../userSearch/index'
  })
}

const editInfo = (id) => {
  Taro.navigateTo({
    url: '../editProject/index?id=' + id
  })
}

const addUser = () => {
  Dialog.confirm({
    title: '温馨提示',
    message: '是否确认添加成员？',
    // confirmButtonColor: '#199A74'
  })
    .then(() => {
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
}
</script>

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