<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>课程体系：{{subjectObj.type_detail?subjectObj.type_detail.name:''}}</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-column label="操作" :width="180" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" style='margin-left:5px;margin-bottom:5px;'
                @click="editClass('editor',scope.row.id)">编辑</el-button>
              <el-popconfirm style="margin:0 10px" @confirm="deleteList(scope.row.id)" title="确定删除吗？">
                <el-button type="danger" size="small" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </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>
    <editClass ref="editClass" @refresh="getCousreContent"></editClass>
  </div>
</template>

<script>
  import myMixins from "@/mixin/selectMixin.js";
  import {
    index,
    sendSms,
    destroy
  } from '@/api/course/courseContent.js'
  import {
    show,
    save
  } from "@/api/course/index.js"
  import imports from "@/views/component/imports.vue"
  import editClass from "../components/editClass.vue"
  export default {
    mixins: [myMixins],
    components: {
      imports,
      editClass
    },
    data() {
      return {
        isShow: false,
        id: '', // 课程id，其他接口的course_id
        subjectObj: {}, // 课程信息
        list: [],
        teacher_options: [],
        showBtn: true,
        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'
        }, {
          prop: 'teacher.introduce',
          label: '老师简介',
          align: 'left'
        }]
      }
    },
    methods: {
      setTeachers(e) {
        this.teacher_options = e
      },
      //  获取排课
      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', 'type_detail']
        })
        this.subjectObj = {}
        this.subjectObj = this.base.requestToForm(res, 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()
          this.isSendMessage()
        })
      },
      // 发布课表之后 确认是否发送短信
      isSendMessage() {
        this.$confirm('课表已发布，是否需要短信通知所有学员', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          this.sendMessage()
        }).catch(() => {

        });
      },
      sendMessage() {
        sendSms({
          id: this.id
        }).then(res => {
          this.$Message.success("短信发送成功")
        })
      },
      closeClass() {
        this.isShow = false
      },
      editClass(type, id) {
        this.$refs.editClass.type = type
        this.$refs.editClass.id = id
        this.$refs.editClass.setTeachers(this.teacher_options)
        this.$refs.editClass.isShow = true
      },
      deleteList(id) {
        var that = this;
        destroy({
          id: id,
        }).then(response => {
          this.$Message.success('删除成功');
          this.getCousreContent()
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
    },
    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;
    }
    table th:last-child,
    table th:last-child {
      display: none;
    }

  }

  ::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>
