<script setup>
import {reactive, ref} from 'vue';
import XSelect from "../../../components/XSelect/index.vue";
import Api from "../../../api/index.js";
import {Message} from "@arco-design/web-vue";

const visible = defineModel('visible');
const {taskId} = defineProps({
    taskId: {
        type: Number,
        default: null,
    }
});
const emits = defineEmits(['success']);
const dayStatus = ref(1);
const form = reactive({
    day: 1,
    type: null,
    remark: null,
});

const getSelect = async () => {
    return {
        data: [
            {id: 1, name: '对方此账号不能接我任务'},
            {id: 2, name: '对方所有账号不能接我任务'},
        ]
    }
}

const success = async () => {
    const {msg} = await Api.merchant.addTaskBlock({
        ...form,
        id: taskId,
    });
    Message.success(msg);
    visible.value = false;
    emits('success');
}
</script>

<template>
    <div @click="visible=true">
        <slot></slot>
    </div>

    <a-modal
        @click.stop
        @ok="success"
        :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"
                    @change="e=>form.day=e"
                    v-model:model-value="dayStatus">
                    <a-radio :value="1">1天</a-radio>
                    <a-radio :value="3">3天</a-radio>
                    <a-radio :value="7">7天</a-radio>
                    <a-radio :value="30">30天</a-radio>
                    <a-radio :value="-1">永久</a-radio>
                    <a-radio :value="0">自定义</a-radio>
                </a-radio-group>
                <a-input-number
                    :disabled="dayStatus !== 0"
                    v-model:model-value="form.day"
                    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.type"
                    :api="getSelect">
                </XSelect>
            </a-form-item>

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

<style scoped>

</style>
