<script setup>
import { ref, reactive, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import cache from '../../../../utils/cache';
import customHeader from '../../../../components/customHeader.vue';
import gkQualityFeedbackDetailComponent from '../components/gkQualityFeedbackDetailComponent.vue';

const cusName = ref()
const cusId = ref()
const visistId = ref()
const status = ref()

// 质量反馈明细组件引用
const qualityFeedbackDetailComponentRef = ref(null)
// 展开/收起标志
let expandFlagRC = ref(true);

onLoad(options => {
    cusName.value = options.cusName
    cusId.value = options.cusId
    visistId.value = options.visistId
    status.value = options.status
    // 首次加载时，如果组件已挂载，立即清空明细数据
    setTimeout(() => {
        if (qualityFeedbackDetailComponentRef.value) {
            qualityFeedbackDetailComponentRef.value.clearForm();
        }
    }, 100);
})

// 质量反馈明细
// 处理展开/收起明细区域
let handleExpandRC = () => {
    expandFlagRC.value = !expandFlagRC.value;
    if (expandFlagRC.value) {
        // 展开时清空明细数据，确保每次展开都是空表单
        if (qualityFeedbackDetailComponentRef.value) {
            qualityFeedbackDetailComponentRef.value.clearForm();
        }
    }
};

// 返回上一页功能
const handleBack = () => {
    navigateBack({
        delta: 1
    });
};

// ... 其他现有代码
</script>

<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'外反明细录入'" :leftFlag="true" :rightFlag="false" @back="handleBack"></customHeader>
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>

            <!-- 质量反馈明细录入 -->
            <view class="white-bg white-bg-2">
                <view class="w-b-title" @click="handleExpandRC">明细录入
                    <text>
                        {{ expandFlagRC ? '收起' : '展开' }}
                        <i :class="{ iconfont: true, 'icon-up': expandFlagRC, 'icon-down': !expandFlagRC }"></i>
                    </text>
                </view>
                <view v-show="expandFlagRC" class="form-con">
                    <gkQualityFeedbackDetailComponent 
                        :cusName="cusName" 
                        :cusId="cusId" 
                        :feedbackId="visistId" 
                        :status="status" 
                        ref="qualityFeedbackDetailComponentRef"
                    ></gkQualityFeedbackDetailComponent>
                </view>
            </view>

        </view>
    </view>
</template>