<template>
  <div class="main">
    <van-form @submit="onSubmit">
      <template v-if="canEdit">
        <van-field v-if="!store.current.is_yanqi" v-model="start_date" readonly clickable right-icon="arrow"
                  @click="state.showCalendar = true" label="计划起始" required colon />
        <van-field v-else v-model="start_date" readonly disabled label="计划起始" required colon />
        <van-field v-model="end_date" readonly disabled label="计划截止" required colon />
        <template v-if="store.current.yanqi_start_date">
          <van-field v-model="yanqi_start_date" readonly disabled label="延期起始" colon />
          <van-field v-model="yanqi_end_date" readonly disabled label="延期截止" colon />
        </template>
        <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="课程" clickable
                  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" @click="onSubmit">提交</van-button>
        </div>
      </template>
      <template v-else>
        <van-cell readonly title="计划起始" :value="start_date" colon />
        <van-cell :value="end_date" readonly title="计划截止" colon />
        <van-cell :value="store.current.student_name" readonly title="学生" colon />
        <van-cell 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-field v-model="store.current.beizhu" label="备注" colon autosize rows="3"
                 type="textarea" placeholder="请输入备注" />
        <div class="footer">
          <van-button block type="default" :disabled="!!loading" @click="$router.back()">返回</van-button>
        </div>
      </template>
    </van-form>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, reactive, onBeforeMount} from "vue";
import {Button, Calendar, Cell, Field, Form, Tag} from 'vant';
import {DateFormatter, formatDate, getWeekEnd} 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: "jihua-jihua-edit",
  components: {
    [Calendar.name]: Calendar,
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Tag.name]: Tag,
    [Cell.name]: Cell
  },
  props: {params: {}},
  setup({params}: any) {
    const { set_editing } = useUser();
    const router = useRouter();
    const {store, read, update} = useJihua();
    const { loading } = useLoading();
    read(params?.id)

    const start_date = computed(() => formatDate(store.current.start_date))
    const end_date = computed(() => formatDate(store.current.end_date))

    const yanqi_start_date = computed(() => formatDate(store.current.yanqi_start_date))
    const yanqi_end_date = computed(() => formatDate(store.current.yanqi_end_date))

    const courses = computed(() => store.current.course_sections.map(x => `${x.course_name}(${x.section_name})`).join(','))

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

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

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

    const canEdit = computed(() => !store.current.lianxi_count)

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

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

    onBeforeMount(() => {
      set_editing(true)
    })

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

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

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

    }
  }
</style>
