<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-11-03 11:17:21
 * @FilePath: /swx/src/pages/userAdd/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="user-search-page">
    <view id="page-header" style="padding: 5%; background-color: #FFFFFF; z-index: 1; width: 90%;">
      <view style="border: 1px solid #199A74; border-radius: 2rem;">
        <van-row>
          <van-col span="20">
            <view style="padding: 0.7rem 1rem 0rem 1.5rem;">
              <input :value="search" class="weui-input" @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>
    <scroll-view :scroll-y="true" :style="scrollStyle" @scrolltolower="onScrollToLower">
      <view style="padding: 1rem;">
        <view v-for="(item, index) in member_list" :key="index" class="list-item" style="position: relative;">
          <van-row>
            <van-col span="6">
              <view 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 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 style="position: absolute; right: 0; bottom: 0.75rem;">
            <view @tap="addUser(item)"
              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>
    </scroll-view>
  </view>
  <van-dialog id="van-dialog" />
  <van-toast id="van-toast" />
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import icon_tel from '@/images/icon/tel@2x.png'
import Dialog from '@vant/weapp/dist/dialog/dialog';
import Toast from '@/components/vant-weapp/toast/toast';

const onPhoneClick = (number) => {
  Taro.makePhoneCall({
    phoneNumber: number
  })
}
</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: "userAddPage",
  mixins: [mixin.init],
  async onShow () {
  },
  onHide () { // 离开当前页面
    this.page = 0;
    this.flag = true;
  },
  mounted () {
    // 设置滚动列表可视高度
    const windowHeight = wx.getSystemInfoSync().windowHeight;
    setTimeout(async () => {
      const headerHeight = await $('#page-header').height();
      this.scrollStyle = {
        height: windowHeight - headerHeight + 'px'
      }
    }, 500);
  },
  data() {
    return {
      member_list: [],
      role: 'player',
      flag: true,
      page: 0,
      limit: 10,
      scrollStyle: { height: '1000rpx' },
      activated: 1,
      search: '',
    };
  },
  methods: {
    onSearch () {
      this.getList()
    },
    bindKeyInput (e) {
      this.search = e.detail.value;
    },
    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('没有数据')
        }
      }
    },
    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
        });
    }
  },
};
</script>