<template>

  <div>

    <el-button type="text" @click="addVersion()">新增</el-button>

    <el-dialog title="添加版本信息" :visible.sync="dialogFormVisible">

      <el-form :model="versions">

        <el-form-item label="版本类名" :label-width="formLabelWidth">

          <el-input v-model="versions.versionClass" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="版本名称" :label-width="formLabelWidth">

          <el-input v-model="versions.name" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="版本编码" :label-width="formLabelWidth">

          <el-input v-model="versions.versionCode" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="是否激活" :label-width="formLabelWidth">

          <el-input v-model="versions.isActivate" disabled autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="版本状态" :label-width="formLabelWidth">

          <el-input v-model="versions.status" disabled autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="是否测试" :label-width="formLabelWidth">

          <el-input v-model="versions.testStatus" disabled autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="版本描述" :label-width="formLabelWidth">

          <el-input v-model="versions.description" autocomplete="off"></el-input>

        </el-form-item>

        <div v-show="opens">

          <codemirror v-model="versions.ruleContent"   :value="this.versions.ruleContent" :options="cmOptions" >

          </codemirror>

        </div>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click=closes()>取 消</el-button>

        <el-button type="primary" @click=handleInsert()>确 定</el-button>

        <el-button type="primary" @click=showCode(versions)>生成引擎类</el-button>

      </div>

    </el-dialog>

    <el-table :data="maintenance.engineMaintenanceList" style="width: 100%">

      <el-table-column prop="versionClass" label="版本类名"></el-table-column>

      <el-table-column prop="name" label="版本名称"></el-table-column>

      <el-table-column prop="versionCode" label="版本编码"></el-table-column>

      <el-table-column prop="isActivate" label="是否激活">

        <template v-slot="scope">

          <span v-if="scope.row.isActivate==1">正常</span>

          <span v-if="scope.row.isActivate==2">停用</span>

        </template>

      </el-table-column>

      <el-table-column prop="status" label="版本状态">

        <template v-slot="scope">

          <span v-if="scope.row.status===1">正常</span>

          <span v-if="scope.row.status===2">异常</span>

        </template>

      </el-table-column>

      <el-table-column prop="testStatus" label="版本测试状态">

        <template v-slot="scope">

          <span v-if="scope.row.testStatus===1">数据字段</span>

          <span v-if="scope.row.testStatus===2">数据类型</span>

          <span v-if="scope.row.testStatus===3">数据格式</span>

        </template>

      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">

        <template slot-scope="scope">

<!--          <el-button v-show="scope.row.isActivate==1" @click="del(scope.row.id)" type="text" size="small">-->

<!--            删除引擎-->

<!--          </el-button>-->

          <el-button v-show="scope.row.isActivate==1" @click="forbiddenEngines(scope.row.id)" type="text" size="small">

            关闭引擎

          </el-button>

          <el-button v-show="scope.row.isActivate==2" @click="onEngines(scope.row.id)" type="text" size="small">

            开启引擎

          </el-button>

        </template>

      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">

        <template slot-scope="scope">

          <el-button @click.native.prevent="selectEngineById(scope.row.id)" type="text" size="small">

            规则详情

          </el-button>

        </template>

      </el-table-column>


    </el-table>

    <!--回显-->

    <el-dialog title="收货地址" :visible.sync="versionFormVisible">

      <el-form :model="versions">

        <el-form-item label="版本类名" :label-width="formLabelWidth">

          <el-input v-model="versions.versionClass" disabled autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="版本名称" :label-width="formLabelWidth">

          <el-input v-model="versions.name" disabled autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="版本编码" :label-width="formLabelWidth">

          <el-input v-model="versions.versionCode" disabled autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="是否激活" :label-width="formLabelWidth">

          <el-input v-model="versions.isActivate" disabled autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="版本状态" :label-width="formLabelWidth">

          <el-input v-model="versions.status" disabled autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="版本测试" :label-width="formLabelWidth">

          <el-input v-model="versions.testStatus" disabled autocomplete="off"></el-input>

        </el-form-item>


      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="back()">确 定</el-button>

      </div>

    </el-dialog>

  </div>

</template>

<script>

import {add, dels, findById, forbiddenEngine, generate, onEngine, sel, selectEngineById} from "@/api/engine/engine";

import Java from "@/components/JavaIDE.vue/java.vue";

import {codemirror} from 'vue-codemirror'

import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！

require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

export default {

  dicts: ['rule_engine_activate_status', 'rule_engine_type', 'sys_normal_disable', 'rule_engine_level'],

  //import引入的组件需要注入到对象中才能使用"

  components: {
    codemirror,
    Java
  },

  props: {},

  data() {

    //这里存放数据"

    return {

      direction: 'rtl',

      versionFormVisible: false,

      maintenance: {

        engineMaintenanceList: [],

      },

      opens: false,

      title: "",

      open: false,

      handleClose: false,

      versions: {

        isActivate: '未激活',

        testStatus: '未测试',

        status: '初始化',

        ruleContent:''

      },

      cmOptions: {

        lineNumbers: true, // 显示行号

        mode: 'text/x-yaml', // 语法model

        gutters: ['CodeMirror-lint-markers'], // 语法检查器

        theme: "ambiance",

        lint: true, // 开启语法检查

      },

      size: '',

      dialogFormVisible: false,

      formLabelWidth: '120px',

      arr: []

    }

  },

  methods: {

    closes(){

      this.dialogFormVisible = false;

    },

    showCode() {

      this.opens=true

      this.versions.isActivate = 1

      this.versions.testStatus = 1

      this.versions.status = 1

      this.versions.id = this.$route.query.id

      generate(this.versions).then(res =>{

        this.versions.ruleContent=res.ruleContent;

        this.$message.success(res.msg || "成功");

      })

    },

    //添加弹窗

    addVersion() {

      this.versions = {},

        this.versions.isActivate = '未激活',

        this.versions.testStatus = '未测试',

        this.versions.status = '初始化';

      this.dialogFormVisible = true

    },

    back() {

      this.versionFormVisible = false;

    },

    //根据id查询回显

    selectEngineById(id) {

      this.versionFormVisible = true;

      sel(id).then(res => {

        this.versions = res.data;

      })

    },

    handleInsert() {

      this.dialogFormVisible = false;

      this.versions.isActivate = 1

      this.versions.testStatus = 1

      this.versions.status = 1

      console.log(this.versions)

      add(this.versions).then(res => {


        this.$message.success(res.msg || "新增成功")

      })

      this.List();

    },

    onEngines(id) {

      onEngine(id).then(res => {

        this.$message.success(res.msg || "开启成功")

      })

      this.List();

    },

    forbiddenEngines(id) {

      forbiddenEngine(id).then(res => {

        this.$message.success(res.msg || "关闭成功")

      })

      this.List();

    },

    List() {

      findById(this.maintenance.id).then(res => {

        this.maintenance.engineMaintenanceList = res.data

      })

    },

    selectEngine() {

      selectEngineById(this.maintenance.id).then(res => {

        this.arr = res.data

      })

    },

    del(id) {

      if (confirm("你确定" +
        "删除吗?")) {

        dels(id).then(res => {

          this.$message.success(res.msg || "删除成功");

        })

      }

    }

  },

  //生命周期 - 创建完成（可以访问当前this实例）",

  created() {

    this.maintenance.id = this.$route.query.id

    this.List();

    this.selectEngine();

  }

}
</script>

<style scoped>

.information-box >>> .CodeMirror {

  font-family: monospace;

  height: 71vh;

  direction: ltr;

}

</style>


