<!--
 * @Date: 2022-09-19 14:11:06
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-10-25 12:59:30
 * @FilePath: /swx/src/pages/userSearch/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="user-search-page">
    <view style="padding: 5%; background-color: #FFFFFF; position: fixed; z-index: 1; width: 90%;">
      <view style="border: 1px solid #199A74; border-radius: 1rem;">
        <van-row>
          <van-col span="20">
            <view style="padding: 0.5rem 1rem;">
              <input :value="value1" class="weui-input" maxlength="11" @input="bindKeyInput" placeholder="请输入用户名姓名/手机号查找" />
            </view>
          </van-col>
          <van-col span="4">
            <view style="background-color: #199A74; border-top-right-radius: 0.8rem; border-bottom-right-radius: 0.8rem; text-align: center;">
              <van-icon name="search" size="2.25rem" color="white" style="margin-top: 2px;" />
            </view>
          </van-col>
        </van-row>
      </view>
    </view>
    <view style="height: 5rem;"></view>
    <view style="padding: 1rem;">
      <view v-for="(item, index) in activityList" :key="index" class="list-item" style="position: relative;">
        <van-row>
          <van-col span="6">
            <view 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>
  <van-dialog id="van-dialog" />

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

const value1 = ref('')
const bindKeyInput = (e) => {
  value1.value = e.detail.value;
}

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

<script>
import "./index.less";

export default {
  name: "demoPage",
};
</script>