<template>
  <div class="container" style="padding: 30px;">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" 
    style="display: flex;justify-content: space-between;">
      <div style="display:flex;">
        <el-form-item label="课程名称" prop="courseName" >
          <el-input v-model="queryParams.courseName" placeholder="请输入用户名" clearable size="small"/>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status">
            <el-option label="" value="">请选择</el-option>
            <el-option label="已报名" value="1">已报名</el-option>
            <el-option label="未报名" value="2">未报名</el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </div>
      
      <div style="margin-top:5px">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="modify(null,'add')">新增课程</el-button>
      </div>
    </el-form>
    <el-table v-loading="loading" :data="courselist"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      row-key="courseId" :header-cell-style="{'text-align':'center'}" >
      <el-table-column label="课程名称" align="left" key="courseName" prop="courseName" width="280" :show-overflow-tooltip="true"/>
      <el-table-column label="培训期号" align="center" key="issueId" prop="issueId" :show-overflow-tooltip="true">
        <template slot-scope="scope">
            <span v-if="scope.row.issueId" >{{issuechange(scope.row.issueId)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="课时" align="center" key="period" prop="period" width="150" >
      </el-table-column>
      <el-table-column label="讲师" align="center" key="instructor" prop="instructor" ></el-table-column>
      <el-table-column label="课程内容" align="center" key="courseContent" prop="courseContent" width="330" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="是否发布" align="center" key="publish" prop="publish" width="150">
        <template slot-scope="scope">
            <span v-if="scope.row.publish==1" style="color:#67c23a">已发布</span>
            <span v-else style="color:#f56c6c">未发布</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" key="dateTime" prop="dateTime">
        <template slot-scope="scope">
            <span v-if="scope.row.dateTime">{{scope.row.dateTime.slice(0,10)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.parentId==0" size="mini" type="text" icon="el-icon-plus" @click="modify(scope.row,'add')" >新增章节</el-button>
          <!-- <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="modify(scope.row,'release')" >发布 </el-button> -->
          <el-button size="mini" type="text" icon="el-icon-edit" @click="modify(scope.row,'edit')" >修改 </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="modify(scope.row,'del')" >删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>10"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog class="diaform" :title="title" :visible.sync="visibleopen" :close-on-click-modal="false" width="600px" height="700px"
               append-to-body @close='visibleopen=false'>
      <el-form :model="addeditform" :rules="rules" ref="addform" label-width="150px">
        <el-form-item v-if="title&&title.indexOf('章节')==-1" label="期号" prop="issueId">
          <el-select  v-model="addeditform.issueId" placeholder="请选择" clearable  >
              <el-option v-for="(item,key) of issuelist" :key="key" :label="item.issue" :value="item.issue_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="title&&title.indexOf('章节')>0?'章节名称':'课程名称'" prop="courseName">
          <el-input v-model="addeditform.courseName"></el-input>
        </el-form-item>
        <el-form-item label="课时" prop="period">
          <el-input type="number" v-model="addeditform.period"></el-input>
        </el-form-item>
        <el-form-item label="讲师" prop="instructor">
          <el-input v-model="addeditform.instructor"></el-input>
        </el-form-item>
        <el-form-item  label="是否发布" prop="publish">
          <el-select v-model="addeditform.publish">
            <el-option label="是" value="1">是</el-option>
            <el-option label="否" value="0">否</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input type="number" v-model="addeditform.orderNum"></el-input>
        </el-form-item>
        <el-form-item :label="title&&title.indexOf('章节')>0?'章节内容':'课程内容'" prop="courseContent">
          <el-input type="textarea" style="width: 300px;" v-model="addeditform.courseContent"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:30px">
          <el-button type="primary"  style="width:135px;font-size: 16px;height: 39px;line-height: 11px;" @click="submitto('confirm')">确认</el-button>
          <el-button style="width:135px;font-size: 16px;height: 39px;line-height: 11px;margin-left:30px" @click="submitto('cancel')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {listCourseall,getCourseById,addcourse,updatecourse,delCourseById,releaseissue} from "@/api/train/index";
  export default {
    name: "peixunkecheng", 
    data() {
      return {
        title: '',
        loading: false,
        courselist: [],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          courseName: undefined,
        },
        addeditform:{parentId:0,issueId:'',courseId:'',courseName:'',period:'',instructor:'',publish:'',courseContent:'',orderNum:''},
        rules:{
          // issueId:[{ required: true, message: "请选择期号", trigger: "blur" }],
          courseName:[{ required: true, message: "请输入课程名称", trigger: "blur" }],
          period:[{ required: true, message: "请输入课时", trigger: "blur"},
          {pattern: /^\d+$|^\d+[.]?\d+$/,message: "请输入数字",trigger: "blur"} ],
          instructor:[{ required: true, message: "请输入讲师", trigger: "blur" }],
          // publish:[{ required: true, message: "请选择是否发布", trigger: "blur" }],
          orderNum:[{ required: true, message: "请输入课时序号", trigger: "blur" }],
        },
        visibleopen:false,
        issuelist:[],//期号数组

      }
    },
    mounted(){
      releaseissue({}).then(response => {
        console.log('发布期号',response)
        this.issuelist = response;
      })
    },
    methods: {    
      issuechange(value){
        if (!value) {
          return ''
        }else{
          if(this.issuelist.length>0){
            let issue=this.issuelist.find(item=>item.issue_id==value).issue
            return issue
          }
        }
      },
      getList() {
        // this.loading = true;
        listCourseall(this.queryParams).then(response => {
          this.courselist = response.rows;
          this.courselist.sort((a,b)=>{
              return a.orderNum-b.orderNum
          })
          this.courselist.forEach(item=>{
            if(item.children.length>0)
            item.children.sort((a,b)=>{
              return a.orderNum-b.orderNum
             })
          })
          this.total = response.total;
          this.loading = false;
        })
      },
      // 操作按钮
      modify(row,type) {
        // console.log('row---',row,type)
        if(row){
          if(type=='add'){
            this.title='新增培训课程章节'
            this.visibleopen=true
            this.addeditform={parentId:row.courseId,issueId:row.issueId,courseId:'',courseName:'',period:'',instructor:'',publish:'',courseContent:'',orderNum:''}
          }else if(type=='release'){
            // console.log('发布')
            this.$confirm('确定发布培训课程吗？', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
              this.$message.success('发布成功')
             })
          }else if(type=='edit'){
            if(row.parentId==0){
              this.title='修改培训课程'
            }else{
              this.title='修改培训课程章节'
            }
            let {parentId,issueId,courseId,courseName,period,instructor,publish,courseContent,orderNum}=row
            this.addeditform={parentId,issueId,courseId,courseName,period,instructor,courseContent,orderNum,
              publish:publish?'1':'0'},
            this.visibleopen=true
            console.log('修改', this.addeditform)
          }else if(type=='del'){
            console.log('删除')
            this.$confirm('确定删除当前培训课程吗？', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
              delCourseById(row.courseId).then(res=>{
                if(res.code==200){
                  this.$message.success('删除成功')
                      this.getList();
                }else{
                  this.$message.warning('请先删除该课程下的所有章节！')
                }              
              })
             })
          }
        }else{
          console.log('新增',this.addeditform)
          this.title='新增培训课程'
          this.visibleopen=true,
          this.addeditform={parentId:0,}
        }
      },
      //表单提交
      submitto(type){
        console.log('提交表单内容***',this.addeditform,) 
        if(type=='confirm'){
          this.$refs.addform.validate((valid)=>{
            if(valid){
              // 获取当前时间
              const today = new Date();
              // 获取当前时间(today)的年份
              const year = today.getFullYear();
              // 获取月份
              const month = String(today.getMonth() + 1).padStart(2, '0');
              // 获取当前日
              const day = String(today.getDate()).padStart(2, '0');
                // 获取当前时
              const hours = today.getHours();
                // 获取当前分
              const mint = today.getMinutes(); 
                // 获取当前秒
              const seconds = today.getSeconds(); 
              // 得到年月日
              const thisDayDate = `${year}-${month}-${day} ${hours}:${mint}:${seconds}`; //打印当前日期
              this.addeditform.publish=parseInt(this.addeditform.publish)
              this.addeditform.dateTime=thisDayDate
                console.log('提交表单内容',this.addeditform,typeof(this.addeditform.publish)) 
                // return;
                if(this.addeditform.courseId){
                  updatecourse(this.addeditform).then(res=>{
                    console.log('res---',res)
                    if(res.code==200){
                      this.visibleopen=false,
                      this.getList();
                    }
                  }) 
                }else{
                  addcourse(this.addeditform).then(res=>{
                    console.log('res---',res)
                    if(res.code==200){
                      this.visibleopen=false,
                      this.getList();
                    }
                  }) 
                }
            }
          })
        }else if(type=='cancel'){
          this.visibleopen=false
        }
      },  
      refresh() {
        this.getList();

      },
      handleQuery() {
        this.getList();
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.getList();
      }
    },
    created() {
      this.getList();
    }
  }
</script>

<style scoped>

  .diaform>>>.el-input{
    width:300px
  }
</style>
