<!-- 通知公告-公告通知管理-编辑-接收会员 -->
<template>
    <app-drawer title="按会员广播" v-model:show="showDrawer" :loading="loading">
        <el-transfer v-model="selectedValue" :data="dataList" :titles="['备选会员', '已选会员']"
            :props="{ label: 'accountname', key: 'userid' }" filterable />
        <template #footer>
            <el-button @click="onCancel()">关闭</el-button>
            <el-button type="primary" @click="onSubmit">确定</el-button>
        </template>
    </app-drawer>
</template>

<script lang="ts" setup>
import { shallowRef, toRaw, computed } from 'vue'
import { useRequest } from '@/hooks/request'
import { queryOrganSelect } from '@/services/api/common'
import AppDrawer from '@pc/components/base/drawer/index.vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['update:show', 'change'])

const showDrawer = computed({
    get: () => props.show,
    set: (val) => emit('update:show', val)
})

const selectedValue = shallowRef<number[]>([])

const { dataList, loading } = useRequest(queryOrganSelect, {
    params: {
        pageSize: 0,
        usertype: '2'
    }
})

const onSubmit = () => {
    const items = dataList.value.filter((e) => selectedValue.value.includes(e.userid))
    emit('change', toRaw(items))
    onCancel()
}

const onCancel = () => {
    showDrawer.value = false
}
</script>