<template>
  <div class="scriptCode">
    <div class="filter-container">
      <el-form ref="form" :inline="true" label-width="80px">
        <el-form-item label="产品名称">
          <el-input v-model="productName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="compile">编译</el-button>-->
<!--        </el-form-item>-->
      </el-form>
    </div>
    <div class="in-coder-panel">
      <textarea ref="textarea"></textarea>
    </div>

  </div>
</template>

<script>
// 引入全局实例
import CodeMirror from 'codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 c 中指定主题才会生效
import 'codemirror/theme/darcula.css'

// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/mode/sql/sql.js'

// 代码补全提示
import 'codemirror/addon/hint/css-hint.js'
import 'codemirror/addon/hint/html-hint.js'
import 'codemirror/addon/hint/javascript-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/xml-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/anyword-hint.js'
import { getProductPriceScript, saveProductPriceScript } from '@/api/productFile/productInfo.js'

// window.diff_match_patch = DiffMatchPatch
window.DIFF_DELETE = -1
window.DIFF_INSERT = 1
window.DIFF_EQUAL = 0

const form = {
  businessName: '',
  businessCode: ''
}

export default {
  name: 'priceScript',

  data() {
    return {
      productName: '',
      codeId: '',
      businessCode: '',
      // 内部真实的内容
      code: '',
      // 默认的语法类型
      mode: 'text/javascript',
      // 编辑器实例
      coder: 'javascript',
      // 默认配置
      options: {
        // 缩进格式
        tabSize: 4,
        // 主题，对应主题库 JS 需要提前引入
        theme: 'darcula',
        lineWrapping: true,
        // 代码折叠
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        smartIndent: true,
        // 显示行号
        lineNumbers: true,
        line: true,
        extraKeys: { 'Ctrl': 'autocomplete' }
      }
    }
  },
  created() {
    this.idProduct = this.$route.query.idProduct
    this.productName = this.$route.query.productName
  },
  mounted() {
    this._initialize()
    // this.coder.on('cursorActivity', function () {
    //   this.coder.showHint()
    // })
    this.getCode()
  },
  methods: {
    // 初始化
    _initialize() {
      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
      this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options)

      // 编辑器赋值
      this.coder.setValue(this.value || this.code)

      // 支持双向绑定
      this.coder.on('change', (coder) => {
        this.code = coder.getValue()

        if (this.$emit) {
          this.$emit('input', this.code)
        }
      })
    },
    // 获取脚本内容
    getCode() {
      var _that = this

      var data = {
        idProduct: _that.idProduct
      }

      getProductPriceScript(data).then(res => {
        console.log(res)
        // res.data.script
        this.coder.setValue(res.data.script)
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 保存脚本内容
    save() {
      var _that = this
      var scriptBody = _that.coder.getValue()
      var data = {
        id: _that.idProduct,
        scriptContent: scriptBody
      }

      // console.log(data);
      // return;
      saveProductPriceScript(JSON.stringify(data)).then(res => {
        if (res.httpCode == 200) {
          _that.$message({
            message: '保存成功',
            type: 'success'
          })
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    }

  }
}
</script>

<style>
  .scriptCode{
    margin-top: 20px;
  }

  .in-coder-panel{
    width: 90%;
    position:relative;
    margin: 10px;
  }
  .CodeMirror{
    height:1000px;
  }
</style>
