<template>
  <div class="Alarm">
    <el-row>
      <el-col :span="24">
        <div style="display: flex; align-items: center">
          <h2>{{ $t(`login.publishObservations`) }}</h2>
          <!-- <i class="i ishuaxin1 Refresh"></i> -->
        </div>
      </el-col>
    </el-row>

    <!-- 标签页 -->
    <el-tabs v-model="activeName">
      <!-- 编写周报 -->
      
  
      <el-tab-pane label="编写周报" name="weekly">     
        <div class="subscribeRelease">     
          <el-row>        
            <el-form class="registeredForm" :model="reportList">
              <!-- 报告类型 -->
              <el-form-item>
                <div style="width: 100%">报告类型:</div>
                <el-input
                  v-model="reportList.type"
                  size="small"
                  autocomplete="off"
                  style="width: 14.5%"
                  :placeholder="$t(`login.placeholderTitle`)"
                ></el-input>
              </el-form-item>

              <!--报告标题-->
              <el-form-item>
                <div style="width: 100%">报告标题:</div>
                <el-input
                  v-model="reportList.title"
                  size="small"
                  autocomplete="off"
                  style="width: 30%"
                  :placeholder="$t(`login.placeholderTitle`)"
                ></el-input>
              </el-form-item>
              <!-- 报告内容上传-->
              <el-form-item>
                <div style="width: 100%">报告内容PDF上传:</div>
                <!-- :autosize="{ minRows: 10, maxRows: 10}" -->
                <el-upload
              class="upload-demo"
              ref="upload"
              drag
              action
              multiple
              :limit="fileLimit"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :file-list="fileList"
              :on-change="handelChange"
              show-file-list
              :auto-upload="false"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
              将文件拖到此处，或<em>  点击上传</em>
              </div>
            </el-upload>
       

                <!-- <el-input
            type="textarea"
            style="width: 60%"
            resize="none"
            v-model="reportList.content"
            :autosize="{ minRows: 10, maxRows: 10}"
          ></el-input> -->
              </el-form-item>

              <el-button type="warning" style="width: 200px">提交</el-button>
            </el-form>
          </el-row>
        </div>
      </el-tab-pane>
      <!-- 编写月报 -->
      <el-tab-pane label="编写月报" name="monthlyReport"> </el-tab-pane>
      <!-- 编写重大消息 -->
      <el-tab-pane label="编写重大消息" name="majorNews">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor   
           style="height: 500px; overflow-y: hidden"         
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
            @onChange="onChange"
          />
        </div>

        <!-- <div ref="editor"></div> -->

        <el-button style="margin-top: 20px" type="warning">发布</el-button>
        <el-button @click="preview" style="margin-top: 20px" type="warning"
          >预览</el-button
        >
      </el-tab-pane>
      <!-- 编写活动通知 -->
      <el-tab-pane label="编写活动通知" name="writingActivities"> </el-tab-pane>
      <!-- 查看历史记录 -->
      <el-tab-pane label="查看历史记录" name="viewHistory">
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from"
          style="width: 100%"
          max-height="500"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column prop="title" label="消息标题" width="700px">
          </el-table-column>
          <el-table-column prop="classification" label="所属分类">
          </el-table-column>
          <el-table-column prop="date" sortable label="创建时间">
          </el-table-column>
          <el-table-column prop="Creator" sortable label="创建人">
          </el-table-column>
          <el-table-column prop="releaseTime" sortable label="发布时间">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center" style="margin-top: 15px">
          <el-col :span="10">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-sizes="pageSizes"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalLimit1"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!-- 预览弹窗 -->
    <el-dialog title="预览效果" :visible.sync="dialogVisible" width="30%">
      <div v-html="previewHtml"></div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="warning" @click="dialogVisible = false"
          >确认发布</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import IndexJs from "./index";
import"@wangeditor/editor/dist/css/style.css";
export default {
  components: { Editor, Toolbar },

  mixins: [IndexJs],
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.Alarm {
  padding: 50px 100px;
}
</style>
<style >
</style>
