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

const emits = defineEmits(['success', 'prev']);
const form = defineModel('form');
const formRef = useTemplateRef('formRef');
const rules = {
    retention_time: [{
        required: true,
        message: '保留时间不能为空',
    }],
    retention_type: [],
    check_time: [{
        required: true,
        message: '审核时间不能为空',
    }],
    check_type: [],
    back_id: [{
        required: true,
        message: '结算条件不能为空',
    }],
    back_time: [{
        required: true,
        message: '结算时间不能为空',
    }],
    back_type: [],
}

if (form.value.backfill[0].content_id) form.value.back_id = form.value.backfill[0].content_id;

const success = async () => {
    formRef.value.validate().then((res) => {
        if (res) {
            const firstKey = Object.keys(res)[0];
            Message.warning(res[firstKey].message);
        } else {
            emits('success', form.value);
        }
    });
}

const getChooseContent = async (req) => {
    const {data} = await Api.merchant.getChooseContent(req);
    return {data: data.filter(v => form.value.backfill.map(v => v.content_id).includes(v.id))};
}
</script>

<template>
    <FormTitle>
        <template #title>时间管理</template>

        <a-form
            class="mt-[30px]"
            ref="formRef"
            :model="form"
            :rules="rules"
            label-align="right"
            :label-col-props="{span: 3}"
            :wrapper-col-props="{span: 12, offset: 1}">
            <a-form-item field="retention_time" label="保留时间" extra="达人发布成功后，该内容需要保留多久才可删除">
                <a-input-number v-model:model-value="form.retention_time" placeholder="请输入保留时间" :min="1"
                                :max="60"></a-input-number>
                <a-radio-group v-model:model-value="form.retention_type" type="button" class="ml-[10px] flex-shrink-0">
                    <a-radio :value="1">分钟</a-radio>
                    <a-radio :value="2">小时</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item field="check_time" label="审核时间" extra="商家收到每次回填后，多长时间内审核">
                <a-input-number v-model:model-value="form.check_time" placeholder="请输入保留时间" :min="1"
                                :max="60"></a-input-number>
                <a-radio-group v-model:model-value="form.check_type" type="button" class="ml-[10px] flex-shrink-0">
                    <a-radio :value="1">分钟</a-radio>
                    <a-radio :value="2">小时</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item field="back_id" label="确认结算时间" extra="达人回传的信息审核通过后，在多长时间内确认结算">
                <div id="block">
                    <a-form-item field="back_id" label="结算条件" class="whitespace-nowrap">
                        达人回传
                        <XSelect
                            class="mx-[6px]"
                            :init="true"
                            :api-po="{id: form.platform_id}"
                            v-model:model-value="form.back_id"
                            :api="getChooseContent">
                        </XSelect>
                        且审核通过
                    </a-form-item>
                    <a-form-item field="back_time" label="结算时间">
                        <a-input v-model:model-value="form.back_time" placeholder="请输入时间"></a-input>
                        <a-radio-group v-model:model-value="form.back_type" type="button"
                                       class="ml-[10px] flex-shrink-0">
                            <a-radio :value="1">分钟</a-radio>
                            <a-radio :value="2">小时</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </div>
            </a-form-item>

            <a-form-item class="mt-[30px]">
                <a-button class="mr-[24px]" @click="emits('prev')">上一步</a-button>
                <a-button type="primary" @click="success">下一步</a-button>
            </a-form-item>
        </a-form>
    </FormTitle>
</template>

<style lang="scss" scoped>
#block {
    box-sizing: border-box;
    border: 1px solid rgb(232, 232, 232);
    border-radius: 4px;
    background: rgb(250, 250, 250);
    padding: 20px;
    width: 100%;
}
</style>
