<template>
  <div id='JsonEditor'>
    <vue-json-editor :value="resultInfo" :show-btns="true" :mode="'form'" :modes="['form']"
                     lang="zh" @json-save="onJsonSave"
    ></vue-json-editor>
  </div>
</template>

<script>
  export default {
    name: 'JsonEditor',
    title: '电子票配置',
    data () {
      return {
        resultInfo: {}
      }
    },
    created () {
    },
    async ready () {
      this.init()
    },
    methods: {
      async init () {
        let res = await this.$resetget('/rs/vue/Eticket.json', {resolveMsg: null, rejectMsg: '获取电子票配置出错'})
        this.resultInfo = Object.assign({}, res.data)
      },
      onJsonSave (value) {
        console.log('Save: ', JSON.stringify(value))
        if (JSON.stringify(value) == '{}') {
          this.$showMessage('文件无任何修改!')
          return
        }
        this.$showMessage('确定保存文件吗?', ['confirm', 'cancel']).then(async (res) => {
          if (res == 'confirm') {
            console.log('onJsonSave: ', value)
            let path = this.$login.f.dir + '/vues/Eticket.json'
            let res = await this.$resetpost('rs/vue/saveVueConfig', {path: path, data: JSON.stringify(value)}, {resolveMsg: '保存成功', rejectMsg: '保存失败'})
            console.log(res)
          }
        })
      }
    }
  }
</script>

<style lang="less">
  #JsonEditor {
    .jsoneditor-vue {
      height: 95%;
    }
    .jsoneditor-btns {
      height: 5%;
    }
  }
</style>
