<template>
  <view class="pending-plan-detail">
    <!-- 计划详情卡片 -->
    <view class="detail-card" v-for="i in planInfo" :key="i.planNo">
      <!-- 标题行 -->
      <view class="detail-item">
        <text class="label">计划名称：</text>
        <text class="value up-line-1">{{ i.planName || '-' }}</text>
      </view>

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

      <!-- 养护周期行 -->
      <view class="detail-item">
        <text class="label">养护周期：</text>
        <text class="value up-line-1">{{ i.rate || '-' }} {{ uni.$dict.getDictLabel('cycle_id_type', i.cycleId) }}
        </text>
      </view>
      <!--      cycle_id_type-->
      <!-- 计划完成次数行 -->
      <view class="detail-item">
        <text class="label">计划完成次数：</text>
        <text class="value up-line-1">{{ i.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.i || 0 }} 次</text>
        </view>
        <!-- 查看记录按钮（限制宽度+紧凑样式） -->

        <up-button
            v-if="i.planFinishNum>0"
            type="primary"
            size="mini"
            @click="gotoFinishPlanDetail(i)"
            :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(i.beginTime, 'yyyy-mm-dd') }} 至
          {{ timeFormat(i.endTime, 'yyyy-mm-dd') }}
        </text>
      </view>
    </view>

    <!-- 底部新增记录按钮     status=3-->
    <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>
</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 planNo = ref('')
const finishState = ref('')
// 页面加载接收参数
onLoad((options) => {
  console.log('计划ID：', options.batchNo);
  batchNo.value = options.batchNo;
  // planNo.value = options.planNo;
  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
  console.log(planInfoRes)
};
// 跳转到已完成计划明细
const gotoFinishPlanDetail = (i) => {
  uni.navigateTo({
    url: `/pages-sub/daily/patrol-manage/finish-plan-detail/index?planNo=${i.planNo}`
  });
};
// 新增记录
const addNewRecord = () => {
  uni.navigateTo({
    url: `/pages-sub/daily/patrol-manage/add-patrol-record/index?planNo=${planInfo.value[0].planNo}&batchNo=${batchNo.value}`,
  });
};
</script>

<style scoped lang="scss">
.pending-plan-detail {

}

.detail-card {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20px;
}

.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>