<template>
  <div class="app-content" style="max-height:75vh;overflow:auto;">
    <a-spin :spinning="loading" style="width:100%;height:100%;">
      <a-form-model ref="from" :model="formData" :rules="rules" style="border-top: 0px" class="from-table font-line-space">
        <a-row>
          <a-col :span="24" style="border-top: 0px;">
            <div class="tb-title">
              <span>通知发布</span>
            </div>
          </a-col>
        </a-row>
        <a-row type="flex">
          <a-col :span="2" class="bg-gray">
            <div class="special-middle">
              <div class="required">标题</div>
            </div>
          </a-col>
          <a-col :span="22">
            <a-form-model-item prop="title">
              <a-input placeholder="项目合同编号" v-model="formData.title" :maxLength="100" style="width: 80%" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="border-top: 0px;">
            <div class="tb-title">
              <span>内容</span>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item prop="content">
              <textarea name="" id="tinymce_dom" v-model="formData.content"></textarea>
            </a-form-model-item>
            <!-- <a-col :span="24" style="line-height: 1.5;">
            <span>当前字数：{{tinymceWordCount}}</span>
            <span style="margin-left: 50px;">还可以输入{{tinymceLimit - tinymceWordCount}}字</span>
          </a-col> -->
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </div>
</template>

<script>
export default {
  name: "noticeEdit",
  components: {},
  props: {
    value: {
      type: String,
      default: () => {
        return null;
      },
    },
  },
  data () {
    return {
      formData: { title: null, content: null },
      rules: {
        title: [{ required: true, message: '请填写标题', trigger: 'blur' },],
        content: [{ required: true, message: '请填写内容', trigger: 'blur' },],
      },
      loading: false,
      // 富文本字数
      tinymceLimit: 15000,
      tinymceWordCount: 0,
    };
  },
  watch: {
  },
  computed: {
    textContent () {
      return tinymce.activeEditor.getContent()
    }
  },
  mounted () {
    this.tinymceSet()
  },
  created () {
    this.getById()
  },
  computed: {
  },
  methods: {
    getById () {
      if (!!this.value) {
        this.loading = true
        this.$api.notice.getById({ id: this.value }).then(({ data = {} }) => {
          if (data) {
            this.formData = data
            tinyMCE.activeEditor.setContent(data.content)
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }
    },
    submit () {
      this.formData.content = tinymce.activeEditor.getContent()
      this.$refs.from.validate(valid => {
        if (valid) {
          this.loading = true
          this.$api.notice.save(this.formData).then(({ data = {} }) => {
            if (data) {
              this.formData.id = data
              this.$emit('close', 'edit')
            }
          }).catch(() => { this.loading = false })
        } else {
          this.$message.error('信息未填写完全，请检查！')
          return false
        }
      })
    },
    tinymceSet () {
      tinymce.remove('#tinymce_dom')
      tinymce.init({
        selector: '#tinymce_dom',
        language: 'zh_CN',
        content_style: "img {max-width:100%;}",
        // menubar: false,
        // 隐藏底部状态栏
        statusbar: false,
        height: 800,
        plugins: 'code advlist autolink link image lists preview table wordcount',
        toolbar: `undo redo | styleselect | fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image 
                    | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow
                    | tableinsertcolbefore tableinsertcolafter tabledeletecol | wordcount`,
        // 初始化完成回调
        init_instance_callback: (editor) => {
          // let wordcount = editor.plugins.wordcount
          // this.tinymceWordCount = wordcount.body.getWordCount()
        },
        // 图片上传路径
        // images_upload_url: 'http://192.168.1.185:8888/profile',
        // 图片上传操作
        images_upload_handler: (blobInfo, succFun, failFun) => {
          this.$api.base.asyncUpload(this.uploadHandle(blobInfo.blob(), blobInfo.filename())).then(({ data = {} }) => {
            if (data) {
              succFun(data.downloadUrl)
            }
          }).catch((err) => { failFun(err) })
        }
      })
      // 设置富文本内容
      // tinymce.activeEditor.setContent(htmlText)
      // 监听输入计算字数
      let mark = 1
      tinymce.activeEditor.on('keyup', (e) => {
        if (mark === 1) {
          // let wordcount = tinymce.activeEditor.plugins.wordcount
          // this.tinymceWordCount = wordcount.body.getWordCount()
          mark = 0
          setTimeout(() => { mark = 1 }, 500)
        }
      })
    },
    uploadHandle (file, fileName) {
      let formData = new FormData()
      formData.append('file', file)
      formData.append('fileName', fileName)
      return formData
    },
  },
};
</script>
<style scoped lang="less">
</style>