<script setup>
import {onMounted, reactive, ref} from 'vue';
import NewTask1 from "./components/new-task-1.vue";
import NewTask2 from "./components/new-task-2.vue";
import NewTask3 from "./components/new-task-3.vue";
import NewTask4 from "./components/new-task-4.vue";
import NewTask5 from "./components/new-task-5.vue";
import NewTask6 from "./components/new-task-6.vue";
import NewTask7 from "./components/new-task-7.vue";
import {onBeforeRouteLeave, useRoute} from "vue-router";
import Api from "../../../../api/index.js";
import {deleteObjectFields} from "../../../../utils/index.js";
import {Message, Modal} from "@arco-design/web-vue";
import {useSystemStore} from "../../../../pinia/SystemStore/index.js";
import dayjs from "dayjs";

const routes = useRoute();
const SystemStore = useSystemStore();
const step = ref(1);
const form = reactive({
    id: null,
    status: 0,

    platform_id: null,
    case_url: null,
    material_id: null,
    goods_name: '玉桂狗',
    goods_intro: '可爱捏',
    children_num: 10,
    children_price: 10,

    fb_num: null,
    is_identical: 1,
    duration: null,
    special_text: null,
    special_images: [],
    choose_area: null,
    machine: 0,

    is_comment: 0,
    is_top: 0,

    start_time: null,
    end_time: null,
    is_other: 0,
    backfill: [],

    retention_time: null,
    retention_type: 2,
    check_time: null,
    check_type: 1,
    back_id: null,
    back_time: null,
    back_type: 1,

    settltment_before: [],
    settlement_after: [],
});

const init = () => {
    step.value = 1;
    deleteObjectFields(form);
}

const success = async (po) => {
    if (step.value === 6) {
        if (form.id) {
            const api = SystemStore.isRoot ? Api.admin.editTask : Api.merchant.editTask;
            const {msg} = await api(form);
            Message.success(msg);
        } else {
            const {msg} = await Api.merchant.createTask(form);
            Message.success(msg);
        }
    }

    if (step.value < 8) {
        step.value++;
    }
}

onMounted(() => {
    const {id} = routes.query;
    const api = SystemStore.isRoot ? Api.admin.getTaskDetail : Api.merchant.getTaskInfo
    if (id) api(id).then(({data}) => {
        Object.assign(form, data);
        form.choose_area = data.choose_area_arr.map(v => Number(v));
        form.backfill = data.back.map(v => ({
            ...v,
            start_time: dayjs(v.start_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
            end_time: dayjs(v.end_time * 1000).format('YYYY-MM-DD HH:mm:ss'),
        }));
        form.settltment_before = data.before.map(v => ({...v, ratio: Number(v.ratio)}));
        form.settlement_after = data.settlement_after?.map(v => Number(v));
        form.special_images = data.special_images_arr;
    });
})

onBeforeRouteLeave((to, from, next) => {
    if (SystemStore.isRoot) {
        next(true);
        return;
    }
    if (step.value === 7) {
        next(true);
        return;
    }
    if (form.status === 0) {
        Modal.warning({
            title: '是否保存当前内容',
            hideCancel: false,
            onOk: async () => {
                const {msg} = await Api.merchant.saveNewTask(form);
                Message.success(msg);
                next(true);
            },
            onCancel() {
                next(true);
            }
        });
        return;
    }
    next(true);
})
</script>

<template>
    <div class="mb-[20px]">
        <a-breadcrumb
            :routes="[{path: '/', label: '任务中心'}, {path: '/', label: '悬赏任务'}, {path: '/', label: '新建任务'}]">
        </a-breadcrumb>
    </div>

    <div class="mock-card mb-[20px]">
        <a-steps :current="step">
            <a-step>任务简介</a-step>
            <a-step>发布管理</a-step>
            <a-step>控评管理</a-step>
            <a-step>回填管理</a-step>
            <a-step>时间管理</a-step>
            <a-step>效果管理</a-step>
            <a-step>完成创建</a-step>
        </a-steps>
    </div>

    <a-card class="flex-grow text-[14px]">
        <new-task1 v-if="step === 1" @success="success" v-model:form="form"></new-task1>
        <new-task2 v-if="step === 2" @success="success" @prev="step--" v-model:form="form"></new-task2>
        <new-task3 v-if="step === 3" @success="success" @prev="step--" v-model:form="form"></new-task3>
        <new-task4 v-if="step === 4" @success="success" @prev="step--" v-model:form="form"></new-task4>
        <new-task5 v-if="step === 5" @success="success" @prev="step--" v-model:form="form"></new-task5>
        <new-task6 v-if="step === 6" @success="success" @prev="step--" v-model:form="form"></new-task6>
        <new-task7 v-if="step === 7" @success="success" @init="init"></new-task7>
    </a-card>
</template>

<style lang="scss" scoped>
.upload-text {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
}

.rate-text {
    color: rgb(22, 93, 255);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
}
</style>
