<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
let keyMatter = {};
if (route.query.keyMatter) {
  keyMatter = JSON.parse(route.query.keyMatter);
}

const displayOverdueText = computed(() => {
  return keyMatter.isOverdue === '逾期' ? '逾期' : '未逾期'
})

const displayQuantifiedText = computed(() => {
  return keyMatter.isQunatified ? '是' : '否'
})


</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
          v-model="keyMatter.itemTitle"
          label="事项标题："
        />

        <van-field
          readonly
          v-model="keyMatter.itemContent"
          label="事项内容："
          type="textarea"
        />

        <van-field
          readonly
          v-model="keyMatter.itemStartTime"
          label="开始时间："
        />

        <van-field
          readonly
          v-model="keyMatter.itemEndTime"
          label="结束时间："
        />

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

        <van-field
          v-model="displayOverdueText"
          readonly
          label="是否逾期："
        />

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

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

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

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

</style>
