<template>
    <div>
        <div v-if="hasOrganization"></div>
        <div v-else>
            <NoData>
                <div class="font-bold mb-[20px]">很抱歉，当前无任何组织，赶快去</div>
                <d-button
                    size="lg"
                    variant="solid"
                    @click="createOrganizationBtnClick"
                >新建组织</d-button>
            </NoData>
        </div>
    </div>

    <d-modal
        v-model="createOrganizationModalCtrl"
        title="新建组织"
        class="w-[600px]"
    >
        <d-form
            ref="createFormRef"
            layout="vertical"
            :data="createFormData"
            message-type="none"
        >
            <d-form-item
                field="organizationName"
                label="组织名称"
                required
            >
                <d-input v-model="createFormData.organizationName" />
            </d-form-item>
            <d-form-item field="organizationProfile" label="组织简介" required>
                <d-textarea
                    v-model="createFormData.organizationProfile"
                    show-count
                    maxlength="200"
                />
            </d-form-item>
        </d-form>

        <div class="flex justify-center">
            <d-button
                variant="solid"
                class="mr-[8px]"
                @click="confirmCreateOrganizationBtnClick"
            >确定</d-button>
            <d-button @click="createOrganizationModalClose">取消</d-button>
        </div>
    </d-modal>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import NoData from "@/components/NoData/NoData.vue";

const hasOrganization = ref(false);

const createOrganizationModalCtrl = ref(false);
const createFormData = reactive({
    organizationName: "",
    organizationProfile: "", // 组织简介
});
const createFormRef = ref();


function confirmCreateOrganizationBtnClick() {
    createFormRef.value.validate(isValid => {
        if (isValid) {
          createOrganization();
        }
    });
}

async function createOrganization() {
    const params = {
        organizationName: createFormData.organizationName,
        organizationProfile: createFormData.organizationProfile,
    };
    try {

    } catch (e) {

    }
}

function createOrganizationBtnClick(): void {
    createOrganizationModalCtrl.value = true;
}

function createOrganizationModalClose(): void {
    createOrganizationModalCtrl.value = false;
}
</script>

<style scoped lang="scss">
</style>
