<template>
  <el-drawer
    title="新闻预览"
    size="50%"
    :visible="showBindDrawerDetail"
    :direction="direction"
    :before-close="handleClose"
  >
    <el-row style="text-align: left;padding-left: 3%"><span style="width: 800px;height: 47px;font-size: 30px;font-weight: bold;line-height: 64px;color: #333333;">{{ this.tableData.title }}</span></el-row>
    <el-row style="margin-top: 5px;text-align: left;padding-left: 3%"><span style="font-size: 12px;color: #9c9795;">{{ this.organName }}</span><span style="font-size: 12px;color: #9c9795;margin-left: 2%">{{ this.tableData.createAt | fmtDate('yyyy-MM-dd HH:mm:ss') }}</span></el-row>

    <el-row class="ql-editor" style="padding-left: 5%;max-width: 800px;margin-top: 20px;padding-bottom: 50px;font-family: MicrosoftYaHei; font-size: 18px; font-weight: normal; font-stretch: normal; line-height: 36px; letter-spacing: 0px; color: #333333;">
      <div v-html="this.tableData.content" />
    </el-row>
    <el-divider />
  </el-drawer>
</template>

<script>
import newsApi from '@/api/info/newsApi'
import organApi from '@/api/organ/organApi'
export default {
  name: 'AdminBinder',
  components: {
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    showBindDrawerDetail: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'rtl'
    }
  },
  data() {
    return {
      loading: false,
      tempId: '',
      tableData: [],
      organName: ''
    }
  },
  watch: {
    showBindDrawerDetail(val) {
      this.findNewsById()
    }
  },
  mounted() {
    //this.findNewsById()
  },
  methods: {
    findOrganById(organId) {
      organApi.findOrgan(organId).then(data => {
        this.organName = data.name
        this.reloading = true
        var temp = document.getElementsByClassName('el-drawer rtl')
        temp[1].style.overflow = 'scroll'
      })
    },
    findNewsById() {
      newsApi.findNewsById(this.id).then(data => {
        this.tableData = data
        this.findOrganById(data.organId)
      })
    },
    handleClose() {
      this.$emit('closeBindDrawerDetail', false)
    }
  }
}
</script>
<style>
  .el-drawer rtl {
    overflow: scroll;
  }
</style>
