<template>
  <div class="app-container">
    <sticky className="sub-navbar">
      <div style="text-align: right;margin-bottom: 20px">
        <el-button type="primary" @click="saveData">保存</el-button>
        <el-button type="danger" @click="backList">取消</el-button>
      </div>
    </sticky>
    <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="100px"
             style='width: 650px; margin-left:50px;'>
      <el-form-item label="名称" prop="title">
        <el-input type="text" placeholder="请标题名称"
                  v-model.trim="temp.title">
        </el-input>
      </el-form-item>
      <el-form-item label="课程类型" prop="curriculumType">
        <el-select v-model="temp.curriculumType" placeholder="请课程名称">
          <el-option
            v-for="item in bannerTypes"
            :key="item.courseName"
            :label="item.courseName"
            :value="item.courseName">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="封面图" prop="url">-->
      <!--&lt;!&ndash;<el-upload&ndash;&gt;-->
      <!--&lt;!&ndash;class="avatar-uploader"&ndash;&gt;-->
      <!--&lt;!&ndash;:action="uploadUrl"&ndash;&gt;-->
      <!--&lt;!&ndash;list-type="picture-card"&ndash;&gt;-->
      <!--&lt;!&ndash;:show-file-list="false"&ndash;&gt;-->
      <!--&lt;!&ndash;:on-success="handleSuccess"&ndash;&gt;-->
      <!--&lt;!&ndash;:on-remove="handleRemove"&ndash;&gt;-->
      <!--&lt;!&ndash;:before-upload="beforeUpload">&ndash;&gt;-->
      <!--&lt;!&ndash;<img v-if="temp.url" :src="temp.url" class="avatar">&ndash;&gt;-->
      <!--&lt;!&ndash;<i v-else class='el-icon-plus avatar-uploader-icon'></i>&ndash;&gt;-->
      <!--&lt;!&ndash;</el-upload>&ndash;&gt;-->
      <!--</el-form-item>-->
      <el-form-item label="封面图" prop="pictureAddress">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          list-type="picture-card"
          :show-file-list="false"
          :on-success="handleImgSuccess"
          :on-remove="handleImgRemove"
          :before-upload="beforeUpload">
          <img v-if="temp.pictureAddress" :src="temp.pictureAddress" class="avatar-img">
          <i v-else class='el-icon-plus avatar-uploader-icon'></i>
        </el-upload>
      </el-form-item>
    </el-form>

    <div class="editor-container">
      <Tinymce :height="500" ref="editor" v-model="temp.courseIntroduction"/>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import Sticky from '@/components/Sticky' // 粘性header组件
import { upload_url } from '@/common/config'

export default {
  name: 'courseEdit',
  components: { Tinymce, Sticky},
  props: ['currentId'],
  data() {
    return {
      bannerTypes: [],
      // 临时的表单值
      temp: {
        id: undefined,
        title: undefined,
        curriculumType: undefined,
        pictureAddress: undefined,
        videoAddress: undefined,
        courseIntroduction: undefined,
        createDate: undefined,
        cretePerson: undefined,
        //numberOrder: undefined
      },
      uploadUrl: upload_url,
      // 表单验证的规则
      rules: {
        title: [
          { required: true, message: '标题名称不能为空', trigger: 'blur'},
          { type: 'string', max: 25, message: '标题名称不允许大于25位数', trigger: 'blur' },
        ],
        curriculumType: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
        pictureAddress: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        videoAddress: [{ required: true, message: '视频不能为空', trigger: 'blur' }],
      },
      videoFlag: false,
      videoUploadPercent: 0,
      pickerOptions1: {
        // 大于当前时间
        disabledDate: (time) => {
          return time.getTime() < Date.now()
        }
      }
    }
  },
  filters: {},
  created() {
    const params = this.$route.params
    if (params && params.id) {
      this.$fetch.sysCourse.query({ id: params.id }).then(({ data }) => {
        this.temp = data;
      })
    }
  },
  computed: {
    // 加载显示的文字
    displays() {
      return this.$store.getters.displays
    }
  },
  mounted() {
    this.createTime();
    this.$fetch.sysCourseType.findAll().then(({ data }) => {
      console.log(data);
      this.bannerTypes = data
      const params = this.$route.params
      if (!params || !params.id) {
        this.temp.type = data[0].value
      }
    })
  },
  methods: {
    // 返回
    backList() {
      this.$confirm('是否放弃当前编辑信息?', '提示', {
        confirmButtonText: '继续编辑',
        cancelButtonText: '放弃',
        type: 'warning'
      }).then(() => {

      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消编辑'
        })
        this.back()
      })
    },
    createTime(){
      var date=new Date();
      var year = date.getFullYear();       //年
      var month = date.getMonth() + 1;     //月
      var day = date.getDate(); 
      this.temp.createDate=year+'-'+month+'-'+day;
    },
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 20
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过20MB哦!')
        return false
      }
    },
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = Number(file.percentage.toFixed(0))
    },
    handleVideoSuccess(res, file) {
      // 获取上传图片地址
      this.videoFlag = false
      this.videoUploadPercent = 0
      if (res.code === 200) {
        this.temp.videoAddress = res.data
        console.log(res.data);
      } else {
        this.$message.error('视频上传失败，请重新上传！')
      }
    },
    handleSuccess(response, file) {
      this.temp.videoAddress = response.data;
      console.log(1)
    },
    handleRemove(file) {
      this.temp.videoAddress = undefined;
    },
    handleImgSuccess(response, file) {
      this.temp.pictureAddress = file.url;
      console.log(file);
    },
    handleImgRemove(file) {
      this.temp.pictureAddress = undefined
    },
    beforeUpload(file) {
      const _URL = window.URL || window.webkitURL
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.src = _URL.createObjectURL(file)
        img.onload = function() {
        }
        resolve(true)
      })
    },
    // 返回
    back() {
      this.$router.push({ name: 'courseList' })
    },
    saveData() {
      if (this.videoFlag) {
        this.$message.warning('请等待视频上传成功')
        return
      }
      console.log(this.$refs['dataForm'])
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          if (!tempData.id) {
            this.createTime();
            this.$fetch.sysCourse.insert(tempData).then(() => {
              this.$message({
                message: '创建成功',
                type: 'success'
              })
              this.back()
            })
          } else {
            this.$fetch.sysCourse.update(tempData).then(() => {
              this.$message({
                message: '更新成功',
                type: 'success'
              })
              this.back()
            })
          }
        } else {
          console.log('valid error')
        }
      })
    }
  }
}
</script>

<style scoped>

  .el-rate {
  }

  .editor-container {
    min-height: 500px;
    margin: 0 0 30px;

  }

  .editor-upload-btn-container {
    text-align: right;
    margin-right: 10px;
  }

  .editor-upload-btn {
    display: inline-block;
  }

  .avatar {
    width: 500px;
    height: 300px;
    display: block;
  }
  .avatar-img {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>