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

const emits = defineEmits(['success', 'prev']);
const form = defineModel('form');
const formRef = useTemplateRef('formRef');
const rules = {
    fb_num: [{
        required: true,
        message: '发布次数不能为空',
    }],
    is_identical: [{
        required: true,
        message: '请选择每次素材是否相同',
    }],
    duration: [],
    special_text: [],
    special_images: [],
    choose_area: [],
    machine: [],
}

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);
        }
    });
}
</script>

<template>
    <FormTitle>
        <template #title>发布管理</template>

        <a-form
            class="mt-[30px]"
            ref="formRef"
            :model="form"
            :rules="rules"
            :label-col-props="{span: 4}"
            :wrapper-col-props="{span: 12, offset: 1}">
            <a-form-item label="发布次数" field="fb_num">
                <XSelect
                    v-model:model-value="form.fb_num"
                    :init="true"
                    :api="Api.merchant.getNumberOfReleases">
                </XSelect>
            </a-form-item>

            <a-form-item label="每次素材是否相同" field="is_identical" v-if="form.fb_num!==1">
                <a-radio-group v-model:model-value="form.is_identical">
                    <a-radio :value="1">相同</a-radio>
                    <a-radio :value="0">不同</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item label="每次发布间隔时长" field="duration" v-if="form.fb_num > 1">
                <XSelect
                    allow-clear
                    v-model:model-value="form.duration"
                    placeholder="不选则为无要求"
                    :init="true"
                    :api="Api.merchant.getPublicationDuration">
                </XSelect>
            </a-form-item>

            <a-form-item label="特殊要求" field="special_text">
                <a-textarea
                    :max-length="299"
                    placeholder="请输入特殊要求，如：请勿截图，必须下载原图再上传到抖音"
                    v-model:model-value="form.special_text">
                </a-textarea>
            </a-form-item>

            <a-form-item label="" field="special_images">
                <UploadAvatar
                    size="100px"
                    v-model:files="form.special_images"
                    :api="Api.system.uploadFile2">
                </UploadAvatar>
            </a-form-item>

            <a-form-item label="选择限制 IP" field="choose_area">
                <XSelect
                    multiple
                    :max-tag-count="4"
                    :init="true"
                    v-model:model-value="form.choose_area"
                    :api="Api.merchant.getProvince">
                </XSelect>
            </a-form-item>

            <a-form-item label="每个设备可参加几次" field="machine">
                <a-input-number placeholder="敬请期待" disabled></a-input-number>
            </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 scoped>

</style>
