<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-11-15 13:58:51
 * @FilePath: /swx/src/pages/userManage/index.vue
 * @Description: 单个主办方管理页面
-->
<template>
  <div class="my-create-activity-page">
    <view id="page-header">
      <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;">{{ name }}</text>
              </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="toolbar-box">
        <!-- <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 style="border: 1px solid #199A74; border-radius: 2rem; background-color: #FFF;">
          <van-row>
            <van-col span="20">
              <view style="padding: 0.7rem 1rem 0rem 1.5rem;">
                <input :value="search" class="weui-input" @blur="bindKeyBlur" @input="bindKeyInput" placeholder="请输入姓名/手机号查找" style="width: 100%;" />
              </view>
            </van-col>
            <van-col span="4">
              <view @tap="onSearch"
                style="background-color: #199A74; border-top-right-radius: 2rem; border-bottom-right-radius: 2rem; text-align: center; height: auto;">
                <van-icon name="search" size="2.25rem" color="white" style="margin-top: 0.43rem;" />
              </view>
            </van-col>
          </van-row>
        </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('player')" :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('volunteer')" :class="[activated === 2 ? 'bg-gradient' : 'inactivate']">全部义工</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" style="position: relative;">
            <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>
              </van-col>
              <van-col span="13">
                <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="5">
                <view v-if="item.role === 'player'" style="margin-top: 0.5rem;">
                  <van-tag v-if="!item.partner" :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 class="handle-box">
              <view v-if="item.role === 'player'" @tap="addUser(item)" class="add-user">成为义工</view>
              <view v-if="item.role === 'volunteer'" @tap="delUser(item)" class="del-user">转成用户</view>
            </view>
          </view>
        </view>
        <!-- TODO: 缺省页 -->
        <van-empty v-else description="没有搜索到用户" class="custom-image" :image="icon_no_search" />
      </scroll-view>
    </view>
  </div>
  <van-dialog id="van-dialog" />
  <van-toast id="van-toast" />
</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 icon_no_search from '@/images/icon/no-yonghu@2x.png'
import Dialog from '@vant/weapp/dist/dialog/dialog';
import Toast from '@/components/vant-weapp/toast/toast';

// let instance = Taro.getCurrentInstance();
// const $query = ref('');
// onMounted(async () => {
//   // 获取页面参数
//   $query.value = instance.router.params;
// })
const name = getCurrentPageParam().name;
const onPhoneClick = (number) => {
  Taro.makePhoneCall({
    phoneNumber: number
  })
}

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

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

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

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

</script>

<script>
import "./index.less";
import { listMemberAPI, setRoleMemberAPI } from '@/api/Member/index';
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getCurrentPageParam } from "@/utils/weapp";

export default {
  name: "userManagePage",
  mixins: [mixin.init],
  async onShow () {
    // 获取活动和轮播信息
    const { code, data } = await listMemberAPI({ host_id: getCurrentPageParam().host_id, role: this.role, page: this.page, limit: this.limit });
    if (code) {
      this.member_list = data.member_list;
      this.page = this.page + 1;
    }
  },
  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: [],
      role: 'player',
      flag: true,
      page: 0,
      limit: 10,
      scrollStyle: { height: '1000rpx' },
      activated: 1,
      search: ''
    };
  },
  methods: {
    onSearch () {
      this.member_list = [];
      this.page = 0;
      this.flag = true;
      this.getList()
    },
    bindKeyBlur (e) {
      this.search = e.detail.value;
      this.onSearch()
    },
    bindKeyInput (e) {
      this.search = e.detail.value;
      if (!this.search) {
        this.onSearch()
      }
    },
    onScrollToLower () {
      if(!this.flag){
        return
      }
      this.flag = false;
      this.getList();
    },
    async getList () {
      // 获取推荐活动列表
      const { code, data } = await listMemberAPI({ search: this.search, host_id: getCurrentPageParam().host_id, role: this.role, page: this.page, limit: this.limit });
      if (code) {
        if (data.member_list.length) {
          this.member_list = this.member_list.concat(data.member_list);
          this.page = this.page + 1;
          this.flag = true;
        } else {
          Toast('没有数据')
        }
      }
    },
    toggleColum (type) {
      if (type === 'player') {
        this.activated = 1;
        this.role = 'player';
      } else {
        this.activated = 2;
        this.role = 'volunteer';
      }
      this.member_list = [];
      this.flag = true;
      this.page = 0;
      this.getList();
    },
    addUser ({ id }) {
      Dialog.confirm({
        title: '温馨提示',
        message: '是否确认添加义工？',
        confirmButtonColor: '#199A74'
      })
        .then(async () => {
          // 成为义工
          const { code } = await setRoleMemberAPI({ i: id, role: 'volunteer' });
          if (code) {
            this.member_list.splice(this.member_list.findIndex(item => item.id === id), 1);
            Toast.success('添加成功');
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    delUser ({ id }) {
      Dialog.confirm({
        title: '温馨提示',
        message: '是否确认转成用户？',
        confirmButtonColor: '#199A74'
      })
        .then(async () => {
          // 转成用户
          const { code } = await setRoleMemberAPI({ i: id, role: 'player' });
          if (code) {
            this.member_list.splice(this.member_list.findIndex(item => item.id === id), 1);
            Toast.success('删除成功');
          }
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>