<template>
    <div class="edit-plan">
        <custom-header name="查看详情"></custom-header>
        <div class="edit-plan-content" v-if="contentData && Object.keys(contentData).length > 0">
            <record-item :record-item-data="contentData.farmWorkLib" title-mode="default" class="recipe-item" />
            <prescription-table
                v-if="contentData?.prescription"
                :prescription-list="[contentData?.prescription]"
                :usage-mode="contentData?.prescription?.usageMode"
                :attention="contentData?.attention"
            ></prescription-table>
        </div>
        <div class="custom-bottom-fixed-btns">
            <div class="bottom-btn secondary-btn" @click="deletePrescription">删除方案</div>
            <div class="bottom-btn primary-btn" @click="editPrice">编辑方案</div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import recordItem from "@/components/recordItem.vue";
import prescriptionTable from "@/views/old_mini/agri_work/components/prescriptionTable.vue";
import { ref, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
onMounted(() => {
    // const data = JSON.parse(route.query.data);
    // console.log('data', data);
    // contentData.value = data;
    const arrangeId = route.query.arrangeId;
    if (arrangeId) {
        getArrangeDetail(arrangeId);
    }
});
const getArrangeDetail = (arrangeId) => {
    VE_API.container_farm_work_arrange.getComposite({ arrangeId }).then(({ data }) => {
        contentData.value = data;
    });
};

const deletePrescription = () => {
    ElMessageBox.confirm("确认要删除该处方吗？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            console.log("删除成功");
        })
        .catch(() => {
            console.log("取消删除");
        });
};
const editPrice = () => {
    router.push({
        path: "/modify_plan",
        query: { arrangeId: contentData.value.arrange.id, isEdit: true },
    });
};

const contentData = ref({});

</script>

<style scoped lang="scss">
.edit-plan {
    width: 100%;
    height: 100vh;
    background: #f2f3f5;
    .edit-plan-content {
        padding: 12px;
        height: calc(100% - 40px - 82px);
        overflow: auto;
        .record-item {
            margin: 0;
        }
        .farm-table {
            margin-top: 10px;
        }
    }
}
</style>
