<template>
    <div class="main">
        <van-form @submit="create" class="form">
            <van-field v-model="store.current.group_name" label="分组名称" colon required placeholder="请输入分组名称"/>
          <van-cell is-link @click="pickCourseSection" title="课程"
                    title-class="van-field__label" colon>
            <div v-for="course in store.current.course_sections">
              <van-tag type="primary" size="medium">
                {{ course.course_name }}({{ course.section_name }})
              </van-tag>
            </div>
          </van-cell>
            <van-cell is-link @click="pickTeachers" title="共享给老师" v-if="canShare"
                    title-class="van-field__label" colon>
              <div v-for="teacher in store.current.teachers?.vals">
                <van-tag type="primary" size="medium">
                  {{ teacher.teacher_name }}
                </van-tag>
              </div>
            </van-cell>
          <div class="foot">
                <van-button block class="btn-submit" :disabled="!!loading" type="primary" native-type="submit">保存
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="ts">
import {computed, defineComponent, onBeforeUnmount, onMounted, ref} from 'vue';
import {Button, Dialog, Field, Form, Image, Loading, Toast, Popup, Picker, Cell, Tag} from 'vant';
import UploadProgress from '~/components/upload-progress.vue';
import MultiVideoUploader from '~/components/multi-video-uploader.vue';
import {useRouter} from "vue-router";
import useCourseGroup from "~/store/qumu-section-group";
import useUser from '~/store/user';
import PhotoUploader from '~/components/photo-uploader.vue';
import useLoading from "~/store/loading";
import {HtySuperRoles, PickTargets} from "~/types";

export default defineComponent({
    name: "course-section-group-add",
    components: {
        [Loading.name]: Loading,
        [Dialog.name]: Dialog,
        [Toast.name]: Toast,
        [Button.name]: Button,
        [Image.name]: Image,
        [Form.name]: Form,
        [Field.name]: Field,
        [UploadProgress.name]: UploadProgress,
        [MultiVideoUploader.name]: MultiVideoUploader,
        [PhotoUploader.name]: PhotoUploader,
        [Popup.name]: Popup,
        [Picker.name]: Picker,
        [Cell.name]: Cell,
        [Tag.name]: Tag
    },
    setup({}) {
        const {loading} = useLoading();
        const router = useRouter();
        const {store, create, reset} = useCourseGroup(router);
        const usingUser = useUser();

        const canShare = computed(() => {
          let {roles, supervisor} = usingUser.store.current;
          return roles?.some(r => r.role_key === HtySuperRoles.SUPERVISOR) || !!supervisor
        })

        onMounted(() => {
          if (!store.hanging) {
            reset();
          } else {
            store.hanging = false;
          }
          usingUser.set_editing(true)
        })

      const pickCourseSection = () => {
        store.hanging = true;
        router.push("/course/section/pick?target=" + PickTargets.COURSE_GROUP);
      }

      const pickTeachers = () => {
          store.hanging = true;
          router.push("/teacher/subsidiaries?multiple=1&target=" + PickTargets.COURSE_GROUP)
      }

        return {
            store, create, loading, canShare, pickTeachers, pickCourseSection
        };
    }

});
</script>

<style scoped lang="less">
.main {
  background: #FFFFFF;
  overflow: auto;

  .form {

    .uploader {
      padding: 0.16rem 0.32rem;
    }

    .foot {
      padding: 0.32rem;
      text-align: center;

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