<template>
  <el-drawer
    :title="title"
    size="50%"
    :visible="showBindDrawer"
    :direction="direction"
    :before-close="handleClose"
  >
    <el-row>
      <el-form ref="form" :model="form" :rules="formRules" label-suffix="：" label-width="120px">
        <el-form-item label="标题" prop="title" style="width: 50%;margin-left: 20%">
          <el-input v-model.trim="form.title" placeholder="请输入新闻标题" clearable />
        </el-form-item>
        <el-form-item label="机构名称" prop="organId" style="width: 50%;margin-left: 20%">
          <select-organ v-model="form.organId" :multiple="false" />
        </el-form-item>
        <el-form-item label="发布机构/人" prop="author" style="width: 50%;margin-left: 20%">
          <el-input v-model.trim="form.author" placeholder="请输入发布机构/人" clearable />
        </el-form-item>
        <el-form-item label="内容" prop="content" style="text-align: left;padding-right: 10px">
          <tinymce v-if="reloading" v-model="form.content" :height="300" />
        </el-form-item>
      </el-form>
      <div style="text-align: right;margin-right: 1%">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-row>

    <el-divider />
  </el-drawer>
</template>

<script>
import { SelectOrgan } from '@/components/organ'
import Tinymce from '@/components/Tinymce'
import newsApi from '@/api/info/newsApi'
export default {
  name: 'AdminBinder',
  components: {
    'select-organ': SelectOrgan,
    Tinymce
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    showBindDrawer: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'rtl'
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      tempId: '',
      form: {
        id: '',
        title: '',
        content: '',
        author: '',
        organId: ''
      },
      reloading: false,
      formRules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        author: [{ required: true, message: '请输入作者', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        organId: [{ required: true, message: '请选择机构', trigger: 'blur' }]
      }
    }
  },
  watch: {
    showBindDrawer(val) {
      var temp = document.getElementsByClassName('el-drawer rtl')
      temp[1].style.overflow = 'hidden'
      if (this.title === '新闻新增') {
        this.form = {
          id: '',
          title: '',
          content: '',
          author: '',
          organId: ''
        }
        this.reloading = true
      } else {
        this.findNewsById()
      }
    }
  },
  mounted() {
    //this.findNewsById()
  },
  methods: {
    findNewsById() {
      newsApi.findNewsById(this.id).then(data => {
        this.form = data
        this.reloading = true
      })
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        newsApi.saveOrUpdate(this.form).then(data => {
          this.$refs['form'].resetFields()
          this.reloading = false
          this.$emit('closeBindDrawer', false)
        })
      })
    },
    handleClose() {
      this.reloading = false
      this.$emit('closeBindDrawer', false)
    }
  }
}
</script>
<style>
</style>
