<template>
    <popup v-model:show="showPopup" class="add-popup" closeable round :close-on-click-overlay="false">
        <div class="title">
            <img src="@/assets/images/common/add-icon-popup.png" alt="" />
            <span>New Task</span>
        </div>
        <el-form label-position="top" :model="ruleForm" ref="ruleFormRef" :rules="rules">
            <el-form-item label="Plantation Group" prop="plantGroupId">
                <el-select v-model="ruleForm.plantGroup" size="large" @change="changeGroup">
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="{...item,value:item.id}" />
                </el-select>
            </el-form-item>
            <el-form-item label="Location Name" prop="taskName">
                <el-input v-model="ruleForm.taskName" size="large" placeholder="please input your Task Name" />
            </el-form-item>
            <el-form-item label="Farm Area" prop="area">
                <el-input v-model="ruleForm.areaStr" size="large" disabled />
            </el-form-item>
            <div class="button" @click="submitForm">Confirmation</div>
        </el-form>
    </popup>
</template>

<script setup>
import { Popup } from "vant";
import { ref, watch, reactive, nextTick, onMounted } from "vue";

const props = defineProps({
    show: {
        type: Boolean,
        defalut: false,
    },
});

const showPopup = ref(false);
const ruleForm = reactive({
    plantGroup: "",
    plantGroupId:"",
    taskName: "",
    areaStr:"",
    area:"",
    groupName:""
});
const emit = defineEmits(['addCallback'])
const ruleFormRef = ref(null);
const submitForm = async () => {
    await ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            VE_API.task.create(ruleForm).then(({ code, data }) => {
                if (code === 0) {
                    ruleFormRef.value.resetFields();
                    showPopup.value = false;
                    emit('addCallback')
                }
            });
        } else {
            console.log("error submit!", fields);
        }
    });
};

const changeGroup = (e) =>{
    ruleForm.areaStr = e.area.toFixed(2) + ' ha'
    ruleForm.area = e.area
    ruleForm.plantGroupId = e.value
    ruleForm.groupName = e.name
}

const rules = {
    plantGroup: { required: true, message: "Please select Activity plantGroupId", trigger: "blur" },
    taskName: { required: true, message: "Please input Activity taskName", trigger: "blur" },
};
const options = ref([]);

onMounted(() => {
    getGroupList();
});

const getGroupList = () => {
    VE_API.task.groupList().then(({ code, data }) => {
        if (code === 0) {
            options.value = data || [];
            ruleForm.plantGroup = {...data[0],value:data[0].id}
            ruleForm.plantGroupId = data[0].id
            ruleForm.areaStr = data[0].area.toFixed(2) + ' ha'
            ruleForm.area = data[0].area
            ruleForm.groupName = data[0].name
        }
    });
};

watch(
    () => props.show,
    () => {
        showPopup.value = true;
        nextTick(() => {
            ruleFormRef.value.resetFields();
        });
    }
);
</script>

<style lang="scss" scoped>
.add-popup {
    width: 35%;
    padding: 20px;
    .title {
        display: flex;
        align-items: center;
        font-size: 20px;
        margin-bottom: 24px;
        img {
            width: 19px;
            height: 19px;
            margin-right: 12px;
        }
    }
    .button {
        margin-top: 20px;
        padding: 14px;
        width: 100%;
        box-sizing: border-box;
        background: #00a342;
        border-radius: 4px;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
}
</style>
