<template>
  <view class="page">
    <scroll-view scroll-y class="scroll">
      <view class="section header">
        <view class="header-title">{{ plan.planName || '回访计划' }}</view>
      </view>
      <view class="section border-top">
        <view class="sub">应用范围: {{ plan.planDetail || '无' }}</view>
      </view>

      <view class="section mt-20">
        <view v-if="tasks.length === 0" class="empty">暂无任务</view>
        <plan-node-list v-else class="node-list" :taskList="tasks" />
      </view>
    </scroll-view>

    <view class="footer">
      <button class="footer-btn" @click="back">返回</button>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import planNodeList from './components/manage-plan/plan-node-list.vue';

const plan = ref({});

const tasks = computed(() => {
  const list = Array.isArray(plan.value?.taskList) ? plan.value.taskList : [];
  return list.map((i) => (i && typeof i === 'object' ? i : {}));
});

onLoad(() => {
  const p = uni.getStorageSync('preview-mamagement-plan');
  if (p && typeof p === 'object') plan.value = p;
});

function back() {
  uni.navigateBack();
}
</script>

<style scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f6f7f8;
}
.scroll {
  flex: 1;
  height: 0;
}
.section {
  background: #fff;
  padding: 24rpx 30rpx;
}
.section.header {
  padding: 24rpx 30rpx;
  border-bottom: 1px solid #e5e7eb;
}
.section.border-top {
  border-bottom: 1px solid #e5e7eb;
}
.mt-20 {
  margin-top: 20rpx;
}
.header-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111827;
}
.empty {
  padding: 120rpx 0;
  text-align: center;
  color: #9ca3af;
  font-size: 30rpx;
}
.sub {
  font-size: 30rpx;
  color: #6b7280;
  line-height: 48rpx;
}
.footer {
  background: #fff;
  padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
}
.footer-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 16rpx;
  font-size: 30rpx;
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
}
.footer-btn::after {
  border: none;
}
</style>
