<template>
  <div class="app-container">
    <el-descriptions class="margin-top" :title="ruleEngineInfo.name" :column="3" border>
      <template slot="extra">
        <el-dropdown split-button type="primary" @command="handleClick">
          更多操作
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="add">版本添加</el-dropdown-item>
            <el-dropdown-item command="activate">{{(ruleEngineInfo.isActivate === 'no-activate' ? "激活": "禁用")+'引擎'}}</el-dropdown-item>
            <el-dropdown-item command="status">{{(ruleEngineInfo.status === '0' ? "关闭": "开启")+'引擎'}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </template>
      <el-descriptions-item label="规则名称"> {{ruleEngineInfo.name}} </el-descriptions-item>
      <el-descriptions-item label="规则类型">
        <dict-tag :options="dict.type.rule_engine_type" :value="ruleEngineInfo.type"/>
      </el-descriptions-item>
      <el-descriptions-item label="规则作用域">
        <dict-tag :options="dict.type.rule_engine_level" :value="ruleEngineInfo.level"/>
      </el-descriptions-item>
      <el-descriptions-item label="引擎编码"> {{ruleEngineInfo.code + " ("+ruleEngineInfo.engineCode+")"}} </el-descriptions-item>
      <el-descriptions-item label="是否激活">
        <dict-tag :options="dict.type.rule_engine_activate_status" :value="ruleEngineInfo.isActivate"/>
      </el-descriptions-item>
      <el-descriptions-item label="规则状态">
        <dict-tag :options="dict.type.sys_normal_disable" :value="ruleEngineInfo.status"/>
      </el-descriptions-item>
    </el-descriptions>
    <editor style="margin-top: 20px" :read-only="true" v-model="ruleEngineInfo.description"></editor>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>规则引擎版本</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12" v-for="ruleEngineVersion in ruleEngineInfo.ruleEngineVersionList">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ruleEngineVersion.name + "-" + ruleEngineVersion.code}}</span>
              <el-dropdown style="float: right; padding: 3px 0">
                <span class="el-dropdown-link">
                  更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="info">查看详情</el-dropdown-item>
                  <el-dropdown-item command="test">测试规则</el-dropdown-item>
                  <el-dropdown-item command="status">禁用规则</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <el-descriptions class="margin-top" :column="2" border>
              <el-descriptions-item label="版本类" :span="2"> {{ruleEngineVersion.versionCode}} </el-descriptions-item>
              <el-descriptions-item label="版本名称"> {{ruleEngineVersion.name}} </el-descriptions-item>
              <el-descriptions-item label="版本CODE"> {{ruleEngineVersion.code}} </el-descriptions-item>
              <el-descriptions-item label="是否激活">
                <dict-tag :options="dict.type.rule_engine_activate_status" :value="ruleEngineVersion.isActivate"/>
              </el-descriptions-item>
              <el-descriptions-item label="版本状态">
                <dict-tag :options="dict.type.rule_engine_version_status" :value="ruleEngineVersion.status"/>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "EngineVersion",
  dicts: ['rule_engine_activate_status', 'rule_engine_type', 'sys_normal_disable', 'rule_engine_level', 'rule_engine_version_status'],
  data() {
    return {
      ruleEngineId: this.$route.params && this.$route.params.ruleEngineId,
      ruleEngineInfo: {
        "id": 1,
        "name": "邮箱规则",
        "type": "rule-custom",
        "isActivate": "no-activate",
        "status": "0",
        "description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>",
        "remark": "-",
        "code": "email",
        "engineCode": "engine_custom_email",
        "level": "data-field",
      }
    }
  },
  created() {
    this.initRuleEngine();
  },
  methods: {
    handleClick(clickType){
      if (clickType === "add"){

      }else if(clickType === "activate"){
        this.ruleEngineInfo.isActivate = 'no-activate' === this.ruleEngineInfo.isActivate ? 'activated' : 'no-activate'
        this.$modal.msgSuccess("引擎激活状态修改成功");
      }else if(clickType === "status"){
        this.ruleEngineInfo.status = '0' === this.ruleEngineInfo.status ? '1' : '0'
        this.$modal.msgSuccess("引擎状态操作成功");
      }
    },
    initRuleEngine(){
        let response = {
          "code": 200,
          "msg": "查询成功",
          "data": {
            "id": 1,
            "name": "邮箱规则",
            "type": "rule-custom",
            "isActivate": "no-activate",
            "status": "0",
            "description": "<p>根据邮箱规则进行数据校验，内包含所有邮箱校验规则</p>",
            "remark": "-",
            "code": "email",
            "engineCode": "engine_custom_email",
            "level": "data-field",
            "ruleEngineVersionList": [
              {
                "name": "163剔除", "code": "IAW3S02", "status": "0",
                "versionCode": "engine_custom_email_IAW3S02", "isActivate": "no-activate",
              },
              {
                "name": "筛选不合规邮箱", "code": "JISID8S", "status": "2",
                "versionCode": "engine_custom_email_JISID8S", "isActivate": "activated",
              },
              {
                "name": "剔除自定义邮箱", "code": "DJ8S9EA", "status": "2",
                "versionCode": "engine_custom_email_DJ8S9EA", "isActivate": "no-activate",
              },
              {
                "name": "邮箱默认值操作", "code": "XJS9E0S", "status": "1",
                "versionCode": "engine_custom_email_XJS9E0S", "isActivate": "no-activate",
              }
            ]
          }
        }
        this.ruleEngineInfo = response.data
    }

  }
}
</script>

<style scoped>
.box-card{
  margin-top: 20px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
