<template>
  <div class="page">
    <el-card class="left" ref="cardTree">
      <div slot="header" class="clearfix">
        <span v-show="!status">选择编研主题</span>
        <el-button style="float: right; padding:  0" type="text" @click='btns'>
          <el-tooltip class="item" effect="dark" v-if="!status" content="折叠" placement="right">
            <svg-icon icon-class="leftzd" v-if="!status" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" v-if="status" content="展开" placement="left">
            <svg-icon icon-class="rightzd" v-if="status" />
          </el-tooltip>
        </el-button>
      </div>
      <el-form class="form" v-show="!status">
        <el-form-item label="编研主题">
          <el-select v-model="theme" size="small" style="width: 75%" placeholder="请选择编研主题" @change="cataChange(theme)">
            <el-option v-for="(item, key) in selectData" :key="key" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-tree highlight-current :expand-on-click-node="false" :data="treeList" :props="defaultProps" default-expand-all
        @node-click="handleNodeClick">
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <!--可以根据情况，以数据类型来显示不同的图标或图片-->
          <svg-icon icon-class="wjj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-if="data.isLeaf === 1"
            class="iconfont icon-folder-open-fill" />
          <svg-icon icon-class="wj" style="margin-right: 5px; color: rgb(255, 207, 92)" v-else
            class="iconfont icon-wenjian" />
          <span>{{ node.label }}</span>
          <span style="color: red; margin-left: 5px" v-if="data.bindName ? true : false">
            已分配 {{ data.bindName }}</span>
        </span>
      </el-tree>
    </el-card>
    <el-card class="right" ref="cardForm">
      <div slot="header">
        <div class="clearfix">
          <div>在线编写</div>
          <!-- <div>
            <el-button type="primary" size="mini" @click="look">
              浏览档案
            </el-button>
          </div> -->
        </div>
      </div>
      <tinymce v-model="editorText" ref="oneKeyTin" />
      <div class="btn">
        <el-button type="primary" size="mini" v-if="showButtons.submit" @click="sumbuit"><i class="el-icon-document-checked"></i>保存
        </el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
  import {
    message,
    clearObjValue
  } from "@/utils/common";
  import {
    mapState
  } from "vuex";
  import tinymce from "@/components/Tinymce";
  import {
    getWriter,
    addOnlineWriting
  } from "@/api/archiveUtilize/compilationResearch/onlineWriting";
  export default {
    data() {
      return {
        defaultProps: {
          children: "childClass",
          label: "nodeTitle",
        },
        status: false,
        theme: "",
        editorText: "",
        selectVal: {},
        treeList: []
      }
    },
    watch: {
      'status': {
        handler(val, oldVal) {
          const cardTree = this.$refs.cardTree.$el.style
          const cardForm = this.$refs.cardForm.$el.style
          if (val) {
            cardTree.width = '5%'
            cardForm.width = '94%'
          } else {
            cardTree.width = '25%';
            cardForm.width = '74%';
          }
        }
      }
    },
    computed: {
      ...mapState({
        selectData: (state) => state.onlineWriting.selectData,
        treeData: (state) => state.onlineWriting.treeData,
        showButtons: (state) => state.onlineWriting.showButtons,
      }),
    },
    components: {
      tinymce,
    },
    methods: {
      handleNodeClick(val) {
        this.selectId = val.id;
        let data = {
          catalogId: val.id,
          dataId: this.theme,
        };
        getWriter(data).then((res) => {
          let html = res.body.data ? res.body.data.contents : "";
          this.$refs.oneKeyTin.setContent(html);
        });
      },
      btns() {
        this.status = !this.status
      },
      cataChange(val) {
        if (this.selectVal === val) {
          return
        }
        this.$refs.oneKeyTin.setContent("");
        this.selectVal = val
        let data = {
          dataId: val,
          pId: -1,
          userId: sessionStorage.getItem("userid")
        };
        this.$store.dispatch('onlineWriting/getTree', data).then(res => {
          this.treeList = this.treeData
        })
      },
      look() {},
      sumbuit() {
        if (!this.theme) {
          message("warning", "请先选择编研主题", 2000);
          return;
        }
        if (!this.editorText) {
          message("warning", "请先编写内容", 2000);
          return;
        }
        let data = {
          catalogId: this.selectId,
          dataId: this.theme,
          contents: this.editorText,
        };
        addOnlineWriting(data).then((res) => {
          if (res.code === "100") {
            message("success", "保存成功", 2000);
          }
        });
      }
    },
    created() {
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("routerIdList"), this.$route.path),
        roleid: sessionStorage.getItem("roleid")
      }
      this.$store.dispatch("onlineWriting/getButtonList", btnData);
      let data = {
        page: 1,
        limit: 100000,
        state: 3,
      };
      this.$store.dispatch('onlineWriting/getData', data)
    }
  }

</script>
<style lang='scss' scoped>
  .page {
    display: flex;
    justify-content: space-around;

    .left {
      width: 25%;

      .clearfix {
        letter-spacing: 3px;
        font-size: 17px;
        font-weight: 600;
        text-align: left;
      }
    }

    .right {
      width: 74%;

      .clearfix {
        display: flex;
        letter-spacing: 3px;
        font-size: 17px;
        font-weight: 600;

      }
    }

    .btn {
      padding: 10px 0;
    }
  }

</style>
