<template>
    <Wraper :hidden="hidden" :onOk="submit" :refresh="refresh">
        <OrganizationTree v-model="value" style="margin-bottom: 10px" @change="organizationChange" />

        <a-table
            :data-source="data"
            :row-selection="rowSelection"
            :pagination="false"
            rowKey="userId"
            :loading="loading"
        >
            <a-table-column title="姓名" data-index="userName" />
        </a-table>
    </Wraper>
</template>

<script>
import Wraper from '@/components/table/wraper.vue';
import OrganizationTree from '@/pages/oceanus/equipment/Left/OrganizationTree.vue';
import { getOrganizationUserApi, addSpecialitiesStaffsApi } from '@/api';

export default {
    components: { Wraper, OrganizationTree },
    props: {
        hidden: Function,
        row: Object,
        specialityId: Number,
        refresh: Function,
    },
    data() {
        return {
            value: undefined,

            loading: false,

            data: [],

            form: {
                specialityId: this.specialityId,
                staffOrgCommands: [],
            },
            selectedRowKeys: [],
        };
    },

    computed: {
        rowSelection() {
            const { selectedRowKeys, onSelectChange } = this;
            return {
                selectedRowKeys,
                onChange: onSelectChange,
            };
        },
    },
    methods: {
        submit() {
            this.form.staffOrgCommands = this.selectedRowKeys.map((staffId) => ({
                orgId: this.value,
                staffId,
            }));

            return addSpecialitiesStaffsApi(this.form);
        },

        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },

        async organizationChange(val) {
            this.loading = true;
            this.data = await this.getTableData(val);
            this.loading = false;
        },

        getTableData(id) {
            return getOrganizationUserApi(id);
        },
    },
};
</script>
