<script setup>
import {reactive, ref, watch} from "vue";
import Api from "../../../../../api";
import {Message} from "@arco-design/web-vue";

const {id} = defineProps({
    id: {
        type: Number,
        default: null
    }
});
const modeList = reactive([]);
const visible = ref(false);
const form = reactive({
    remark: null,
});

const success = async () => {
    if (form.remark.length > 100) {
        Message.warning('不允许大于100字');
        return;
    }
    const {msg} = await Api.merchant.saveMode({
        id: id,
        ...form,
    });
    Message.success(msg);
}

watch(
    () => visible.value,
    (val) => {
        if (val) Api.merchant.getModeList().then(({data}) => {
            modeList.length = 0;
            modeList.push(...data);
        })
    },
    {deep: true}
);
</script>

<template>
    <div @click="visible=true">
        <slot></slot>
    </div>

    <a-modal
        @ok="success"
        title="存为模板"
        ok-text="确定存为模板"
        title-align="start"
        v-model:visible="visible">
        <div class="text-[14px] text-[#4E5969] mb-[8px]">将该任务，存为模板。下次新建任务时，可一键填写</div>
        <a-input v-model:model-value="form.remark" placeholder="请输入模板备注，方便您快速找到该模板"></a-input>
        <div class="mt-[20px] text-[14px] text-[#4E5969]">模板已创建</div>
        <div class="mt-[8px] text-[14px] text-[#4E5969]"><span class="text-[#165DFF]">{{ modeList.length }}</span>/20
        </div>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
