<template>
    <div class="root">
        <div class="content-box">
            <el-card shadow="never" v-for="org in script.messageOrgList.value" class="org-box">
                <template #header>
                    <div class="card-header">
                        <span>{{ org.title }}</span>
                        <el-button type="primary" size="small" text
                            @click="script.openAddDialog(org.orgId, org.orgName)">添加</el-button>
                    </div>
                </template>
                <!-- 人员列表 -->
                <div class="person-list">
                    <div v-if="org.personList.length === 0" class="empty-text">暂无人员</div>
                    <div v-else class="person-item" v-for="person in org.personList" :key="person.userId">
                        <div class="person-info">
                            <span class="name">{{ person.realName }}</span>
                            <!-- <span class="account">({{ person.userAccount }})</span> -->
                            <span class="phone" v-if="person.userPhone">{{ person.userPhone }}</span>
                        </div>
                        <el-button type="danger" size="small" text @click="script.deletePushPerson(person)">删除</el-button>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="model-box">
            <MyDialog v-model="script.modelVisible.value" :title="script.model?.title"
                :dynamicComponent="script.model?.content" :component-props="script.model?.props"
                :onConfirm="script.model?.onConfirm" :onCancel="script.model?.onCancel" ref="dialogRef"
                :width="script.model?.width">
            </MyDialog>
            <MyDrawer v-model="script.drawerVisible.value" :title="script.drawer?.title"
                :dynamicComponent="script.drawer?.content" :component-props="script.drawer?.props"
                :onConfirm="script.drawer?.onConfirm" :onCancel="script.drawer?.onCancel" ref="drawerRef"
                :direction="script.drawer?.direction" :size="script.drawer?.size">
            </MyDrawer>
        </div>
    </div>
</template>

<script setup>
import DynamicTable from "@/component/DynamicTable/index.js";
import { Search, ArrowDown } from "@element-plus/icons-vue";
import MyDialog from "@/component/MyDialog/index.js";
import MyDrawer from "@/component/MyDrawer/index.js";
import scriptFn from "./index.js";
const script = scriptFn();
const { dialogRef, drawerRef } = script;

</script>

<style scoped>
.root {
    height: 100%;
    padding: 25px;
}

.content-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.org-box {
    flex: 1;
    height: 100%;
    min-width: fit-content;
}

.card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    white-space: nowrap;
    align-items: center;
}

.person-list {
    margin-top: 10px;
}

.empty-text {
    color: #999;
    text-align: center;
    padding: 20px 0;
}

.person-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.person-item:last-child {
    border-bottom: none;
}

.person-info {
    display: flex;
    gap: 10px;
    align-items: center;
}

.name {
    font-weight: bold;
}

.account {
    color: #666;
    font-size: 0.9em;
}

.phone {
    color: #666;
    font-size: 0.9em;
}
</style>