<template>
  <div class="flex-row">
    <div id='JsonEditor' style="float: left; width: 78%; border-radius: 14px;">
      <json-editor-safe :value="resultInfo" :show-btns="true" :mode="'form'" :modes="['code', 'form']"
                       lang="zh" @json-save="onJsonSave" @json-ming="onMin" @json-fei="onFei"
      ></json-editor-safe>
    </div>
    <div class="div_right">
      <!--<label style="    margin-left: 35%;margin-top: 5px;font-size: 18px;">
        操作说明
      </label>
      <p class="p_text">
        1.选择配置项类型<br>
        2.修改数据<br>
        3.点击保存<br>
      </p>-->
      <label style="margin-left: 35%;font-size: 18px;">
        功能介绍
      </label>
      <p class="p_text">
        在Form模式下：<br>
        &nbsp;&nbsp;工具栏第一个按钮是展开数据 <br>
        &nbsp;&nbsp;工具栏第二个按钮是关闭展开 <br>
        &nbsp;&nbsp;工具栏第三个按钮是返回上一层修改 <br>
        &nbsp;&nbsp;工具栏第四个按钮是回到下一层修改<br>
        &nbsp;&nbsp;工具栏第五个按钮是切换显示模式<br>
        &nbsp;&nbsp;工具栏右侧是搜索匹配文字按钮<br>
        在Code模式下：<br>
        &nbsp;&nbsp;工具栏第一个按钮是展开数据 <br>
        &nbsp;&nbsp;工具栏第二个按钮是关闭展开 <br>
      </p>
      <label style="margin-left: 35%;font-size: 18px;color: #cd6696;">
        特别提示
      </label>
      <p class="p_text" style="color: #ba0707;">
        1.配置项必须是JSON格式<br>
        &nbsp;&nbsp;&nbsp;&nbsp;如果能切换到From模式就说明<br>&nbsp;&nbsp;&nbsp;&nbsp;是JSON格式<br>
        2.index 必须有序递增且不能重复<br>
        &nbsp;&nbsp;&nbsp;&nbsp;燃气表items的index是从11开始的,<br>
        &nbsp;&nbsp;&nbsp;&nbsp;其他的是从1开始的
      </p>
      <label style="margin-left: 35%;font-size: 18px;">
        名词解释
      </label>
      <p class="p_text">
        index: 下标<br>
        items: 安检项大项的内容<br>
        checkmust: 是否必检；值：true / false<br>
        type: 类型；值：string/selector / picture<br>
        string: 文本输入框<br>
        selector: 下拉选择框(必须有options)<br>
        picture: 拍照<br>
        options: 下拉选择框的内容<br>
        data: 选中后的值<br>
        isdefect: 是否是隐患；值：true / false<br>
        isdefault: 默认是否选中；值：true / false<br>
        level: 隐患等级<br>
        multiple: 是否多选；值：true / false<br>
      </p>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    title: '安检配置项编辑',
    data () {
      return {
        resultInfo: {},
        config1: {},
        config2: {},
        jsonname: 'DevicesConfig.json',
        index: this.$appdata.getSingleValue('配置项index')
      }
    },
    created () {
    },
    async ready () {
      this.init()
    },
    methods: {
      async init () {
        let res = await this.$resetget('/safecheck/rs/vue/DevicesConfig.json?folderName=phonevues', {resolveMsg: '获取居民配置项成功！', rejectMsg: '获取居民配置项出错！'})
          //tag
          this.resultInfo = this.config1 = Object.assign({}, res.data)
        let res2 = await this.$resetget('/safecheck/rs/vue/DevicesSetConfig.json?folderName=phonevues', {resolveMsg: '获取非居民配置项成功！', rejectMsg: '获取非居民配置项出错！'})
        //tag
        this.config2 = Object.assign({}, res2.data)
      },
      verifyindex (value) {
        // 大项开始值
        let dd = 1
        for (var key in value) {
          //tag
          //tag
          if(dd == value[key].index) {
            dd += 1
          }else {
            //tag
            //tag
            this.$showMessage(`大项 ${key} index下标有问题！！！`)
            //tag
            return false
          }
          if(key == '燃气表') {
            let ee
            if(this.index){
              ee = this.index
            }else {
              // 默认11开始
              ee = 11
            }
            $appdata.getParam()
            //tag
            for (var ccc in value[key].items) {
              // //tag
              // //tag
              if(ee == value[key].items[ccc].index){
                ee += 1
              }else {
                //tag
                //tag
                //tag
                this.$showMessage(`燃气表 ${ccc} index下标有问题！！！`)
                return false
              }
            }
          }else {
            //tag
            let aa = 1
            for (var eee in value[key].items) {
              // //tag
              // //tag
              if(aa == value[key].items[eee].index){
                aa += 1
              }else {
                //tag
                //tag
                //tag
                this.$showMessage(`${key}-${eee}-下标有问题！！！`)
                return false
              }
            }
          }
        }
        return true
      },
      async onJsonSave (value) {
        //tag)
        if (JSON.stringify(value) == '{}') {
          this.$showMessage('文件无任何修改!')
          return
        }
        this.$showMessage('确定保存文件吗?', ['confirm', 'cancel']).then(async (res) => {
          if (res == 'confirm') {
            //tag
            let abc = await this.verifyindex(value)
            //tag
            if(abc) {
              let path = this.$login.f.dir + `/phonevues/${this.jsonname}`
              let res = await this.$resetpost('rs/vue/safeSaveConfig', {path: path, data: JSON.stringify(value)}, {resolveMsg: '保存成功', rejectMsg: '保存失败'})
              //tag
              await this.init()
            }

          }
        })
      },
      onMin () {
        //tag

        this.resultInfo = this.config1
        this.jsonname = 'DevicesConfig.json'
      },
      onFei () {
        //tag
        //tag
        this.resultInfo = this.config2
        this.jsonname = 'DevicesSetConfig.json'
      }
    }
  }
</script>

<style lang="less">
  #JsonEditor {
    .jsoneditor-vue {
      height: 90%;
    }
    .jsoneditor-btns {
      height: 10%;
    }
  }
  .div_right {
    float: right;
    width: 22%;
    height: 92%;
    border: 1px solid #5792f0;
    padding: .6%;
    background-color: #fff;
    border-radius: 14px;
    overflow: auto;
  }
  .p_text {
    padding: 5px;
    font-weight: 100;
    font-size: 1.4rem;
    line-height: 30px;
  }
</style>
