<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"
                     v-if="createAndCopyCommand.visible"
                     @click="createIndexTemplateInit">
            {{$t("common.createBtn")}}
          </el-button>
          <el-button size='mini' icon="el-icon-delete" type="danger"
                     v-if="deleteCommand.visible"
                     @click="deleteIndexTemplateInitEL">{{$t("common.deleteBtn")}}
          </el-button>
          <div class="search">
            <div class="search-div">
              <label>{{$t('IndexTemplate.indexTemplateName')}}：</label>
              <el-input size='mini' :placeholder="$t('common.placeholder')"
                        v-model="queryIndexTemplateName"
                        style="width: 180px"
                        clearable>
              </el-input>
            </div>
            <div class="search-div">
              <label>{{$t('IndexTemplate.deviceModel')}}：</label>
              <el-select v-model="queryDeviceModel" size="mini" :placeholder="$t('common.selectOption')" :clearable="true">
                <el-option
                  v-for="item in deviceModelList"
                  :key="item.deviceModelKey"
                  :label="item.deviceModel"
                  :value="item.deviceModel">
                </el-option>
              </el-select>
            </div>
            <div class="search-div">
              <el-button icon="el-icon-search" type="primary" size = 'mini' @click="queryIndexTemplateByCondition">{{$t('common.queryBtn')}}</el-button>
            </div>
          </div>
        </div>
      </el-header>
      <!-- table数据表格 -->
      <el-main class="adapt-height-box">
        <el-table
          :empty-text="$t('common.noData')"
          tooltip-effect="dark"
          ref="singleTable"
          :span-method="cellMerge"
          :data="indexTemplateColl"
          stripe
          header-row-class-name="table-header"
          cell-class-name="table-cell"
          class="adapt-height"
          height="auto"
          border
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="28">
          </el-table-column>
          <el-table-column
            prop="performTemplateName"
            :label="$t('IndexTemplate.indexTemplateName')">
          </el-table-column>
          <el-table-column
            prop="description"
            :label="$t('IndexTemplate.description')">
          </el-table-column>
          <el-table-column
            prop="deviceType"
            :label="$t('IndexTemplate.deviceType')">
          </el-table-column>
          <el-table-column
            prop="deviceModel"
            :label="$t('IndexTemplate.deviceModel')">
          </el-table-column>
          <el-table-column
            prop="performName"
            :label="$t('IndexTemplate.index')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            width="105px"
            v-if="updateCommand.visible"
            :label="$t('common.operation')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                style="background: #175BE3"
                :title="$t('common.copyBtn')"
                @click="handleCopy(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi"></use>
                </svg>
              </el-button>
              <el-button
                size="mini"
                style="background: #008000"
                :title="$t('common.updateBtn')"
                @click="handleUpdate(scope.row)">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
  </div>
</template>

<script>
import CommandExecuteContext from '../../commands/CommandExecuteContext'
import IndexTemplateCommands from '../../commands/IndexTemplateCommands'
import IndexTeplateService from '../../domain/services/IndexTeplateService'
import DeviceService from '@/domain/services/DeviceService'
import HelperUtil from '../../utils/HelperUtil'
import loading from '../../utils/Loading'

export default {
  name: 'IndexTemplate',

  components: {
    CommandExecuteContext
  },
  data: function () {
    return {
      // 命令
      commandContext: {},
      // 为修改传参数
      multipleSelection: [],
      createAndCopyInitList: {},
      deleteList: [],
      copyInitList: {},
      updateInitList: {},

      queryIndexTemplateName: '',
      queryDeviceModel: '',
      selectList: [],
      deviceModelList: [],
      spanArr: [],
      pos: 0,

      IndexTemplateArray: [],

      // 双向绑定展示数据
      indexTemplateList0: [],
      indexTemplateList: [],
      indexTemplateColl: [],
    }
  },

  computed: {
    createAndCopyCommand () {
      return IndexTemplateCommands.createAndCopyCommand(this.createAndCopyTitle, this.createAndCopyInitList, this.commandContext)
    },
    copyCommand () {
      return IndexTemplateCommands.copyCommand(this.copyInitList, this.commandContext)
    },
    deleteCommand () {
      return IndexTemplateCommands.deleteIndexTemplateCommand(this.deleteList, this.commandContext)
    },
    updateCommand () {
      return IndexTemplateCommands.updateIndexTemplateCommand(this.updateInitList, this.commandContext)
    }
  },
  created: function () {
    if (this.$route.query.performTemplateName != null) {
      this.queryIndexTemplateName = this.$route.query.performTemplateName
      this.TurnFromCollectTask(this.$route.query.performTemplateName)
    }
    if (this.$route.query.performTemplateName == null) {
      this.getAllIndexTemplate()
      // this.queryInit()
    }
    this.getAllDeviceModel()
  },
  methods: {
    /**
     * @Description  : 跳转查询
     * @author       : ls
     * @date         : 2020/4/29 14:09
     * @param        :
     * @return       :
     */
    TurnFromCollectTask: function (val) {
      let _this = this
      _this.selectList = []
      _this.selectList.push({
        quaryAttribute: 'performTemplateName',
        compareSymbol: 'like',
        compareValue: val
      })
      IndexTeplateService.queryIndexTemplate(_this.selectList).then(result => {
        _this.indexTemplateList0 = result
        _this.indexTemplateList = Object.values(result)
        if (_this.indexTemplateList.length === 0) {
          this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
        } else {
          this.handleIndexTemplateList()
          this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
        }
      }).catch(err => {
        this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 复制
     * @author       : ls
     * @date         : 2020/5/25 11:53
     * @param        :
     * @return       :
     */
    copyDeviceInit: function (val) {
      this.copyInitList = val
      this.copyCommand.execute()
    },
    /**
     * @Description  : 修改
     * @author       : ls
     * @date         : 2020/5/25 11:54
     * @param        :
     * @return       :
     */
    updateDeviceInit: function (val) {
      this.updateInitList = val
      this.updateCommand.execute()
    },
    /**
     * @Description  : fuzhi
     * @author       : ls
     * @date         : 2020/4/27 10:54
     * @param        :
     * @return       :
     */
    handleCopy: function (row) {
      this.copyInitList = this.indexTemplateList0[row.performTemplateKey]
      this.copyCommand.execute()
    },
    /**
     * @Description  : xiugai
     * @author       : ls
     * @date         : 2020/4/27 10:55
     * @param        :
     * @return       :
     */
    handleUpdate: function (row) {
      this.updateInitList = this.indexTemplateList0[row.performTemplateKey]
      this.updateCommand.execute()
    },
    /**
     * @Description  : 合并判断
     * @author       : ls
     * @date         : 2020/4/27 10:32
     * @param        :
     * @return       :
     */
    cellMerge ({ rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 6) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    /**
     * @Description  : 合并判断
     * @author       : ls
     * @date         : 2020/4/27 10:30
     * @param        :
     * @return       :
     */
    getSpanArr (data) {
      this.spanArr = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          if (data[i].performTemplateKey === data[i - 1].performTemplateKey) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
    /**
     * @Description  : shezhitiaojian
     * @author       : ls
     * @date         : 2020/4/27 10:05
     * @param        :
     * @return       :
     */
    setSelectList: function () {
      this.selectList = []
      if (this.queryDeviceModel !== null && this.queryDeviceModel !== '') {
        this.selectList.push({
          quaryAttribute: 'deviceModel',
          compareSymbol: '=',
          compareValue: this.queryDeviceModel
        })
      }
      if (this.queryIndexTemplateName !== '' && this.queryIndexTemplateName !== null) {
        this.selectList.push({
          quaryAttribute: 'performTemplateName',
          compareSymbol: 'like',
          compareValue: this.queryIndexTemplateName
        })
      }
    },
    /**
     * @Description  : 查询
     * @author       : ls
     * @date         : 2020/6/10 15:50
     * @param        :
     * @return       :
     */
    queryInit: function () {
      this.beginItem = 1
      this.setSelectList()
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      IndexTeplateService.getIndexTemplateTotalCounts(this.selectList).then(result => {
        _this.total = result
        _this.Loading.closeLoading(loadingInstance)
        if (this.total === 0 || this.total < 0) {
          _this.indexTemplateColl = []
        } else {
          if (this.total < 100 && this.total > 0) {
            this.endItem = this.total
          } else {
            this.endItem = 100
          }
          this.queryIndexTemplateDataByConditionCurrentPage()
        }
      }).catch(err => {
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 分页
     * @author       : ls
     * @date         : 2020/6/10 15:58
     * @param        :
     * @return       :
     */
    queryIndexTemplateDataByConditionCurrentPage: function () {
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      IndexTeplateService.queryIndexTemplateListPaging(this.beginItem, this.endItem, this.selectList).then(result => {
        _this.indexTemplateList0 = result
        _this.indexTemplateList = Object.values(result)
        if (_this.indexTemplateList.length === 0) {
          _this.Loading.closeLoading(loadingInstance)
        } else {
          this.handleIndexTemplateList()
          _this.Loading.closeLoading(loadingInstance)
        }
      }).catch(err => {
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 条件查询
     * @author       : ls
     * @date         : 2020/6/10 16:22
     * @param        :
     * @return       :
     */
    queryIndexTemplateByCondition1: function () {
      this.beginItem = 1
      this.setSelectList()
      this.IndexTemplateDataTotalNumber()
    },
    /**
     * @Description  :
     * @author       : ls
     * @date         : 2020/6/10 16:26
     * @param        :
     * @return       :
     */
    IndexTemplateDataTotalNumber: function () {
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      IndexTeplateService.getIndexTemplateTotalCounts(_this.selectList).then(result => {
        _this.total = result
        _this.Loading.closeLoading(loadingInstance)
        if (_this.total === 0 || _this.total < 0) {
          _this.InfoTip.warningTip_alarm(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
          _this.indexTemplateColl = []
        } else {
          if (_this.total < 100 && _this.total > 0) {
            _this.endItem = _this.total
          } else {
            _this.endItem = 100
          }
          _this.InfoTip.successTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
          _this.queryIndexTemplateDataByConditionCurrentPage()
        }
      }).catch(err => {
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : chaxun
     * @author       : ls
     * @date         : 2020/4/27 10:04
     * @param        :
     * @return       :
     */
    queryIndexTemplateByCondition: function () {
      let _this = this
      _this.setSelectList()
      let loadingInstance = _this.Loading.openLoading()
      IndexTeplateService.queryIndexTemplate(_this.selectList).then(result => {
        _this.indexTemplateList0 = result
        _this.indexTemplateList = Object.values(result)
        if (_this.indexTemplateList.length === 0) {
          _this.Loading.closeLoading(loadingInstance)
          this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
        } else {
          this.handleIndexTemplateList()
          _this.Loading.closeLoading(loadingInstance)
          this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
        }
      }).catch(err => {
        this.Loading.closeLoading(loadingInstance)
        this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取网元型号
     * @author       : ls
     * @date         : 2020/4/27 9:57
     * @param        :
     * @return       :
     */
    getAllDeviceModel: function () {
      let _this = this
      DeviceService.getAllDeviceModelCollection().then(result => {
        _this.deviceModelList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : huoqusuoyou
     * @author       : ls
     * @date         : 2020/4/27 9:36
     * @param        :
     * @return       :
     */
    getAllIndexTemplate: function () {
      let _this = this
      let loadingInstance = loading.openLoading()
      IndexTeplateService.getAllIndexTemplateCollection().then(result => {
        if (JSON.stringify(result) === '{}') {
          this.indexTemplateColl = []
          loadingInstance.close()
        } else {
          _this.indexTemplateList0 = result
          _this.indexTemplateList = Object.values(result)
          if (_this.indexTemplateList.length === 0) {
            // this.InfoTip.warningTip(_this, HelperUtil.getCheckStatusCodeObjectByCode(_this.successCode.QUERY_NULL_CODE))
            loadingInstance.close()
          } else {
            this.handleIndexTemplateList()
            // this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.QUERY_CODE))
            loadingInstance.close()
          }
        }
      }).catch(err => {
        this.InfoTip.errorTip(this, err)
        loadingInstance.close()
      })
    },
    /**
     * @Description  : 处理数据
     * @author       : ls
     * @date         : 2020/5/28 12:57
     * @param        :
     * @return       :
     */
    handleIndexTemplateList: function () {
      this.indexTemplateColl = []
      for (let t in this.indexTemplateList) {
        for (let k in this.indexTemplateList[t].unitList) {
          this.indexTemplateColl.push(
            {
              performTemplateKey: this.indexTemplateList[t].performTemplateKey,
              performTemplateName: this.indexTemplateList[t].performTemplateName,
              description: this.indexTemplateList[t].description,
              deviceModel: this.indexTemplateList[t].unitList[k].deviceModel,
              deviceTypeKey: this.indexTemplateList[t].unitList[k].deviceTypeKey,
              deviceType: this.indexTemplateList[t].unitList[k].deviceType,
              deviceParam: this.indexTemplateList[t].unitList[k].deviceParam,
              performName: this.indexTemplateList[t].unitList[k].performName,
              performTemplateUnitID: this.indexTemplateList[t].unitList[k].performTemplateUnitID
            }
          )
        }
      }
      this.getSpanArr(this.indexTemplateColl)
    },
    /**
     * @Description  : chuanjian
     * @author       : ls
     * @date         : 2020/4/26 15:01
     * @param        :
     * @return       :
     */
    createIndexTemplateInit () {
      this.createAndCopyTitle = this.$t('IndexTemplateCommands.createIndexTemplate')
      this.createAndCopyCommand.execute()
    },
    deleteIndexTemplateInitEL () {
      if (this.multipleSelection.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.DELETE_SELECT_CODE))
      } else {
        this.deleteList = []
        for (var i = 0; i < this.multipleSelection.length; i++) {
          this.deleteList.push(this.multipleSelection[i].performTemplateKey)
        }
        this.deleteCommand.execute()
      }
    },
    /* ---------------------------Table选择--------------------------- */

    /**
     * @Description  : fuzhi
     * @author       : ls
     * @date         : 2020/4/29 18:12
     * @param        :
     * @return       :
     */
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  },

  watch: {
    '$route' (to) {
      if (to.name === '指标模板管理' && to.query.performTemplateName !== undefined) {
        this.queryIndexTemplateName = to.query.performTemplateName
        this.TurnFromCollectTask(to.query.performTemplateName)
      }
    },
    commandContext (newVal, oldVal) {
      if (JSON.stringify(newVal) === '{}') {
        this.getAllIndexTemplate()
        // this.queryInit()
        this.queryIndexTemplateName = ''
        this.queryDeviceModel = ''
      }
      deep: true
    }
  }
}
</script>

<style scoped>
  table{
    width: 100%;
    border:1px solid #e9eaec;
    border-collapse:collapse
  }
  th{
    background:#eef1f6;
    color:#606266
  }
  th,td{
    border: 1px solid #e9eaec;
    text-align: left;
    padding-left: 10px;
    vertical-align: center;
    line-height: 31px;
  }
  /*tr:hover{*/
  /*  background-color: #409EFF;*/
  /*}*/
</style>
