<template>
  <div class="main" v-if="entity.tongzhi_id">
    <div class="title" v-if="entity.content?.content">
      {{ entity.content.content }}
    </div>
    <div class="title" v-if="entity.push_info?.clazz_id">
      {{ getTongzhiTitle(entity.tongzhi_type) }}
    </div>
    <div class="van-cell" @click="onClick">
      <template v-if="entity.push_info?.clazz_id">
        <div class="line">
          <span>排课名称</span>
          <span>{{ entity.push_info.clazz_name }}</span>
        </div>
        <div class="line">
          <span>上课时间</span>
          <span
            >{{ entity.push_info.start_from.replace("T", " ") }} ~
            {{
              entity.push_info.end_by.split("T")[1] || entity.push_info.end_by
            }}</span
          >
        </div>
        <div class="line">
          <span>上课老师</span>
          <span>{{ entity.push_info.teacher_name }}</span>
        </div>
      </template>

      <div class="line" v-if="entity.content?.daka_id">
        <span>打卡周期：</span>
        <span>{{ get_daka_period(entity.content) }}</span>
      </div>
      <div class="line" v-if="entity.push_info?.course_name">
        <span>课程体系：</span>
        <span
          >{{ entity.push_info?.course_name }}({{
            entity.push_info?.course_section_name
          }})</span
        >
      </div>
      <div class="line foot">
        <span>{{ entity.content?.from_user }}</span>
        <span>{{ formatDateTime(entity.content?.created_at) }}</span>
      </div>
    </div>

    <div class="footer">
      <Button @click="gotoDetail()" type="primary" size="large"
        >查看详情</Button
      >
    </div>
  </div>
  <div v-else-if="!loading">未找到指定的消息通知。</div>
</template>
<script lang="ts" setup>
import useLoading from "~/store/loading";
import useTongzhi from "~/store/tongzhi";
import { computed, onBeforeMount, onBeforeUnmount } from "vue";
import { showFailToast } from "vant";
import { useRouter } from "vue-router";
import { NotifyTypes, Tongzhi, TongzhiContent, TongzhiStatuses } from "~/types";
import { DateFormatter, formatDate } from "~/utils";
import { Button } from "vant";

const router = useRouter();

const { store, read, setRead } = useTongzhi();
const { loading } = useLoading();

const props = defineProps({
  params: {
    type: Object,
  },
});

onBeforeMount(async () => {
  let { id } = props.params || {};
  if (id) {
    await read(id);
    if (!store.current) {
      showFailToast({
        message: "没有找到指定的通知！",
        duration: 1000,
        onClose() {
          router.replace("/tongzhi");
        },
      });
    } else {
      if (store.current.tongzhi_status === TongzhiStatuses.Unread) {
        await setRead(id);
      }
    }
  } else {
    showFailToast({
      message: "没有通知ID！",
      duration: 1000,
      onClose() {
        router.replace("/tongzhi");
      },
    });
  }
});

onBeforeUnmount(() => {
  store.current = {} as Tongzhi;
});

const entity = computed(() => store.current);

const onClick = () => {
  let { jihua_id, lianxi_id, daka_id, ref_id, serial, comment_id, clazz_id } =
    getIds(entity.value);

  let comment_param = comment_id ? "&comment_id=" + comment_id : "";
  let serial_param = serial ? "&serial=" + serial : "";
  let ref_param = ref_id ? "&ref_id=" + ref_id : "";
  switch (entity.value.tongzhi_type) {
    case NotifyTypes.JihuaCreate:
    case NotifyTypes.JihuaUpdate:
    case NotifyTypes.TeacherCommentJihua:
      router.push("/daka");
      break;
    case NotifyTypes.DakaCreate:
    case NotifyTypes.DakaUpdate:
    case NotifyTypes.TeacherCommentDaka:
    case NotifyTypes.StudentCommentDaka:
      router.push(
        "/daka/detail?id=" + daka_id + "&from_tongzhi=1" + comment_param
      );
      break;
    case NotifyTypes.DakaDelete:
      router.push("/daka");
      break;
    case NotifyTypes.TeacherCommentPiyue:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}${serial_param}${comment_param}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.JihuaDelete:
      router.push("/daka");
      break;
    case NotifyTypes.LianxiCreate:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.LianxiDelete:
      if (daka_id) {
        router.push(`/daka/detail?id=${daka_id}`);
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.StudentCommentJihua:
      router.push("/daka");
      break;
    case NotifyTypes.PiyueCreate:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.StudentCommentPiyue:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}${serial_param}${comment_param}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.ResourceNoteGroupCreate:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}${ref_param}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.StudentRegister:
      router.push("/teacher/students");
      break;
    case NotifyTypes.StudentRegisterApproved:
      router.back();
      break;
    case NotifyTypes.TeacherRegister:
      router.push("/admin/teachers");
      break;
    case NotifyTypes.TeacherRegisterApproved:
      router.back();
      break;
    case NotifyTypes.ClazzCreateOrUpdate:
    case NotifyTypes.TeacherCommentClazz:
      let {
        push_info: { start_from, comment_id },
      } = entity.value;
      let url =
        "/clazz?clazz_id=" + clazz_id + "&start_from=" + start_from;
      if (comment_id) {
        url += "&comment_id=" + comment_id;
      }
      router.push(url);
      break;
    case NotifyTypes.ClazzDelete:
      router.push("/clazz");
      break;
  }
};

const getTongzhiTitle = (tongzhi_type) => {
  return {
    [NotifyTypes.ClazzCreateOrUpdate]: "上课时间确定通知",
    [NotifyTypes.ClazzDelete]: "排课预约取消通知",
    [NotifyTypes.TeacherCommentClazz]: "排课留言通知",
  }[tongzhi_type];
};

const get_daka_period = ({
  daka_start_date,
  daka_duration_days,
}: TongzhiContent) => {
  let end = new Date(daka_start_date);
  end.setDate(end.getDate() + daka_duration_days);
  return formatDate(daka_start_date) + " ~ " + formatDate(end);
};

const formatDateTime = (dt: Date | string) =>
  formatDate(dt, DateFormatter.DateTime);

const getIds = ({ content, push_info }: Tongzhi) => {
  let { ref_id, serial, comment_id } = push_info || {};
  let { jihua_id, lianxi_id, daka_id, clazz_id } = content;
  if (!(jihua_id || lianxi_id || daka_id)) {
    if (push_info) {
      jihua_id = push_info.jihua_id;
      lianxi_id = push_info.lianxi_id;
      daka_id = push_info.daka_id;
      clazz_id = push_info.clazz_id;
    }
  }
  return {
    jihua_id,
    lianxi_id,
    daka_id,
    ref_id,
    serial,
    comment_id,
    clazz_id,
  };
};

const gotoDetail = () => {
  let tongzhi = store.current;

  let { jihua_id, lianxi_id, daka_id, ref_id, serial, comment_id, clazz_id } =
    getIds(tongzhi);

  let comment_param = comment_id ? "&comment_id=" + comment_id : "";
  let serial_param = serial ? "&serial=" + serial : "";
  let ref_param = ref_id ? "&ref_id=" + ref_id : "";
  switch (tongzhi.tongzhi_type) {
    case NotifyTypes.JihuaCreate:
    case NotifyTypes.JihuaUpdate:
    case NotifyTypes.TeacherCommentJihua:
      router.push("/daka");
      break;
    case NotifyTypes.DakaCreate:
    case NotifyTypes.DakaUpdate:
    case NotifyTypes.TeacherCommentDaka:
    case NotifyTypes.StudentCommentDaka:
      router.push(
        "/daka/detail?id=" + daka_id + "&from_tongzhi=1" + comment_param
      );
      break;
    case NotifyTypes.DakaDelete:
      router.push("/daka");
      break;
    case NotifyTypes.TeacherCommentPiyue:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}${serial_param}${comment_param}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.JihuaDelete:
      router.push("/daka");
      break;
    case NotifyTypes.LianxiCreate:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.LianxiDelete:
      if (daka_id) {
        router.push(`/daka/detail?id=${daka_id}`);
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.StudentCommentJihua:
      router.push("/daka");
      break;
    case NotifyTypes.PiyueCreate:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.StudentCommentPiyue:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}${serial_param}${comment_param}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.ResourceNoteGroupCreate:
      if (daka_id) {
        router.push(
          `/daka/piyue?daka_id=${daka_id}&lianxi_id=${lianxi_id}${ref_param}&from_tongzhi=1`
        );
      } else {
        router.push("/daka");
      }
      break;
    case NotifyTypes.StudentRegister:
      router.push("/teacher/students");
      break;
    case NotifyTypes.StudentRegisterApproved:
      router.back();
      break;
    case NotifyTypes.TeacherRegister:
      router.push("/admin/teachers");
      break;
    case NotifyTypes.TeacherRegisterApproved:
      router.back();
      break;
    case NotifyTypes.ClazzCreateOrUpdate:
    case NotifyTypes.TeacherCommentClazz:
      let {
        push_info: { start_from, comment_id },
      } = tongzhi;
      let url =
        "/clazz?clazz_id=" + clazz_id + "&start_from=" + start_from;
      if (comment_id) {
        url += "&comment_id=" + comment_id;
      }
      router.push(url);
      break;
    case NotifyTypes.ClazzDelete:
      router.push("/clazz");
      break;
  }
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  overflow: auto;
  background: #ffffff;
  position: relative;

  .title {
    text-align: center;
    padding: 0.25rem;
  }

  .van-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
    overflow: hidden;
    color: var(--van-cell-text-color);
    font-size: var(--van-cell-font-size);
    line-height: var(--van-cell-line-height);
    background: var(--van-cell-background);

    .van-hairline--bottom {
      margin: 0.1rem 0;
    }

    .line {
      color: #9e9e9e;
      display: flex;
      justify-content: space-between;
      font-size: 0.24rem;
    }
  }

  .footer {
    position: absolute;
    background: #ffffff;
    height: 2rem;
    bottom: 0;
    padding: 0.5rem;
    width: 100%;
    text-align: center;
  }
}
</style>
