<template>
  <el-dialog
    :title="degradeId ? '编辑熔断规则' : '新建熔断规则'"
    :visible.sync="dialogVisible"
    width="400px"
    @close="close('form')">
    <div class="dialog-body">
      <el-form
        ref="form"
        :model="form"
        :rules="rule"
        label-width="100px"
        class="demo-ruleForm"
        label-position="right">
        <el-form-item
          label="熔断范围"
          prop="rangeType">
          <template>
            <el-radio
              v-model="form.rangeType"
              :label="0">
              项目
            </el-radio>
            <el-radio
              v-model="form.rangeType"
              :label="1">
              分组
            </el-radio>
            <el-radio
              v-model="form.rangeType"
              :label="2">
              接口
            </el-radio>
          </template>
        </el-form-item>
        <el-form-item
          label="熔断内容"
          prop="projectId">
          <el-select
            v-model="form.projectId"
            placeholder="请选择项目"
            @change="getGroupList">
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.rangeType !== 0"
          prop="groupId">
          <el-select
            v-model="form.groupId"
            placeholder="请选择分组"
            :disabled="form.projectId === ''"
            @change="getApiList">
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.rangeType === 2"
          prop="interfaceId">
          <el-select
            v-model="form.interfaceId"
            placeholder="请选择接口"
            :disabled="form.groupId === ''">
            <el-option
              v-for="item in apiList"
              :key="item.id"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="阈值类型"
          prop="grade">
          <template>
            <el-radio
              v-model="form.grade"
              :label="1">
              异常比例
            </el-radio>
          </template>
        </el-form-item>
        <el-form-item
          label="异常比例"
          prop="count">
          <el-input
            v-model="form.count"
            placeholder="请输入异常比例"
            class="w-220" />
        </el-form-item>
        <el-form-item
          label="时间窗口"
          prop="timeWindow">
          <!-- <el-input v-model="form.timeWindow" placeholder="请输入时间窗口" class="w-220"> -->
          <el-input-number
            v-model="form.timeWindow"
            placeholder="请输入时间窗口"
            controls-position="right"
            class="w-220" /> 秒
          <!-- <template slot="append">
            秒
          </template> -->
          <!-- </el-input> -->
        </el-form-item>
        <el-form-item
          label="是否开启"
          prop="enableFlag">
          <el-switch v-model="form.enableFlag" />
        </el-form-item>
      </el-form>
    </div>
    <div
      slot="footer"
      class="dialog-footer">
      <el-button @click="close('form')">
        取消
      </el-button>
      <el-button
        type="primary"
        @click="submitForm('form')">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRequest } from '@/api/api';
export default {
  props: {
    degradeId: {
      type: String,
      default() {
        return '';
      }
    },
    sceneCode: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    let countValidator = (rule, value, callback) => {
      let reg = /^\d{0,8}\.{0,1}(\d{1,2})?$/;
      if (!reg.test(value)) {
        callback(new Error('请输入0-1且小数不超过两位的数字'));
      } else {
        callback();
      }
    };
    let timeWindowValidator = (rule, value, callback) => {
      let reg = /^(0|\+?[1-9][0-9]*)$/;
      if (!reg.test(value)) {
        callback(new Error('时间必须输入正整数'));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: true,
      projectList: [],
      groupList: [],
      apiList: [],
      form: {
        rangeType: 0,
        rangeInfo: '',
        ruleContent: '',
        projectId: '',
        projectName: '',
        groupId: '', // 分组id
        groupName: '',
        interfaceId: '',
        interfaceName: '',
        grade: 1,
        count: '',
        timeWindow: '',
        enableFlag: false
      },
      rule: {
        projectId: [ { required: true, message: '请选择项目', trigger: 'change' } ],
        groupId: [ { required: true, message: '请选择分组', trigger: 'change' } ],
        interfaceId: [ { required: true, message: '请选择接口', trigger: 'change' } ],
        count: [ { required: true, message: '请输入异常比例', trigger: 'blur' }, { validator: countValidator, trigger: 'blur' } ],
        timeWindow: [ { required: true, message: '请输入时间窗口', trigger: 'blur' }, { validator: timeWindowValidator, trigger: 'blur' } ]
      }
    };
  },
  created() {
    this.dialogVisible = true;
    this.getProjectList();
    if (this.degradeId) {
      this.getInfo();
    }
  },
  methods: {
    getInfo() {
      let that = this;
      let params = {
        ruleId: this.degradeId
      };
      getRequest('/gateway-manage/rule/degrade/detail', params)
        .then(res => {
          if (res.data.code == '0000') {
            this.form.rangeType = res.data.result.rangeType;
            if (this.form.rangeType === 0) {
              this.getGroupList();
            } else if (this.form.rangeType === 1) {
              this.getGroupList();
            } else if (this.form.rangeType === 2) {
              this.getApiList();
              this.getGroupList();
            }
            this.form.projectId = res.data.result.projectId;
            this.form.interfaceId = res.data.result.interfaceId;
            this.form.groupId = res.data.result.groupId;
            this.form.grade = res.data.result.grade;
            this.form.count = res.data.result.count;
            this.form.timeWindow = res.data.result.timeWindow;
            this.form.enableFlag = res.data.result.enableFlag === 1 ? true : false;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getProjectList() {
      let that = this;
      getRequest('/gateway-manage/plugin/interface/tree', {})
        .then(res => {
          if (res.data.code == '0000') {
            if (res.data.result) {
              this.projectList = res.data.result;
            } else {
              this.projectList = [];
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    // 获取分组列表
    getGroupList() {
      let that = this;
      this.form.groupId = '';
      this.form.interfaceId = '';
      let parmas = {
        type: 0,
        id: this.form.projectId
      };
      getRequest('/gateway-manage/plugin/interface/tree', parmas)
        .then(res => {
          if (res.data.code == '0000') {
            if (res.data.result) {
              this.groupList = res.data.result;
            } else {
              this.groupList = [];
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    getApiList() {
      let that = this;
      this.form.interfaceId = '';
      let parmas = {
        type: 1,
        id: this.form.groupId
      };
      getRequest('/gateway-manage/plugin/interface/tree', parmas)
        .then(res => {
          if (res.data.code == '0000') {
            if (res.data.result) {
              this.apiList = res.data.result;
            } else {
              this.apiList = [];
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    submitForm(form) {
      let that = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.form.rangeType === 0) {
            // 项目
            this.form.projectName = this.projectList.find(item => {
              return item.id === this.form.projectId;
            }).name;
            this.form.ruleContent = this.form.projectName;
            this.form.rangeInfo = this.form.projectId;
          } else if (this.form.rangeType === 1) {
            // 分组
            this.form.projectName = this.projectList.find(item => {
              return item.id === this.form.projectId;
            }).name;
            this.form.groupName = this.groupList.find(item => {
              return item.id === this.form.groupId;
            }).name;
            this.form.ruleContent = this.form.projectName + '-' + this.form.groupName;
            this.form.rangeInfo = this.form.groupId;
          } else if (this.form.rangeType === 2) {
            // 分组
            this.form.projectName = this.projectList.find(item => {
              return item.id === this.form.projectId;
            }).name;
            this.form.groupName = this.groupList.find(item => {
              return item.id === this.form.groupId;
            }).name;
            this.form.interfaceName = this.apiList.find(item => {
              return item.id === this.form.interfaceId;
            }).name;
            this.form.ruleContent = this.form.projectName + '-' + this.form.groupName + '-' + this.form.interfaceName;
            this.form.rangeInfo = this.form.interfaceId;
          }
          let params = {
            sceneCode: this.sceneCode,
            rangeType: this.form.rangeType,
            rangeInfo: this.form.rangeInfo,
            ruleContent: this.form.ruleContent,
            grade: this.form.grade,
            count: this.form.count,
            timeWindow: this.form.timeWindow,
            enableFlag: this.form.enableFlag ? 1 : 0
          };
          if (this.degradeId) {
            params.degradeId = this.degradeId;
          }
          getRequest('/gateway-manage/rule/degrade/save', params)
            .then(res => {
              if (res.data.code == '0000') {
                this.dialogVisible = false;
                this.$emit('cancelAddFlus');
                this.$emit('getList');
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch(function(error) {
              that.$message.error({
                duration: 1000,
                message: error.message
              });
            });
        } else {
          return false;
        }
      });
    },
    close(form) {
      this.$refs[form].resetFields();
      this.$emit('cancelAddFlus');
    }
  }
};
</script>
<style lang="less" scoped>
.w-220 {
  width: 220px;
}
</style>
