<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
      <el-form-item label="规则名称" prop="dictName">
        <el-input
          v-model="queryParams.dictName"
          clearable
          placeholder="请输入规则名称"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="规则类型" prop="ruleType">
        <el-select
          v-model="queryParams.ruleType"
          clearable
          placeholder="规则类型"
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.sys_rule_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="激活状态" prop="ruleActivate">
        <el-select
          v-model="queryParams.ruleActivate"
          clearable
          placeholder="激活状态"
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.sys_rule_activate"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="规则状态" prop="ruleStatus">
        <el-select
          v-model="queryParams.ruleStatus"
          clearable
          placeholder="规则状态"
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.sys_rule_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:role:add']"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          v-hasPermi="['system:role:export']"-->
<!--          icon="el-icon-download"-->
<!--          plain-->
<!--          size="mini"-->
<!--          type="warning"-->
<!--          @click="handleExport"-->
<!--        >导出-->
<!--        </el-button>-->
<!--      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="showList"></right-toolbar>
    </el-row>

    <el-table :data="ruleList" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" width="55"/>
      <el-table-column label="规则编号" prop="id" width="120"/>
      <el-table-column :show-overflow-tooltip="true" label="规则名称" prop="ruleName" width="150"/>
      <el-table-column :show-overflow-tooltip="true" label="规则类型" prop="ruleType" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.ruleType==='Z'" type="success">自定义规则</el-tag>
          <el-tag v-if="scope.row.ruleType==='M'" type="primary">规则模板</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="规则作用域" prop="ruleRegion" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.ruleRegion==='F'">数据字段</el-tag>
          <el-tag v-if="scope.row.ruleRegion==='R'" type="info">记录</el-tag>
          <el-tag v-if="scope.row.ruleRegion==='C'" type="warning">数据集 </el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="引擎编码" prop="ruleCoding" width="150"/>
      <el-table-column :show-overflow-tooltip="true" label="激活状态" prop="ruleActivate" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.ruleActivate==='S'" type="success">已启动</el-tag>
          <el-tag v-if="scope.row.ruleActivate==='U'" type="danger">未启动</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="规则状态" prop="ruleStatus" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.ruleStatus==='Y'" type="success">正常</el-tag>
          <el-tag v-if="scope.row.ruleStatus==='N'" type="info">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['system:rule:versions']"
            icon="el-icon-s-platform"
            size="mini"
            type="text">
            <router-link :to="'/rule/versions/index/' + scope.row.id" class="link-type">
              <span>规则维护</span>
            </router-link>
          </el-button>
          <el-button
            v-hasPermi="['system:rule:edit']"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row.id)"
          >修改
          </el-button>
          <el-button
            v-hasPermi="['system:rule:remove']"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="1000px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true">
        <el-form-item label="规则名称" prop="ruleName" >
          <el-input v-model="form.ruleName" placeholder="请输入规则名称"/>
        </el-form-item>
        <el-form-item label="引擎编码" prop="ruleCoding">
          <el-input v-model="form.ruleCoding" placeholder="请输入引擎编码"/>
        </el-form-item>
        <el-form-item label="规则类型" prop="ruleType">
          <el-select
            v-model="form.ruleType"
            clearable
            placeholder="规则类型"
            style="width: 193px"
          >
            <el-option
              v-for="dict in dict.type.sys_rule_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="规则作用域" prop="ruleRegion">
          <el-select
            v-model="form.ruleRegion"
            clearable
            placeholder="规则作用域"
            style="width: 193px"
          >
            <el-option
              v-for="dict in dict.type.sys_rule_region"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="激活状态" prop="ruleActivate">
          <el-radio-group v-model="form.ruleActivate" v-for="dict in dict.type.sys_rule_activate" >
            <el-radio-button :label='(dict.value)' style="width: 96px">{{ dict.label }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="规则状态" prop="ruleStatus">
          <el-radio-group v-model="form.ruleStatus" v-for="dict in dict.type.sys_rule_status">
            <el-radio-button :label='(dict.value)'style="width: 86px">{{ dict.label }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容">
          <editor v-model="form.ruleDescribe" :min-height="192"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" placeholder="请输入内容" type="textarea"  style="width: 840px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import { getList, save, update, get, del} from '@/api/rule/maintain'

export default {
    //import引入的组件需要注入到对象中才能使用"
    name:"Maintain",
    dicts:['sys_rule_type','sys_rule_status','sys_rule_activate','sys_rule_region'],
    components: {},
    props: {},
    data() {
      //这里存放数据"
      return {
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          ruleName:undefined,
          ruleType:undefined,
          ruleActivate:undefined,
          ruleStatus:undefined,
        },
        // 遮罩层
        // loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 字典表格数据
        ruleList: [],
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          ruleName: [
            {required: true, message: "规则名称不能为空", trigger: "blur"}
          ],
          ruleCoding: [
            {required: true, message: "引擎编码不能为空", trigger: "blur"}
          ],
        }
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.roleId)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      showList(){
        getList(this.queryParams).then(response => {
          this.ruleList = response.data
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.showList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 表单重置
      reset() {
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加规则";
      },
      /** 修改按钮操作 */
      handleUpdate(id) {
        this.reset();
        get(id).then(response => {
          // TODO 请求接口
          this.form = response.data;
          this.open = true;
          this.title = "修改支付单客户信息";
        })
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.ruleId !== undefined) {
              update(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.showList();
              });
            } else {
              save(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.showList();
              });
            }
          }
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      /** 删除按钮操作 */
      handleDelete(id){
        del(id).then(response => {
          this.$modal.msgSuccess("删除成功");
          this.showList();
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.showList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
