<template>
  <el-dialog :title="degradeId ? '编辑熔断规则' : '新建熔断规则'" :visible.sync="dialogVisible" width="400px" @close="close('form')">
    <div class="dialog-body">
      <el-form :model="form" :rules="rule" ref="form" 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-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="groupId" v-if="form.rangeType !== 0">
          <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-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="interfaceId" v-if="form.rangeType === 2">
          <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-option>
          </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-input>
        </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"></el-input-number> 秒
          <!-- <template slot="append">
            秒
          </template> -->
          <!-- </el-input> -->
        </el-form-item>
        <el-form-item label="是否开启" prop="enableFlag">
          <el-switch v-model="form.enableFlag"> </el-switch>
        </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() {
      var 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() {
      var 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() {
      var 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() {
      var 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) {
      var 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>
