<template>
  <div class="main">
    <van-form @submit="update" class="form">
      <van-field v-model="store.current.course_name" readonly clickable right-icon="arrow"
                 @click="pickCourse" label="课程体系" required colon />
      <van-field v-model="store.current.section_name" label="章节" required colon />
      <van-field v-model="store.current.course_category_name" is-link readonly required colon
                 label="课程体系类型" placeholder="选择课程体系类型" @click="showPicker = true" />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
            :columns="categories"
            @cancel="showPicker = false"
            @confirm="onPick"
        />
      </van-popup>
      <van-field v-model="store.current.course_text" label="说明" colon required autosize rows="3"
                 type="textarea" placeholder="请输入课程说明" />
      <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-field label="图片" readonly colon></van-field>
      <div class="uploader">
        <photo-uploader native :show-upload="!store.qupuList.some(x => x.hty_resource_id)" v-model="store.qupuList" multiple
                      :max-count="9" :do-upload="false"/>
      </div>
      <van-field label="视频" readonly colon placeholder="标星的为示范曲" input-align="right"/>
      <div class="uploader">
        <upload-progress>
          <multi-video-uploader :can-set-shifan="true" v-model="store.videoList" @update:shifan="clearShifan('audio')" />
        </upload-progress>
      </div>
      <template v-if="store.audioList.length">
        <van-field label="音频" readonly colon placeholder="标星的为示范曲" input-align="right"/>
        <div class="uploader">
          <audio-card :can-set-shifan="true" :model-value="store.audioList" @update:shifan="clearShifan('video')"></audio-card>
        </div>
      </template>
      <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, Uploader, Popup, Picker, Cell, Tag} from 'vant';
import UploadProgress from '~/components/upload-progress.vue';
import MultiVideoUploader from '~/components/multi-video-uploader.vue';
import PhotoUploader from '~/components/photo-uploader.vue';
import {useRouter} from "vue-router";
import useCourseSection from "~/store/qumu-section";
import useUser from '~/store/user';
import useLoading from "~/store/loading";
import useCourseCategory from "~/store/qumu-category";
import AudioCard from "~/components/audio-card.vue";
import {HtySuperRoles, PickTargets} from "~/types";


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

    const router = useRouter();
    const usingQC = useCourseCategory();
    const {store, read, update, check_is_in_use} = useCourseSection(router);
    const usingUser = useUser();
    const showPicker = ref(false)
    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)
    })
    const pickCourse = () => {
      store.hanging = true;
      router.push('/course?picking=1')
    }

    onBeforeMount(async () => {
      await read(params?.id, true)
      usingUser.set_editing(true)
      await usingQC.query()
    });


    const categories = computed(() => usingQC.store.list.map(x => ({text: x.category_name, value: x.category_key})))

    const onPick = ({selectedOptions}: any) => {
      let [{text, value}] = selectedOptions;
      store.current.course_category_key = value
      store.current.course_category_name = text
      showPicker.value = false;
    };

    const clearShifan = (target: "video" | "audio") => {
      store[`${target}List`].forEach(r => r.is_shifan = false);
    }

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

    return {
      store, update, pickCourse, loading, showPicker, onPick, categories, clearShifan, pickTeachers, 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>
