<template>
    <!--<el-scrollbar style="height: 100%">-->
    <el-dialog
      @close="close"
      v-dialogDrag
      @open="openTemplate"
      :title="$t('CollectTask.chooseDevice')"
      width='900px'
      :visible.sync="innerVisible">
      <el-container class="h-all">
        <el-header height="auto">
          <div class="search">
            <label>{{$t('CollectTask.subnet')}}：</label>
            <el-select clearable
                       disabled
                       size="mini"
                       v-model="subnet"
                       :placeholder="$t('common.pleaseSelect')">
              <el-option v-for="item1 in subnetList"
                         :key="item1.subnetKey"
                         :label="item1.subnetName"
                         :value="item1.subnetKey">
              </el-option>
            </el-select>
            <label>{{$t('DeviceConfigurationManagement.nodeType')}}：</label>
            <el-select disabled
                       size="mini"
                       multiple
                       collapse-tags
                       v-model="deviceType"
                       :placeholder="$t('common.pleaseSelect')">
              <el-option v-for="item in deviceTypeList"
                         :key="item.deviceTypeKey"
                         :label="item.deviceTypeName"
                         :value="item.deviceTypeKey"></el-option>
            </el-select>
            <label>{{$t('DeviceConfigurationManagement.nodeModel')}}：</label>
            <el-select clearable
                       disabled
                       multiple
                       collapse-tags
                       size="mini"
                       v-model="deviceModel"
                       :placeholder="$t('common.pleaseSelect')">
              <el-option v-for="item in deviceModelList"
                         :key="item.deviceModelKey"
                         :label="item.deviceModel"
                         :value="item.deviceModel">
              </el-option>
            </el-select>
          </div>
        </el-header>
        <el-main>
          <el-table
            :empty-text="$t('common.noData')"
            border
            header-row-class-name="table-header"
            cell-class-name="table-cell"
            class="adapt-height"
            height="300px"
            ref="singleTable"
            :data="deviceList"
            highlight-current-row
            stripe
            @selection-change="handleSelectionChange"
            tooltip-effect="dark">
            <el-table-column
              type="selection"
              width="28">
            </el-table-column>
            <!--:selectable='checkboxForMain'-->
            <el-table-column
              prop="subnetName"
              :label="$t('DeviceConfigurationManagement.subnetKey')">
            </el-table-column>
            <el-table-column
              prop="deviceTypeName"
              :label="$t('DeviceConfigurationManagement.nodeType')">
            </el-table-column>
            <el-table-column
              prop="deviceModel"
              :label="$t('DeviceConfigurationManagement.nodeModel')">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="displayName"
              :label="$t('DeviceConfigurationManagement.nodeName')">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
      <el-row style="margin-bottom: 0px;" slot="footer" class="dialog-footer">
        <el-button icon="el-icon-circle-check" type="primary" size="mini" @click="ok">{{$t("common.ok")}}</el-button>
      </el-row>
    </el-dialog>
</template>

<script>

import DeviceService from "../../../domain/services/DeviceService";
import SubnetService from "../../../domain/services/SubnetService";
import HelperUtil from "../../../utils/HelperUtil";
import loading from "../../../utils/Loading";
import IndexTeplateService from "../../../domain/services/IndexTeplateService";

export default {
  name: 'ChooseDeviceDialog',
  props: {
    innerVisible: false,
    passSubnet: {},
    indexTemplate: '',
    deviceNameList: ''
  },
  data: function () {
    return {
      subnet: '',
      indexTem: {},
      deviceType: [],
      deviceModel: [],
      deviceList: [],
      subnetList: [],
      deviceTypeList: [],
      deviceModelList: [],
      indexTemplateList: [],
      selectList: [],
      multipleSelection: [],
      commandContext: {}
    }
  },
  methods: {
    /**
     * @Description  : open
     * @author       : ls
     * @date         : 2020/4/28 19:50
     * @param        :
     * @return       :
     */
    openTemplate: function () {
      this.indexTem = this.indexTemplateList[this.indexTemplate]
      var arr = []
      var arr1 = []
      for (let i = 0; i < this.indexTem.unitList.length; i++) {
        arr.push(this.indexTem.unitList[i].deviceTypeKey)
        arr1.push(this.indexTem.unitList[i].deviceModel)
      }
      this.deviceType = Array.from(new Set(arr))
      this.deviceModel = Array.from(new Set(arr1))
      // this.deviceType = this.indexTem.unitList[0].deviceTypeKey
      // this.deviceModel = this.indexTem.unitList[0].deviceModel
      this.deviceList = []
      this.subnet = this.passSubnet.subnetKey
      this.queryDeviceByCondition()
    },
    /**
     * @Description  : 确认
     * @author       : ls
     * @date         : 2020/5/26 13:21
     * @param        :
     * @return       :
     */
    ok: function () {
      if (this.multipleSelection.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.PLEASE_SELECT_AT_LEASE_ONE_DEVICE))
      } else {
        var deviceNameList1 = []
        for (var i = 0; i < this.multipleSelection.length; i++) {
          deviceNameList1.push(this.multipleSelection[i].displayName)
        }
        this.deviceNameList = deviceNameList1.join()
      }
      this.close()
    },
    handleSelectionChange: function (val) {
      this.multipleSelection = val
    },
    /**
     * @Description  : chaxun
     * @author       : ls
     * @date         : 2020/4/28 16:22
     * @param        :
     * @return       :
     */
    queryDeviceByCondition: function () {
      let _this = this
      _this.setSelectList()
      console.log(this.passSubnet)
      let loadingInstance = _this.Loading.openLoading()
      DeviceService.queryDevice(_this.selectList).then(result => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 成功
        _this.deviceList = Object.values(result)
        if (_this.deviceList.length === 0) {
          _this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
        } else {
          _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
        }
      }).catch(err => {
        // 关闭loading
        _this.Loading.closeLoading(loadingInstance)
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 设置条件
     * @author       : ls
     * @date         : 2020/4/28 16:20
     * @param        :
     * @return       :
     */
    setSelectList: function () {
      this.selectList = []
      if (this.deviceType.length !== 0) {
        this.selectList.push({
          quaryAttribute: 'deviceTypeKey',
          compareSymbol: 'in',
          compareValue: this.deviceType.join(',')
        })
      }
      if (this.deviceModel.length !== 0) {
        this.selectList.push({
          quaryAttribute: 'deviceModel',
          compareSymbol: 'in',
          compareValue: this.deviceModel.join(',')
        })
      }
      if (this.subnet !== '' && this.subnet !== null) {
        this.selectList.push({
          quaryAttribute: 'subnetKey',
          compareSymbol: '=',
          compareValue: this.subnet
        })
      }
    },
    /**
     * @Description  : 获取网元类型
     * @author       : ls
     * @date         : 2020/4/28 16:13
     * @param        :
     * @return       :
     */
    getAllDeviceType: function () {
      let _this = this
      DeviceService.getAllDeviceTypeCollection().then(result => {
        _this.deviceTypeList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取网元型号
     * @author       : ls
     * @date         : 2020/4/28 16:14
     * @param        :
     * @return       :
     */
    getAllDeviceModel: function () {
      let _this = this
      DeviceService.getAllDeviceModelCollection().then(result => {
        _this.deviceModelList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取子网
     * @author       : ls
     * @date         : 2020/4/28 16:15
     * @param        :
     * @return       :
     */
    getAllSubnet: function () {
      let _this = this
      SubnetService.getAllSubnetCollection().then(result => {
        // 成功
        _this.subnetList = Object.values(result)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取指标模板
     * @author       : ls
     * @date         : 2020/5/26 12:43
     * @param        :
     * @return       :
     */
    getAllIndexTemplate: function () {
      let _this = this
      let loadingInstance = loading.openLoading()
      IndexTeplateService.getAllIndexTemplateCollection().then(result => {
        _this.indexTemplateList = result
        loadingInstance.close()
      }).catch(err => {
        this.InfoTip.errorTip(this, err)
        loadingInstance.close()
      })
    },
    /**
     * @Description  : 过滤显示
     * @author       : ls
     * @date         : 2020/4/28 16:40
     * @param        :
     * @return       :
     */
    formatSubnetKey: function (row, column) {
      for (var i = 0; i < this.subnetList.length; i++) {
        if (this.subnetList[i]['subnetKey'] === row.subnetKey) {
          return this.subnetList[i]['subnetName']
        }
      }
    },
    /**
     * @Description  : 关闭
     * @author       : ls
     * @date         : 2020/4/28 18:32
     * @param        :
     * @return       :
     */
    close: function () {
      this.$emit('update:innerVisible', false)
      this.$emit('update:deviceNameList', this.deviceNameList)
      this.subnet = ''
      this.deviceType = ''
      this.deviceModel = ''
    }
  },
  created: function () {
    this.getAllDeviceType()
    this.getAllDeviceModel()
    this.getAllSubnet()
    this.getAllIndexTemplate()
  },
  mounted () {
    this.innerVisible = true
  }
}
</script>

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

  #box{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  .el-card__header {
    background-color: greenyellow;
  }

  /* .el-input {
     width: 330px;
   }*/

  /deep/ .el-textarea__inner{
    font-size: 12px;
  }
</style>
