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

const SystemStore = useSystemStore();
const emits = defineEmits(['success']);
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: [],
}

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 initGLPO = () => {
    form.value.material_id = null;
    form.value.backfill.forEach(v => v.content_id = null);
    form.value.settltment_before.length = 0;
}
</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="投放渠道" field="platform_id">
                <XSelect
                    :init="true"
                    @change="initGLPO"
                    v-model:model-value="form.platform_id"
                    :api="SystemStore.isRoot ? Api.admin.getPlatform : Api.merchant.getPlatformList">
                </XSelect>
            </a-form-item>
            <a-form-item label="素材类型" v-if="form.platform_id" field="material_id">
                <XSelect
                    :init="true"
                    :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="产品名称" field="goods_name">
                <a-input v-model:model-value="form.goods_name" placeholder="请输入产品名称，如：花露水"></a-input>
            </a-form-item>
            <a-form-item label="产品功效" field="goods_intro">
                <a-input v-model:model-value="form.goods_intro" placeholder="请输入产品功效，如：驱蚊"></a-input>
            </a-form-item>
            <a-form-item label="包含子任务数量" field="children_num">
                <a-input-number :precision="0" :min="0" :max="50" v-model:model-value="form.children_num"
                                placeholder="请输入代发的账号数量，最多一个任务可包含50个子任务"></a-input-number>
            </a-form-item>
            <a-form-item label="单个子任务价格" field="children_price">
                <a-input-number :precision="2" :min="0" v-model:model-value="form.children_price"
                                placeholder="请输入单个子任务价格"></a-input-number>
            </a-form-item>

            <a-form-item label="案例链接" field="case_url">
                <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>
