<!--//查询没有国际化，绑定的数据也没有对应，主页table页是-->
<template>
  <div id="main" class="h-all">
    <!-- 页面基本布局 -->
    <el-container class="h-all">
      <!-- 页面顶部，存放按钮 -->
      <el-header height="auto">
        <div class="header-button-box">
          <el-button size='mini' icon="el-icon-circle-plus-outline" type="primary" @click="creatQosInit"
                     v-if="createAndCopyCommand.visible">
            {{$t("common.createBtn")}}
          </el-button>
          <el-button size='mini' icon="el-icon-document" type="primary" @click="copyQosInit"
                     v-if="createAndCopyCommand.visible">
            {{$t('common.copyBtn')}}
          </el-button>
          <el-button size='mini' icon="el-icon-delete" type="primary" @click="deleteQosInit"
                     v-if="deleteQosCommand.visible">
            {{$t("common.deleteBtn")}}
          </el-button>
        </div>
      </el-header>
      <el-main class="adapt-height-box">
        <el-table
          :empty-text="$t('common.noData')"
        header-row-class-name="table-header"
        cell-class-name="table-cell"
        class="adapt-height"
        height="auto"
        ref="singleTable"
        :data="CDPProfileList"
        highlight-current-row
        stripe
        tooltip-effect="dark"
        @current-change="handleCurrentChange"
        @selection-change="handleSelectionChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-row>
                <el-form-item label=" " style="margin-bottom: -10px; margin-top: -10px; font-size: 10px;width:40px;">
                </el-form-item>
                <el-form-item :label="$t('QosManagement.schedulingType')"
                              style="margin-bottom: -10px; margin-top: -10px; font-size: 10px;width:200px;">
                </el-form-item>
                <el-form-item :label="$t('QosManagement.bandwidth')+'  (Mbit/s)'"
                              style="margin-bottom: -10px; margin-top: -10px; font-size: 10px;width:200px;">

                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="0" style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:40px;">
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.schedulingType0==0?'DWRR':'STRICT'}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.bandwidth0 }}</span>

                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="1" style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:40px;">
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.schedulingType1==0?'DWRR':'STRICT'}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.bandwidth1 }}</span>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="2" style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:40px;">
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.schedulingType2==0?'DWRR':'STRICT'}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.bandwidth2 }}</span>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="3" style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:40px;">
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.schedulingType3==0?'DWRR':'STRICT'}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.bandwidth3 }}</span>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="4" style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:40px;">
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.schedulingType4==0?'DWRR':'STRICT'}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.bandwidth4 }}</span>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="5" style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:40px;">
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.schedulingType5==0?'DWRR':'STRICT'}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.bandwidth5 }}</span>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="6" style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:40px;">
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.schedulingType6==0?'DWRR':'STRICT'}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.bandwidth6 }}</span>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="7" style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:40px;">
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.schedulingType7==0?'DWRR':'STRICT'}}</span>
                </el-form-item>
                <el-form-item style="margin-bottom: -10px; margin-top: -20px; font-size: 10px;width:200px;">
                  <span>{{ props.row.bandwidth7 }}</span>
                </el-form-item>
              </el-row>
            </el-form>
          </template>

        </el-table-column>
        <el-table-column
          type="selection"
          width="35">
        </el-table-column>

        <el-table-column
          prop="profileName"
          :label="$t('QosManagement.CDPProfileName')"
          :show-overflow-tooltip="true">

        </el-table-column>

      </el-table>
      </el-main>
    </el-container>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>

  </div>
</template>

<script>
  //  import ElRow from 'element-ui/packages/row/src/row'
  import CommandExecuteContext from '@/commands/CommandExecuteContext'
  import QosCommands from "@/commands/QosCommands"
  import QosService from '@/domain/services/Business/CDPService.js'
  import HelperUtil from "@/utils/HelperUtil.js";

  export default {

    components: {
      CommandExecuteContext,
//      ElRow
    },
    name: 'CDPProfile',
    data: function () {   //存放 数据

      return {

        //命令
        commandContext: {},


        deleteList:[],
        //为了创建复制初始化传参
        createAndCopyInitList: [],
        createAndCopyTitle: '',

        //loading加载是否显示
        fullscreenLoading: false,
        formLabelWidth: '300px',
        selectLabelWidth: '50px',

        schedulingTypeList: [
          {
            key: '0',
            label: 'DWRR'
          },
          {
            key: '1',
            label: 'STRICT'
          }
        ],
        CDPShowList:[],
        CDPProfileList: [
//          {
//            "cdpKey": "15542689061640000",
//            "profileName": "profile1",
//            "schedulingType0": "DWRR",
//            "bandwidth0": "2000",
//            "schedulingType1": "DWRR",
//            "bandwidth1": "2000",
//            "schedulingType2": "DWRR",
//            "bandwidth2": "2000",
//            "schedulingType3": "DWRR",
//            "bandwidth3": "2000",
//            "schedulingType4": "DWRR",
//            "bandwidth4": "2000",
//            "schedulingType5": "DWRR",
//            "bandwidth5": "2000",
//            "schedulingType6": "DWRR",
//            "bandwidth6": "2000",
//            "schedulingType7": "DWRR",
//            "bandwidth7": "2000",
//            "cdpStatus": "SUCCESS"
//          }

        ],


        //双向绑定弹出窗口ipput域
        form: {
          profileName: " ",
          schedulingType0: " ",
          bandwidth0: " ",
          schedulingType1: " ",
          bandwidth1: " ",
          schedulingType2: " ",
          bandwidth2: " ",
          schedulingType3: " ",
          bandwidth3: " ",
          schedulingType4: " ",
          bandwidth4: " ",
          schedulingType5: " ",
          bandwidth5: " ",
          schedulingType6: " ",
          bandwidth6: " ",
          schedulingType7: " ",
          bandwidth7: " ",

        },


        currentRow: null,
        multipleSelection: [],
        subList: [],
      }
    },
    computed: {
      //命令
      createAndCopyCommand() {
        return QosCommands.createAndCopyQosCommand(this.createAndCopyTitle, this.createAndCopyInitList, this.commandContext)
      },
      deleteQosCommand() {
        return QosCommands.deleteQosCommand(this.deleteList, this.commandContext)
      },
    },
    methods: {

      /**
       * @Description  :表格多选框改变时，将所选行进行保存
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
      handleSelectionChange(val) {
        this.multipleSelection = val
      },

      /**
       * @Description  :单选一行，将所选行进行保存
       * @author       :
       * @date         :
       */
      handleCurrentChange(val) {
        // this.multipleSelection = val
        this.currentRow = val
      },

      /**
       * @Description  :获取全部Qos信息
       * @author       ::
       * @date         :
       */
      getAllQosInit: function () {
        let _this = this
        QosService.getAllCDPCollection().then(result => {
          //成功
          _this.CDPProfileList = Object.values(result)

//          _this.CDPShowList = _this.CDPProfileList
//          console.log("0000")
//          console.log(_this.CDPShowList)
//          for(var i=0;i<_this.CDPShowList.length;i++){
//            if(_this.CDPShowList[i]["schedulingType0"]==0){
//              _this.CDPShowList[i]["schedulingType0"]="DWRR"
//            }else if(_this.CDPShowList[i]["schedulingType0"]==1){
//              _this.CDPShowList[i]["schedulingType0"]="STRICT"
//            }
//            if(_this.CDPShowList[i]["schedulingType1"]==0){
//              _this.CDPShowList[i]["schedulingType1"]="DWRR"
//            }else if(_this.CDPShowList[i]["schedulingType1"]==1){
//              _this.CDPShowList[i]["schedulingType1"]="STRICT"
//            }
//            if(_this.CDPShowList[i]["schedulingType2"]==0){
//              _this.CDPShowList[i]["schedulingType2"]="DWRR"
//            }else if(_this.CDPShowList[i]["schedulingType2"]==1){
//              _this.CDPShowList[i]["schedulingType2"]="STRICT"
//            }
//            if(_this.CDPShowList[i]["schedulingType3"]==0){
//              _this.CDPShowList[i]["schedulingType3"]="DWRR"
//            }else if(_this.CDPShowList[i]["schedulingType3"]==1){
//              _this.CDPShowList[i]["schedulingType3"]="STRICT"
//            }
//            if(_this.CDPShowList[i]["schedulingType4"]==0){
//              _this.CDPShowList[i]["schedulingType4"]="DWRR"
//            }else if(_this.CDPShowList[i]["schedulingType4"]==1){
//              _this.CDPShowList[i]["schedulingType4"]="STRICT"
//            }
//            if(_this.CDPShowList[i]["schedulingType5"]==0){
//              _this.CDPShowList[i]["schedulingType5"]="DWRR"
//            }else if(_this.CDPShowList[i]["schedulingType5"]==1){
//              _this.CDPShowList[i]["schedulingType5"]="STRICT"
//            }
//            if(_this.CDPShowList[i]["schedulingType6"]==0){
//              _this.CDPShowList[i]["schedulingType6"]="DWRR"
//            }else if(_this.CDPShowList[i]["schedulingType6"]==1){
//              _this.CDPShowList[i]["schedulingType6"]="STRICT"
//            }
//            if(_this.CDPShowList[i]["schedulingType7"]==0){
//              _this.CDPShowList[i]["schedulingType7"]="DWRR"
//            }else if(_this.CDPShowList[i]["schedulingType7"]==1){
//              _this.CDPShowList[i]["schedulingType7"]="STRICT"
//            }
//
//          }

        }).catch(err => {
          //失败

          _this.InfoTip.errorTip(_this, err);
        })


      },


      /**
       * @Description  :增删改后调用，重新加载table
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
      getAllQos: function (vue) {
        QosService.getAllCDPCollection().then(result => {
          //成功
          vue.CDPProfileList = Object.values(result)
        }).catch(err => {
          //失败

          this.InfoTip.errorTip(this, err);
        })


      },


      /**
       * @Description  :创建Qos策略配置初始化
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
      creatQosInit: function () {
        this.createAndCopyTitle = this.$t('QosManagement.createQos');
        this.createAndCopyInitList = {
          "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": "",
          "cdpStatus": "",
          "cdpKey": ""
        };
        this.createAndCopyCommand.execute();
      },

      /**
       * @Description  :复制Qos策略配置初始化
       * @author       :
       * @date         :
       */
      copyQosInit: function () {
        let _this = this

        if (this.multipleSelection.length == 0) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.COPY_SELECT_CODE))

//          this.$message({
//            type: 'warning',
//            message: '请选择一条信息进行复制！ ',
//            duration: 10000,
//            showClose: true,
//          })
//          return
        } else if (this.multipleSelection.length > 1) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.COPY_ONLY_ONE_CODE))

//          this.$message({
//
//            type: 'warning',
//            message: '请只选择一条信息进行复制！ ',
//            duration: 15000,
//            showClose: true,
//          })
          return
        } else {
          this.createAndCopyTitle = this.$t('QosManagement.copyQos')//'Qos配置信息的复制';
          this.createAndCopyInitList = {
            "profileName": this.multipleSelection[0].profileName,
            "schedulingType0": this.multipleSelection[0].schedulingType0,
            "bandwidth0": this.multipleSelection[0].bandwidth0,
            "schedulingType1": this.multipleSelection[0].schedulingType1,
            "bandwidth1": this.multipleSelection[0].bandwidth1,
            "schedulingType2": this.multipleSelection[0].schedulingType2,
            "bandwidth2": this.multipleSelection[0].bandwidth2,
            "schedulingType3": this.multipleSelection[0].schedulingType3,
            "bandwidth3": this.multipleSelection[0].bandwidth3,
            "schedulingType4": this.multipleSelection[0].schedulingType4,
            "bandwidth4": this.multipleSelection[0].bandwidth4,
            "schedulingType5": this.multipleSelection[0].schedulingType5,
            "bandwidth5": this.multipleSelection[0].bandwidth5,
            "schedulingType6": this.multipleSelection[0].schedulingType6,
            "bandwidth6": this.multipleSelection[0].bandwidth6,
            "schedulingType7": this.multipleSelection[0].schedulingType7,
            "bandwidth7": this.multipleSelection[0].bandwidth7,
            "cdpStatus": "",
            "cdpKey": ""
          }

          this.createAndCopyCommand.execute();

        }
      },


      /**
       * @Description  :删除Qos策略配置初始化
       * @author       :
       * @date         :
       */
      deleteQosInit: function () {
        if (this.multipleSelection.length == 0) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DELETE_SELECT_CODE))

          return
        }
        else if (this.multipleSelection.length > 1) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_ONLY_ONE_RECORD_TO_DELETE))

          return
        }
        else {
          this.deleteList = []
          for (var i = 0; i < this.multipleSelection.length; i++) {
            this.deleteList.push(this.multipleSelection[i]['cdpKey']);
          }
          this.deleteQosCommand.execute()
        }
      },
    },


    //初始化函数，加载数据
    created: function () {



    },
    mounted(){
      this.getAllQosInit()
//      this.formateSchedulingType()
    },
    watch: {
      commandContext(newVal, oldVal) {
        if (JSON.stringify(newVal) === '{}') {
          this.getAllQosInit()
          this.$refs.singleTable.clearSelection();
        }
        deep: true
      },
    },


  }
</script>

<style scoped>

  .el-table .warning-row {
    background: oldlace;
  }
</style>
