<template>
  <div>
    <el-dialog  title="可用性计算模型" :visible.sync="visibleDialogFlag" width="50%" @close="close()">
      <el-form ref="form" :model="tempForm" :rules="csatRules" label-width="120px">
        <el-form-item label="满意样本延迟" prop="csat_a">
          <el-input v-model="tempForm.csat_a" type="number" placeholder="请输入满意样本延迟" @blur="changeNumber('csat_a', tempForm.csat_a)" />
        </el-form-item>
        <el-form-item label="容忍样本延迟" prop="csat_b">
          <el-input v-model="tempForm.csat_b" type="number" placeholder="请输入容忍样本延迟" @blur="changeNumber('csat_b',tempForm.csat_b)" />
        </el-form-item>
        <el-form-item label="不可容忍延迟" prop="csat_c">
          <el-input v-model="tempForm.csat_c" type="number" placeholder="请输入不可容忍延迟" @blur="changeNumber('csat_c',tempForm.csat_c)" />
        </el-form-item>
        <div class="flex-div">
          <div>Apdex = </div>
          <div style="margin-left:5px;">
            <div>1 X（小于<span class="blue-font">{{ tempForm.csat_a|| '满意样本延迟' }}</span>秒的请求数） + 0.5 X （大于<span class="blue-font">{{ tempForm.csat_a || '满意样本延迟' }}</span>秒且小于<span class="blue-font">{{ tempForm.csat_b || '容忍样本延迟' }}</span> 秒的请求数）</div>
            <div class="fract-line" />
            <div style="text-align: center;">请求总数</div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitApdex">确 定</el-button>
        <el-button @click="dialogCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {getApdex, modifyApdex} from '@/api/apps'
export default {
  data() {
    return {
      tempForm: {
        csat_a: null,
        csat_b: null,
        csat_c: null
      },
      csatRules: {
        csat_a: [
          { required: true, message: '满意样本延迟不能为空', trigger: 'blur' }
        ],
        csat_b: [
          { required: true, message: '容忍样本不能延迟为空', trigger: 'blur' }
        ],
        csat_c: [
          { required: true, message: '不可容忍样本延迟不能为空', trigger: 'blur' }
        ]
      },
      visibleDialogFlag: false
    }
  },
  props: {
    dialogFlag: {
      type:Boolean,
      default: false
    },
    alias: {
      type: String,
      default: ''
    }
  },
  watch: {

    dialogFlag: {
      handler(newVal, oldVal) {
        this.visibleDialogFlag = newVal
      },
      deep:true,
      immediate: true,
    }

  },
  created(){
    this.getData()
  },
  methods:{
    async submitApdex() {
      const pars = {
        'csat_a': this.tempForm.csat_a,
        'csat_b': this.tempForm.csat_b,
        'csat_c': this.tempForm.csat_c
      }
      if (Number(this.tempForm.csat_a) > Number(this.tempForm.csat_b)) {
        this.$message.error('请修改满意样本延迟')
        return
      }
      if (Number(this.tempForm.csat_b) > Number(this.tempForm.csat_c)) {
        this.$message.error('请修改容忍样本延迟')
        return
      }
      const res = await modifyApdex(this.alias, pars)
      this.$emit('dialogCancel')
    },
    dialogCancel() {
      this.tempForm = {
        csat_a: null,
        csat_b: null,
        csat_c: null
      }
      this.$emit('dialogCancel')
    },
    close() {
      this.$emit('dialogCancel')
    },
    async getData() {
      const res = await getApdex(this.alias)
      if (res && res.code == 200) {
        this.tempForm = res.data
      }
    },
    changeNumber(target, value) {
      if (value < 0) {
        // this.$message.error('请填写正数')
        this.tempForm[target] = 0
        return
      }
      if (value) this.tempForm[target] = Number(value).toFixed(1)

      if (target == 'csat_c' && Number(this.tempForm[target]) < Number(this.tempForm['csat_b'])) {
        this.$message.error('请修改可容忍延迟')
      }
      if (target == 'csat_b') {
        if (Number(this.tempForm[target]) < Number(this.tempForm['csat_a'])) {
          this.$message.error('请修改满意样本延迟')
        } else if (Number(this.tempForm[target]) > Number(this.tempForm['csat_c']) && Number(this.tempForm['csat_c']) > 0) {
          this.$message.error('请修改可容忍延迟')
        }
      }
      if (target == 'csat_a') {
        if (Number(this.tempForm[target]) > Number(this.tempForm['csat_b']) && Number(this.tempForm['csat_b'] > 0)) {
          this.$message.error('请修改满意样本延迟')
        }
      }
    },
  }
}
</script>
<style lang="scss" scoped></style>
