<script setup>
import FormTitle from "../../../../../components/FormTitle/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 = {
    platform_id: [{
        required: true,
        message: '投放渠道不能为空',
    }],
    material_id: [{
        required: true,
        message: '素材类型不能为空',
    }],
    goods_name: [{
        required: true,
        message: '产品名称不能为空',
    }],
    goods_intro: [{
        required: true,
        message: '产品功效不能为空',
    }],
    children_num: [{
        required: true,
        message: '包含子任务数量不能为空',
    }],
    children_price: [{
        required: true,
        message: '单个子任务价格不能为空',
    }],
    case_url: [{
        required: true,
        message: '案例链接不能为空',
    }],
}

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: 3}"
            :wrapper-col-props="{span: 12, offset: 1}">
            <a-form-item label="是否需要评论"
                         extra="若您的评论内容有营销属性，有概率不可见。达人可多次尝试，但不可作为扣款理由">
                <a-radio-group v-model:model-value="form.is_comment">
                    <a-radio :value="0">否</a-radio>
                    <a-radio :value="1">是</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item
                v-if="form.is_comment===1"
                label="评论是否需要置顶"
                extra="若您的评论内容有营销属性，不建议置顶。各个平台置顶评论都由人工审核，有概率置顶不成功且影响流量">
                <a-radio-group v-model:model-value="form.is_top">
                    <a-radio :value="0">否</a-radio>
                    <a-radio :value="1">是</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item label="评论内容">
                <a-input
                    disabled
                    v-model:model-value="form.name"
                    placeholder=""></a-input>
            </a-form-item>

            <a-form-item label=""
                         extra="无需上传，将从商家上传的评论图片中，取第一组素材为案例展示。不允许用户复制或者截图使用，仅作为参考使用">
                <a-upload :disabled="true" action="/">
                    <template #upload-button>
                        <div class="arco-upload-picture-card">
                            <div class="arco-upload-picture-card-text">
                                <icon-image size="30"/>
                            </div>
                        </div>
                    </template>
                </a-upload>
            </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>
