<template>
  <el-dialog
    :title="editorObj.title"
    :visible.sync="editorObj.show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal="false"
    :center="true"
    :fullscreen="true">
    <el-container>
      <el-aside class="left-block" width="180px">
        <div class="list-title">
          模板列表
        </div>
        <div class="page-list">
          <div v-for="data in mouldList" @click="addMould(data)" :key="data.key">
            <el-card  shadow="hover" class="box"  :body-style="{ padding: '0px' }">
              <img :src="data.imgUrl" class="image">
              <div style="padding: 14px;">
                <span>{{data.title}}</span>
                <div class="bottom clearfix">
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-aside>
      <el-main class="main-block">
        <div class="main-btns">
          <el-button type="primary" @click="showDialog = true">
            课程基本信息编辑
          </el-button>
          <el-button style="float: right;" type="success" @click="onSave()">
            保存
          </el-button>
        </div>
        <div class="editor-block">
          <editor :selectedMould="selectedMould" :editorObj="editorObj"/>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      title="信息编辑"
      :modal="false"
      :visible.sync="showDialog">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="单词量">
          <el-input-number v-model="form.words_num"></el-input-number>
        </el-form-item>
        <el-form-item label="分龄分级">
          <el-select v-model="age" placeholder="请选择">
            <el-option
              label="全部"
              :value="2">
            </el-option>
            <el-option
              label="0-3岁"
              :value="0">
            </el-option>
            <el-option
              label="4-6岁"
              :value="1">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            class="upload-demo"
            action="/api/public/upload"
            list-type="picture-card"
            :http-request="uploadCover"
            multiple
            :limit="1"
            :disabled="(fileUid && progress < 99)"
            :file-list="imgList">
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button type="success" @click="showDialog = false">确 定</el-button>
        </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import addUrl from '../../assets/editor/Group 7.png'
  import {MOULDLIST} from "../../util/resourceMould";
  import editor from './editor'
  import {addElementApi,editElementApi,getElemenetDetailApi,uploadFileApi} from "../../service/api";

  export default {
    props:[
      'editorObj'
    ],
    components:{
      editor
    },
    data(){
      return{
        selectedMould:[],
        addUrl:addUrl,
        showDialog:false,
        imgList:[],
        mouldList:MOULDLIST,
        age:0,
        fileUid:null,
        form:{
          category_id:this.editorObj.category_id,
          title:'',
          content:'',
          min_age:0,
          max_age:3,
          cover:'',
        }
      }
    },
    computed:{
      progress(){
        return this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num <100 ? this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num : 100
      }
    },
    methods:{
      addMould(data){
        this.selectedMould.push(JSON.parse(JSON.stringify(data)))
      },
      uploadCover(a){
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.form.cover = process.env.IMAGE_URL_HEAD  +  res.url;
          this.imgList.push({name:res.url,url:process.env.IMAGE_URL_HEAD  +  res.url})
        })
      },
      onSave(){
        if (!this.form.title) {
          this.$message({
            type: 'error',
            message: '请完成基本信息编辑!'
          });
          return
        }
        if(this.age === 0 ){
          this.form.min_age = 0;
          this.form.max_age = 3
        }else if(this.age === 1){
          this.form.min_age = 4;
          this.form.max_age = 6
        }else{
          this.form.min_age = 0;
          this.form.max_age = 100
        }
        this.form.content = JSON.stringify(this.selectedMould);
        this.category_id = this.editorObj.category_id;
        switch (this.editorObj.type) {
          case 0:
            addElementApi(this.form , '0').then(res=>{
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.editorObj.show = false;
              this.$emit('reflash')
            });
            break;
          case 1:
            editElementApi(this.form , this.editorObj.id).then(res=>{
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.editorObj.show = false;
              this.$emit('reflash')
            });
        }
      },
      initPage(){
        switch (this.editorObj.type) {
          case 0:
            this.selectedMould=[];
            this.form = {
              category_id:this.editorObj.category_id,
              title:'',
              content:'',
              cover:'',
              words_num: 0
            };
            break;
          case 1:
            getElemenetDetailApi(this.editorObj.id).then(res=>{
              if(res.max_age=== 3 ){
                this.age = 0
              }else if(res.max_age === 6){
                this.age = 1
              }else{
                this.age = ''
              }
              this.form = {
                category_id:res.category_id,
                content:res.content,
                cover:res.cover,
                title:res.title,
                words_num: res.words_num
              };
              this.selectedMould = JSON.parse(res.content)
            })

        }
      }
    },
    watch:{
      'editorObj'(){
        this.initPage()
      }
    },
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .el-container{
    height: 900px;
    overflow: auto;
    .el-main{
      padding: 10px;
      background: #f5f8ff;
    }
    .main-block{
      position: relative;
      .main-btns {
        margin-top: 68px;
        margin-bottom: 10px;
      }
      .editor-block{
        position: absolute;
        top: 118px;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;
      }
    }
    .left-block{
      font-size: 14px;
      border: 1px solid #f0f0f0;
      color: #333333;
      text-align: center;
      .list-title{
        padding: 5px;
      }
      .page-list{
        padding: 10px 0;
        background: #e8e8e8;
        .box{
          margin: 15px 5px;
          cursor: pointer;
          &:hover{
            box-shadow: 0 0 20px #ff9a22;
          }
          img{
            width: 100%;
          }
        }
        .title{
          font-size: 12px;
          text-align: center;
        }
        &-add{
          cursor: pointer;
          padding: 10px 0;
          font-size: 12px;
          color: #CCCCCC;
        }
      }
    }
  }
</style>
<style>
  .el-upload--picture-card,.el-upload-list--picture-card .el-upload-list__item{
    width: 50px;
    height: 50px;
    line-height: 58px;
  }
</style>
