<template>
  <div class="admin-calendar">
    <div class="admin-header">
      <i class="el-icon-date"></i> 课程日历管理
    </div>
    <div class="admin-main">
      <!-- 数据拉取区 -->
      <div class="admin-panel" style="max-width: 350px;">
        <div class="admin-panel-title"><i class="el-icon-download"></i> 数据拉取区</div>
        <el-form label-width="90px" size="small">
          <el-form-item label="数据类型">
            <el-select v-model="dataType" @change="onTypeChange" placeholder="请选择类型">
              <el-option label="课程" value="course" />
              <el-option label="活动" value="activity" />
              <el-option label="移动课堂" value="workshop" />
            </el-select>
          </el-form-item>
          <el-form-item label="已有数据">
            <el-select v-model="dataId" @change="onDataChange" placeholder="请选择数据">
              <el-option v-for="item in dataList" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
          </el-form-item>
          <div class="text-secondary" style="font-size:13px;min-height:20px;">{{ dataDateInfo }}</div>
          <el-button type="primary" icon="el-icon-link" style="width:100%;margin-top:10px;"
            @click="fetchData">拉取并关联</el-button>
        </el-form>
        <el-button type="success" icon="el-icon-plus" style="width:100%;margin-top:10px;"
          @click="openCreateModal">新建日历事件</el-button>
      </div>
      <!-- 日历预览区 -->
      <div class="admin-panel" style="min-width:0;flex:2;">
        <div class="admin-panel-title"><i class="el-icon-view"></i> 日历预览区</div>
        <el-calendar v-model="calendarDate">
          <template slot="dateCell" slot-scope="{date}">
            <div class="cell-content">
              <span>{{ date.getDate() }}</span>
              <div v-for="ev in eventsForDate(date)" :key="ev._id" class="event-dot" :title="ev.title"
                @click.stop="showEvent(ev)"></div>
            </div>
          </template>
        </el-calendar>
        <div class="mt-4">
          <h6 class="mb-2"><i class="el-icon-menu"></i> 当月事件列表</h6>
          <el-empty v-if="monthEvents.length === 0" description="本月暂无事件" />
          <el-timeline v-else>
            <el-timeline-item v-for="(ev, idx) in monthEvents" :key="ev._id" :timestamp="ev.start | formatDateTime"
              :color="isExpired(ev) ? '#F56C6C' : '#409EFF'">
              <div>
                <b>{{ ev.title }}</b>
                <el-tag size="mini" style="margin-left:8px;">{{ typeText(ev.className) }}</el-tag>
                <span style="font-size:13px;"> {{ ev.start | formatDateTime }} ~ {{ ev.end | formatDateTime }}</span>
                <span v-if="ev.location" style="margin-left:8px;"><i class="el-icon-location-outline"></i>
                  {{ ev.location }}</span>
                <el-tag v-if="ev.expire && ev.expire !== 'none'" size="mini" type="warning"
                  style="margin-left:8px;">到期后：{{ expireText(ev.expire) }}</el-tag>
              </div>
              <div style="margin-top:4px;">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="editEvent(idx)">编辑</el-button>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
    <!-- 新建/编辑事件弹窗 -->
    <el-dialog :title="modalTitle" :visible.sync="modalVisible" width="420px">
      <el-form :model="modalForm" label-width="80px" size="small">
        <el-form-item label="事件类型">
          <el-select v-model="modalForm.type">
            <el-option label="课程" value="course" />
            <el-option label="活动" value="activity" />
            <el-option label="移动课堂" value="workshop" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="modalForm.title" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="modalForm.start" type="datetime" value-format="yyyy-MM-ddTHH:mm" />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="modalForm.end" type="datetime" value-format="yyyy-MM-ddTHH:mm" />
        </el-form-item>
        <el-form-item label="地点">
          <el-input v-model="modalForm.location" />
        </el-form-item>
        <el-form-item label="主讲/负责人">
          <el-input v-model="modalForm.teacher" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="modalForm.description" :rows="2" />
        </el-form-item>
        <el-form-item label="到期后操作">
          <el-select v-model="modalForm.expire">
            <el-option label="无" value="none" />
            <el-option label="标记为已过期" value="mark" />
            <el-option label="自动删除" value="delete" />
            <el-option label="发送提醒" value="remind" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="modalVisible=false">取消</el-button>
        <el-button type="primary" @click="saveEvent">保存</el-button>
      </div>
    </el-dialog>
    <!-- 事件详情弹窗 -->
    <el-dialog title="事件详情" :visible.sync="eventDetailVisible" width="350px" :show-close="true">
      <div v-if="eventDetail">
        <b>{{ eventDetail.title }}</b>
        <el-tag size="mini" style="margin-left:8px;">{{ typeText(eventDetail.className) }}</el-tag>
        <div style="margin:8px 0 4px 0;">
          <span><i class="el-icon-time"></i> {{ eventDetail.start | formatDateTime }} ~
            {{ eventDetail.end | formatDateTime }}</span>
        </div>
        <div v-if="eventDetail.location"><i class="el-icon-location-outline"></i> {{ eventDetail.location }}</div>
        <div v-if="eventDetail.teacher"><i class="el-icon-user"></i> {{ eventDetail.teacher }}</div>
        <div v-if="eventDetail.description"><i class="el-icon-document"></i> {{ eventDetail.description }}</div>
        <div v-if="eventDetail.expire && eventDetail.expire !== 'none'" style="margin-top:6px;">
          <el-tag size="mini" type="warning">到期后：{{ expireText(eventDetail.expire) }}</el-tag>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="eventDetailVisible=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let idSeed = 1000;
  const mockData = {
    course: [{
        id: 101,
        title: '2025产业加速营',
        start: '2025-06-04T09:00',
        end: '2025-06-04T17:00',
        location: 'A101',
        teacher: '王教授',
        description: '智能制造专题'
      },
      {
        id: 102,
        title: '2025人工智能专题课程',
        start: '2025-06-17T09:00',
        end: '2025-06-19T17:00',
        location: 'A201',
        teacher: 'AI专家组',
        description: 'AI理论与实操'
      }
    ],
    activity: [{
        id: 201,
        title: '校友企业参访',
        start: '2025-06-10T13:30',
        end: '2025-06-10T17:00',
        location: '高新区',
        teacher: '李总监',
        description: '新能源企业参访'
      },
      {
        id: 202,
        title: '校友论坛',
        start: '2025-06-20T14:00',
        end: '2025-06-20T17:30',
        location: '报告厅',
        teacher: '特邀嘉宾',
        description: '数字经济新机遇'
      }
    ],
    workshop: [{
      id: 301,
      title: '创新创业移动课堂',
      start: '2025-06-08T09:00',
      end: '2025-06-10T17:00',
      location: 'C301',
      teacher: '创业导师团',
      description: '创新创业实战训练'
    }]
  };
  export default {
    data() {
      return {
        dataType: 'course',
        dataId: '',
        dataList: [],
        dataDateInfo: '',
        calendarDate: new Date(),
        events: [],
        modalVisible: false,
        modalTitle: '新建事件',
        modalForm: {
          type: 'course',
          title: '',
          start: '',
          end: '',
          location: '',
          teacher: '',
          description: '',
          expire: 'none'
        },
        editingIndex: null,
        eventDetail: null,
        eventDetailVisible: false
      }
    },
    computed: {
      monthEvents() {
        const now = this.calendarDate instanceof Date ? this.calendarDate : new Date(this.calendarDate);
        const month = now.getMonth();
        const year = now.getFullYear();
        return this.events.filter(ev => {
          const evDate = new Date(ev.start);
          return evDate.getMonth() === month && evDate.getFullYear() === year;
        });
      }
    },
    watch: {
      dataType: 'onTypeChange'
    },
    created() {
      this.onTypeChange();
    },
    methods: {
      onTypeChange() {
        this.dataList = mockData[this.dataType] || [];
        this.dataId = '';
        this.dataDateInfo = '';
      },
      onDataChange() {
        const item = (this.dataList || []).find(d => d.id === this.dataId);
        if (item) {
          this.dataDateInfo = `时间：${item.start.replace('T',' ')} ~ ${item.end.replace('T',' ')}`;
        } else {
          this.dataDateInfo = '';
        }
      },
      fetchData() {
        if (!this.dataId) return this.$message.warning('请选择要拉取的数据');
        const item = (this.dataList || []).find(d => d.id === this.dataId);
        if (item) {
          this.events.push({
            _id: ++idSeed,
            title: item.title,
            start: item.start,
            end: item.end,
            location: item.location,
            teacher: item.teacher,
            description: item.description,
            className: `event-${this.dataType}`,
            expire: 'none'
          });
        }
      },
      openCreateModal() {
        this.modalTitle = '新建事件';
        this.modalForm = {
          type: 'course',
          title: '',
          start: '',
          end: '',
          location: '',
          teacher: '',
          description: '',
          expire: 'none'
        };
        this.editingIndex = null;
        this.modalVisible = true;
      },
      saveEvent() {
        if (!this.modalForm.title || !this.modalForm.start || !this.modalForm.end) {
          this.$message.error('请填写完整信息');
          return;
        }
        const eventObj = {
          _id: this.editingIndex !== null ? this.events[this.editingIndex]._id : ++idSeed,
          title: this.modalForm.title,
          start: this.modalForm.start,
          end: this.modalForm.end,
          location: this.modalForm.location,
          teacher: this.modalForm.teacher,
          description: this.modalForm.description,
          className: `event-${this.modalForm.type}`,
          expire: this.modalForm.expire
        };
        if (this.editingIndex !== null) {
          this.$set(this.events, this.editingIndex, eventObj);
        } else {
          this.events.push(eventObj);
        }
        this.modalVisible = false;
      },
      editEvent(idx) {
        const ev = this.monthEvents[idx];
        this.modalTitle = '编辑事件';
        this.modalForm = {
          type: ev.className.replace('event-', ''),
          title: ev.title,
          start: ev.start,
          end: ev.end,
          location: ev.location,
          teacher: ev.teacher,
          description: ev.description,
          expire: ev.expire || 'none'
        };
        this.editingIndex = this.events.findIndex(e => e._id === ev._id);
        this.modalVisible = true;
      },
      eventsForDate(date) {
        const d = new Date(date);
        return this.events.filter(ev => {
          const evDate = new Date(ev.start);
          return evDate.getFullYear() === d.getFullYear() && evDate.getMonth() === d.getMonth() && evDate
          .getDate() === d.getDate();
        });
      },
      showEvent(ev) {
        this.eventDetail = ev;
        this.eventDetailVisible = true;
      },
      isExpired(ev) {
        return new Date(ev.end) < new Date() && ev.expire === 'mark';
      },
      typeText(className) {
        if (!className) return '';
        const t = className.replace('event-', '');
        if (t === 'course') return '课程';
        if (t === 'activity') return '活动';
        if (t === 'workshop') return '移动课堂';
        return t;
      },
      expireText(val) {
        if (val === 'mark') return '标记为已过期';
        if (val === 'delete') return '自动删除';
        if (val === 'remind') return '发送提醒';
        return '无';
      }
    },
    filters: {
      formatDateTime(val) {
        if (!val) return '';
        return val.replace('T', ' ');
      }
    }
  }
</script>

<style scoped>
  .admin-calendar {
    background: #f4f6fa;
    min-height: 100vh;
  }

  .admin-header {
    background: #fff;
    padding: 20px 30px 10px 30px;
    border-bottom: 1px solid #e9ecef;
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    letter-spacing: 2px;
  }

  .admin-main {
    display: flex;
    gap: 24px;
    padding: 30px 30px 0 30px;
    min-height: 90vh;
  }

  .admin-panel {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 24px 18px;
    flex: 1 1 0;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .admin-panel-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1565c0;
  }

  .cell-content {
    position: relative;
    min-height: 24px;
  }

  .event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #409EFF;
    display: inline-block;
    margin-right: 2px;
    cursor: pointer;
  }

  .mt-4 {
    margin-top: 24px;
  }

  .mb-2 {
    margin-bottom: 8px;
  }

  .text-secondary {
    color: #888;
  }

  @media (max-width: 1200px) {
    .admin-main {
      flex-direction: column;
      gap: 18px;
      padding: 18px 6px 0 6px;
    }
  }
</style>
