<template>

  <div>

    <el-form label-width="80px" :model="engineReq" :inline="true" class="demo-form-inline" size="small">

      <el-form-item label="规则名称">

        <el-input v-model="engineReq.name"></el-input>

      </el-form-item>

      <el-form-item label="规则类型">

        <el-select v-model="engineReq.type" placeholder="请选择类型">

          <el-option label="字段类型" value="1"></el-option>

          <el-option label="基本类型" value="2"></el-option>

          <el-option label="引用类型" value="3"></el-option>

          <el-option label="时间类型" value="4"></el-option>

          <el-option label="转换类型" value="5"></el-option>

        </el-select>

      </el-form-item>

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

        <el-select v-model="engineReq.isActivate" placeholder="是否激活">

          <el-option label="已激活" value="1"></el-option>

          <el-option label="未激活" value="2"></el-option>

        </el-select>

      </el-form-item>

      <el-form-item label="规则状态">

        <el-select v-model="engineReq.status" placeholder="规则状态">

          <el-option label="开启" value="1"></el-option>

          <el-option label="关闭" value="2"></el-option>

        </el-select>

      </el-form-item>

      <el-button @click="select()">

        查询
      </el-button>

      <el-button @click="clears()">

        重置

      </el-button>

    </el-form>

    <el-button type="warning" plain icon="el-icon-download" size="mini" @click="findSelectSourceExport"

               v-hasPermi="['source:data:export']">导出

    </el-button>

    <!--  添加按钮  /-->

    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['source:data:add']">

      新增

    </el-button>

    <!-- 添加或修改规则引擎对话框 -->

    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-row>

          <el-col :span="12">

            <el-form-item label="规则名称" prop="name">

              <el-input v-model="form.name" placeholder="请输入规则名称"/>

            </el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="规则编码" prop="engineCode">

              <el-input v-model="form.engineCode" placeholder="请输入规则编码"/>

            </el-form-item>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="12">

            <el-form-item label="规则类型" prop="type">

              <el-select v-model="form.type" placeholder="请选择规则类型" style="width: 100%">

                <el-option

                  v-for="dict in dict.type.rule_engine_type"

                  :key="dict.value"

                  :label="dict.label"

                  :value="Number(dict.value)"

                ></el-option>

              </el-select>

            </el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="规则级别" prop="scope">

              <el-select v-model="form.scope" placeholder="请选择规则级别" style="width: 100%">

                <el-option

                  v-for="dict in dict.type.rule_engine_level"

                  :key="dict.value"

                  :label="dict.label"

                  :value="Number(dict.value)"

                ></el-option>

              </el-select>

            </el-form-item>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="12">

            <el-form-item label="是否激活" prop="isActivate">

              <el-radio-group v-model="form.isActivate">

                <el-radio

                  v-for="dict in dict.type.rule_engine_activate_status"

                  :key="dict.value"

                  :label="dict.value"

                >{{ dict.label }}

                </el-radio>

              </el-radio-group>

            </el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="规则状态" prop="status">

              <el-radio-group v-model="form.status">

                <el-radio

                  v-for="dict in dict.type.sys_normal_disable"

                  :key="dict.value"

                  :label="dict.value"

                >{{ dict.label }}

                </el-radio>

              </el-radio-group>

            </el-form-item>

          </el-col>

        </el-row>

        <el-row>

          <el-col :span="24">

            <el-form-item label="规则描述">

              <editor v-model="form.description" :min-height="192"/>

            </el-form-item>

          </el-col>

          <el-col :span="24">

            <el-form-item label="备注" prop="remark">

              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>

            </el-form-item>

          </el-col>

        </el-row>

      </el-form>

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

        <el-button type="primary" @click="submitForm">确 定</el-button>

      </div>

    </el-dialog>

    <el-table :data="arr" style="width: 100%">

      <el-table-column label="编号" prop="id"></el-table-column>

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

      <el-table-column label="类型" style="color: #13ce66" prop="type">

        <template v-slot="scope">

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

          <span v-if="scope.row.type==2">基本类型</span>

          <span v-if="scope.row.type==3">时间类型</span>

          <span v-if="scope.row.type==4">普通类型</span>

          <span v-if="scope.row.type==4">介入类型</span>

        </template>

      </el-table-column>

      <el-table-column label="作用域" style="color: blue" prop="scope">

        <template v-slot="scope">

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

          <span v-if="scope.row.scope==2">记录</span>

          <span v-if="scope.row.scope==3">数据集</span>

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

          <span v-if="scope.row.scope==5">日志</span>

        </template>

      </el-table-column>

      <el-table-column label="引擎编码" prop="engineCode"></el-table-column>

      <el-table-column label="是否激活" style="color: red" prop="isActivate">

        <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 label="状态" style="color: #787be8" prop="status">

        <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 label="描述" prop="description"></el-table-column>

      <el-table-column

        align="right">

        <template slot-scope="scope">

          <el-button

            icon="el-icon-delete"

            size="mini"

            type="text"

            @click="handleDelete(scope.row.id)">删除
          </el-button>

          <el-button

            icon="el-icon-service"

            size="mini"

            type="text"

            @click="handleUpdate(scope.row)">修改规则配置
          </el-button>

          <el-button

            icon="el-icon-service"

            size="mini"

            type="text"

            @click="engineRuleMaintenance(scope.row)">规则维护
          </el-button>

        </template>

      </el-table-column>

    </el-table>

    <!--    分页-->

    <el-pagination

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

      :current-page="engineReq.pageNum"

      :page-sizes="[1, 2, 3, 4, 5]"

      :page-size="engineReq.pageSize"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total">

    </el-pagination>

  </div>

</template>

<script>

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,

import {del, insert, selectEngineList, update} from "@/api/engine/engine";


export default {

  name: "maintenance",

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

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

  components: {},

  props: {},

  data() {

    //这里存放数据"

    return {

      engineReq: {

        pageNum: 1,

        pageSize: 5

      },
      engine: {},

      title: "",

      arr: [],

      dialogFormVisible: false,

      total: 0,

      form: {},

      open: false,

      // 表单校验

      rules: {

        name: [

          {required: true, message: "规则名称不能为空", trigger: "blur"}

        ],

        type: [

          {required: true, message: "规则类型不能为空", trigger: "change"}

        ],

        engineCode: [

          {required: true, message: "规则编码不能为空", trigger: "blur"}

        ],

        isActivate: [

          {required: true, message: "是否激活不能为空", trigger: "change"}

        ],

        status: [

          {required: true, message: "规则状态不能为空", trigger: "change"}

        ],

        createBy: [

          {required: true, message: "创建者不能为空", trigger: "blur"}

        ],

        createTime: [

          {required: true, message: "创建时间不能为空", trigger: "blur"}

        ],

      }

    };

  },

  //计算属性 类似于data概念",

  computed: {},

  //监控data中的数据变化",

  watch: {},

  //方法集合",

  methods: {

    handleSizeChange(val) {

      console.log(`每页 ${val} 条`);

      this.engineReq.pageSize = val;

      this.findSelectSourceList();

    },

    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);

      this.engineReq.pageNum = val;

      this.findSelectSourceList();

    },

    findSelectSourceList() {

      selectEngineList(this.engineReq).then(res => {

        this.arr = res.data.list;

        this.total = res.data.total;

      })

    },

    handleDelete(id) {

      if (confirm("是否删除这条数据？")) {

        del(id).then(res => {

          //判断删除是否成功

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

        })

      }

    },

    findSelectSourceExport() {

      this.download('engine/engine/export', {

          ...this.engineReq

        },

        `source_${new Date().getTime()}.xlsx`)

    },

    select() {

      this.findSelectSourceList();

    },

    /** 新增按钮操作 */

    handleAdd() {

      this.open = true;

      this.title = "添加规则引擎";

    },

    /** 修改按钮操作 */

    handleUpdate(row) {

      this.form = row;

      this.open = true;

      this.title = "修改规则引擎";

    },

    /** 提交按钮 */

    submitForm() {

      this.$refs["form"].validate(valid => {

        if (valid) {

          if (this.form.id != null) {

            update(this.form).then(response => {

              this.$modal.msgSuccess("修改成功");

              this.findSelectSourceList();

              this.open = false;

            })

          } else {

            insert(this.form).then(response => {

              this.$modal.msgSuccess("新增成功");

              this.findSelectSourceList();

              this.open = false;

            })

          }

        }

      });

    },

    engineRuleMaintenance(row) {


      this.$router.push({

        path: 'list',

        query: {"id": row.id}

      })

    },

    clears() {

      this.engineReq = {

        name: '',

        type: '',

        isActivate: '',

        status: ''

      };

    }

  },

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

  created() {

    this.findSelectSourceList();

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",

  mounted() {

  },

  beforeCreate() {

  }, //生命周期 - 创建之前",

  beforeMount() {

  }, //生命周期 - 挂载之前",

  beforeUpdate() {

  }, //生命周期 - 更新之前",

  updated() {

  }, //生命周期 - 更新之后",

  beforeDestroy() {

  }, //生命周期 - 销毁之前",

  destroyed() {

  }, //生命周期 - 销毁完成",

  activated() {

  } //如果页面有keep-alive缓存功能，这个函数会触发",

};

</script>

<style scoped>

</style>
