<template>
  <div class="publish-main">
    <h2 style="font-weight:600;font-size:20px;text-align:center;margin-bottom:10px;">交易公告</h2>
    <el-form :model="detailForm" label-width="80px">
      <el-row>
        <el-form-item label="公告标题" required prop="ggbt">
          <el-input
            style="width:90%"
            v-model="detailForm.ggbt"
            :rules="[{ required: true, message: '请输入公告标题', trigger: 'blur' }]"
            :disabled="isView"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="发布人" required prop="fbr">
          <el-input
            style="width:90%"
            v-model="detailForm.fbr"
            :rules="[{ required: true, message: '请输入发布人', trigger: 'blur' }]"
            :disabled="isView"
          ></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="公告内容" required prop="ggzw">
          <!-- <el-input v-model="detailForm.ggzw" :rules="[{ required: true, message: '请输入公告内容', trigger: 'blur' }]" :disabled="isView" type="textarea" :autosize="{minRows:4}"></el-input> -->
          <el-col style="width:90%">
            <quill-editor v-if="$route.query.state == 1" v-model="detailForm.ggzw" id="detailText"></quill-editor>
            <quill-editor v-else v-model="detailForm.ggzw"></quill-editor>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row style="text-align:center">
      <el-button
        v-if="!isView"
        @click="handleSave"
        class="iconfont iconbaocun"
        type="primary"
        size="small"
      >保存</el-button>
      <el-button
        v-if="!isView"
        @click="handlePublish"
        class="iconfont iconfabu"
        type="primary"
        size="small"
      >发布</el-button>
      <el-button
        @click="$router.push('index')"
        class="iconfont iconfanhui"
        type="primary"
        size="small"
      >返回</el-button>
    </el-row>
  </div>
</template>

<script>
import {
  update,
  detail
} from "@/api/transaction/tradeEntrust/outInDepotEntrust/index.js";
import { VueEditor } from "vue2-editor";
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      detailForm: {
        fbr: sessionStorage.getItem("deptName")
      },
      wtbm: "",
      isView: false
    };
  },
  created() {
    // state 0 发布 1 详情
    let { state, wtbm } = this.$route.query;
    this.wtbm = wtbm;
    this.getDetail();
    if (state == 1) {
      this.isView = true;
    }
  },
  mounted() {
    if (!this.isView) return;
    this.$nextTick(() => {
      document
        .querySelector(".ql-editor")
        .setAttribute("contenteditable", "false");
    });
  },
  methods: {
    async getDetail() {
      var res = await detail(this.wtbm);
      if (res && res.infoCode === 200) {
        this.detailForm = res.data;
        if (!res.data.fbr) {
          this.detailForm.fbr = sessionStorage.getItem("deptName");
        }
      }
    },
    update() {
      update({
        ...this.detailForm
      }).then(res => {
        if (res.infoCode === 200) {
          this.$message.success(res.msg);
          this.$router.push("index");
          return;
        }
        this.$message.error(res.msg);
      });
    },
    handleSave() {
      this.detailForm.zt = "91000018";
      this.detailForm.ztmc = "已确认";
      this.detailForm.fbzt = "0";
      this.detailForm.fbztmc = "暂存";
      this.update();
    },
    handlePublish() {
      this.detailForm.zt = "91000048";
      this.detailForm.ztmc = "已发布";
      this.detailForm.fbzt = "1";
      this.detailForm.fbztmc = "已发布";
      this.update();
    }
  }
};
</script>

<style lang="scss" scoped>
.publish-main {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}
#detailText /deep/ .ql-toolbar.ql-snow {
  display: none;
}
#detailText /deep/ .ql-container.ql-snow {
  border: 1px solid #ccc !important;
}
</style>
