<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="上级名称" prop="mc">
        <div style='width: 220px'>
          <treeselect v-model="queryParams.fid" :options="zbOptions2" :normalizer="normalizer" placeholder="请选择上级名称" />

        </div>
      </el-form-item>
      <el-form-item label="名称" prop="mc">
        <el-input v-model="queryParams.mc" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" />
      </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>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="cbList">


      <el-table-column label="上级名称" align="center" prop="fmc" />
      <el-table-column label="名称" align="center" prop="mc" />
      <el-table-column label="排序" align="center" prop="px" />
      <el-table-column label="发布状态" align="center" prop="fbzt" :formatter="statusFormatter" />

      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>

          <el-button v-if="scope.row.fbzt === '0'" size="mini" type="text" @click="fb(scope.row.id, '1')">发布</el-button>
          <el-button v-if="scope.row.fbzt === '1'" size="mini" type="text" @click="fb(scope.row.id, '0')">撤回</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改油气数智化-产品对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="类型" prop="fid">
              <treeselect v-model="fid" :options="zbOptions2" :normalizer="normalizer" placeholder="请选择上级名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="mc">
              <el-input v-model="form.mc" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="排序" prop="px">
              <el-input v-model="form.px" placeholder="请输入排序" />
            </el-form-item>
          </el-col>

        </el-row>
        <div v-if="cplx === '产品'">

          <div style="width: 97%;height: 450px">
            <div>
              <el-tabs type="border-card">
                <el-tab-pane label="产品简介">

                  <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc;" :editor="editor" :defaultConfig="toolbarConfig"
                      :mode="mode" />
                    <Editor style="height: 330px; overflow-y: hidden;" v-model="form.cpjj" :defaultConfig="editorConfig"
                      :mode="mode" @onCreated="onCreated" />
                  </div>
                </el-tab-pane>
                <el-tab-pane label="功能特点">

                  <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor2" :defaultConfig="toolbarConfig2"
                      :mode="mode2" />
                    <Editor style="height: 330px; overflow-y: hidden;" v-model="form.gntd"
                      :defaultConfig="editorConfig2" :mode="mode2" @onCreated="onCreated2" />
                  </div>
                </el-tab-pane>
                <el-tab-pane label="应用成效">
                  <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor3" :defaultConfig="toolbarConfig3"
                      :mode="mode3" />
                    <Editor style="height: 330px; overflow-y: hidden;" v-model="form.yycx"
                      :defaultConfig="editorConfig3" :mode="mode3" @onCreated="onCreated3" />
                  </div>

                </el-tab-pane>
                <el-tab-pane label="用法介绍">
                  <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor4" :defaultConfig="toolbarConfig4"
                      :mode="mode4" />
                    <Editor style="height: 330px; overflow-y: hidden;" v-model="form.yfjs"
                      :defaultConfig="editorConfig4" :mode="mode4" @onCreated="onCreated4" />
                  </div>

                </el-tab-pane>
              </el-tabs>
            </div>

          </div>
          <!--          <el-form-item label="产品简介" prop="cpjj">-->
          <!--            <el-input v-model="form.cpjj" type="textarea" placeholder="请输入内容" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="功能特点" prop="gntd">-->
          <!--            <el-input v-model="form.gntd" type="textarea" placeholder="请输入内容" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="应用成效" prop="yycx">-->
          <!--            <el-input v-model="form.yycx" type="textarea" placeholder="请输入内容" />-->
          <!--          </el-form-item>-->
          <!--          <el-form-item label="用法介绍" prop="yfjs">-->
          <!--            <el-input v-model="form.yfjs" type="textarea" placeholder="请输入内容" />-->
          <!--          </el-form-item>-->
        </div>

        <div v-if="cplx === '服务类'">

          <div style="width: 97%;height: 450px">
            <div>
              <el-tabs type="border-card">
                <el-tab-pane label="团队介绍">

                  <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc;" :editor="editor5" :defaultConfig="toolbarConfig5"
                      :mode="mode5" />
                    <Editor style="height: 330px; overflow-y: hidden;" v-model="form.tdjs"
                      :defaultConfig="editorConfig5" :mode="mode5" @onCreated="onCreated5" />
                  </div>
                </el-tab-pane>
                <el-tab-pane label="服务特色">

                  <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor6" :defaultConfig="toolbarConfig6"
                      :mode="mode6" />
                    <Editor style="height: 330px; overflow-y: hidden;" v-model="form.fwts"
                      :defaultConfig="editorConfig6" :mode="mode6" @onCreated="onCreated6" />
                  </div>
                </el-tab-pane>
                <el-tab-pane label="服务案例">
                  <div style="border: 1px solid #ccc;">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor7" :defaultConfig="toolbarConfig7"
                      :mode="mode7" />
                    <Editor style="height: 330px; overflow-y: hidden;" v-model="form.fwal"
                      :defaultConfig="editorConfig7" :mode="mode7" @onCreated="onCreated7" />
                  </div>

                </el-tab-pane>

              </el-tabs>
            </div>

          </div>

        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listCb, getCb, delCb, addCb, updateCb } from "@/api/system/cb";
import { listZb, getZb } from "@/api/system/zb";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import { getToken } from "@/utils/auth";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from "axios";

import { Base64 } from 'js-base64'
export default {
  name: "Cb",
  components: {
    Treeselect,
    Editor,
    Toolbar
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 油气数智化-产品表格数据
      cbList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fid: null,
        mc: null,
        px: null,
        fbzt: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      // 油气数智化-分类树选项
      zbOptions2: [],

      zbOptions: [],
      fid: null,
      cplx: '',
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload",

      editor: null,
      html: ' ',
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          // 配置上传图片
          uploadImage: {
            async customUpload(file, insertFn) {
              console.log('file', file)
              const form = new FormData()
              form.append('file', file)


              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })

              for (var value of form.values()) {
                console.log(value);
              }
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data
                //insertFn用于图片显示在编辑器上
                insertFn(
                  process.env.VUE_APP_BASE_API + data.fileName, '', '')
              })
                .catch(err => console.log(err, 888))
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data

                insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
              })
                .catch(err => console.log(err, 888))
            }
          }
        }
      },
      mode: 'default',

      editor2: null,
      html2: ' ',
      toolbarConfig2: {},
      editorConfig2: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          // 配置上传图片
          uploadImage: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data
                //insertFn用于图片显示在编辑器上
                insertFn(
                  process.env.VUE_APP_BASE_API + data.fileName, '', '')
              })
                .catch(err => console.log(err, 888))
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data

                insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
              })
                .catch(err => console.log(err, 888))
            }
          }
        }
      },
      mode2: 'default',

      editor3: null,
      html3: ' ',
      toolbarConfig3: {},
      editorConfig3: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          // 配置上传图片
          uploadImage: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data
                //insertFn用于图片显示在编辑器上
                insertFn(
                  process.env.VUE_APP_BASE_API + data.fileName, '', '')
              })
                .catch(err => console.log(err, 888))
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data

                insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
              })
                .catch(err => console.log(err, 888))
            }
          }
        }
      },
      mode3: 'default',

      editor4: null,
      html4: ' ',
      toolbarConfig4: {},
      editorConfig4: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          // 配置上传图片
          uploadImage: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data
                //insertFn用于图片显示在编辑器上
                insertFn(
                  process.env.VUE_APP_BASE_API + data.fileName, '', '')
              })
                .catch(err => console.log(err, 888))
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data

                insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
              })
                .catch(err => console.log(err, 888))
            }
          }
        }
      },
      mode4: 'default',


      editor5: null,
      html5: ' ',
      toolbarConfig5: {},
      editorConfig5: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          // 配置上传图片
          uploadImage: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data
                //insertFn用于图片显示在编辑器上
                insertFn(
                  process.env.VUE_APP_BASE_API + data.fileName, '', '')
              })
                .catch(err => console.log(err, 888))
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data

                insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
              })
                .catch(err => console.log(err, 888))
            }
          }
        }
      },
      mode5: 'default',



      editor6: null,
      html6: ' ',
      toolbarConfig6: {},
      editorConfig6: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          // 配置上传图片
          uploadImage: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data
                //insertFn用于图片显示在编辑器上
                insertFn(
                  process.env.VUE_APP_BASE_API + data.fileName, '', '')
              })
                .catch(err => console.log(err, 888))
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data

                insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
              })
                .catch(err => console.log(err, 888))
            }
          }
        }
      },
      mode6: 'default',



      editor7: null,
      html7: ' ',
      toolbarConfig7: {},
      editorConfig7: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 所有的菜单配置，都要在 MENU_CONF 属性下
          // 配置上传图片
          uploadImage: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data
                //insertFn用于图片显示在编辑器上
                insertFn(
                  process.env.VUE_APP_BASE_API + data.fileName, '', '')
              })
                .catch(err => console.log(err, 888))
            }
          },
          uploadVideo: {
            async customUpload(file, insertFn) {
              const form = new FormData()
              form.append('file', file)
              // 发送post请求
              const instance = axios.create({
                baseURL: process.env.VUE_APP_BASE_API,
                timeout: 1000,
                headers: {
                  Authorization: "Bearer " + getToken(),
                  'Content-Type': 'multipart/form-data'
                }
              })
              instance.post("/common/upload", form
              ).then(res => {
                let data = res.data

                insertFn(process.env.VUE_APP_BASE_API + data.fileName, '')
              })
                .catch(err => console.log(err, 888))
            }
          }
        }
      },
      mode7: 'default',



      previewForm: {},
      activeName: 'first',
    };
  },
  created() {
    this.getList();
    this.getTreeselect2()
  },
  watch: {
    'fid'(newVal, oldVal) {
      this.form.fid = newVal;

      if (newVal !== null && newVal !== undefined) {
        console.log('进入++++++==')
        getZb(newVal).then(response => {
          this.cplx = response.data.cplx
        });
      } else {
        this.cplx = null
      }


    }
  },
  methods: {
    statusFormatter(row, column, cellValue) {
      return cellValue === '1' ? '已发布' : '未发布';
    },
    fb(id, zt) {
      let list = {
        id: id,
        fbzt: zt
      }

      updateCb(list).then(response => {
        if (zt === '1') {
          this.$modal.msgSuccess("已发布");
        } else {
          this.$modal.msgSuccess("取消发布");
        }
        this.getList()
      });
    },


    getTreeselect2() {
      listZb().then(response => {
        this.zbOptions2 = [];
        const data = { id: 0, mc: '产品/服务类', children: [] };
        data.children = this.handleTree(response.data, "id", "fid");
        this.zbOptions2.push(data);
      });
    },

    /** 转换油气数智化-分类数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.mc,
        children: node.children
      };
    },
    /** 查询油气数智化-产品列表 */
    getList() {
      this.fid = null
      this.loading = true;
      listCb(this.queryParams).then(response => {
        this.cbList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.fid = null
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        fid: null,
        mc: null,
        px: null,
        fbzt: null,
        tdjs: null,
        cpjj: null,
        gntd: null,
        yycx: null,
        yfjs: null,
        fwts: null,
        fwal: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.fid = null
      this.reset();
      this.open = true;
      this.title = "添加油气数智化-产品";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCb(id).then(response => {
        this.form = response.data;
        this.fid = this.form.fid;
        this.open = true;
        this.title = "修改油气数智化-产品";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {

            let list = this.form
            list.tdjs = Base64.encode(this.form.tdjs)
            list.cpjj = Base64.encode(this.form.cpjj)
            list.gntd = Base64.encode(this.form.gntd)
            list.yycx = Base64.encode(this.form.yycx)
            list.yfjs = Base64.encode(this.form.yfjs)
            list.fwts = Base64.encode(this.form.fwts)
            list.fwal = Base64.encode(this.form.fwal)

            updateCb(list).then(response => {


              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            let list = this.form
            list.tdjs = Base64.encode(this.form.tdjs)
            list.cpjj = Base64.encode(this.form.cpjj)
            list.gntd = Base64.encode(this.form.gntd)
            list.yycx = Base64.encode(this.form.yycx)
            list.yfjs = Base64.encode(this.form.yfjs)
            list.fwts = Base64.encode(this.form.fwts)
            list.fwal = Base64.encode(this.form.fwal)

            addCb(list).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除油气数智化-产品编号为"' + ids + '"的数据项？').then(function () {
        return delCb(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/cb/export', {
        ...this.queryParams
      }, `cb_${new Date().getTime()}.xlsx`)
    },
    onCreated(editor) {

      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },



    onCreated2(editor) {
      this.editor2 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },

    onCreated3(editor) {
      this.editor3 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onCreated4(editor) {
      this.editor4 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onCreated5(editor) {
      this.editor5 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onCreated6(editor) {
      this.editor6 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onCreated7(editor) {
      this.editor7 = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },

    beforeDestroy() {
      const editor = this.editor
      if (editor == null) return
      editor.destroy() // 组件销毁时，及时销毁编辑器
    }
  }
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.container {
  background: linear-gradient(to bottom, #3167A9, #ffffff);
  padding-top: 50px;
  position: relative;
  height: 50%;

  .content {
    background: #ffffff;
    padding: 20px 20px;
    margin: 0 10%;
    border: 1px solid #101010;
    border-radius: 26px;
    //height: calc(100vh - 430px);

    .title {
      text-align: center;
      line-height: 45px;
    }

    .info {
      margin: 20px 0;
      display: flex;
      justify-content: flex-end;
      font-size: 16px;
      color: #6C6C6C;
      padding-bottom: 10px;
      border-bottom: 1px solid #6C6C6C;

      .source {
        margin-right: 20px;
      }
    }

    .detail {
      //max-height: 100%;
      font-size: 16px;
      min-height: calc(100vh - 600px);

      p {
        text-indent: 2em;
      }
    }
  }
}

::v-deep img {
  max-width: 90% !important;
  height: auto !important;

}

::v-deep video {
  max-width: 90% !important;
  height: auto !important;

}
</style>
