<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页</el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <div class="panel-header">
          <div class="title">{{tmpMessageLog.title}}消息详情</div>
        </div>
        <el-form :model="tmpMessageLog" label-width="160px" label-suffix="：" disabled v-loading="formDataLoading">
          <el-form-item label="收件人" prop="toUser">
            <el-input v-model="tmpMessageLog.toUser"></el-input>
          </el-form-item>
          <el-form-item label="发件人" prop="fromUser">
            <el-input v-model="tmpMessageLog.fromUser"></el-input>
          </el-form-item>
          <el-form-item label="消息类型" prop="typeName">
            <el-select v-model="tmpMessageLog.typeName" placeholder="" disabled style="width:100%">
            </el-select>
          </el-form-item>
          <el-form-item label="消息业务类型" prop="businessTypeName">
            <el-select v-model="tmpMessageLog.businessTypeName" placeholder="" disabled style="width: 100%;">
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input v-model="tmpMessageLog.title"></el-input>
          </el-form-item>
          <el-form-item label="消息内容">
            <ueditor ref="editor" :content.sync="tmpMessageLog.content" :config="editorConfig" @loaded="dataLoading = false">
            </ueditor>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import ueditor from '@src/components/ueditor.vue'
export default {
  components: { ueditor },
  props: {
    messageId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      formDataLoading: false,
      // 编辑器配置
      editorConfig: {
        initialFrameHeight: 200,
        toolbars: [
          ['source', '|', 'undo', 'redo', '|',
            'inserttable', 'zpagebreak', 'insertorderedlist', 'insertunorderedlist', 'link', 'unlink', '|',
            'forecolor', 'fontfamily', 'fontsize', 'lineheight', '|',
            'bold', 'italic', 'underline', 'strikethrough', 'removeformat', '|',
            'indent', 'justifyleft', 'justifycenter', 'justifyright']
        ]
      },
      tmpMessageLog: {},
      dataLoading: true
    }
  },
  mounted() {
    this.beforeTurnToPage()
  },
  methods: {
    async beforeTurnToPage() {
      this.formDataLoading = true
      let res = await axios.get(`/ui/messagemanager/${this.messageId}`)
      this.tmpMessageLog = res.data.data
      this.formDataLoading = false
    }
  }
}
</script>
