<template>
  <div>
    <xy-dialog ref="dialog" :width="70" :is-show.sync="isShow" :type="'form'" :title="type === 'add' ? '新增日程' : '编辑日程'"
      :form="form" :rules='rules' @submit="submit">
      <template v-slot:type>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>日程类型：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.type" @change="changeType" placeholder="请选择日程类型" clearable style="width: 100%;">
              <el-option v-for="item in type_options" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-if="form.type===1||form.type===2" v-slot:course_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>课程：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.course_id" :disabled="canSelect" @change="changeCourse" placeholder="请选择课程"
              clearable style="width: 100%;">
              <el-option v-for="item in course_options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-if="form.type===2" v-slot:course_content_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>课表：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.course_content_id" @change="changeCourseContent" placeholder="请选择课表" clearable
              style="width: 100%;">
              <el-option v-for="item in course_content_options" :key="item.id" :label="item.theme" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </template>

      <template v-slot:title>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>标题：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.title" placeholder="请输入标题" clearable style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-if="form.type===4" v-slot:url>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>资讯链接：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.url" placeholder="请输入跳转链接,例：/news/2025-07-02/146.html" clearable
              style="width: 100%;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:date>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>日期：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="form.date"  style="width: 100%;"
             type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期时间" align="right">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:start_time>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>开始时间：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="form.start_time"
             style="width: 100%;"
              value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
             type="datetime" placeholder="选择日期时间" align="right"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:end_time>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>截止时间：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="form.end_time"
             style="width: 100%;"
            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
            type="datetime" placeholder="选择日期时间" align="right"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>内容：
          </div>
          <div class="xy-table-item-content">
            <my-tinymce v-if="showTinymce" @input="saveContent" :value="form.content"></my-tinymce>

          </div>
        </div>
      </template>
    </xy-dialog>

  </div>
</template>

<script>
  import {
    show,
    save
  } from "@/api/calendars/index.js"
  import {
    index as courseIndex
  } from "@/api/course/index.js"
  import {
    index as courseContentIndex
  } from "@/api/course/courseContent.js"
  export default {
    components: {

    },
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        showTinymce: false,
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        type_options: [{
          id: 1,
          value: '课程'
        }, {
          id: 2,
          value: '课表'
        }, {
          id: 3,
          value: '自定义事件'
        }, {
          id: 4,
          value: '资讯'
        }],
        course_options: [],
        canSelect: false,
        form: {
          type: '',
          course_id: '',
          course_content_id: '',
          title: '',
          url: '',
          date: '',
          start_time: '',
          end_time: '',
          content: '',
        },
        rules: {
          title: [{
            required: true,
            message: '请输入标题'
          }],
          start_time: [{
            required: true,
            message: '请选择开始时间'
          }],
          end_time: [{
            required: true,
            message: '请选择结束时间'
          }],
        }
      }
    },
    created() {
      this.getCourseList()
    },
    methods: {
      async getCourseList() {
        const res = await courseIndex({
          page: 1,
          page_size: 999,
          sort_name: 'id',
          sort_type: 'DESC',
          show_relation: ['image']
        })
        this.course_options = res.data
      },
      async getCourseContentList(course_id) {
        const res = await courseContentIndex({
          page: 1,
          page_size: 999,
          filter: [{
            key: 'course_id',
            op: 'like',
            value: course_id
          }]
        })
        if (res.data.length < 1) {
          this.$Message.warning("该课程暂无课表")
          return
        }
        this.course_options = res.data
      },
      saveContent(e) {
        this.form.content = e
      },
      changeType(e) {
        console.log("type", e)

      },
      changeCourse(e) {
        console.log("course", e)
        if (e && e === 2) {
          this.form.course_content_id = ''
          this.getCourseContentList(e)
        }
      },
      changeCourseContent() {

      },
      submit() {
        if (this.id) {
          this.form.id = this.id
        }
        if (this.type == 'add') {
          this.form.id = ''
        }
        save({
          ...this.form
        }).then(res => {
          this.$message({
            type: 'success',
            message: this.type === 'add' ? '新增成功' : '编辑成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      },

      getDetail() {
        show({
          id: this.id,
          show_relation: ['image']
        }).then(res => {
          this.form = this.base.requestToForm(res, this.form)
          this.showTinymce = true
        })
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor') {
            this.getDetail()
          }else{
            this.showTinymce = true
          }
        } else {
          this.id = ''
          this.showTinymce = false
          this.form = {
            type: '',
            course_id: '',
            course_content_id: '',
            title: '',
            url: '',
            date: '',
            start_time: '',
            end_time: '',
            content: '',
          }
          this.$refs['dialog'].reset()
        }
      },
    }

  }
</script>

<style scoped lang="scss">
  ::v-deep .content {
    flex-basis: 100%;
  }
</style>
