<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
                :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div>
        <el-card shadow="never">
          <template #header>
            <el-page-header @back="Cancel">
              <template #content>
                <span class="text-large font-600 mr-3"> 查看学习计划 </span>
              </template>
            </el-page-header>
          </template>
          <div class="plan-detail-main">
            <div v-for="plan in planLists" class="plan-list">
              <div class="label">{{ plan.label }}</div>
              <div v-if="!plan.isArray" class="value">{{ plan.value }}</div>
              <div v-else class="value">
                <div v-for="content in plan.value">{{ content }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { getPlanById } from '@/api/study/studyPlan';
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const Cancel = () => {
  proxy?.$tab.closePage(proxy?.$route).then(() => {
    proxy?.$router.replace({
      path: '/study/studyPlan'
    });
  });
};
const planInfo = ref<any>({
  planName: '',
  date: [],
  target: '',
  courseNames: []
});
const planLists = computed(() => {
  return [
    {
      label: '计划名称：',
      value: planInfo.value.planName
    },
    {
      label: '计划执行时间：',
      value: planInfo.value.date.join('-')
    },
    {
      label: '学习目标：',
      value: planInfo.value.target
    },
    {
      label: '学习内容：',
      isArray: true,
      value: planInfo.value.courseNames
    }
  ];
});
const getPlanInfo = async () => {
  let res = await getPlanById(route.query.id as string)
  if(res.code != 200){
    ElNotification({
      title:'提示',
      message:res.msg,
      type:'error'
    })
  }
  planInfo.value = {
    planName: res.data.planName,
    date: [res.data.startTime, res.data.endTime],
    target: res.data.studyTarget,
    courseNames: res.data.courseNames
  };
};
onMounted(() => {
  if (route.query.id) {
    getPlanInfo();
  }
});
</script>

<style lang="scss" scoped>
.plan-detail-main {
  line-height: 32px;
  font-size: 14px;

  .plan-list {
    display: flex;
    align-items: flex-start;
    &:not(:first-child){
      margin-top: 10px;
    }

    .label {
      width: 150px;
      text-align: right;
      padding-right: 12px;
      font-weight: 600;
    }

    .value {
      flex: 1;
    }
  }
}
</style>
