<template>
  <div class="main">
    <div class="body">
      <h1 class="title">{{ entity?.group_name }}</h1>
      <div class="desc" v-if="entity?.course_sections?.length">
        <h2>课程</h2>
        <div>{{entity?.course_sections?.map(v => v.course_name + "(" + v.section_name + ")").join(", ")}}</div>
      </div>
      <div class="desc" v-if="entity?.teachers?.vals?.length">
        <h2>共享给老师</h2>
        <div>{{entity?.teachers?.vals?.map(v => v.teacher_name).join(", ")}}</div>
      </div>
    </div>
    <div class="footer" v-if="isMine">
      <van-button type="primary" @click="$router.push('/course/group/edit?id=' + entity?.id)">编辑</van-button>
      <van-button type="danger" @click="onRemove()">删除</van-button>
    </div>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, onBeforeMount, onBeforeUnmount, reactive, ref, watch} from 'vue';
import {Button, Dialog, Loading, Switch, Toast, showConfirmDialog} from 'vant';
import {useRouter} from "vue-router";
import useCourseGroup from "~/store/qumu-section-group";
import useUser from "~/store/user";
import useSupervisor from "~/store/supervisor";


export default defineComponent({
  name: "course-section-group-detail",
  components: {
    [Loading.name]: Loading,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
    [Button.name]: Button,
    [Switch.name]: Switch,
},
  props: {
    params: {} as any
  },
  setup(props: any) {
    const router = useRouter();
    const {store, read, remove, reset} = useCourseGroup(router);
    const usingUser = useUser();
    const usingSupervisor = useSupervisor()

    const init = async () => {
      store.hanging = false;
      await read(props.params?.id);
      await usingSupervisor.getSubsidiaries()
    }

    watch(() => props.params, async (cur, prev) => {
        if (cur?.id !== prev?.id) {
            await init()
        }
    })

    onBeforeMount(init)

    const isMine = computed(() => {
      return store.current.created_by === usingUser.store.current.hty_id;
    })

    const onRemove = async () => {
      showConfirmDialog({
        title: "删除课节",
        message: "操作不可撤销，确认删除当前课节？"
      }).then(() => {
         remove(store.current.id)
      });
    };

    const entity = computed(() => store.current);


    return {
      entity, onRemove, isMine
    };
  }

});
</script>

<style scoped lang="less">
  .main {

    .body {
      height: calc(100% - 1.06rem);
      padding: 0.32rem 0;
      overflow: auto;
    }

    .title {
      text-align: center;
      font-size: 0.48rem;
      margin-block-start: 0;
    }

    h2 {
      font-size: 0.32rem;
    }

    .desc {
      padding: 0 0.32rem;
      
      div {
        font-size: 0.24rem;
        color: #555;
        line-height: 1.5;
      }
    }

    .footer {
      position: absolute;
      bottom: 0.16rem;
      width: 100%;
      padding: 0.01rem 0.32rem;
      display: flex;
      align-content: center;
      justify-content: space-between;

      button {
        width: 32%;
      }

      &.single {
        justify-content: center;

        button {
          width: 90%;
        }
      }
    }
  }
</style>
