<script setup>
import { computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { showFailToast } from 'vant';

const router = useRouter();
const route = useRoute();

const manifest = ref({})
onMounted(() => {
  manifest.value = JSON.parse(route.query.manifest)
  console.log('manifest', manifest.value);
  if (!manifest.value) {
    showFailToast('数据传参失败，请联系管理员！')
    router.go(-1)
  }
})

const displayQuantifiedText = computed(() => {
  return manifest.value.isQuantified ? '是' : '否'
})

const displayFinishedText = computed(() => {
  return manifest.value.isFinished === '已完成' ? '已完成' : '待完成'
})

</script>

<template>

  <div class="page-container">
    <van-sticky>
      <van-nav-bar title="计划任务查看">
      </van-nav-bar>
    </van-sticky>
    <div class="scroll-container">
      <van-form >
        <van-field
          readonly
          type="textarea"
          v-model="manifest.work"
          label="工作："
        />

        <van-field
          readonly
          type="textarea"
          v-model="manifest.subItemWorkContent"
          label="小项工作内容："
        />

        <van-field
          readonly
          type="textarea"
          v-model="manifest.targetRequirements"
          label="目标要求："
        />

        <van-field
          readonly
          type="textarea"
          v-model="manifest.subTask"
          label="分项任务："
        />

        <van-field
          readonly
          type="textarea"
          v-model="manifest.subTaskCompletionDeadline"
          label="分项任务完成时限："
        />

        <van-field
          readonly
          v-model="displayFinishedText"
          label="完成状态："
        />

        <van-field
          readonly
          v-model="displayQuantifiedText"
          label="是否可量化："
        />

      </van-form>
    </div>
  </div>
</template>

<style scoped>
.page-container {
  height: 100vh; /* 关键：外层容器高度设为视口高度 */
  display: flex;
  flex-direction: column;
}

/*  overflow-y: auto; !* 启用垂直滚动 *!*/


.scroll-container {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}

/* 可选：隐藏滚动条（视觉优化） */
.scroll-container::-webkit-scrollbar {
  display: none;
}


.button-select {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px;
}

</style>
