<template>
  <!--QoS策略配置创建对话框 -->
  <el-dialog
    @close="close"
    @opened="creatQosInit"
    v-if="createAndCopyQosVisible"
    v-dialogDrag
    style="font-size: 10px;" width='750px'
    :title=title
    :visible.sync="createAndCopyQosVisible">
    <el-row>
      <el-form :model="form" inline="true" ref="form" style="width:750px">

        <el-row>
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item prop="profileName"
                          :label="'*'+ $t('QosManagement.CDPProfileName')+':'"
                          :label-width="formLabelWidth">
              <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model="form.profileName"
                        v-on:blur="nameCheck"
                        autocomplete="off"
                        style="width:200px"></el-input>
            </el-form-item>

          </el-form-item>
        </el-row>

        <el-form-item style="margin-bottom: -10px;float:left ">
          <el-form-item prop="schedulingType0"
                        :label="'*'+ $t('QosManagement.schedulingType0')+':'"
                        :label-width="formLabelWidth">
            <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType0"
                       v-on:change="schedulingTypeCheck0"
                       autocomplete="off"
                       style="width:200px">

              <!--:formatter="formatStateKey"-->
              <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label"

                         :value="item.key"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item prop="bandwidth0"
                        :label="'*'+ $t('QosManagement.bandwidth0')+':'"
                        :label-width="formLabelWidth">
            <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth0"
                      v-on:blur="bandwithCheak0"
                      autocomplete="off"
                      style="width:200px">
              <template slot="append">Mbit/s</template>
            </el-input>


          </el-form-item>
        </el-form-item>

        <el-form-item style="margin-bottom: -10px;float:left ">
          <el-form-item prop="schedulingType1"
                        :label="'*'+ $t('QosManagement.schedulingType1')+':'"
                        :label-width="formLabelWidth">
            <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType1"
                       autocomplete="off"
                       v-on:change="schedulingTypeCheck1"
                       style="width:200px">

              <!--:formatter="formatStateKey"-->
              <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label"
                         :value="item.key"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="bandwidth1"
                        :label="'*'+ $t('QosManagement.bandwidth1')+':'"
                        :label-width="formLabelWidth">
            <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth1"
                      v-on:blur="bandwithCheak1"
                      autocomplete="off"
                      style="width:200px">
              <template slot="append">Mbit/s</template>
            </el-input>

          </el-form-item>
        </el-form-item>

        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item prop="schedulingType2"
                        :label="'*'+ $t('QosManagement.schedulingType2')+':'"
                        :label-width="formLabelWidth">
            <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType2"
                       autocomplete="off"
                       v-on:change="schedulingTypeCheck2"
                       style="width:200px">

              <!--:formatter="formatStateKey"-->
              <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label"
                         :value="item.key"></el-option>
            </el-select>

          </el-form-item>


          <el-form-item prop="bandwidth2"
                        :label="'*'+ $t('QosManagement.bandwidth2')+':'"
                        :label-width="formLabelWidth">
            <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth2"
                      v-on:blur="bandwithCheak2"
                      autocomplete="off"
                      style="width:200px">
              <template slot="append">Mbit/s</template>
            </el-input>

          </el-form-item>
        </el-form-item>

        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item prop="schedulingType3"
                        :label="'*'+ $t('QosManagement.schedulingType3')+':'"
                        :label-width="formLabelWidth">
            <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType3"
                       autocomplete="off"
                       v-on:change="schedulingTypeCheck3"
                       style="width:200px">

              <!--:formatter="formatStateKey"-->
              <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label"
                         :value="item.key"></el-option>
            </el-select>

          </el-form-item>


          <el-form-item prop="bandwidth3"
                        :label="'*'+ $t('QosManagement.bandwidth3')+':'"
                        :label-width="formLabelWidth">
            <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth3"
                      v-on:blur="bandwithCheak3"
                      autocomplete="off"
                      style="width:200px">
              <template slot="append">Mbit/s</template>
            </el-input>

          </el-form-item>
        </el-form-item>

        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item prop="schedulingType4"
                        :label="'*'+ $t('QosManagement.schedulingType4')+':'"
                        :label-width="formLabelWidth">
            <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType4"
                       autocomplete="off"
                       v-on:change="schedulingTypeCheck4"
                       style="width:200px">

              <!--:formatter="formatStateKey"-->
              <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label"
                         :value="item.key"></el-option>
            </el-select>
          </el-form-item>


          <el-form-item prop="bandwidth4"
                        :label="'*'+ $t('QosManagement.bandwidth4')+':'"
                        :label-width="formLabelWidth">
            <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth4"
                      v-on:blur="bandwithCheak4"
                      autocomplete="off"
                      style="width:200px">
              <template slot="append">Mbit/s</template>
            </el-input>

          </el-form-item>
        </el-form-item>

        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item prop="schedulingType5"
                        :label="'*'+ $t('QosManagement.schedulingType5')+':'"
                        :label-width="formLabelWidth">
            <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType5"
                       autocomplete="off"
                       v-on:change="schedulingTypeCheck5"
                       style="width:200px">

              <!--:formatter="formatStateKey"-->
              <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label"
                         :value="item.key"></el-option>
            </el-select>

          </el-form-item>


          <el-form-item prop="bandwidth5"
                        :label="'*'+ $t('QosManagement.bandwidth5')+':'"
                        :label-width="formLabelWidth">
            <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth5"
                      v-on:blur="bandwithCheak5"
                      autocomplete="off"
                      style="width:200px">
              <template slot="append">Mbit/s</template>
            </el-input>

          </el-form-item>
        </el-form-item>

        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item prop="schedulingType6"
                        :label="'*'+ $t('QosManagement.schedulingType6')+':'"
                        :label-width="formLabelWidth">
            <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType6"
                       autocomplete="off"
                       v-on:change="schedulingTypeCheck6"
                       style="width:200px">

              <!--:formatter="formatStateKey"-->
              <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label"
                         :value="item.key"></el-option>
            </el-select>

          </el-form-item>


          <el-form-item prop="bandwidth6"
                        :label="'*'+ $t('QosManagement.bandwidth6')+':'"
                        :label-width="formLabelWidth">
            <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth6"
                      v-on:blur="bandwithCheak6"
                      autocomplete="off"
                      style="width:200px">
              <template slot="append">Mbit/s</template>
            </el-input>

          </el-form-item>
        </el-form-item>

        <el-form-item style="margin-bottom: -10px; float:left">
          <el-form-item prop="schedulingType7"
                        :label="'*'+ $t('QosManagement.schedulingType7')+':'"
                        :label-width="formLabelWidth">
            <el-select clearable size='mini' :placeholder="$t('common.placeholder')" v-model="form.schedulingType7"
                       autocomplete="off"
                       v-on:change="schedulingTypeCheck7"
                       style="width:200px">

              <!--:formatter="formatStateKey"-->
              <el-option v-for="item in schedulingTypeList" :key="item.key" :label="item.label"
                         :value="item.key"></el-option>
            </el-select>

          </el-form-item>


          <el-form-item prop="bandwidth7"
                        :label="'*'+ $t('QosManagement.bandwidth7')+':'"
                        :label-width="formLabelWidth">
            <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model.trim="form.bandwidth7"
                      v-on:blur="bandwithCheak7"
                      autocomplete="off"
                      style="width:200px">
              <template slot="append">Mbit/s</template>
            </el-input>

          </el-form-item>

        </el-form-item>

      </el-form>
    </el-row>

    <el-row style="margin-bottom: 0px;" slot="footer" class="dialog-footer">

      <el-button style="margin-bottom: -10px; " size='mini' type="primary" :disabled="state"
                 @click="creatQos" v-loading.fullscreen.lock="fullscreenLoading">
        {{$t("common.createBtn")}}
      </el-button>
      <el-button style="margin-bottom: -10px;" size='mini' @click="close">
        {{$t("common.cancel")}}
      </el-button>
    </el-row>
  </el-dialog>
</template>

<script>
  import legitimacyCheck from "../../../utils/legitimacyCheck";
  import QosService from '@/domain/services/Business/CDPService.js'
  import HelperUtil from "../../../utils/HelperUtil";

  export default {
    props: ['command'],

    data: function () {   //存放 数据

      return {
        title: this.command.title,
        initList: this.command.target,
        createAndCopyQosVisible: false,
        formLabelWidth: '140px',
        //双向绑定弹出窗口ipput域
        form: {
          profileName: " ",
          schedulingType0:null,
          bandwidth0: " ",
          schedulingType1: null,
          bandwidth1: " ",
          schedulingType2: null,
          bandwidth2: " ",
          schedulingType3: null,
          bandwidth3: " ",
          schedulingType4: null,
          bandwidth4: " ",
          schedulingType5: null,
          bandwidth5: " ",
          schedulingType6: null,
          bandwidth6: " ",
          schedulingType7: null,
          bandwidth7: " ",
        },
        schedulingTypeList: [
          {
            key: '0',
            label: 'DWRR'
          },
          {
            key: '1',
            label: 'STRICT'
          }
        ],
      }
    },
    methods: {
      close() {
        this.command.done();
      },

      /**
       * @Description  :创建Qos策略配置初始化
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
      creatQosInit: function () {
        this.form.profileName = this.initList.profileName
        this.form.schedulingType0 = this.initList.schedulingType0
        this.form.bandwidth0 = this.initList.bandwidth0
        this.form.schedulingType1 = this.initList.schedulingType1
        this.form.bandwidth1 = this.initList.bandwidth1
        this.form.schedulingType2 = this.initList.schedulingType2
        this.form.bandwidth2 = this.initList.bandwidth2
        this.form.schedulingType3 = this.initList.schedulingType3
        this.form.bandwidth3 = this.initList.bandwidth3
        this.form.schedulingType4 = this.initList.schedulingType4
        this.form.bandwidth4 = this.initList.bandwidth4
        this.form.schedulingType5 = this.initList.schedulingType5
        this.form.bandwidth5 = this.initList.bandwidth5
        this.form.schedulingType6 = this.initList.schedulingType6
        this.form.bandwidth6 = this.initList.bandwidth6
        this.form.schedulingType7 = this.initList.schedulingType7
        this.form.bandwidth7 = this.initList.bandwidth7
      },

      /**
       * @Description  :创建QoS策略配置
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
      creatQos: function () {
        let _this = this;
        if (!this.totalCheck()) {
          return
        }
        else {
          let qos = {};
          qos.profileName = _this.form.profileName;
          qos.schedulingType0 = _this.form.schedulingType0;
          qos.bandwidth0 = _this.form.bandwidth0;
          qos.schedulingType1 = _this.form.schedulingType1;
          qos.bandwidth1 = _this.form.bandwidth1;
          qos.schedulingType2 = _this.form.schedulingType2;
          qos.bandwidth2 = _this.form.bandwidth2;
          qos.schedulingType3 = _this.form.schedulingType3;
          qos.bandwidth3 = _this.form.bandwidth3;
          qos.schedulingType4 = _this.form.schedulingType4;
          qos.bandwidth4 = _this.form.bandwidth4;
          qos.schedulingType5 = _this.form.schedulingType5;
          qos.bandwidth5 = _this.form.bandwidth5;
          qos.schedulingType6 = _this.form.schedulingType6;
          qos.bandwidth6 = _this.form.bandwidth6;
          qos.schedulingType7 = _this.form.schedulingType7;
          qos.bandwidth7 = _this.form.bandwidth7;
          qos.cdpStatus = '';
          qos.cdpKey = '';
          let loadingInstance = _this.Loading.openLoading();
          QosService.addCDP(qos).then(result => {
            //成功
            _this.Loading.closeLoading(loadingInstance);
            _this.InfoTip.successTip(_this,HelperUtil.getStatusCodeObjectByCode(_this.successCode.ADD_CODE));
            _this.close()
          }).catch(err => {
            //失败
            _this.Loading.closeLoading(loadingInstance);
            _this.InfoTip.errorTip(_this, err);
          });


        }
      },
      //------------------------------------验证开始-------------------------------------------------------------------

      //输入文本长度验证
      textLengthCheck: function (checkString) {
        let qosCheck = legitimacyCheck()

        var result = qosCheck.textLengthCheck(checkString)
        if (!result) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LENGTH_CODE))


//          this.$message({
//            type: 'warning',
//            message: '所输文本长度必须控制在20之内! ',
//            duration: 10000,
//            showClose: true,
//          })
          return false
        }
        return true
      },

      bandwidthCheak: function (checkString) {
        let qosCheck = legitimacyCheck()

        var result = qosCheck.numberCheck(checkString)
        if (!result) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_ENTER_A_VALID_BANDWIDTH))


//          this.$message({
//            type: 'warning',
//            message: '请输入有效的带宽 ',
//            duration: 10000,
//            showClose: true,
//          })
          return false
        }
        if (!this.textLengthCheck(checkString)) {
          return false
        }
        return true
      },

      bandwithCheak0: function () {
        let _this = this
        if (!_this.bandwidthCheak(_this.form.bandwidth0)) {
          return false
        }
        return true
      },
      bandwithCheak1: function () {
        if (!this.bandwidthCheak(this.form.bandwidth1)) {
          return false
        }
        return true
      },
      bandwithCheak2: function () {
        if (!this.bandwidthCheak(this.form.bandwidth2)) {
          return false
        }
        return true
      },
      bandwithCheak3: function () {
        if (!this.bandwidthCheak(this.form.bandwidth3)) {
          return false
        }
        return true

      },
      bandwithCheak4: function () {
        if (!this.bandwidthCheak(this.form.bandwidth4)) {
          return false
        }
        return true
      },
      bandwithCheak5: function () {

        if (!this.bandwidthCheak(this.form.bandwidth5)) {
          return false
        }
        return true
      },
      bandwithCheak6: function () {
        if (!this.bandwidthCheak(this.form.bandwidth6)) {
          return false
        }
        return true
      },
      bandwithCheak7: function () {
        if (!this.bandwidthCheak(this.form.bandwidth7)) {
          return false
        }
        return true
      },

      schedulingTypeCheck:function(checkString){
        if(checkString === null){
          // let message='请选择调度算法! '
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_A_SCHEDULING_TYPE))
          return false
        }
        return true
      },

      schedulingTypeCheck0: function () {
        if (!this.schedulingTypeCheck(this.form.schedulingType0)) {
          return false
        }
        return true
      },
      schedulingTypeCheck1: function () {
        if (!this.schedulingTypeCheck(this.form.schedulingType1)) {
          return false
        }
        return true
      },
      schedulingTypeCheck2: function () {
        if (!this.schedulingTypeCheck(this.form.schedulingType2)) {
          return false
        }
        return true
      },
      schedulingTypeCheck3: function () {
        if (!this.schedulingTypeCheck(this.form.schedulingType3)) {
          return false
        }
        return true
      },
      schedulingTypeCheck4: function () {
        if (!this.schedulingTypeCheck(this.form.schedulingType4)) {
          return false
        }
        return true
      },
      schedulingTypeCheck5: function () {
        if (!this.schedulingTypeCheck(this.form.schedulingType5)) {
          return false
        }
        return true
      },
      schedulingTypeCheck6: function () {
        if (!this.schedulingTypeCheck(this.form.schedulingType6)) {
          return false
        }
        return true
      },
      schedulingTypeCheck7: function () {
        if (!this.schedulingTypeCheck(this.form.schedulingType7)) {
          return false
        }
        return true
      },
      //CDPProfile名称合法性验证
      nameCheck: function () {


        let qosCheck = legitimacyCheck()

        var result = qosCheck.textNullCheck(this.form.profileName)
        if (!result) {
          // let message='请输入有效的CDPprofile名称! '
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_ENTER_A_VALID_CDP_PROFILE_NAME))

//          this.$message({
//            type: 'warning',
//            message: '请输入有效的CDPprofile名称 ',
//            duration: 10000,
//            showClose: true,
//          })
          return false
        }
        return true
      },

      totalCheck: function () {
        if (!this.nameCheck()) {
          return false;
        }
        if (!this.schedulingTypeCheck0()) {
          return false;
        }
        if (!this.bandwithCheak0()) {
          return false;
        }
        if (!this.schedulingTypeCheck1()) {
          return false;
        }
        if (!this.bandwithCheak1()) {
          return false;
        }
        if (!this.schedulingTypeCheck2()) {
          return false;
        }
        if (!this.bandwithCheak2()) {
          return false;
        }
        if (!this.schedulingTypeCheck3()) {
          return false;
        }
        if (!this.bandwithCheak3()) {
          return false;
        }
        if (!this.schedulingTypeCheck4()) {
          return false;
        }
        if (!this.bandwithCheak4()) {
          return false;
        }
        if (!this.schedulingTypeCheck5()) {
          return false;
        }
        if (!this.bandwithCheak5()) {
          return false;
        }
        if (!this.schedulingTypeCheck6()) {
          return false;
        }
        if (!this.bandwithCheak6()) {
          return false;
        }
        if (!this.schedulingTypeCheck7()) {
          return false;
        }
        if (!this.bandwithCheak7()) {
          return false;
        }

        return true
      },


      //------------------------------------验证结束-------------------------------------------------------------------


    },
    created() {
      console.log("Qos创建初始化加载数据")
    },
    mounted() {
      this.createAndCopyQosVisible = true
    },

  }
</script>

<style scoped>
  /*!* 外层布局容器样式 *!*/
  .el-header {
    background-color: #f9fafc;
    color: #333;
    line-height: 30px;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  body .el-table colgroup.gutter {
    display: table-cell !important;
  }

</style>