<template>
    <global-page
        title="添加分解计划"
        navLeftType="text"
        :showNavRight="true"
        navRightType="button"
        navRightText="保存"
        @handleRightClick="handleSave"
        showFooterBtn
        footerBtnText="添加分解计划"
        @handleFooterClick="handleFooterClick"
    >
        <up-form labelPosition="left" labelWidth="auto">
            <template v-for="(item, index) in formData" :key="index">
                <view class="form">
                    <up-form-item
                        :label="formData.length > 1 && index > 0 ? '分解计划' + (index + 1) : '分解计划'"
                        :borderBottom="true"
                        labelPosition="top"
                        required
                    >
                        <view class="delete" v-if="formData.length > 1" @tap="handleDelete(index)">
                            <global-icon icon="delete-01" color="#F53F3F"></global-icon>
                        </view>
                        <up-textarea
                            v-model="item.plan"
                            placeholder="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
                            :height="40"
                            border="none"
                        ></up-textarea>
                    </up-form-item>
                    <up-form-item label="完成时限" :borderBottom="true">
                        <global-date pickAlign="right" clearable v-model="item.time" :emptyValue="null"></global-date>
                    </up-form-item>
                </view>
            </template>
        </up-form>
        <up-modal
            :width="250"
            content="确认删除吗？删除后不可恢复!"
            :show="show"
            showCancelButton
            closeOnClickOverlay
            @confirm="confirm"
            @cancel="show = false"
            @close="show = false"
        ></up-modal>
    </global-page>
</template>

<script setup>
import { ref } from 'vue'
import { cloneDeep } from 'lodash'

const formData = ref([])
//初始化数据
uni.$on('sendDecompose', (data) => {
    if (data.length) {
        formData.value = cloneDeep(data)
    } else {
        formData.value.push({ plan: '', time: null })
    }
})
const show = ref(false)
const currentIndex = ref(-1)
//删除
const handleDelete = (index) => {
    show.value = true
    currentIndex.value = index
}
//确认删除
const confirm = () => {
    formData.value.splice(currentIndex.value, 1)
    show.value = false
    currentIndex.value = -1
}
//保存
const handleSave = async () => {
    const planIndex = formData.value.findIndex((item) => item.plan.trim() === '')
    if (planIndex > -1) {
        if (formData.value.length > 1) {
            return uni.$mocpMessage.error(`请输入分解计划${planIndex + 1}的内容`)
        } else {
            return uni.$mocpMessage.error(`请输入分解计划的内容`)
        }
    }
    uni.$emit('changeDecompose', formData.value)
    uni.$mocpJump.navigateBack()
}
const handleFooterClick = () => {
    formData.value.push({ plan: '', time: null })
}
</script>
<style lang="scss" scoped>
.form {
    background: #fff;
    margin-bottom: 24rpx;
    padding: 0 32rpx;
    :deep(.u-form-item) {
        position: relative;
        .delete {
            position: absolute;
            right: 0;
            top: 24rpx;
        }
    }
}
</style>
