<template>
  <view class="page-container">
    <!-- 计划详情卡片区域（复用目标卡片结构） -->
    <view class="common-card-list">
      <up-card
          :border="false"
          :foot-border-top="false"
          v-for="(i, index) in planInfo"
          :key="`${i.planNo}_${index}`"
      >
        <!-- 自定义标题区域（计划名称） -->
        <template #head>
          <view class="card-header">
            <view class="common-card-title u-line-1">{{ i.planName || '无计划名称' }}</view>
          </view>
        </template>

        <!-- 卡片主体内容（原详情项） -->
        <template #body>
          <view class="card-body">
            <!-- 计划编码 -->
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">计划编码：</view>
              <view class="u-line-1 u-body-value">{{ i.planNo || '-' }}</view>
            </view>

            <!-- 养护周期 -->
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">养护周期：</view>
              <view class="u-line-1 u-body-value">
                {{ i.rate || '-' }} {{ uni.$dict.getDictLabel('cycle_id_type', i.cycleId) }}
              </view>
            </view>

<!--            &lt;!&ndash; 计划完成次数 &ndash;&gt;-->
<!--            <view class="u-body-item u-flex">-->
<!--              <view class="u-body-item-title">计划完成次数：</view>-->
<!--              <view class="u-line-1 u-body-value">{{ i.planNum || 0 }} 次</view>-->
<!--            </view>-->

            <!-- 已完成次数 + 查看记录按钮 -->
            <view class="u-body-item u-flex common-item-center common-justify-between">
              <view class="u-body-item-title">已完成次数： {{ i.planFinishNum || 0 }} 次</view>
              <view class="">
                <up-button
                    type="primary"
                    size="mini"
                    @click="gotoFinishPlanDetail(i)"
                    class="submit-record-btn"

                >
                  查看记录
                </up-button>
              </view>
            </view>

            <!-- 计划有效期 -->
            <view class="u-body-item u-flex">
              <view class="u-body-item-title">计划有效期：</view>
              <view class="u-line-1 u-body-value">
                {{ timeFormat(i.beginTime, 'yyyy-mm-dd') || '-' }} 至
                {{ timeFormat(i.endTime, 'yyyy-mm-dd') || '-' }}
              </view>
            </view>
          </view>
        </template>
      </up-card>

      <!-- 底部新增记录按钮 -->
      <view class="fixed-bottom-btn-wrap" v-if="finishState==1">
        <up-button
            type="primary"
            size="default"
            @click="addNewRecord"
            :style="{ width: '100%', height: '88rpx', fontSize: '32rpx', borderRadius: 0 }"
        >
          新增记录
        </up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { timeFormat } from '@/uni_modules/uview-plus';
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { notFinish } from "@/api/maintain-manage/maintain-manage";

// 响应式数据定义（逻辑完全保留）
const planInfo = ref([]);
const batchNo = ref('')
const planNo = ref('')
const finishState = ref('')
const planTypeId = ref('')

// 页面加载接收参数（逻辑完全保留）
onLoad((options) => {
  planNo.value = options.planNo;
  finishState.value = options.finishState
  planTypeId.value = options.planTypeId
});

// 页面显示时请求数据（逻辑完全保留）
onShow(() => {
  if (!planNo.value) {
    uni.showToast({
      title: '计划ID不存在',
      icon: 'none'
    });
    return;
  }
  getPlanDetail();
});

// 获取计划详情（逻辑完全保留）
const getPlanDetail = async () => {
  const queryData = {
    planNo: planNo.value,
    planTypeId: planTypeId.value,
    finishState:finishState.value
  }
  console.log(queryData)
  const planInfoRes = await notFinish(queryData)
  planInfo.value = planInfoRes
  console.log(planInfoRes)
};

// 跳转到已完成计划明细（逻辑完全保留）
const gotoFinishPlanDetail = (i) => {
  uni.navigateTo({
    url: `/pages-sub/daily/maintain-manage/finish-plan-detail?planNo=${i.planNo}`
  });
};

// 新增记录（逻辑完全保留）
const addNewRecord = () => {
  uni.navigateTo({
    url: `/pages-sub/daily/maintain-manage/add-record?planNo=${planNo.value}`,
  });
};
</script>

<style scoped lang="scss">
.page-container {

}
</style>