<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="title">
          <el-input v-model="queryParams.title" 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="newslist">
      <el-table-column label="logo" align="center" key="picWeb" prop="picWeb">
        <template slot-scope="scope">
            <el-image v-if="scope.row.picWeb" style="width:39px;height:39px;" :src="scope.row.picWeb" :preview-src-list="[scope.row.picWeb]" alt=""></el-image>
            <p v-else>无</p>
          </template>
      </el-table-column>
      <el-table-column label="标题" align="center" key="title" prop="title" :show-overflow-tooltip="true"/>
      <el-table-column label="来源" align="center" key="source" prop="source" :show-overflow-tooltip="true"/>
      <el-table-column label="摘要" align="center" key="summary" prop="summary"  :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="作者" align="center" key="author" prop="author" :show-overflow-tooltip="true"/>
      <el-table-column label="发布时间" align="center" key="ptime" prop="ptime" >
        <template slot-scope="scope">
            <span v-if="scope.row.ptime">{{scope.row.ptime.slice(0,10)}}</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>
    <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="1200px" height="700px"
               append-to-body @close='visibleopen=false'>
      <el-form :model="newsobj" :rules="rules" ref="newsobj" label-width="150px">
        <el-form-item label="Logo" prop="iconPath">
          <el-input v-model="newsobj.picWeb" v-show="false"></el-input>
          <multi-upload :key="timer" v-model="newsobj.picWeb"  @setImgPath="setImgPath" fileName="logo" :limit="1" :imgAction="imgAction" listtype='picture-card'/>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input  v-model="newsobj.title" style="width:330px"></el-input>
        </el-form-item>
        <el-form-item label="来源" prop="source">
          <el-input  v-model="newsobj.source" style="width:330px"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input  v-model="newsobj.author" style="width:330px"></el-input>
        </el-form-item>
        <el-form-item label="摘要" prop="summary">
          <el-input  type="textarea" :rows="5" v-model="newsobj.summary" style="width:330px"></el-input>
        </el-form-item>
        <div style="width:1000px;margin-left:80px">
          <p style="color:#606266;font-weight:700;margin-bottom:20px;">文章内容</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>
        <!-- <div style="border:1px solid #DCDFE6;padding:20px;width:100%;height:1000px">
          <div v-html='newsobj.content'></div>
        </div> -->
        <!-- <div  class="ql-editor"  v-html='newsobj.content'></div> -->
      </el-form>
    </el-dialog>

  </div>
</template>
<!-- 引入 Quill 的 Image Resize 模块 -->
<!-- <script src="https://cdn.quilljs.com/1.3.6/quill.imageResize.min.js"></script> -->
<script>
  import {listnews,getnewById,addnews,updatenews,delnewsById} from "@/api/newmanage/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: "peixunbaoming",
    components: { MultiUpload,quillEditor},
    data() {
      return {
        timer:'',
        imgAction:process.env.VUE_APP_BASE_API + "/upload",
        loading: false,
        newslist: [],
        // 总条数
        total: 0,
       
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          title:''
        },
        title:'新增资讯',
        newsobj:{id:'',picWeb:'',source:'',summary:'',title:'',content:'',author:''},
        visibleopen:false,
        rules:{
            title:[{ required: true, message: "请输入资讯标题", trigger: "blur" }],
            author:[{ required: true, message: "请填写作者", trigger: "blur" }],
            source:[{ required: true, message: "请输入来源", trigger: "blur" }],
            summary:[{ required: true, message: "请输入摘要", trigger: "blur" }],
        },
        iconTip: '',
        // 配置富文本编辑
        editorOption: {
          placeholder: "请在这里输入",
          modules: {
            toolbar: {
              container:toolbarOptions, 
              // handlers: {
              //   image: this.handleImgUpload,
              // },
              // handlers: {   //此处是图片上传时候需要使用到的
              //   'image': function (value) {
              //             console.log(value)
              //             if (value) {  // 点击图片
              //                 document.querySelector('#upload').click()
              //             }
              //         }
              //   }
            },
            // 图片拖拽
            // imageDrop: true,
            imageResize: {
                displayStyles: {
                  backgroundColor: 'black',
                  border: 'none',
                  color: 'white'
                },
                modules: ['Resize', 'DisplaySize', 'Toolbar']
            },
          },
      },
      editContent: "", // 编辑器内容
      }
    },
    computed:{
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
    mounted(){
      this.$nextTick(() => {
        this.newsobj.content = this.escapeStringHTML(this.editContent);
      });
      console.log('editorOption---',this.editorOption)
    },
    methods: {
      //logo
      setImgPath(value) {
        // this.newsobj.picWeb=''
        console.log('value---',value)
        this.$nextTick(()=>{
          this.newsobj.picWeb = value;
        })
      },
      getList() {
        this.loading = true;
        listnews(this.queryParams).then(response => {
          // console.log('资讯',response)
          this.newslist = response.rows;
          this.total = response.total;
          this.loading = false;
        })
      },
      //新增资讯的弹窗
      addsign(){
        this.newsobj={};
        this.title='新增资讯'
        this.newsobj.picWeb=''
        console.log('this.newsobj--', this.newsobj,)
        this.editContent=''
        this.visibleopen=true
        this.timer=new Date().getTime();
      },
      //修改资讯的弹窗
      modify(row,type) {
          if(type=='edit'){
            console.log('---',row)
            let {id,title,source,summary,picWeb,author}=row
            this.newsobj={id,title,source,summary,picWeb,author};
            getnewById(row.id).then(res=>{
              console.log('--res-',res)
              let {content}=res
              this.editContent=content
              // this.newsobj={id,title,source,summary,picWeb,author,};
              // console.log('-修改的信息-',this.newsobj)
            })
            this.visibleopen=true
            this.title='修改资讯'
          }else if(type=='del'){
            this.$confirm('确定删除资讯吗？', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
              delnewsById(row.id).then(res=>{
                this.$message.success('删除成功')
                this.getList();
              })
             })
          }
        
      },
      // 提交
      submitto(type){
        if(type=='confirm'){
          console.log('this.newsobj--',this.newsobj.picWeb,this.newsobj.picWeb.indexOf('https'))
          let picWeb='';
          if(this.newsobj.picWeb.indexOf('https')==0){
            picWeb=this.newsobj.picWeb
          }else{
            picWeb='https://www.keyitest.cn/prod-api'+this.newsobj.picWeb
          }
          let content='';
          if(this.newsobj.content){
            content=this.newsobj.content
          }else{
            content=this.editContent
          }
          let data={
                id:this.newsobj.id,
                title:this.newsobj.title,
                source:this.newsobj.source,
                summary:this.newsobj.summary,
                picWeb,
                content,
                author:this.newsobj.author,
            }
          console.log('newsobj',data)
          // return;
          if(this.newsobj.id){
            updatenews(data).then(res=>{
              if(res.code==200){
                this.$message.success('修改成功')
                this.visibleopen=false
                this.getList();
              }
            })
          }else{
            addnews(data).then(res=>{
              if(res.code==200){
                this.$message.success('修改成功')
                this.visibleopen=false
                this.getList();
              }
            })
          }
        }else{
            this.visibleopen=false
        }
      },
     
      handleQuery() {
        this.getList();
      },
      resetQuery() {
        this.resetForm("queryForm");
        this.getList();
      },
      // ========================富文本========================
      onEditorReady(editor) {
        // 准备编辑器
      },
      onEditorBlur() {}, // 失去焦点事件
      onEditorFocus() {}, // 获得焦点事件
      // 内容改变事件
      onEditorChange() {
        this.newsobj.content = this.escapeStringHTML(this.editContent);
        console.log('输出结果',this.newsobj.content)
      },
      // 转码
      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;
  }
  .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>
