<template>
  <div id="main" class="h-all">
    <!--<el-scrollbar style="height: 100%">-->
    <el-dialog
      @close="close"
      @opened="openTemplateInit"
      v-dialogDrag
      :title=title
      style="font-size: 10px;"
      width='750px'
      :visible.sync="createElementDiscoveryVisible">
      <el-row>
        <el-form :model="form" inline="true" ref="form" style="width: 1600px">
          <el-row>
            <el-form-item style="margin-bottom: -10px; float:left;">
              <el-form-item :label="$t('ResourceManagement.templateName')+':'"
                            prop="string" :label-width="formLabelWidth">
                <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.templateName"
                          autocomplete="off"
                          v-on:blur="templateNameCheck">
                </el-input>
              </el-form-item>
              <el-form-item :label="$t('ResourceManagement.subnet')+':'"
                            prop="string" :label-width="formLabelWidth">
                <el-select size='mini' clearable v-model="form.subnet" v-on:change="subnetCheck" :placeholder="$t('ResourceManagement.selectSubnet')">
                  <el-option v-for="item in deviceTypeList"
                             :key="item.deviceTypeKey"
                             :label="item.deviceTypeKey"
                             :value="item.deviceTypeKey">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="margin-bottom: -10px; float:left;">
              <el-form-item :label="$t('ResourceManagement.protocolName')+':'" prop="radio" :label-width="formLabelWidth">
                <template>
                  <el-radio-group v-model="form.radio" @change="disableOrNot">
                    <el-radio :label=0 border size="mini" style="width: 100px">{{$t("ResourceManagement.SNMPProtocol")}}</el-radio>
                    <el-radio :label=1 border size="mini" style="width: 100px">{{$t("ResourceManagement.IPMIProtocol")}}</el-radio>
                  </el-radio-group>
                </template>
              </el-form-item>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="margin-bottom: -10px; float:left;margin-left: 15px">
              <el-form-item :label="$t('ResourceManagement.SNMPProtocolVersion')+':'"
                            prop="string" label-width="100px">
                <el-select style="height: 11px;width: 120px;margin-left: 5px;" :disabled="!flag" size='mini' clearable v-model="form.snmpProtocolVersion" v-on:change="SNMPVersionCheck" :placeholder="$t('ResourceManagement.selectSnmpVersion')">
                  <el-option v-for="item in snmpList"
                             :key="item.key"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('ResourceManagement.GETPortName')+':'"
                            prop="string" label-width="100px">
                <el-input size='mini' style="width: 90px" :placeholder="$t('common.placeholder')" v-model="form.getPortName"
                          autocomplete="off"
                          :disabled="!flag"
                          v-on:blur="GETPortNameCheck">
                </el-input>
              </el-form-item>
              <el-form-item :label="$t('ResourceManagement.SNMPGroupName')+':'"
                            prop="string" label-width="100px" style="margin-left: -10px;">
                <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.snmpGroupName"
                          autocomplete="off"
                          :disabled="!flag"
                          v-on:blur="snmpGroupNameCheck">
                </el-input>
              </el-form-item>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="margin-bottom: -10px; float:left;">
              <el-form-item :label="$t('ResourceManagement.IPMIUserName')+':'"
                            prop="string" :label-width="formLabelWidth">
                <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.ipmiUserName"
                          autocomplete="off"
                          :disabled="flag"
                          v-on:blur="IpmiUserNameCheck">
                </el-input>
              </el-form-item>
              <el-form-item :label="$t('ResourceManagement.IPMIPassword')+':'"
                            prop="string" :label-width="formLabelWidth">
                <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.impiPassword"
                          :disabled="flag"
                          autocomplete="off"
                          v-on:blur="IpmiPasswordCheck">
                </el-input>
              </el-form-item>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item style="margin-bottom: -10px; float:left;margin-left: 58px" :label="$t('DeviceConfigurationManagement.ipInterval')+':'" prop="inputIpAddress,stationList">
              <el-form-item>
                <el-input v-on:blur="ipCheckSelf(form.input1)" size = 'mini' :placeholder="$t('common.placeholder')" v-model="form.input1" clearable style="width: 140px"></el-input>
                <label>-</label>
                <el-input v-on:blur="ipCheckSelf(form.input2)" size = 'mini' :placeholder="$t('common.placeholder')"  v-model="form.input2" clearable style="width: 140px"></el-input>
              </el-form-item>
              <el-form-item :label="$t('ResourceManagement.station')+':'"
                            prop="string" label-width="100px" style="margin-left: -20px">
                <el-select size='mini' style="width: 120px" value-key="deviceTypeKey" clearable v-model="form.station1" v-on:change="stationCheck(form.station1)" :placeholder="$t('ResourceManagement.station')">
                  <el-option v-for="item in deviceTypeList"
                             :key="item.deviceTypeKey"
                             :label="item.deviceTypeKey"
                             :value="item.deviceTypeKey">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button icon="el-icon-circle-plus-outline"  style="margin-left: -10px" type="primary" size = 'mini' @click="addItemIp" >{{ $t("common.add")}}</el-button>
            </el-form-item>
          </el-row>
          <el-row>
            <div v-for="(item, index) in form.dynamicItem" :key="index">
              <el-row>
                <el-form-item style="margin-bottom: -10px; float:left;margin-left: 58px" :label="$t('DeviceConfigurationManagement.ipInterval')+':'">
                  <el-form-item :prop="'dynamicItem.' + index + '.inputIpAddress'">
                    <el-input v-on:blur="ipCheckSelf(item.input1)" size = 'mini' :placeholder="$t('common.placeholder')" v-model="item.input1" clearable style="width: 140px"></el-input>
                    <label>-</label>
                    <el-input v-on:blur="ipCheckSelf(item.input2)" size = 'mini' :placeholder="$t('common.placeholder')"  v-model="item.input2" clearable style="width: 140px"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('ResourceManagement.station')+':'"
                                prop="string" label-width="100px" style="margin-left: -20px">
                    <el-select size='mini' style="width: 120px" clearable v-model="item.value" :placeholder="$t('ResourceManagement.station')" v-on:change="stationCheck(item.value)">
                      <el-option v-for="item1 in item.stationList"
                                 :key="item1.label"
                                 :label="item1.value"
                                 :value="item1.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-button icon="el-icon-delete" style="margin-left: -10px" type="danger" size = 'mini' @click="deleteItemIp" >{{ $t("common.delete")}}</el-button>
                </el-form-item>
              </el-row>
            </div>
          </el-row>
          <el-form-item style="margin-top:10px;margin-bottom: -10px;margin-left: -900px;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-row>
    </el-dialog>
  </div>
</template>

<script>
import EdTemplateService from '@/domain/services/Template/EdTemplateService'
import LocationService from '../../../domain/services/LocationService'
import SubnetService from '../../../domain/services/SubnetService'
import HelperUtil from '../../../utils/HelperUtil'
import legitimacyCheck from '../../../utils/legitimacyCheck'

export default {
  name: 'CreateElementDiscovery',
  props: ['command'],
  data: function () {
    return {
      createElementDiscoveryVisible: false,
      title: this.command.title,
      initList: this.command.target,
      check: null,
      flag: true,
      form: {
        templateName: '',
        subnet: '',
        radio: '',
        station1: '',
        snmpProtocolVersion: '',
        getPortName: '',
        snmpGroupName: '',
        ipmiUserName: '',
        impiPassword: '',
        input1: '',
        input2: '',
        dynamicItem: []
      },
      snmpList: [
        {
          key: '0',
          label: 'v1'
        },
        {
          key: '1',
          label: 'v2c'
        },
        {
          key: '2',
          label: 'v3'
        }
      ],
      commandContext: {},
      tableHeight: window.innerHeight * 0.7,
      formLabelWidth: '120px'
    }
  },
  watch: {
    commandContext (newVal, oldVal) {
      if (JSON.stringify(newVal) === '{}') {
        this.getAllTradDeviceInit()
        this.$refs.singleTable.clearSelection()
      }
      deep: true
    }

  },
  methods: {
    /**
       * @Description  : 确认
       * @author       : ls
       * @date         : 2020/4/23 15:08
       * @param        :
       * @return       :
       */
    onSubmit: function () {
      if (!this.totalCheck()) {
        return
      }
      let formTemplate = {}
      let inputIpList = []
      let stationArr = []
      if (this.form.dynamicItem.length === 0) {
        inputIpList[0] = new Array(2)
        inputIpList[0][0] = this.form.input1
        inputIpList[0][1] = this.form.input2
        stationArr.push(this.form.station1)
      } else {
        inputIpList[0] = new Array(2)
        inputIpList[0][0] = this.form.input1
        inputIpList[0][1] = this.form.input2
        stationArr.push(this.form.station1)
        for (var i = 1; i < this.form.dynamicItem.length + 1; i++) {
          inputIpList[i] = new Array(2)
          inputIpList[i][0] = this.form.dynamicItem[i - 1].input1
          inputIpList[i][1] = this.form.dynamicItem[i - 1].input2
          stationArr.push(this.form.dynamicItem[i - 1].value)
        }
      }
      formTemplate.iP = inputIpList
      formTemplate.stationArr = stationArr
      formTemplate.templateName = this.form.templateName
      formTemplate.subnet = this.form.subnet
      formTemplate.findType = this.form.radio
      if (this.flag === true) {
        formTemplate.snmpProtocolVersion = this.form.snmpProtocolVersion
        formTemplate.getPortName = this.form.getPortName
        formTemplate.snmpGroupName = this.form.snmpGroupName
      }
      if (this.flag === false) {
        formTemplate.ipmiUserName = this.form.ipmiUserName
        formTemplate.impiPassword = this.form.impiPassword
      }
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      EdTemplateService.createTemplate(formTemplate).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)
      })
    },
    /**
       * @Description  : 显示
       * @author       : ls
       * @date         : 2020/4/23 13:30
       * @param        :
       * @return       :
       */
    disableOrNot: function () {
      if (this.form.radio === 0) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    /**
       * @Description  : 提交校验
       * @author       : ls
       * @date         : 2020/4/23 16:37
       * @param        :
       * @return       :
       */
    totalCheck: function () {
      if (!this.templateNameCheck()) {
        return false
      }
      if (!this.snmpGroupNameCheck()) {
        return false
      }
      if (this.flag === true) {
        if (!this.SNMPVersionCheck()) {
          return false
        }
        if (!this.GETPortNameCheck()) {
          return false
        }
        if (!this.snmpGroupNameCheck()) {
          return false
        }
      }
      if (this.flag === false) {
        if (!this.IpmiUserNameCheck()) {
          return false
        }
        if (!this.IpmiPasswordCheck()) {
          return false
        }
      }
      // if (!this.ipCheckSelf(this.form.input1)) {
      //   return false
      // }
      // if (!this.ipCheckSelf(this.form.input2)) {
      //   return false
      // }
      // if (!this.ipCheck(this.form.input1, this.form.input2)) {
      //   return false
      // }
      // if (this.form.dynamicItem.length !== 0) {
      //   for (var i = 0; i < this.form.dynamicItem.length; i++) {
      //     if (!this.ipCheckSelf(this.form.dynamicItem[i].input1)) {
      //       return false
      //     }
      //     if (!this.ipCheckSelf(this.form.dynamicItem[i].input2)) {
      //       return false
      //     }
      //     if (!this.ipCheck(this.form.dynamicItem[i].input1, this.form.dynamicItem[i].input2)) {
      //       return false
      //     }
      //   }
      // }
      // if (this.form.dynamicItem.length !== 0) {
      //   for (var i = 0; i < this.form.dynamicItem.length; i++) {
      //     this.ipCheck(this.form.dynamicItem[i].input1, this.form.dynamicItem[i].input2)
      //   }
      // }
    },
    /**
       * @Description  : 名称校验
       * @author       : ls
       * @date         : 2020/4/23 13:03
       * @param        :
       * @return       :
       */
    templateNameCheck: function () {
      // let templateCheck = legitimacyCheck()
      if (!this.check.textNullCheck(this.form.templateName)) {
        // 输入不可为空
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.templateName'))
        return false
      }
      if (!this.textLengthCheck(this.form.templateName)) return false
      return true
    },
    /**
       * @Description  : 子网校验
       * @author       : ls
       * @date         : 2020/4/23 13:11
       * @param        :
       * @return       :
       */
    subnetCheck: function () {
      var result = this.check.textNullCheck(this.form.subnet)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.subnet'))
        return false
      }
      return true
    },
    /**
       * @Description  : SNMP协议校验
       * @author       : ls
       * @date         : 2020/4/23 16:46
       * @param        :
       * @return       :
       */
    SNMPVersionCheck: function () {
      var result = this.check.textNullCheck(this.form.snmpProtocolVersion)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.SNMPProtocolVersion'))
        return false
      }
      return true
    },
    /**
       * @Description  : GET端口
       * @author       : ls
       * @date         : 2020/4/23 16:49
       * @param        :
       * @return       :
       */
    GETPortNameCheck: function () {
      var result = this.check.textNullCheck(this.form.getPortName)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.GETPortName'))
        return false
      }
      return true
    },
    /**
       * @Description  : 团体名校验
       * @author       : ls
       * @date         : 2020/4/23 16:32
       * @param        :
       * @return       :
       */
    snmpGroupNameCheck: function () {
      if (!this.check.textNullCheck(this.form.snmpGroupName)) {
        // 输入不可为空
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.SNMPGroupName'))
        return false
      }
      if (!this.textLengthCheck(this.form.snmpGroupName)) return false
      return true
    },
    /**
       * @Description  : IPMI用户名校验
       * @author       : ls
       * @date         : 2020/4/23 16:54
       * @param        :
       * @return       :
       */
    IpmiUserNameCheck: function () {
      if (!this.check.textNullCheck(this.form.ipmiUserName)) {
        // 输入不可为空
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.IPMIUserName'))
        return false
      }
      if (!this.textLengthCheck(this.form.ipmiUserName)) return false
      return true
    },
    /**
       * @Description  : IPMI密码校验
       * @author       : ls
       * @date         : 2020/4/23 16:55
       * @param        :
       * @return       :
       */
    IpmiPasswordCheck: function () {
      if (!this.check.textNullCheck(this.form.impiPassword)) {
        // 输入不可为空
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.IPMIPassword'))
        return false
      }
      if (!this.textLengthCheck(this.form.impiPassword)) return false
      return true
    },
    /**
       * @Description  : 车站校验
       * @author       : ls
       * @date         : 2020/4/23 16:09
       * @param        :
       * @return       :
       */
    stationCheck: function (sta) {
      var result = this.check.textNullCheck(sta)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.station'))
        return false
      }
      return true
    },
    /**
       * @Description  : IP合法性校验
       * @author       : ls
       * @date         : 2020/4/23 14:26
       * @param        :
       * @return       :
       */
    ipCheck1: function (ip) {
      var reg = /^([1-9]|([1-9][0-9])|(1[0-9][0-9])|(2[0-4][0-9])|(25[0-5]))(.([0-9]|([1-9][0-9])|(1[0-9][0-9])|(2[0-4][0-9])|(25[0-5]))){3}$/
      var re = new RegExp(reg)
      if (ip === '') {
        return false
      }
      if ((!re.test(ip))) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.IPCHECK_CODE))
        return false
      } else {
        return true
      }
    },
    /**
       * @Description  : IP校验
       * @author       : ls
       * @date         : 2020/4/23 14:21
       * @param        :
       * @return       :
       */
    ipCheckSelf: function (ip) {
      if (ip === '') {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('ResourceManagement.ipAddress'))
        return
      }
      if (!this.ipCheck1(ip)) {
      }
    },
    ipCheck: function (ip1, ip2) {
      if (!HelperUtil.checkIpOrder(ip1, ip2)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.CORRECT_IP_ORDER), this.$t('DeviceConfigurationManagement.ipAddress'))
        return
      }

      if (!HelperUtil.checkIpIntervalLength(ip1, ip2)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.NOT_IN_SAME_INTERVAL), this.$t('DeviceConfigurationManagement.ipAddress'))
      }
    },
    /**
       * @Description  : 关闭
       * @author       : ls
       * @date         : 2020/4/23 12:34
       * @param        :
       * @return       :
       */
    close: function () {
      this.command.done()
    },
    /**
       * @Description  : 添加IP
       * @author       : ls
       * @date         : 2020/4/23 11:42
       * @param        :
       * @return       :
       */
    addItemIp: function () {
      this.form.dynamicItem.push({
        inputIpAddress: '',
        stationList: [
          {
            label: 'a',
            value: 'll'
          },
          {
            label: 'b',
            value: 'kk'
          }
        ]
      })
    },
    /**
       * @Description  : 删除IP
       * @author       : ls
       * @date         : 2020/4/23 12:10
       * @param        :
       * @return       :
       */
    deleteItemIp: function () {
      this.form.dynamicItem.splice(this.form.dynamicItem.length - 1, 1)
    },
    /**
       * @Description  : 初始化
       * @author       : ls
       * @date         : 2020/4/22 20:02
       * @param        :
       * @return       :
       */
    openTemplateInit: function () {
      this.form.templateName = this.initList.templateName
      this.form.subnet = this.initList.subnet
      this.form.radio = this.initList.protocolName
      this.form.protocolVersion = this.initList.protocolVersion
      this.form.snmpGroupName = this.initList.snmpGroupName
      this.form.getPortName = this.initList.getPortName
      this.form.ipmiUserName = this.initList.ipmiUserName
      this.form.impiPassword = this.initList.ipmiPassword
    },

    ipAddressCheck: function () {
      if (this.form1.input1 == '' || this.form1.input2 == '') {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.ipInterval'))
        return
      }
      // 校验 IP 格式
      if (!this.ipCheck1(this.form1.input1, this.form1.input2)) {
        return
      }

      if (!HelperUtil.checkIpOrder(this.form1.input1, this.form1.input2)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.CORRECT_IP_ORDER), this.$t('DeviceConfigurationManagement.ipInterval'))
        return
      }

      if (!HelperUtil.checkIpIntervalLength(this.form1.input1, this.form1.input2)) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.NOT_IN_SAME_INTERVAL), this.$t('DeviceConfigurationManagement.ipInterval'))
        return
      }

      for (var i = 0; i < this.form1.dynamicItem.length; i++) {
        if (typeof (this.form1.dynamicItem[i].input1) === 'undefined' || typeof (this.form1.dynamicItem[i].input2) === 'undefined') {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.ipInterval'))
          return
        }
        // 校验 IP 格式
        if (!this.ipCheck1(this.form1.dynamicItem[i].input1, this.form1.dynamicItem[i].input2)) {
          return
        }

        if (!HelperUtil.checkIpOrder(this.form1.dynamicItem[i].input1, this.form1.dynamicItem[i].input2)) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.CORRECT_IP_ORDER), this.$t('DeviceConfigurationManagement.ipInterval'))
          return
        }

        if (!HelperUtil.checkIpIntervalLength(this.form1.dynamicItem[i].input1, this.form1.dynamicItem[i].input2)) {
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.NOT_IN_SAME_INTERVAL), this.$t('DeviceConfigurationManagement.ipInterval'))
          return
        }
      }

      if (this.form1.checkedLinks.length === 0) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.LINK_PROTOCOL))
        return
      }

      if (!this.snmpPortCheck()) {
        return
      }
      if (!this.snmpVersionCheck()) {
        return
      }
      if (!this.subnetKeyCheck()) {

      }
    },
    getAllSubnet: function () {
      let _this = this
      SubnetService.getAllSubnetCollection().then(result => {
        // 成功
        _this.subnetList = Object.values(result)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    getAllLocation: function () {
      let _this = this
      // 就这句没改
      LocationService.getAllLocationCollection().then(result => {
        // 成功
        _this.locationListInit = result
        _this.locationList = Object.values(_this.locationListInit)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    }
  },
  created: function () {
    this.check = legitimacyCheck()
    this.getAllSubnet()
  },
  // 初始化函数，加载数据
  mounted () {
    this.createElementDiscoveryVisible = 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>