<template>
  <div>
    <Modal v-model="isShow" width="70" title="排课设置">
      <div class="txl">
        <div>课程名称：{{subjectObj.name}}</div>
        <div>开课日期：{{subjectObj.start_date}}至{{subjectObj.end_date}}</div>
        <div>类别：
          <template v-for="item in course_type">
            <span v-if="subjectObj.type===item.id">{{item.value}}</span>
          </template>
        </div>
      </div>
      <div class="txl">
        <div>班主任：{{subjectObj.teacher?subjectObj.teacher.name:''}}</div>
        <div>课表状态：{{subjectObj.course_content_status===1?'已发布':'未发布'}}</div>
      </div>
      <div class="txl">
        <div>
          <el-button type="primary" size="small" @click="importTable">导入</el-button>
        </div>
        <div v-if="subjectObj.course_content_status===0">
          <el-button type="primary" size="small" @click="changeContentStatus">发布课表</el-button>
        </div>
        <div>
          <el-button type="primary" size="small" v-print="'#print'">下载并打印课表</el-button>
        </div>
      </div>

      <div class="schedule" id="print">
        <el-table :data="list" border style="width: 100%;height:300px;overflow: scroll;">
          <el-table-column v-for="item in table_item" :prop="item.prop" :label="item.label"
            :width="item.width?item.width:''" :align="item.align">
          </el-table-column>
        </el-table>
      </div>
      <template v-slot:footer>
        <el-button plain type="primary" plain style='margin-left:5px;margin-bottom:5px;'
          @click="closeClass">取消</el-button>
      </template>
    </Modal>
    <imports ref="imports" :table-name="'course_contents'" :course_id="id+''" @refresh="refreshData"></imports>
  </div>
</template>

<script>
  import myMixins from "@/mixin/selectMixin.js";
  import {
    index
  } from '@/api/course/courseContent.js'
  import {
    show,
    save
  } from "@/api/course/index.js"
  import imports from "@/views/component/imports.vue"
  export default {
    mixins: [myMixins],
    components: {
      imports
    },
    data() {
      return {
        isShow: false,
        id: '', // 课程id，其他接口的course_id
        subjectObj: {}, // 课程信息
        list: [],
        table_item: [{
          prop: 'date',
          label: '日期',
          align: 'center',
          width: 120,
        }, {
          prop: 'period',
          label: '时间 ',
          align: 'center',
          width: 180,
        }, {
          prop: 'teacher.name',
          label: '授课老师',
          align: 'center',
          width: 120,
        }, {
          prop: 'theme',
          label: '课程主题',
          align: 'left'
        }, {
          prop: 'address',
          label: '上课地点',
          align: 'left'
        }]
      }
    },
    methods: {
      //  获取排课
      async getCousreContent() {
        const res = await index({
          page: 1,
          page_size: 999,
          show_relation: ['teacher'],
          sort_name: 'date',
          sort_type: 'ASC',
          filter: [{
            key: 'course_id',
            op: 'eq',
            value: this.id
          }]
        })
        this.list = res.data
      },
      async getCourseDetail() {
        const res = await show({
          id: this.id,
          show_relation: ['teacher']
        })
        this.subjectObj = {}
        this.subjectObj = this.base.requestToForm(res, this.subjectObj)
        console.log('this.subjectObj', this.subjectObj)
      },
      // 导入
      importTable() {
        this.$refs.imports.show()
      },
      refreshData() {
        this.$emit('refresh')
        this.getCourseDetail()
        this.getCousreContent()
      },
      // 发布课表
      changeContentStatus() {
        if(this.list.length===0){
          this.$Message.warning("请先导入课表")
          return
        }
        this.subjectObj.course_content_status = 1
        save(this.subjectObj).then(res => {
          this.$Message.success("发布成功")
          this.$emit('refresh')
          this.getCourseDetail()
        })
      },
      closeClass() {
        this.isShow = false
      },
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.getCourseDetail()
          this.getCousreContent()
        } else {
          this.id = ''
          this.subjectObj = {}
          this.list = []
          // this.$refs['dialog'].reset()
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  @media print {
    @page {
      size: auto;
    }

    body,
    html,
    div {
      height: auto !important;
    }
  }

  ::v-deep .el-table__cell {
    position: relative;
  }

  .subjectCell {
    min-height: 50px;

    .close {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #ddd;
      color: #fff;
      text-align: center;
      line-height: 20px;
      top: 5px;
      right: 5px;
      border-radius: 20px;
      cursor: pointer
    }

    &>div {
      text-align: center;
    }
  }

  .txl {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &>div {
      margin-right: 10px;
    }
  }
</style>
