<template>
  <div class="full-height full-width column">
    <div class="row items-center">
        <div class="text-dark text-weight-bolder col">成员管理</div>
        <el-button class="ppt-button" type="primary">邀请成员</el-button>
    </div>
    <div class="q-mt-lg row flex-between">
        <el-select v-model="parameters.t" placeholder="用户角色" style="width:150px" size="default" @change="changeSearch">
            <el-option :label="x.name" :value="x.id" v-for="x in userGroup" :key="x.id" />
        </el-select>
        <el-input v-model="parameters.k" placeholder="请输入用户名称/账号"  @change="changeSearch" size="default" style="width:200px">
            <template #suffix>
                <IconSearch class="cusor-pointer"></IconSearch>
            </template>
        </el-input>
    </div>
    <div class="col q-mt-md">
        <el-table class="dark-table" v-load-more="tableScrollHandler" :data="data" style="width: 100%" height="100%" v-loading="loading">
            <el-table-column width="248">
                <template #header>
                    <span style="padding-left: 42px;">企业成员 ({{ currentMember }}/{{ 500 }})</span>
                </template>
                <template #default="scope">
                    <div class="row items-center">
                        <el-avatar shape="square" :src="scope.row.photo.includes('http://')||scope.row.photo.includes('https://')?scope.row.photo:USER_DEFAULT_HEADER" :size="32"></el-avatar>
                        <span class="q-ml-md">
                            {{ scope.row.name }}
                        </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="account" label="账号" width="200" />
            <el-table-column prop="mail" label="邮箱" />
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column prop="" label="系统角色" width="180">
                <template #default="scope">
                    <span v-if="scope.row.ic">超级管理员</span>
                    <el-popover :width="150" trigger="click" v-else>
                        <template #reference>
                            <div class="inline-block">
                                <div class="row items-center no-select cusor-pointer">
                                    <span v-if="scope.row.isa">管理员</span>
                                    <span v-else>成员</span>
                                    <IconDown size="18" style="margin-left: 5px;"></IconDown>
                                </div>
                            </div>
                        </template>
                        <el-menu mode="vertical" class="no-border md-menu">
                            <el-menu-item index="1">设为管理员</el-menu-item>
                            <el-menu-item index="2">设为成员</el-menu-item>
                        </el-menu>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="" label="操作" width="150">
                <template #default="scope">
                    <el-button v-if="scope.row.ic" link type="primary" class="ppt-button">转让</el-button>
                    <el-button v-else link type="primary" class="ppt-button">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ApiResult } from "@/configs/axios";
import { USER_DEFAULT_HEADER } from "@/configs/customer";
import OrgService from "@/services/OrgService";
import { ref } from "vue";

const userGroup = ref<{id:number,name:string}[]>([
    {id:0,name:'全部角色'},
    {id:1,name:'管理员'},
    {id:2,name:'成员'},
])
const data = ref<any[]>([])
const loading = ref(false)
const pageCount = ref(0)
const currentMember= ref(0)
const parameters = ref<any>({
    t:0,
    k:'',
    pageIndex:1,
    pageSize:20
})

const getMembers = async ()=>{
    if(loading.value) return
    loading.value=true

    //data.value = []
    //currentMember.value = 0,
    //pageCount.value = 0
    const response = await OrgService.GetMembersAsync(parameters.value)

    if(response.data.resultCode == ApiResult.SUCCESS && response.data.data.pageData){
        data.value = data.value.concat(response.data.data.pageData)
        currentMember.value = response.data.data.count
        pageCount.value = response.data.data.pageCount
    }
    loading.value=false
}

const changeSearch = ()=>{
    data.value = []
    currentMember.value = 0
    pageCount.value = 0
    parameters.value.pageIndex=1
    getMembers()
}

const tableScrollHandler = ()=>{
    if(pageCount.value>parameters.value.pageIndex){
        parameters.value.pageIndex++
        getMembers()
    }
}

getMembers()
</script>

<style>
.dark-table{
    font-size: 14px;
    color:#000;
}
.el-table.dark-table th.el-table__cell{
    background: #f1f2f4;
    border-color: #e8eaec;
    color:#000;
}
</style>