<template>
  <div>
    <!--查看/编辑文件Dialog  ext=="html"||ext=="htm"||ext=="shtml"||ext=="txt"||ext=="js"||ext=="css"-->
    <el-dialog title="编辑文件" :visible.sync="editFileDialogVisible" :close-on-click-modal="false" class="file-edit-dialog">
      <div style="" v-loading="editFileTextareaLoading">
        <codemirror
        ref="editor"
        :content.sync="fileContent"
        :mode="editorMode"
        :config="editorConfig"
        >
        </codemirror>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFileDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doFilecontentSave" priv="ContentCore.FileMenu.Edit" :loading="okeditFileBtnLoading">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import codemirror from '@src/components/CodeMirror.vue'

export default {
  data() {
    return {
      fileContent: '',
      editFileDialogVisible: false,
      editFileTextareaLoading: false,
      okeditFileBtnLoading: false,
      inputParams: {
        path: '',
        name: '',
        platformID: '',
        siteID: ''
      },
      fileChanges: {
        flag: false,
        content: ''
      }, // 文件内容更改信息
      // 编辑器配置
      editorMode: '',
      editorConfig: {
      }
    }
  },
  methods: {
    initDialog(params) {
      this.editFileDialogVisible = true
      this.okeditFileBtnLoading = false
      if (!util.isEmptyObject(params)) {
        this.editorMode = params.editorMode
        Object.assign(this.editorConfig, params.editorConfig)
        Object.assign(this.inputParams, params)
        delete this.inputParams.editorMode
        delete this.inputParams.editorConfig
      }

      this.loadFileContent(this.inputParams)
    },

    // 加载文件内容 ext === "html" || ext === "htm" || ext === "shtml" || ext === "txt" || ext === "js" || ext === "css"
    async loadFileContent(param) {
      this.editFileTextareaLoading = true
      this.fileContent = ''

      let res = await axios.get(`/ui/core/file/initedit`, {params: param})
      let data = res.data
      if (data.status === 1) {
        this.fileContent = data.data.content
        this.fileChanges.content = data.data.content
      }
      this.editFileTextareaLoading = false
    },

    // 获取文件内容修改信息
    getFileContentChanges() {
      let noChange = false
      let content = this.fileContent
      let oldContent = this.fileChanges.content

      noChange = (oldContent === content)

      this.fileChanges.flag = noChange
      this.fileChanges.content = content

      return Object.assign({}, this.fileChanges)
    },

    // 保存文件内容
    async doFilecontentSave() {
      let changes = this.getFileContentChanges()
      if (changes.flag) {
        this.editFileDialogVisible = false
        return
      }

      let param = {
        path: this.inputParams.path,
        content: changes.content,
        siteID: this.inputParams.siteID,
        platformID: this.inputParams.platformID
      }

      this.okeditFileBtnLoading = true

      let res = await axios.put(`/ui/core/file/${this.inputParams.name}/content`, param)
      let data = res.data
      this.okeditFileBtnLoading = false
      if (data.status === 1) {
        this.editFileDialogVisible = false
        this.MsgPop(data.message, 'success')
        this.$emit('success')
      } else {
        this.Dialog(data.message)
      }
    },

    // 消息Dialog封装
    Dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    },

    // 消息显示封装
    MsgPop(msg, type) {
      if (!type) {
        this.$message(msg)
        return
      }
      this.$message({
        message: msg,
        type: type
      })
    }
  },
  computed: {

  },
  created() {
  },
  components: {
    codemirror
  },
  props: {
  },
  watch: {
  }
}
</script>

<style>
.file-edit-dialog .el-dialog {
  width: 1200px;
}

@media (max-width: 480px) {
  .file-edit-dialog .el-dialog {
    width: 96%;
  }
}

.file-edit-dialog .el-dialog__body{
  padding: 0;
}

.file-edit-dialog .CodeMirror-vscrollbar {
  overflow: inherit;
}

.file-edit-dialog .CodeMirror {
  height: auto;
}

.file-edit-dialog .CodeMirror-sizer{
  min-height: 70vh !important;
}
</style>
