<template>
  <div class="main">
    <van-form @submit="update" class="form">
      <van-field v-model="store.current.group_name" label="分组名称" required colon />
      <van-cell is-link @click="pickCourseSection" title="课程"
                title-class="van-field__label van-field__label--required" 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>
      <van-cell title="共享给老师" v-else-if="store.current.teachers?.vals?.length"
                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>
      <van-cell title-class="van-field__label" colon title="开放给机构">
        <template #value>
          <van-switch v-model="store.current.org_visible" size="24" />
        </template>
      </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, onBeforeMount, ref} from 'vue';
import {Button, Dialog, Field, Form, Image, Loading, Toast, Popup, Picker, Cell, Tag, Switch} from 'vant';
import {useRouter} from "vue-router";
import useCourseGroup from "~/store/qumu-section-group";
import useUser from '~/store/user';
import useLoading from "~/store/loading";
import AudioCard from "~/components/audio-card.vue";
import {HtySuperRoles, PickTargets} from "~/types";


export default defineComponent({
  name: "course-section-group-edit",
  components: {
    AudioCard,
    [Loading.name]: Loading,
    [Dialog.name]: Dialog,
    [Toast.name]: Toast,
    [Button.name]: Button,
    [Image.name]: Image,
    [Form.name]: Form,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Cell.name]: Cell,
    [Tag.name]: Tag,
    [Switch.name]: Switch
  },
  props: {
    params: {}
  },
  setup({params}: any) {

    const router = useRouter();
    const {store, read, update} = useCourseGroup(router);
    const usingUser = useUser();
    const {loading} = useLoading();

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


    onBeforeMount(async () => {
      if (params?.id && params?.id !== store.current.id) {
        await read(params?.id)
      }
      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, update, loading, pickTeachers, pickCourseSection, canShare
    };
  }

});
</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>
