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

const {taskId} = defineProps({
    taskId: {
        type: Number,
        default: null,
    }
});
const SettlementAfter = reactive([]);
const visible = defineModel('visible');
const emits = defineEmits(['success']);
const form = reactive({
    ids: []
});

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

onMounted(() => {
    Api.merchant.getSettlementAfter().then(({data}) => {
        SettlementAfter.length = 0;
        SettlementAfter.push(...data);
    });
})
</script>

<template>
    <a-modal
        width="600px"
        @ok="success"
        ok-text="确定提交"
        class="effect-management-modal"
        v-model:visible="visible"
        title-align="start"
        title="效果管理">
        <a-alert>
            平台提示：请勿虚假提交，平台将人工一对一核实，若虚假提交，将扣除商家对应信用...
        </a-alert>
        <div class="px-[20px] py-[16px] pb-[100px]">
            <div class="text-[#4E5969] text-[14px] mb-[16px]">结算之后</div>
            <a-checkbox-group v-model:model-value="form.ids">
                <a-checkbox v-for="v in SettlementAfter" :value="v.id">{{ v.name }}</a-checkbox>
            </a-checkbox-group>
        </div>
    </a-modal>
</template>

<style lang="scss">
.effect-management-modal {
    .arco-modal-body {
        padding: 0;
    }
}
</style>

<style scoped lang="scss">

</style>
