<template>
    <div class="container" style="padding: 30px;">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" 
    style="margin-left:-28px;display: flex;justify-content: space-between;">
      <div style="display:flex">
          <el-form-item label="期号" prop="name">
            <el-input v-model="queryParams.issue" placeholder="请输入用户名" clearable size="small"/>
          </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="addsign">新增</el-button>
      </div>
    </el-form>
      <el-table v-loading="loading" :data="issuelist">
        <el-table-column type="index" label="序号"  width="70" align="center"> </el-table-column>
        <el-table-column label="期号" align="center" key="issue" prop="issue" />
        <el-table-column label="类型" align="center" key="type" prop="type"  >
          <template slot-scope="scope">
            <span>{{scope.row.type==0?'培训':'考试' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="主题" align="center" key="themeName" prop="themeName" />
        <el-table-column label="开课时间" align="center" key="startTime" prop="startTime">
        <template slot-scope="scope">
            <span v-if="scope.row.startTime">{{scope.row.startTime.slice(0,10)}}</span>
          </template>
        </el-table-column>    
        <el-table-column label="上课地点" align="center" key="classAddr" prop="classAddr" />
        <el-table-column label="报名状态" align="center" key="status" prop="status"  >
          <template slot-scope="scope">
            <span>{{scope.row.status==0?'关闭':'开启' }}</span>
          </template>
        </el-table-column>     
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <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>
      <el-dialog class="diaform" :title="visibtitle" :visible.sync="visibleopen" :close-on-click-modal="false" width="1200px" height="700px"
               append-to-body @close='closevisib'>
      <el-form :model="issueobj" :rules="rules" ref="issueobj" label-width="150px">
        <div style="display: flex;flex-wrap: wrap;margin-top: 30px;">
          <el-form-item  label="类型" prop="type">
            <el-select v-model="issueobj.type" style="width:300px" >
              <!--disabled  -->
              <el-option label="培训" value="0">培训</el-option>
              <el-option label="考试" value="1">考试</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="期号" prop="issue">
            <el-input  v-model="issueobj.issue" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="主题名称" prop="themeName">
            <el-input  v-model="issueobj.themeName" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="开课时间" prop="startTime">
            <!-- <el-input  v-model="issueobj.startTime" style="width:300px"></el-input> -->
            <el-date-picker v-model="issueobj.startTime" value-format="yyyy-MM-dd" type="date" style="width:300px" placeholder="选择开课时间"> </el-date-picker>
          </el-form-item>
          <el-form-item label="上课地点" prop="classAddr">
            <el-input  v-model="issueobj.classAddr" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item  label="状态" prop="status">
            <el-select v-model="issueobj.status" style="width:300px">
              <el-option label="关闭" value="0">关闭</el-option>
              <el-option label="开启" value="1">开启</el-option>
            </el-select>
          </el-form-item>
        </div>
          <!-- 33333{{issueobj.advertiseTop}}{{issueobj.status}}1111 -->
          <el-form-item label="app首页宣传广告" prop="advertiseTop">
            <!-- {{issueobj.advertiseTop}} -->
            <div style="width:300px">
              <multi-upload  :key="timer"  v-model="issueobj.advertiseTop" @setImgPath="setImgPathtop" listtype='picture-card' fileName="publicize" :limit="1" :imgAction="imgAction"/>
              <!-- <el-button  v-else size="mini" type="primary" @setImgPath="setImgPathtop">上传app首页宣传广告</el-button> -->
            </div>
          </el-form-item>
          <el-form-item label="app测试培训宣传" prop="advertiseApp">
            <multi-upload :key="timer" style="width:300px" v-model="issueobj.advertiseApp"  @setImgPath="setImgPathapp" listtype='picture-card' fileName="publicize" :limit="1" :imgAction="imgAction"/>
          </el-form-item>
          <el-form-item label="网页宣传广告" prop="advertiseWeb">
            <multi-upload :key="timer" v-model="issueobj.advertiseWeb"  @setImgPath="setImgPathweb" fileName="publicize" listtype='picture-card' :limit="1" :imgAction="imgAction"/>
          </el-form-item>
          
        
        <div style="width:1000px;margin-left:80px;">
          <p style="color:#606266;font-weight:700;margin-bottom:-10px;">详情</p>
          <quill-editor
            class="ql-editor"
            v-model="editContent"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          >
          </quill-editor>
        </div>
        <el-form-item style="margin-top:80px;text-align: center;margin-left:-150px;">
          <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 {listissue,updateissue,getissueById,addissue,delissue} from "@/api/train/index";
    import MultiUpload from "../MultiUpload.vue";
    import { Quill,quillEditor } from "vue-quill-editor"; //调用编辑器
    // import  Quill from "quill";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
    import ImageResize from 'quill-image-resize-module';
    // 设置字体大小
    const fontSizeStyle = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上
    fontSizeStyle.whitelist = [ "12px","14px","16px","18px","20px","24px","28px","32px","36px",];
    Quill.register(fontSizeStyle, true);
    // // 设置字体样式
    const Font = Quill.import("attributors/style/font"); // 引入这个后会把样式写在style上
    const fonts = ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong"];
    Font.whitelist = fonts; // 将字体加入到白名单
    Quill.register(Font, true);
    Quill.register('modules/imageResize', ImageResize);
    // import { ImageDrop } from 'quill-image-drop-module'
    // Quill.register('modules/imageDrop', ImageDrop)
    const AlignStyle = Quill.import("attributors/style/align"); 
    AlignStyle.whitelist = [ "right","center","justify"];
    Quill.register(AlignStyle, true);
  // Quill.register('modules/ImageExtend', ImageExtend)

    // // 工具栏
    const toolbarOptions = [
      ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
      [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
      [{ align: [] }], // 对齐方式-----[{ align: [] }]
      // [{ size: ["12px","14px","16px","18px","20px","24px","28px","32px","36px",true] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
      // [{ font: ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong",true] }], // 字体种类-----[{ font: [] }]
      [{ size: fontSizeStyle.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
      [{ font: fonts }], // 字体种类-----[{ font: [] }]
      [{ header: [1, 2, 3, 4, 5, 6, true] }], // 标题
      [{ direction: "ltl" }], // 文本方向-----[{'direction': 'rtl'}]
      [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
      [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
      [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
      [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
      ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
      ["clean"], // 清除文本格式-----['clean']
      ["link", "image", "video"], // 链接、图片、视频-----['link', 'image', 'video']
    ];
    export default {
      name: "qihao",
      components: { MultiUpload,quillEditor},
      data() {
        return {
          timer:'',
          imgAction:process.env.VUE_APP_BASE_API + "/train/upload",
          loading: false,
          issuelist: [],
          visibtitle:'新增期号',
          issueobj:{issueId:'',issue:'',type:'',status:'',detail:'',themeName:'',classAddr:'',startTime:'',
                    advertiseTop:'',advertiseApp:'',advertiseWeb:''},
          visibleopen:false,
          rules:{
            issue:[{ required: true, message: "请输入期号", trigger: "blur" }],
            type:[{ required: true, message: "请选择我期号类型", trigger: "blur" }],
            status:[{ required: true, message: "请输入期号状态", trigger: "blur" }],
            themeName:[{ required: true, message: "请输入主题", trigger: "blur" }],
            startTime:[{ required: true, message: "请选择开课时间", trigger: "blur" }],
            classAddr:[{ required: true, message: "请输入上课地点", trigger: "blur" }],
          },
           // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            issue: undefined,
          },
          editContent:'',//详情
          // 配置富文本编辑
          editorOption: {
            placeholder: "请在这里输入",
            modules: {
              toolbar: {
                container:toolbarOptions, 
              },
              // 图片拖拽
              // imageDrop: true,
              imageResize: {
                  displayStyles: {
                    backgroundColor: 'black',
                    border: 'none',
                    color: 'white'
                  },
                  modules: ['Resize', 'DisplaySize', 'Toolbar']
              },
            },
        },
        }
      },
      computed:{
        editor() {
          return this.$refs.myQuillEditor.quill;
        },
      },
      mounted(){
        this.$nextTick(() => {
          this.issueobj.detail = this.escapeStringHTML(this.editContent);
        });
      },
      methods: {
        getList() {
          this.loading = true;
          listissue(this.queryParams).then(response => {
            // console.log('期号',response)
            this.issuelist = response;
            this.loading = false;
          })
        },
        // app首页宣传地址
        setImgPathtop(value) {
          console.log('value---',value)
          // this.$nextTick(()=>{
            if(value){
              this.issueobj.advertiseTop = value;
            }else{
              // console.log('33333')
              this.issueobj.advertiseTop =''
              
              // this.$refs.upload.$refs.uploadfile.fileList=[]
            }
          // })
          // console.log('value-*--',this.issueobj.advertiseTop)
        },
        // app测试培训宣传地址
        setImgPathapp(value) {
          console.log('value---',value)
          this.$nextTick(()=>{
            this.issueobj.advertiseApp = value;
          })
        },
        // 网页宣传地址
        setImgPathweb(value) {
          console.log('value---',value)
          this.$nextTick(()=>{
            this.issueobj.advertiseWeb = value;
          })
        },
        // 
        closevisib(){
          this.visibleopen=false;
          this.issueobj.advertiseTop =''
        },
        submitto(type){
            if(type=='confirm'){
              this.$refs.issueobj.validate((valid)=>{
                if(valid){  
                let detail='';
                if(this.issueobj.detail){
                  detail=this.issueobj.detail
                }else{
                  detail=this.editContent
                }
                this.issueobj.type=parseInt(this.issueobj.type)
                this.issueobj.status=parseInt(this.issueobj.status)
                let data={
                    issueId:this.issueobj.issueId,
                    issue:this.issueobj.issue,
                    type:this.issueobj.type,
                    status:this.issueobj.status,
                    themeName:this.issueobj.themeName,
                    classAddr:this.issueobj.classAddr,
                    startTime:this.issueobj.startTime,
                    advertiseTop:this.issueobj.advertiseTop,
                    advertiseApp:this.issueobj.advertiseApp,
                    advertiseWeb:this.issueobj.advertiseWeb,
                    detail,
                }
                console.log('data---',data)
                // return;
                if(this.issueobj.issueId){
                  updateissue(data).then(res=>{
                      // console.log('修改成功',res)
                      this.$message.success('修改成功')
                      this.visibleopen=false
                      this.getList();
                  })
                }else{
                  addissue(data).then(res=>{
                      // console.log('修改成功',res)
                      this.$message.success('新增成功')
                      this.visibleopen=false
                      this.getList();
                  })
                }
              }})
            }else{
                this.visibleopen=false
            }
        },
        handleQuery() {
          this.getList();
        },
        resetQuery() {
          this.resetForm("queryForm");
          this.getList();
        },
        addsign(){
          // console.log('新增')
          this.visibtitle='新增期号'
          this.visibleopen=true,
          this.editContent='',
          this.issueobj.advertiseTop='',
          this.issueobj.advertiseApp='',
          this.issueobj.advertiseWeb='',
          this.issueobj={}
          // console.log('新增',this.$refs.appupload.clearImages())
          this.timer=new Date().getTime();
 
         
          // this.setImgPathtop(this.issueobj.advertiseTop)
        },
        modify(row,type) {
          if(type=='edit'){
            getissueById(row.issueId).then(res=>{
              let {issueId,issue,type,status,detail,themeName,classAddr,startTime,advertiseTop,advertiseApp,advertiseWeb}=res
              this.issueobj={issueId,issue,type:type+'',status:status+'',themeName,classAddr,startTime,advertiseTop,advertiseApp,advertiseWeb};
              this.editContent=detail
              console.log('res',res,this.issueobj)
            })
            this.visibtitle='修改期号'
            this.visibleopen=true
          }else if(type=='del'){
            this.$confirm('确定删除期号吗？', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
              delissue(row.issueId).then(res=>{
                this.$message.success('删除成功')
                this.getList();
              })
             })
          }
        },   
         // ========================富文本========================
        onEditorReady(editor) {
          // 准备编辑器
        },
        onEditorBlur() {}, // 失去焦点事件
        onEditorFocus() {}, // 获得焦点事件
        // 内容改变事件
        onEditorChange() {
          this.issueobj.detail = this.escapeStringHTML(this.editContent);
          console.log('输出结果',this.issueobj.detail)
        },
        // 转码
        escapeStringHTML(content) {
          content = content.replace(/&lt;/g, "<");
          content = content.replace(/&gt;/g, ">");
          return content;
        },
        // ========================富文本END========================    
      },
      created() {
        this.getList();
        
      }
    }
  </script>
  
  <style>
  .ql-editor {
    min-height: 150px;
    margin-left: -15px;
  }
  .ql-snow .ql-tooltip[data-mode="link"]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "保存";
    padding-right: 0px;
  }
  .ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px";
  }
  
  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
  }
  
  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "默认";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
    content: "宋体";
  }
  .ql-snow
    .ql-picker.ql-font
    .ql-picker-label[data-value="Microsoft-YaHei"]::before,
  .ql-snow
    .ql-picker.ql-font
    .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "黑体";
  }
  .ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .ql-toolbar.ql-snow {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .ql-snow .ql-stroke,
  .ql-snow .ql-picker {
    /* color: #999;
    stroke: #999; */
  }
  .ql-snow .ql-fill,
  .ql-snow .ql-stroke.ql-fill {
    /* fill: #999; */
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: "12px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: "14px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    content: "24px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {
    content: "28px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
    content: "32px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
    content: "36px";
  }
  .ql-container {
    font-size: 14px;
  }
</style>
 
<style lang="scss" scoped>
  .diaform {
    padding: 40px 0 0 80px;
    .quill-editor /deep/ .ql-container {
      min-height: 490px;
    }
    .ql-container {
      min-height: 500px;
    }
  }
</style>