<template>
  <el-dialog
    style="font-size: 10px;" width='1000px'
    :title="this.$t('IndexTemplateCommands.copyIndexTemplate')"
    :visible.sync="dialog_locationCreate"
    @close="close"
    v-dialogDrag>
    <el-form :model="form" inline="true" ref="form">
      <el-row>
        <el-form-item style="margin-bottom: 0px;float:left">
          <el-form-item
            :label="'*'+ $t('IndexTemplate.indexTemplateName')+':'"
            :label-width="formLabelWidth"
            prop="string">
            <el-input :placeholder="$t('common.placeholder')"
                      size="mini"
                      v-model="form.templateName"
                      autocomplete="off"
                      v-on:blur="templateCheck"
                      style="width:200px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;float:left;margin-bottom: 10px">
          <el-form-item :label="$t('DeviceConfigurationManagement.nodeDesc')+':'" :label-width="formLabelWidth">
            <el-input type="textarea" :rows="3" size="mini" :placeholder="$t('common.placeholder')" v-model="form.templateDesc"
                      autocomplete="off" style="width: 745px; margin-top: 0px;"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: 0px; float:left;margin-left: 20px" prop="deviceTypeKey1,deviceModel1,index1">
          <el-form-item :label="'*'+ $t('DeviceConfigurationManagement.nodeType')+':'"
                        label-width="100px"
                        prop="string">
            <el-select size="mini"
                       v-model="form.deviceTypeKey"
                       :placeholder="$t('common.pleaseSelect')"
                       @change="deviceTypeChange"
                       style="width:155px">
              <el-option v-for="item in deviceTypeList" :key="item.deviceTypeKey" :label="item.deviceTypeName"
                         :value="item.deviceTypeKey"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="'*'+ $t('DeviceConfigurationManagement.nodeModel')+':'"
                        label-width="100px"
                        prop="string">
            <el-select
              size="mini"
              v-model="form.deviceModel"
              :placeholder="$t('common.pleaseSelect')"
              v-on:change="deviceModelCheck(form.deviceModel)"
              style="width:180px">
              <el-option v-for="item in deviceModelList1" :key="item.deviceModelKey" :label="item.deviceModel"
                         :value="item.deviceModel"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('IndexTemplate.index')+':'"
                        prop="string" label-width="100px">
            <el-select
              multiple
              collapse-tags
              clearable
              size="mini"
              v-model="form.event"
              v-on:change="eventCheck(form.event)"
              :placeholder="$t('common.pleaseSelect')">
              <el-option
                v-for="item in performTypeList"
                :key="item.deviceParam"
                :label="item.peformTypeName"
                :value="item.deviceParam">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button icon="el-icon-circle-plus-outline"  style="margin-left: -10px" type="primary" size = 'mini' @click="addItem" >{{ $t("common.add")}}</el-button>
        </el-form-item>
        <div v-for="(item1, index) in form.dynamicItem" :key="index">
          <el-form-item style="margin-bottom: 0px; float:left;margin-left: 20px">
            <el-form-item :label="'*'+ $t('DeviceConfigurationManagement.nodeType')+':'"
                          label-width="100px"
                          prop="string">
              <el-select size="mini"
                         v-model="item1.deviceTypeKey"
                         :placeholder="$t('common.pleaseSelect')"
                         v-on:change="item1.handleDeviceTypeCheck(deviceModelList, item1.deviceTypeKey, item1.deviceModel)"
                         style="width:155px">
                <el-option v-for="item in item1.deviceTypeList"
                           :key="item.deviceTypeKey"
                           :label="item.deviceTypeName"
                           :value="item.deviceTypeKey">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="'*'+ $t('DeviceConfigurationManagement.nodeModel')+':'"
                          label-width="100px"
                          prop="string">
              <el-select clearable
                         size="mini"
                         v-model="item1.deviceModel"
                         :placeholder="$t('common.pleaseSelect')"
                         v-on:change="deviceModelCheck(item1.deviceModel)"
                         style="width:180px;">
                <el-option v-for="item in item1.deviceModelList" :key="item.deviceModelKey" :label="item.deviceModel"
                           :value="item.deviceModel"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('IndexTemplate.index')+':'"
                          prop="string" label-width="100px">
              <el-select multiple
                         collapse-tags
                         clearable
                         size="mini"
                         v-model="item1.event"
                         v-on:change="eventCheck(item1.event)"
                         :placeholder="$t('common.pleaseSelect')">
                <el-option
                  v-for="item in performTypeList"
                  :key="item.deviceParam"
                  :label="item.peformTypeName"
                  :value="item.deviceParam">
                </el-option>
              </el-select>
            </el-form-item>
            <el-button icon="el-icon-delete" style="margin-left: -10px" type="danger" size = 'mini' @click="deleteItem(index)" >{{ $t("common.delete")}}</el-button>
          </el-form-item>
        </div>
      </el-row>
      <el-form-item style="margin-top:10px;margin-bottom: -10px;margin-left: 10px;margin-bottom: 10px">
        <el-button icon="el-icon-circle-check" type="primary" size="mini" @click="onSubmit">{{$t("common.ok")}}</el-button>
        <el-button icon='el-icon-circle-close' size="mini" @click="close">{{$t("common.cancel")}}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script>
import DeviceService from '@/domain/services/DeviceService'
import IndexTeplateService from '@/domain/services/IndexTeplateService'
import legitimacyCheck from '../../../utils/legitimacyCheck'
import HelperUtil from '@/utils/HelperUtil'
import PerformanceStatisticService from '../../../domain/services/PerformanceStatisticService'

export default {
  name: 'CopyIndexTemplateDialog',
  props: ['command'],
  data: function () {
    return {
      fullscreenLoading: false,
      dialog_locationCreate: true,
      initList: this.command.target,
      deviceTypeSelect: [],
      deviceModelSelect: [],
      deviceParamSelect: [],
      selectIndexTemplate: [],
      unitList: [],
      form: {
        templateName: '',
        templateDesc: '',
        deviceModel: '',
        deviceTypeKey: '',
        event: '',
        dynamicItem: []
      },
      formLabelWidth: '120px',
      deviceTypeList: [],
      deviceModelList: [],
      deviceModelList1: [],
      performTypeList: [],
      check: null
    }
  },
  created: function () {
    this.check = legitimacyCheck()
    this.getAllDeviceType()
    this.getPerformType()
  },
  methods: {
    /**
     * @Description  : deviceTypeChange
     * @author       : ls
     * @date         : 2020/11/16 10:44
     * @param        :
     * @return       :
     */
    deviceTypeChange: function () {
      var a = []
      if (this.form.deviceTypeKey !== '') {
        a = HelperUtil.deviceTypeChange(this.deviceModelList, this.form.deviceTypeKey, this.form.deviceModel)
        this.form.deviceModel = a[1]
      } else {
        a[0] = this.deviceModelList
      }
      this.deviceModelList1 = a[0]
    },
    /**
       * @Description  : fuzhi
       * @author       : ls
       * @date         : 2020/4/29 17:25
       * @param        :
       * @return       :
       */
    openInit: function () {
      this.form.templateName = this.initList.performTemplateName
      this.form.templateDesc = this.initList.description
      this.form.deviceTypeKey = this.initList.unitList[0].deviceTypeKey
      this.form.deviceModel = this.initList.unitList[0].deviceModel
      this.form.event = this.initList.unitList[0].deviceParam.split(',')

      if (this.initList.unitList.length !== 1) {
        for (var j = 0; j < this.initList.unitList.length - 1; j++) {
          this.form.dynamicItem.push({
            deviceTypeKey: '',
            deviceModel: '',
            event: '',
            deviceTypeList: this.deviceTypeList,
            deviceModelList: this.deviceModelList,
            handleDeviceTypeCheck: function (val, val1, val2) {
              var a = []
              this.deviceModel = ''
              if (val1.length !== 0) {
                a = HelperUtil.deviceTypeChange(val, val1, val2)
              } else {
                a[0] = val
              }
              this.deviceModelList = a[0]
            }
          })
        }
        for (var i = 1; i < this.initList.unitList.length; i++) {
          this.form.dynamicItem[i - 1].deviceTypeKey = this.initList.unitList[i].deviceTypeKey
          this.form.dynamicItem[i - 1].deviceModel = this.initList.unitList[i].deviceModel
          this.form.dynamicItem[i - 1].event = this.initList.unitList[i].deviceParam.split(',')
        }
      }
    },
    /**
       * @Description  : 提交
       * @author       : ls
       * @date         : 2020/4/29 17:27
       * @param        :
       * @return       :
       */
    onSubmit: function () {
      if (!this.totalCheck()) {
        return
      }
      this.selectIndexTemplate = []
      this.unitList = []
      this.unitList.push(
        {
          'deviceTypeKey': this.form.deviceTypeKey,
          'deviceModel': this.form.deviceModel,
          'deviceParam': this.form.event.join()
        }
      )
      if (this.form.dynamicItem.length !== 0) {
        for (let t in this.form.dynamicItem) {
          var indexTemplateInit = {}
          indexTemplateInit.deviceTypeKey = this.form.dynamicItem[t].deviceTypeKey
          indexTemplateInit.deviceModel = this.form.dynamicItem[t].deviceModel
          indexTemplateInit.deviceParam = this.form.dynamicItem[t].event.join()
          this.unitList.push(indexTemplateInit)
        }
      }
      for (let i = 0; i < this.unitList.length - 1; i++) {
        for (let j = i + 1; j < this.unitList.length; j++) {
          // if (this.unitList[i].deviceTypeKey === this.unitList[j].deviceTypeKey ||
          //   this.unitList[i].deviceModel === this.unitList[j].deviceModel) {
          //   this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.INDEX_TEMPLATE))
          //   return
          // }
          if (this.unitList[i].deviceTypeKey.concat(this.unitList[i].deviceModel) ===
            this.unitList[j].deviceTypeKey.concat(this.unitList[j].deviceModel)) {
            this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.INDEX_TEMPLATE))
            return
          }
        }
      }
      this.selectIndexTemplate.push(
        {
          'performTemplateName': this.form.templateName,
          'description': this.form.templateDesc,
          'unitList': this.unitList
        }
      )
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      IndexTeplateService.createIndexTemplate(this.selectIndexTemplate).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)
      })
    },
    totalCheck: function () {
      if (!this.templateCheck(this.form.templateName)) {
        return false
      }
      if (!this.deviceTypeCheck(this.form.deviceTypeKey)) {
        return false
      }
      if (!this.deviceModelCheck(this.form.deviceModel)) {
        return false
      }
      if (!this.eventCheck(this.form.event)) {
        return false
      }
      for (let i in this.form.dynamicItem) {
        if (!this.deviceTypeCheck(this.form.dynamicItem[i].deviceTypeKey)) {
          return false
        }
        if (!this.deviceModelCheck(this.form.dynamicItem[i].deviceModel)) {
          return false
        }
        if (!this.eventCheck(this.form.dynamicItem[i].event)) {
          return false
        }
      }
      return true
    },
    /**
       * @Description  : 模板名称校验
       * @author       : ls
       * @date         : 2020/4/26 17:47
       * @param        :
       * @return       :
       */
    templateCheck: function () {
      if (!this.check.textNullCheck(this.form.templateName)) {
        // 输入不可为空
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('IndexTemplate.indexTemplateName'))
        return false
      }
      if (!this.check.textLengthCheck(this.form.templateName)) return false
      return true
    },
    /**
       * @Description  : 网元类型校验
       * @author       : ls
       * @date         : 2020/4/26 18:04
       * @param        :
       * @return       :
       */
    deviceTypeCheck: function (val) {
      var result = this.check.textNullCheck(val)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.nodeType'))
        return false
      }
      return true
    },
    /**
       * @Description  : 网元型号校验
       * @author       : ls
       * @date         : 2020/4/26 18:12
       * @param        :
       * @return       :
       */
    deviceModelCheck: function (val) {
      var result = this.check.textNullCheck(val)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.nodeModel'))
        return false
      }
      return true
    },
    eventCheck: function (val) {
      var result = this.check.textNullCheck(val)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('IndexTemplate.index'))
        return false
      }
      return true
    },
    /**
       * @Description  : xunhuanzengjia
       * @author       : ls
       * @date         : 2020/4/26 16:22
       * @param        :
       * @return       :
       */
    addItem: function () {
      this.form.dynamicItem.push({
        deviceTypeKey: '',
        deviceModel: '',
        event: '',
        deviceTypeList: this.deviceTypeList,
        deviceModelList: this.deviceModelList,
        handleDeviceTypeCheck: function (val, val1, val2) {
          var a = []
          this.deviceModel = ''
          if (val1.length !== 0) {
            a = HelperUtil.deviceTypeChange(val, val1, val2)
          } else {
            a[0] = val
          }
          this.deviceModelList = a[0]
        }
      })
    },
    /**
     * @Description  : 删除
     * @author       : ls
     * @date         : 2020/9/10 12:10
     * @param        :
     * @return       :
     */
    deleteSelf: function (val) {
      console.log(val)
    },
    /**
       * @Description  : shanchu
       * @author       : ls
       * @date         : 2020/4/26 16:27
       * @param        :
       * @return       :
       */
    deleteItem: function (val) {
      this.form.dynamicItem.splice(val, 1)
    },
    /**
       * @Description  :关闭
       * @author       : ls
       * @date         : 2020/4/29 17:47
       * @param        :
       * @return       :
       */
    close () {
      this.command.done()
    },
    /**
       * @Description  : 获取类型
       * @author       : ls
       * @date         : 2020/4/26 16:45
       * @param        :
       * @return       :
       */
    getAllDeviceType: function () {
      let _this = this
      DeviceService.getAllDeviceTypeCollection().then(result => {
        _this.deviceTypeList = Object.values(result)
        this.getAllDeviceModel()
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
       * @Description  : 获取型号
       * @author       : ls
       * @date         : 2020/4/26 18:31
       * @param        :
       * @return       :
       */
    getAllDeviceModel: function () {
      let _this = this
      DeviceService.getAllDeviceModelCollection().then(result => {
        _this.deviceModelList = Object.values(result)
        this.deviceTypeChange()
        this.form.deviceModel = this.initList.unitList[0].deviceModel
        this.openInit()
        this.change()
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : change
     * @author       : ls
     * @date         : 2020/12/22 11:01
     * @param        :
     * @return       :
     */
    change: function () {
      if (this.initList.unitList.length !== 1) {
        for (var t = 1; t < this.initList.unitList.length; t++) {
          this.form.dynamicItem[t - 1].handleDeviceTypeCheck(this.deviceModelList, this.initList.unitList[t].deviceTypeKey, this.initList.unitList[t].deviceModel)
          this.form.dynamicItem[t - 1].deviceTypeKey = this.initList.unitList[t].deviceTypeKey
          this.form.dynamicItem[t - 1].deviceModel = this.initList.unitList[t].deviceModel
        }
      }
    },
    /**
       * @Description  : 获取性能指标
       * @author       : ls
       * @date         : 2020/5/22 15:52
       * @param        :
       * @return       :
       */
    getPerformType: function () {
      let _this = this
      PerformanceStatisticService.getPerformTypeService().then(result => {
        _this.performTypeList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    }
  },
  mounted () {
    this.dialog_locationCreate = true
  }
}
</script>
