<template>
  <div class="page">
    <div class="content-1">
      <div class="title">在线排版</div>
      <div style="width: 35%">
        <label style="padding-right: 10px">编研主题</label>
        <el-select v-model="theme" size="mini" style="width: 65%" placeholder="请选择编研主题" @change="themeChange">
          <el-option v-for="(item, key) in selectData" :key="key" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <div class="content-2">
      <tinymce v-model="editorText" ref="oneKeyTin" />
    </div>
    <div class="btn">
      <el-button type="primary" v-if="showButtons.submit" size="mini" @click="submit"><i class="el-icon-document-checked"></i>保存
      </el-button>
    </div>
  </div>
</template>
<script>
  import {
    getData,
  } from "@/api/archiveUtilize/compilationResearch/editingTopics"
  import {
    getInfo,
    addData
  } from "@/api/archiveUtilize/compilationResearch/onlineTypesetting";
  import tinymce from "@/components/Tinymce";
  import { getButtonList } from "@/api/user"
  import {
    message
  } from '@/utils/common';
  export default {
    data() {
      return {
        theme: "",
        editorText: "",
        selectData: [],
        showButtons: {
          submit: false,
        },
      };
    },
    components: {
      // editor,
      tinymce,
    },
    methods: {
      onContentChange(val) {
        this.editorTextCopy = val;
      },
      //获取下拉值
      getData() {
        let data = {
          page: 1,
          limit: 100000,
          state: 5,
        };
        getData(data)
          .then((res) => {
            if (res.code === "100") {
              this.selectData = res.body.list;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      themeChange() {
        this.$refs.oneKeyTin.setContent("");
        let data = {
          id: this.theme,
        };
        getInfo(data).then((res) => {
          let html = res.body.data ? res.body.data.content : "";
          this.$refs.oneKeyTin.setContent(html);
        });
      },
      submit() {
        if (!this.theme) {
          message("warning", "请选择编研主题", 2000);
          return;
        }
        let data = {
          content: this.editorText,
          dataId: this.theme,
        };
        addData(data).then((res) => {
          message("success", "编辑成功", 3000)
        });
      },
      async getButtonList(){
        let params = {
          menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
          roleid: sessionStorage.getItem("roleid")
        }
        let res =  await getButtonList(params);
        if(res.code === '100'){
          let data = res.body.list;
          data.forEach(item=>{
            this.showButtons[item.key] = true;
          })
        }
      },
    },
    created() {
      this.getButtonList()
      this.getData();
    },
  };

</script>

<style lang="scss" scoped>
  .page {
    background: #fff;
    width: 100%;

    .content-1 {
      padding: 10px 8px;
      display: flex;
      justify-content: space-between;
      height: 50px;
      border-bottom: 1px solid #ccc;

      .title {
        padding-left: 10px;
        font-size: 16px;
        font-weight: bold;
      }
    }

    .content-2 {
      padding: 15px 15px;
    }

    .btn {
      text-align: left;
      padding: 10px 20px;
    }
  }

</style>
