<template>
  <div>

    <div class="search-term">
      <el-form :inline="true" class="demo-form-inline">
		<el-form-item>
		    <DropSearch  type="media"  @select="selectMedia" placeholder="点击选择视频" ></DropSearch>
		</el-form-item>
		<el-form-item>
		    <el-button type="text">目前只支持从库中选视频新建课程</el-button>
		</el-form-item>
		
      </el-form>
    </div>
    <el-table :data="tableData"  border stripe>
      <el-table-column label="序号" width="70" prop="mediaId">

      </el-table-column>
	  
      <el-table-column label="课程名字"  prop="name">
		  <template slot-scope="{row, $index}">
		    <el-input v-if="row.edit" v-model="row.name" type="text" clearable></el-input>
		    <span v-else>{{row.name}}</span>
		  </template>
      </el-table-column>

      <el-table-column label="视频时长"  prop="duration" width="80">
        <template slot-scope="{row}">  
          <span>{{ parseInt(row.duration/60) }}分钟</span>
        </template>
      </el-table-column>
	  
	  <el-table-column label="视频学时"  prop="xs" width="100" >
	    <template slot-scope="{row, $index}">  
		  <el-input v-if="row.edit" v-model="row.xs" type="number" clearable></el-input>
	      <span v-else>{{row.xs/10}}学时</span>
	    </template>
	  </el-table-column>
	  
	  <el-table-column label="加入时间"  prop="xs" width="160">
	    <template slot-scope="{row, $index}">  
	      <span>{{row.publishAt}}</span>
	    </template>
	  </el-table-column>
	  
      
      <el-table-column
        align="center"
        width="160px"
        label="操作"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row, $index}">  
			<el-button
			  v-if="row.edit"
			  type="success"
			  size="small"
			  icon="el-icon-circle-check"
			  @click="doAddCoursemedia(row, $index)"
			>提交</el-button>
			<el-button
			  v-if="row.edit"
			  class="cancel-btn"
			  size="small"
			  icon="el-icon-refresh"
			  type="warning"
			  @click="cancelEdit(row, $index)"
			>取消</el-button>
			<el-button
			  v-if="!row.edit"
			  type="primary"
			  size="small"
			  icon="el-icon-edit"
			  @click="initEdit(row, $index)"
			>编辑</el-button>
		
		 <el-button
		   v-if="!row.edit"
		   type="primary"
		   size="small"
		   icon="el-icon-edit"
		   @click="dropMedia(row, $index)"
		 >移除</el-button>
        </template>
		
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :page-size="size"
      :page-sizes="[10, 30, 50, 100]"
      :style="{float:'right',padding:'20px'}"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
	
	<el-dialog title="新增课程" center :visible.sync="dialogFormVisible"  >
	  <el-form :model="form" :rules="rules" label-width="120px" ref="elForm">
	    <el-form-item  label="课程标题" prop="name" >
	      <el-input  v-model="form.name" type="text" class="user-form-item" clearable></el-input>
	    </el-form-item>
		
		<el-form-item  label="课程章节" prop="name">
			<el-input  v-model="form.chapter" type="text" class="user-form-item" clearable></el-input>
		</el-form-item>
		
		<el-form-item  label="课程学时" prop="name">
			<el-input  v-model="form.xs" type="number" class="user-form-item" clearable></el-input>
		</el-form-item>
		
		<el-form-item  label="视频时长(秒)" prop="name">
			<el-input  v-model="form.duration" type="number" class="user-form-item" clearable></el-input>
		</el-form-item>
		
		<el-form-item  label="视频地址" prop="name">
			<span>{{form.url}}</span>
		</el-form-item>
		
	  </el-form>
	  <div class="dialog-footer" slot="footer">
	    <el-button @click="dialogFormVisible=false">取 消</el-button>
	    <el-button @click="addCoursemedia" type="primary">确 定</el-button>
	  </div>
	</el-dialog>
	
	
  </div>
</template>

<script>
import DropSearch from '@/components/select/DropSearch.vue';
import infoList from "@/mixins/infoList";
import { getCourseMediaList, deleteCourseMedia, addCourseMedia} from "@/api/course.js";
import PreviewImg from "@/components/customPic/previewImg.vue";
export default {
  name: "Api",
  data() {
	
    return {
		listApi: getCourseMediaList,
		dialogFormVisible: false,
		info:{},
		form:{
			xs:0,
			chapter:1,
			courseId:+this.$route.query.id,
		},
		rules:{
			name: [{ required: true, message: "请输入标题", trigger: "blur" }],
			groupName: [ { required: true, message: "请输入考题组", trigger: "blur" }],
			startTime: [ { required: true, message: "请输入开始时间", trigger: "blur" }],
			duration: [ { required: true, message: "请输入时长", trigger: "blur" }],
		}
    }
  },
  mixins: [infoList],
  components:{PreviewImg,DropSearch},
  filters:{
	toFiexd(val){
		return val.toFixed(1)
	}  
  },
  methods: {
	  onSubmit() {
	    this.page = 1;
	    this.size = 10;
	    this.getTableData();
	  },
	  selectMedia(row){
		this.form = Object.assign( this.form, row);
		this.form.xs = parseInt(row.duration /360)
		this.form.url = `https://media.ndjsxh.cn:8443/mp4/study/${row.id}.mp4`
		this.dialogFormVisible= true
	  },
	  addCoursemedia( ){
		let param = Object.assign( {}, this.form)
		param.chapter = +param.chapter
		param.xs = parseInt( 10*param.xs)
		param.duration = +param.duration;
		addCourseMedia( param ).then(res=>{
			if( res.code == 200){
				this.tableData.push( res.data )
				this.dialogFormVisible= false
				this.$message.successMsg("增加成功")
			}
		}) 
	  },
	  doAddCoursemedia( row  ){
		let param = Object.assign( {}, row )
		param.chapter = +param.chapter
		param.xs = parseInt( 10*param.xs )
		param.duration = +param.duration;
		addCourseMedia( param ).then(res=>{
			if( res.code == 200){
				row.edit = false
				this.$message.successMsg("编辑成功")
			}
		}) 
	  },
	  cancelEdit(row, index) {
	    row = Object.assign(row, row.temp);
	    row.edit = false;
	    delete( row["temp"] );
	  },
	  initEdit(row, index) {
	    let form = Object.assign({}, row);
	    row.edit = true;
		row.xs = row.xs/10
	    row.temp = form;
	  },
	  dropMedia(row, index){
		let param ={mediaId: row.mediaId}
		deleteCourseMedia( param).then(res=>{
			 if( res.code == 200){
				this.$message.successMsg("移除成功", 1)
				row.deleted = true
				this.tableData.splice(index, 1)
			 }
		}) 
	  }
  },
  beforeMount() {
	let id  = + this.$route.query.id;
	this.searchInfo.courseId = id
    this.getTableData();
  }
};
</script>
<style scoped lang="scss">
.el-tag--mini {
  margin-left: 5px;
}
.warning {
  color: #dc143c;
}
</style>
