<template>
  <div class="main">
    <van-form @submit="onSubmit">
      <van-field v-model="start_date" readonly clickable right-icon="arrow"
                 @click="state.showCalendar = true"
                 label="计划起始" required colon />
      <van-field v-model="end_date" readonly disabled label="计划截止" required colon />
      <van-field v-model="store.current.student_name" readonly clickable right-icon="arrow"
                 @click="pickStudent" 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-field v-model="store.current.beizhu" label="备注" colon autosize rows="3"
                 type="textarea" placeholder="请输入备注" />
      <van-calendar v-model:show="state.showCalendar" @confirm="onChangeDate" :min-date="state.minDate" color="#1989fa" />
      <div class="footer">
        <van-button block type="primary" :disabled="!!loading" @click="onSubmit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, onMounted } from "vue";
import { Button, Calendar, Field, Form, Tag, Cell } from 'vant';
import { formatDate, getWeekEnd, DateFormatter } from "~/utils";
import { useRouter } from 'vue-router';
import useJihua from "~/store/jihua";
import useUser from '~/store/user';
import useLoading from "~/store/loading";
import {PickTargets} from '~/types'


export default defineComponent({
  name: "teacher-jihua-add",
  components: {
    [Calendar.name]: Calendar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Tag.name]: Tag,
    [Cell.name]: Cell
  },
  setup() {
    const router = useRouter();
    const { set_editing } = useUser();
    const { store, create, reset } = useJihua();
    const { loading } = useLoading();
    reset();
    const start_date = computed(() => formatDate(store.current.start_date))
    const end_date = computed(() => formatDate(store.current.end_date))

    const state = reactive({
      showCalendar: false,
      minDate: new Date(2021,0,1),
    });

    const onSubmit = async () => {
      let id = await create();
      if(id) {
        await router.replace(`/teacher/jihua/detail?id=${id}`)
      }
    };

    onMounted(() => {
      set_editing(true);
    })

    const onChangeDate = (date: string) => {
      store.current.start_date = formatDate(date, DateFormatter.DateTimeSave);
      store.current.end_date = getWeekEnd(date, DateFormatter.DateTimeSave);
      state.showCalendar = false;
    };

    const pickStudent = () => {
      store.hanging = true;
      router.push('/student')
    }

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

    return {
      state, store, start_date, end_date, onSubmit, onChangeDate, pickStudent, pickCourseSection, loading
    };
  }
});
</script>

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

    .footer {
      margin-top: 0.3rem;
      padding: 0 5%;

    }
  }
</style>
