<script setup>
import {reactive} from 'vue';
import Api from "../../../api/index.js";
import XSelect from "../../../components/XSelect/index.vue";

const visible = defineModel('visible');

const form = reactive({
    blackoutDuration: 1,
    value: null,
    blackoutValue: 50,
});
</script>

<template>
    <a-modal
        :width="600"
        ok-text="确认拉黑"
        title-align="start"
        title="拉黑达人"
        v-model:visible="visible">
        <a-form layout="vertical" :model="form">
            <a-form-item label="拉黑时间">
                <a-radio-group
                    type="button"
                    v-model:model-value="form.blackoutDuration">
                    <a-radio :value="1">1天</a-radio>
                    <a-radio :value="2">3天</a-radio>
                    <a-radio :value="3">7天</a-radio>
                    <a-radio :value="4">30天</a-radio>
                    <a-radio :value="5">永久</a-radio>
                    <a-radio :value="6">自定义</a-radio>
                </a-radio-group>
                <a-input-number
                    v-model:model-value="form.blackoutValue"
                    default-value="50"
                    mode="button"
                    class="w-[150px]">
                    <template #suffix>
                        天
                    </template>
                </a-input-number>
            </a-form-item>

            <a-form-item label="拉黑效果">
                <XSelect
                    placeholder="请选择拉黑效果"
                    v-model:model-value="form.value"
                    :api="Api.system.getSelect">
                </XSelect>
            </a-form-item>

            <a-form-item label="拉黑原因">
                <a-textarea
                    show-word-limit
                    :max-length="100"
                    placeholder="请输入拉黑原因">
                </a-textarea>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<style scoped>

</style>
