<template>
  <div id="main">
    <el-dialog
      width="60%"
      title="ELINE模板选择"
      :visible.sync="innerVisible"
      @close="close()"
      append-to-body>
      <div slot="title" class="header-title">
        <el-row >
          <el-col :span="15"><div class="title-name" style="font-size: 20px">{{$t("EveModelConfigurationManagement.elineTemplateChoose")}}</div></el-col>
          <el-col :span="9">
            <el-input :placeholder="$t('EveModelConfigurationManagement.inputTemplateName')" icon="search" v-model="queryElineTemplateName" class="search-input" style="width: 180px"></el-input>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-table
          :data="tableData"
          ref="singleTable"
          height="250"
          border
          header-row-class-name="table-header"
          cell-class-name="table-cell"
          highlightCurrentRow
          @current-change="handleCurrentChange"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="elineTemplateKey"
            label="主键"
            v-if="false">
          </el-table-column>
          <el-table-column
            prop="defaultFlag"
            :label="$t('EveModelConfigurationManagement.defaultFlag')"
            width="100"
            :formatter="formatDefaultFlag"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            text-align="left"
            prop="elineTemplateName"
            :label="$t('EveModelConfigurationManagement.ElineTemplateName')"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            text-align="left"
            prop="serviceTypeID"
            :label="$t('EveModelConfigurationManagement.serviceType')"
            :formatter="formatServerType"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="protectionMode"
            :label="$t('EveModelConfigurationManagement.protectionMode')"
            :formatter="formatProtectionMode"
            width="120"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="reversion"
            :label="$t('EveModelConfigurationManagement.reversion')"
            :formatter="formatReversionFlag"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="wtr"
            :label="$t('EveModelConfigurationManagement.wtr')"
            width="100"
            :formatter="formatWtr"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="oamInfo"
            :label="$t('EveModelConfigurationManagement.oamInfo')"
            :formatter="formatOamInfo"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="ccmInterval"
            :label="$t('EveModelConfigurationManagement.ccmInterval')"
            width="100"
            :formatter="formatccmInterval"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="encapsulationType"
            :label="$t('EveModelConfigurationManagement.encapsulationType')"
            width="100"
            :formatter="formatEncapsulationType"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="l2AccessType"
            :label="$t('EveModelConfigurationManagement.l2AccessType')"
            width="100"
            :formatter="formatL2AccessType"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="vlanAccess"
            :label="$t('EveModelConfigurationManagement.vlanAccess')"
            width="100"
            :formatter="formatVlanAccess"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="vlanRangeStart"
            :label="$t('EveModelConfigurationManagement.vlanRangeStart')"
            width="120"
            :formatter="formatVlanRangeStart"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="vlanRangeEnd"
            :label="$t('EveModelConfigurationManagement.vlanRangeEnd')"
            width="120"
            :formatter="formatVlanRangeEnd"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="vlanSet"
            :label="$t('EveModelConfigurationManagement.vlanSet')"
            width="120"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="cosId"
            :label="$t('EveModelConfigurationManagement.cosId')"
            :formatter="formatCosId"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="limitedBandwidth"
            :label="$t('EveModelConfigurationManagement.limitedBandwidth')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="qosProfile"
            :label="$t('EveModelConfigurationManagement.qosProfile')"
            width="100"
            :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
      </el-row>
      <el-row style="margin-bottom: 0px;" slot="footer" class="dialog-footer">
        <el-button size='mini' type="primary" @click="selectElineTemplate"
                   v-loading.fullscreen.lock="fullscreenLoading">{{$t("EveModelConfigurationManagement.choose")}}
        </el-button>
        <el-button size='mini' @click="close()">{{$t("common.cancel")}}</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import ElRow from "element-ui/packages/row/src/row";
  import ElDialog from "../../../../node_modules/element-ui/packages/dialog/src/component.vue";
  import ElineTemplateService from '@/domain/services/Business/ElineTemplateService.js'
  import HelperUtil from "../../../utils/HelperUtil";
  import ServiceTypeService from '@/domain/services/Business/ServiceTypeService.js'

  export default {

    props: {
      innerVisible: false,
      form:{
        elineTemplateKey: "",
        elineTemplateName: "",
        serviceTypeID: "",
        protectionMode: "",
        reversion: "",
        wtr: "",
        oamInfo: "",
        ccmInterval: "",
        encapsulationType: "",
        l2AccessType:"",
        vlanAccess: "",
        vlanRangeStart: "",
        vlanRangeEnd: "",
        vlanSet: "",
        cosId: "",
        limitedBandwidth: "",
        qosProfile: "",
      },
    },
    data: function () {   //存放数据
      return {
        //window.innerHeight:浏览器的可用高度
        tableHeight: window.innerHeight * 0.7,
        fullscreenLoading: false,
        formLabelWidth: '180px',

        //-----------------表格数据过滤---------------------------------------
        //业务类型过滤
        ServiceTypeList: [],
        //保护模式过滤
        protectionModeList:[
          {
            value: 0,
            label: this.$t('EthernetELineServiceConfigurationManagement.unprotected')
          },
          {
            value: 1,
            label: this.$t('EthernetELineServiceConfigurationManagement.one2one')
          },
          {
            value: 2,
            label: this.$t('EthernetELineServiceConfigurationManagement.lspone2one')
          }
        ],
        //是否回滚过滤
        reversionFlag:[
          {
            value:0,
            label:this.$t('EveModelConfigurationManagement.is')
          },
          {
            value:1,
            label:this.$t('EveModelConfigurationManagement.no')
          }
        ],
        //oam选项过滤
        oamInfoFlag:[
          {
            value:0,
            label:this.$t('EveModelConfigurationManagement.is')
          },
          {
            value:1,
            label:this.$t('EveModelConfigurationManagement.no')
          }
        ],
        //ccm间隔时间过滤
        ccmIntervalList: [
          {
            ccmIntervalTime: '3.3min',
            value:1
          },
          {
            ccmIntervalTime: '10min',
            value:2
          },
          {
            ccmIntervalTime: '60min',
            value:3
          },
          {
            ccmIntervalTime: '100min',
            value:4
          },
          {
            ccmIntervalTime: '600min',
            value:5
          },
          {
            ccmIntervalTime: '6000min',
            value:6
          }
        ],
        //vlan类别过滤
        encapsulationTypeList:[
          {
            value: 0,
            label: this.$t('EthernetELineServiceConfigurationManagement.ethernetType')
          },
          {
            value: 1,
            label: this.$t('EthernetELineServiceConfigurationManagement.vlanType')
          }
        ],
        //l2AccessType类别过滤
        l2AccessTypeList:[
          {
            value: 0,
            label: "untag"
          },
          {
            value: 1,
            label: "dot1q"
          },
          {
            value: 2,
            label: "qinq"
          },
        ],
        //vlan设置方式过滤
        vlanAccessList:[
          {
            value:0,
            label: this.$t('EthernetELineServiceConfigurationManagement.vlanRange1')
          },
          {
            value:1,
            label: this.$t('EthernetELineServiceConfigurationManagement.vlanSet')
          }
        ],
        //cos-id过滤
        cosIdList: [
          {
            value: 0,
            label: '0'
          },
          {
            value: 1,
            label: '1'
          },
          {
            value: 2,
            label: '2'
          },
          {
            value: 3,
            label: '3'
          },
          {
            value: 4,
            label: '4'
          },
          {
            value: 5,
            label: '5'
          },
          {
            value: 6,
            label: '6'
          },
          {
            value: 7,
            label: '7'
          },
        ],

        //设备列表
        deviceList: [],

        //最终显示在表格上的数据（经过查询过滤的）
        //eline模板
        ElineTemplateList: [],
        //保存当前行数据
        currentRow: null,
        //保存多选行数据
        multipleSelection: [],
        //eline模板名称（模糊查询）
        queryElineTemplateName : "",

      }
    },
    //vue加载初始化函数，加载数据
    created: function () {
      //获取下拉框业务类型信息
      this.getAllServiceType();
    },
    mounted(){
      this.nextTick(function () {

      })
    },
    computed: {
      // 模糊搜索
      tableData () {
        const search = this.queryElineTemplateName;
        let key = "elineTemplateName";
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          return this.ElineTemplateList.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data["elineTemplateName"]).indexOf(search) > -1
            })
          })
        }
        return this.ElineTemplateList
      },
    },
    watch: {
      innerVisible(newVal,oldVal){
        if(newVal === true){
          this.getElineTemplateList();
        }
      },

      ElineTemplateList(newVal,oldVal){
        this.$refs.singleTable.setCurrentRow(this.tableData[0]);
      }
    },
    methods: {
      /**
       * @Description  ：单选一行，将所选行进行保存
       */
      handleCurrentChange(val) {
        this.currentRow = val;
      },

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

      setCurrent() {
        this.$nextTick(function () {

        });
      },

      /***
       * --------------表格数据过滤---------------------------------------------------------
       */
      /**
       * @Description  :业务类型过滤
       */
      formatServerType: function (row, column) {
        for (var j = 0; j < this.ServiceTypeList.length; j++) {
          if (row.serviceTypeID == (this.ServiceTypeList[j]['serviceTypeID'])) {
            return this.ServiceTypeList[j]['serviceTypeName']
          }
        }
      },

      /**
       * @Description  ：保护模式过滤
       */
      formatProtectionMode: function (row, column){
        for(var i= 0;i<this.protectionModeList.length;i++){
          if(this.protectionModeList[i]['value']==row.protectionMode){
            return this.protectionModeList[i]['label']
            break;
          }
        }
      },

      /**
       * @Description  ：是否回滚过滤
       */
      formatReversionFlag: function (row, column){
        for(var i= 0;i<this.reversionFlag.length;i++){
          if(this.reversionFlag[i]['value']==row.reversion){
            return this.reversionFlag[i]['label']
            break;
          }
        }
      },

      /**
       * @Description  ：回滚等待时间过滤
       */
      formatWtr:function (row, column) {
        if(row.wtr === -999){
          return ""
        }
        return row.wtr;
      },

      /**
       * @Description  ：oamInfo选项过滤
       */
      formatOamInfo: function (row, column){
        if(row.oamInfo === -999){
          return ""
        }
        for(var i= 0;i<this.oamInfoFlag.length;i++){
          if(this.oamInfoFlag[i]['value']==row.oamInfo){
            return this.oamInfoFlag[i]['label']
            break;
          }
        }
      },

      /**
       * @Description  ：ccm间隔时间过滤
       */
      formatccmInterval: function (row, column) {
        if(row.ccmInterval === -999){
          return ""
        }
        for (var i = 0; i < this.ccmIntervalList.length; i++) {
          if (this.ccmIntervalList[i]['value'] === row.ccmInterval) {
            return this.ccmIntervalList[i]['ccmIntervalTime'];
            break;
          }
        }
      },

      /**
       * @Description  ：vlan类别过滤
       */
      formatEncapsulationType: function (row, column){
        for(var i= 0;i<this.encapsulationTypeList.length;i++){
          if(this.encapsulationTypeList[i]['value']==row.encapsulationType){
            return this.encapsulationTypeList[i]['label']
            break;
          }
        }
      },

      /**
       * @Description  ：vlan协议过滤
       */
      formatL2AccessType:function (row, column) {
        if(row.l2AccessType === -999){
          return ""
        }
        for (let i = 0; i < this.l2AccessTypeList.length; i++) {
          if (this.l2AccessTypeList[i]['value'] === row.l2AccessType) {
            return this.l2AccessTypeList[i]['label'];
            break;
          }
        }
      },

      /**
       * @Description  ：vlan设置方式过滤
       */
      formatVlanAccess: function (row, column){
        if(row.vlanAccess === -999){
          return ""
        }
        for(var i= 0;i<this.vlanAccessList.length;i++){
          if(this.vlanAccessList[i]['value']===row.vlanAccess){
            return this.vlanAccessList[i]['label'];
            break;
          }
        }
      },

      /**
       * @Description  ：vlan-range起点过滤
       */
      formatVlanRangeStart:function (row, column) {
        if(row.vlanRangeStart === -999){
          return ""
        }
        return row.vlanRangeStart;
      },

      /**
       * @Description  ：vlan-range终点过滤
       */
      formatVlanRangeEnd:function (row, column) {
        if(row.vlanRangeEnd === -999){
          return ""
        }
        return row.vlanRangeEnd;
      },

      /**
       * @Description  ：cosId设置方式过滤
       */
      formatCosId: function (row, column) {
        for (let i = 0; i < this.cosIdList.length; i++) {
          if (this.cosIdList[i]['value'] === row.cosId) {
            return this.cosIdList[i]['label'];
            break;
          }
        }
      },

      /**
       * @Description  ：defaultFlag是否为默认模板过滤
       */
      formatDefaultFlag:function (row, column) {
        if(row.defaultFlag === 1){
          return this.$t('EveModelConfigurationManagement.default');
        }
      },

      /**
       * -----------------------------选择模板操作----------------------------------------------------------------------------
       * */

      /**
       * @Description  ：获取下拉框所有业务类型消息
       * @date         : 2019/03/19 15:20
       */
      getAllServiceType: function (){
        //从domin处获取
        let _this = this
        ServiceTypeService.getAllServiceTypeCollection().then(result => {
          //成功
          _this.ServiceTypeList = Object.values(result)
        }).catch(err => {
          //失败
          _this.InfoTip.errorTip(_this, err);
        })
      },

      /**
       * @Description  ：获取业务模板列表（目前的方案是通过watch监督innerVisible变化）
       * @date         : 2019/03/19 15:59
       */
      getElineTemplateList:function () {
        //从domin获取ELINE模板
        ElineTemplateService.getAllElineTemplateCollection().then(result => {
          //成功
          this.ElineTemplateList = result
          this.elineTemplateShow();
        }).catch(err => {
          //失败

        })
      },


      /**
       * @Description  ：业务模板显示调整
       * @date         : 2019/03/19 15:59
       */
      elineTemplateShow:function () {
        //选择默认模板，将其移到顶部
        let template_default = "";
        for (let i = 0; i < this.ElineTemplateList.length; i++) {
          if (this.ElineTemplateList[i].defaultFlag === 1) {
            template_default = this.ElineTemplateList[i];
            this.ElineTemplateList.splice(i, 1);
            break;
          }
        }
        if(template_default !== ""){
          this.ElineTemplateList.unshift(template_default);
        }
      },


      /**
       * @Description  ：选择业务模板
       * @date         : 2019/03/19 15:59
       */
      selectElineTemplate: function () {
        if (this.currentRow === null) {
          this.InfoTip.warningTip(this, {message: this.$t('EveModelConfigurationManagement.chooseOneTemplate')})
          return;
        } else if (this.currentRow.length > 1) {
          this.$alert('请只选择一条信息进行复制！', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
          return;
        } else {
          this.form.serviceTypeID = this.currentRow.serviceTypeID;
          this.form.protectionMode = this.currentRow.protectionMode;
          this.form.reversion = this.currentRow.reversion;
          this.form.wtr = this.currentRow.wtr;
          this.form.oamInfo = this.currentRow.oamInfo;
          this.form.ccmInterval = this.currentRow.ccmInterval;
          this.form.encapsulationType = this.currentRow.encapsulationType;
          this.form.l2AccessType = this.currentRow.l2AccessType;
          this.form.vlanAccess = this.currentRow.vlanAccess;
          this.form.vlanRangeStart = this.currentRow.vlanRangeStart;
          this.form.vlanRangeEnd = this.currentRow.vlanRangeEnd;
          this.form.vlanSet = this.currentRow.vlanSet;
          this.form.cosId = this.currentRow.cosId;
          this.form.limitedBandwidth = this.currentRow.limitedBandwidth;
          this.form.qosProfile = this.currentRow.qosProfile;
        }
        //传给父组件form值
        this.$emit("update:form", this.form);
        this.close();
      },

      checked:function() {
        this.$refs.multipleTable.setCurrentRow(this.$refs.multipleTable.data[0]);
        this.currentContract = this.$refs.multipleTable.data[0];
        //任务分解
        this.$refs.multiplePlan.setCurrentRow(this.$refs.multiplePlan.data[0]);
        this.currentPlan = this.$refs.multiplePlan.data[0];
      },

      /***
       *  关闭对话框，向父组件通信
       */
      close: function () {
        this.currentRow = null;
        this.$emit("update:innerVisible", false);
      },
    },
  }
</script>

<style scoped>
  /*!* 外层布局容器样式 *!*/
  .el-header {
    background-color: #f9fafc;
    color: #333;
    line-height: 40px;
  }
  /deep/ .el-dialog__body{
    padding-top: 0px !important;
  }
</style>
