<template>
  <div class="task-detail">
    <div class="task-con">{{ taskInfo.name }}</div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { computed, watch, ref } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const taskDetail = computed(() => store.state.task.taskDetail); // 任务名称
const taskInfo = ref({});
const sessionTaskDetail = sessionStorage.getItem('taskDetail');

if (sessionTaskDetail) {
  taskInfo.value = JSON.parse(sessionTaskDetail);
}

// 监听任务信息
watch(taskDetail, newVal => {
  taskInfo.value = newVal;
  store.commit('task/setTaskDetail', newVal);
});
</script>

<style scoped>
.task-detail {
  width: 100%;
  height: 100%;
  padding: 15px 12px;
}

.task-con {
  width: 100%;
  height: 500px;
  max-height: 100%;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #cccccc;
}
</style>
