<script setup>
import XModal from "../../../components/XModal.vue";
import {defineEmits, reactive, ref, watch} from "vue";
import XUpload from "../../../components/XUpload.vue";
import XInput from "../../../components/XInput.vue";
import Api from "../../../api/index.js";
import {showToast} from "../../../utils/uils.js";
import {debounce} from "lodash";

const emits = defineEmits(['success']);
const {data, current} = defineProps({
    data: {
        type: Object,
        default: null,
    },
    current: {
        type: Number,
        default: null,
    }
});
const content = reactive([]);
const show = ref(false);

const initContent = () => {
    content.length = 0;
    data.task_content[current].data.forEach(v => {
        content.push([]);
    })
}

watch(
    () => show.value,
    (val) => {
        if (val) {
            initContent();
        }
    },
    {deep: true}
)

const success = debounce(async () => {
    const {msg} = await Api.system.addTaskBackfill({
        id: data.children.id,
        cid: current + 1,
        content: content.flat(),
        type: data.task_content[current].is_image,
    });
    showToast(msg);
    emits('success');
    show.value = false;
}, 1000);
</script>

<template>
    <view @click="show=true">
        <slot></slot>
    </view>

    <x-modal v-model:show="show">
        <view class="!py-[40rpx] !px-[32rpx] test-32r font-blod">
            <view class="text-center text-[#1D2129] pb-[20rpx]">重新回填：回填数据1</view>

            <view class="block" v-for="(v, index) in data.task_content[current].data">
                <view class="block-title">
                    {{ v.name }}:
                </view>
                <view class="block-info">
                    <x-upload
                        :del="data.children.user_status !== 2"
                        :single="true"
                        v-model:files="content[index]"
                        v-if="data.task_content[current].is_image === 1">
                    </x-upload>
                    <x-input v-else v-model:model-value="content[index]" height="64rpx"
                             placeholder="请输入内容"></x-input>
                </view>
            </view>

            <tui-button height="80rpx" @click="success">重新提交</tui-button>
        </view>
    </x-modal>
</template>

<style scoped lang="scss">
.block {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;

    .block-title {
        flex-shrink: 0;
        color: rgb(134, 144, 156);
        font-size: 24rpx;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: 0;
        text-align: left;
        width: 160rpx;
    }

    .block-info {
        color: rgb(78, 89, 105);
        font-size: 24rpx;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: 0;
    }
}
</style>
