<script setup>
import Api from "../../../../../api/index.js";
import XSelect from "../../../../../components/XSelect/index.vue";
import FormTitle from "../../../../../components/FormTitle/index.vue";

const emits = defineEmits(['success']);
const form = defineModel('form');

const success = () => {
    emits('success', form.value);
}
</script>

<template>
    <FormTitle>
        <template #title>任务介绍</template>

        <a-form
            class="mt-[30px]"
            :model="form"
            :label-col-props="{span: 3}"
            :wrapper-col-props="{span: 12, offset: 1}">
            <a-form-item label="投放渠道">
                <XSelect
                    :init="true"
                    v-model:model-value="form.platform_id"
                    :api="Api.merchant.getPlatformList">
                </XSelect>
            </a-form-item>
            <a-form-item label="素材类型">
                <XSelect
                    :init="true"
                    v-if="form.platform_id"
                    :api-po="{id: form.platform_id}"
                    v-model:model-value="form.material_id"
                    :api="Api.merchant.getMaterialType">
                </XSelect>
            </a-form-item>
            <a-form-item label="产品名称">
                <a-input v-model:model-value="form.goods_name" placeholder="请输入产品名称，如：花露水"></a-input>
            </a-form-item>
            <a-form-item label="产品功效">
                <a-input v-model:model-value="form.goods_intro" placeholder="请输入产品功效，如：驱蚊"></a-input>
            </a-form-item>
            <a-form-item label="包含子任务数量">
                <a-input v-model:model-value="form.children_num"
                         placeholder="请输入代发的账号数量，最多一个任务可包含50个子任务"></a-input>
            </a-form-item>
            <a-form-item label="单个子任务价格">
                <a-input v-model:model-value="form.children_price" placeholder="请输入单个子任务价格"></a-input>
            </a-form-item>

            <a-form-item label="案例链接">
                <a-input v-model:model-value="form.case_url" placeholder="请输入案例链接">
                    <template #prepend>http://</template>
                </a-input>
            </a-form-item>

            <a-form-item label="素材案例">
                <div class="flex flex-col gap-[5px]">
                    <a-upload disabled 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>
                    <div class="upload-text">无需上传，将从商家上传的素材中，取第一组素材为案例展示</div>
                </div>
            </a-form-item>

            <a-form-item label="任务安全等级">
                <div class="flex flex-col gap-[5px]">
                    <div class="flex items-center gap-[36px]">
                        <a-rate allow-half disabled/>
                        <a-link class="rate-text" :hoverable="false">待评估</a-link>
                    </div>
                    <div>
                        *商家无需填写，由平台审核任务时，根据任务的历史平均禁言率、封号程度酌定。分值越高，接单达人越多
                    </div>
                </div>
            </a-form-item>

            <a-form-item label="任务耗时等级">
                <div class="flex flex-col gap-[5px]">
                    <div class="flex items-center gap-[36px]">
                        <a-rate allow-half disabled/>
                        <a-link class="rate-text" :hoverable="false">待评估</a-link>
                    </div>
                    <div>
                        *商家无需填写，由平台审核任务时，根据任务的发布要求，回填要求和效果管理综合评定。分值越高，接单达人越多
                    </div>
                </div>
            </a-form-item>

            <a-form-item class="mt-[30px]">
                <a-button type="primary" @click="success">下一步</a-button>
            </a-form-item>
        </a-form>
    </FormTitle>
</template>

<style lang="scss" scoped>

</style>
