<template>
  <view class="pending-plan-detail">
    <!-- 计划详情卡片 -->
    <view class="detail-card">
      <!-- 标题行 -->
      <view class="detail-item">
        <text class="label">计划名称：</text>
        <text class="value up-line-1">{{ planInfo && planInfo.title ? planInfo.title : '-' }}</text>
      </view>

      <!-- 计划编码行 -->
      <view class="detail-item">
        <text class="label">计划编码：</text>
        <text class="value up-line-1">{{ planInfo.planNo ? planInfo.planNo : '-' }}</text>
      </view>

      <!-- 养护周期行 -->
      <view class="detail-item">
        <text class="label">养护周期：</text>
        <text class="value up-line-1">{{ planInfo && planInfo.rate ? planInfo.rate : '-' }}</text>
      </view>

      <!-- 计划完成次数行 -->
      <view class="detail-item">
        <text class="label">计划完成次数：</text>
        <text class="value up-line-1">{{ planInfo && planInfo.planNum ? planInfo.planNum : 0 }} 次</text>
      </view>

      <!-- 已完成次数行 + 查看记录按钮 -->
      <view class="detail-item flex-between">
        <view class="left-wrap">
          <text class="label">已完成次数：</text>
          <text class="value up-line-1">{{ planInfo && planInfo.planFinishNum ? planInfo.planFinishNum : 0 }} 次</text>
        </view>
        <!-- 查看记录按钮（限制宽度+紧凑样式） -->
        <up-button
            type="primary"
            size="mini"
            @click="gotoFinishPlanDetail"
            :style="{ width: '80px', height: '28px', fontSize: '14px', borderRadius: 4 }"
        >
          查看记录
        </up-button>
      </view>

      <!-- 计划有效期行 -->
      <view class="detail-item">
        <text class="label">计划有效期：</text>
<!--        <text class="value up-line-1">{{ planInfo && planInfo.validTime ? planInfo.validTime : '-' }}</text>-->
        <text class="value up-line-1">{{ timeFormat(planInfo.beginTime,'yyyy-mm-dd')}} 至 {{ timeFormat(planInfo.endTime,'yyyy-mm-dd')}} </text>
      </view>
    </view>

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

<script setup>
import { timeFormat } from '@/uni_modules/uview-plus';
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { inspectionPlanDetail } from "@/api/patrol-manage/patrol-plan";
// 响应式数据定义
const planInfo = ref({});
const batchNo = ref('')
const finishState = ref('')
// 页面加载接收参数
onLoad((options) => {
  console.log('计划ID：', options.batchNo);
  batchNo.value = options.batchNo;
  finishState.value = options.status
});
// 页面显示时请求数据
onShow(() => {
  if (!batchNo.value) {
    uni.showToast({
      title: '计划ID不存在',
      icon: 'none'
    });
    return;
  }
  getPlanDetail(batchNo.value);
});
const getPlanDetail = async () => {
  const queryData = {
    batchNo: batchNo.value,
    finishState: finishState.value
  }
  console.log(queryData)
  const planInfoRes = await inspectionPlanDetail(queryData)
  planInfo.value = planInfoRes[0]
  console.log(planInfoRes)
};
// 跳转到已完成计划明细
const gotoFinishPlanDetail = () => {

  uni.navigateTo({
    url: `/pages-sub/daily/patrol-manage/finish-plan-detail/index?batchNo=${planInfo.value.code}`
  });
};
// 新增记录
const addNewRecord = () => {
  if (!planInfo.value || !planInfo.value.code) {
    uni.showToast({
      title: '计划数据未加载完成',
      icon: 'none'
    });
    return;
  }
  uni.navigateTo({
    url: `/pages-sub/daily/patrol-manage/add-patrol-record/index?batchNo=${planInfo.value.code}`
  });
};
</script>

<style scoped lang="scss">
.pending-plan-detail {
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  min-height: 100vh; // 恢复最小高度，保证页面占满屏幕
  padding-bottom: 88rpx; // 给底部按钮留空间
}

.detail-card {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  flex: 1;
}

.detail-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  line-height: 1.8;
  padding: 10rpx 0;
  border-bottom: 1px solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left-wrap {
    display: flex;
    align-items: center;
    flex: 1; // 占满剩余空间，按钮靠右
  }
}

.label {
  color: #999;
  width: 200rpx;
  flex-shrink: 0;
}

.value {
  color: #333;
  flex: 1;
  word-break: break-all;
}

</style>