<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <b><span>通信设备</span></b>
      </div>
      <div style="padding-bottom: 1%">
        <el-button type="primary" size="small" @click="insertCommEq">添加</el-button>
        <el-button type="primary" size="small" @click="exportDataEvent">导出</el-button>
      </div>
      <vxe-table
        ref="xTable"
        :loading="loading"
        border
        highlight-current-row
        keep-source
        auto-resize
        resizable
        :data="tableData"
      >
        <vxe-table-column title="通信设备基本信息" align="center">
          <vxe-table-column field="name" title="通信设备" align="center" width="12%" />
          <vxe-table-column field="netCardName" title="网卡名称" align="center" />
          <vxe-table-column field="netCardIp" title="网卡IP地址" align="center" />
          <vxe-table-column field="netmask" title="子网掩码" align="center" />
          <vxe-table-column field="gateway" title="网关" align="center" />
          <vxe-table-column field="port" title="端口" align="center" />
          <vxe-table-column field="systemName" title="功率预测系统" align="center" width="12%"/>
          <vxe-table-column field="systemNetCardName" title="系统网卡名称" align="center" />
          <vxe-table-column field="systemNetCardIp" title="系统网卡IP地址" align="center" />
          <vxe-table-column field="systemNetmask" title="系统子网掩码" align="center" />
          <vxe-table-column field="systemGateway" title="系统网关" align="center" />
          <vxe-table-column field="systemPort" title="系统端口" align="center" />
          <vxe-table-column title="操作" width="10%" align="center">
            <template v-slot="{ row }">
              <el-button
                type="primary"
                style="padding: 3px 4px 3px 4px;margin: 2px;"
                size="medium "
                icon="el-icon-edit"
                @click="editRowEvent(row)"
              >编辑
              </el-button>
              <el-button
                type="danger"
                style="padding: 3px 4px 3px 4px;margin: 2px;"
                size="medium "
                icon="el-icon-edit"
                @click="deleteCommEq(row)"
              >删除
              </el-button>
            </template>
          </vxe-table-column>
        </vxe-table-column>
      </vxe-table>
      <vxe-modal v-model="showEdit" :title="selectRow ? '编辑&保存' : '新增&保存'" width="800" min-width="600" min-height="400" resize @close="closeModel">
        <vxe-form
          ref="form"
          class="my-form2"
          title-align="right"
          title-width="35%"
          :data="formData"
          :rules="formRules"
          @submit="saveForm"
        >
          <vxe-form-item title="通信设备" field="name" span="12" >
            <vxe-select v-model="formData.name" placeholder="请输入名称" @change="fanChange">
              <vxe-option v-for="list in nameList" :value="list.value" :label="list.label" />
            </vxe-select>
          </vxe-form-item>
          <vxe-form-item title="网卡名称" field="netCardName" span="12">
            <vxe-input v-model="formData.netCardName" placeholder="请输入网卡名称" clearable />
          </vxe-form-item>
          <vxe-form-item title="网卡IP地址" field="netCardIp" span="12">
            <vxe-input v-model="formData.netCardIp" placeholder="请输入网卡IP地址" clearable />
          </vxe-form-item>
          <vxe-form-item title="子网掩码" field="netmask" span="12">
            <vxe-input v-model="formData.netmask" placeholder="请输入子网掩码" clearable />
          </vxe-form-item>
          <vxe-form-item title="网关" field="gateway" span="12">
            <vxe-input v-model="formData.gateway" placeholder="请输入网关" clearable />
          </vxe-form-item>
          <vxe-form-item title="端口" field="port" span="12">
            <vxe-input v-model="formData.port" placeholder="请输入端口" clearable />
          </vxe-form-item>

          <vxe-form-item title="通信设备" field="systemName" span="12" v-show="fanShow">
            <vxe-select v-model="formData.systemName" placeholder="请输入名称">
              <vxe-option v-for="list in systemNameList" :value="list.value" :label="list.label" />
            </vxe-select>
          </vxe-form-item>
          <vxe-form-item title="通信设备Ip" field="systemNetCardIp" span="12" v-show="fanShow">
            <vxe-input v-model="formData.systemNetCardIp" placeholder="请输入网卡IP地址" clearable />
          </vxe-form-item>
          <vxe-form-item title="功率预测系统" field="systemName" span="12" title-width="40%" v-show="sysShow">
            <vxe-select v-model="formData.systemName" placeholder="请输入名称">
              <vxe-option v-for="list in systemNameList" :value="list.value" :label="list.label" />
            </vxe-select>
          </vxe-form-item>
          <vxe-form-item title="预测系统网卡名称" field="systemNetCardName" span="12" v-show="sysShow">
            <vxe-input v-model="formData.systemNetCardName" placeholder="请输入网卡名称" clearable />
          </vxe-form-item>
          <vxe-form-item title="预测系统网卡IP地址" field="systemNetCardIp" span="12" title-width="40%" v-show="sysShow">
            <vxe-input v-model="formData.systemNetCardIp" placeholder="请输入网卡IP地址" clearable />
          </vxe-form-item>
          <vxe-form-item title="预测系统子网掩码" field="systemNetmask" span="12" v-show="sysShow">
            <vxe-input v-model="formData.systemNetmask" placeholder="请输入子网掩码" clearable />
          </vxe-form-item>
          <vxe-form-item title="预测系统网关" field="systemGateway" span="12" title-width="40%" v-show="sysShow">
            <vxe-input v-model="formData.systemGateway" placeholder="请输入网关" clearable />
          </vxe-form-item>
          <vxe-form-item title="预测系统端口" field="systemPort" span="12" v-show="sysShow">
            <vxe-input v-model="formData.systemPort" placeholder="请输入端口" clearable />
          </vxe-form-item>
          <vxe-form-item align="center" span="24">
            <vxe-button status="primary" type="submit">保存</vxe-button>
            <vxe-button type="reset">重置</vxe-button>
          </vxe-form-item>

        </vxe-form>
      </vxe-modal>

    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      loading: false,
      showEdit: false,
      selectRow: false,
      fanShow: false,
      sysShow: true,
      saveFlag: 1, // 保存 1， 修改 2
      modelId: '',
      tableData: [],
      nameList: [
        { value: '前台PC机', label: '前台PC机' },
        { value: '势态感知', label: '势态感知' },
        { value: '对时系统', label: '对时系统' },
        { value: '反向隔离内网真实IP', label: '反向隔离内网真实IP' },
        { value: '反向隔离外网真实IP', label: '反向隔离外网真实IP' },
        { value: '网络安全监测', label: '网络安全监测' },
        { value: '入侵系统监测', label: '入侵系统监测' },
        { value: '环境监测仪串口接入', label: '环境监测仪串口接入' },
        { value: '测风塔串口接入', label: '测风塔串口接入' },
        { value: '测风塔网口接入', label: '测风塔网口接入' },
        { value: '外网Internet IP', label: '外网Internet IP' }
      ],
      systemNameList: [
        { value: '外网服务器', label: '外网服务器' },
        { value: '内网服务器', label: '内网服务器' }
      ],
      formData: {
        name: '',
        netCardName: '',
        netCardIp: '',
        netmask: '',
        gateway: '',
        port: '',
        systemName: '',
        systemNetCardName: '',
        systemNetCardIp: '',
        systemNetmask: '',
        systemGateway: '',
        systemPort: ''
      },
      formRules: {
        name: [{ required: true, message: '不能为空' }],
        netCardIp: [{
          pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
          message: '请填写正确的ip'
        }],
        netmask: [{
          pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
          message: '请填写正确的子网掩码'
        }],
        gateway: [{
          pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
          message: '请填写正确的网关'
        }],
        port: [{
          pattern: /^[0-9]*$/,
          message: '请填写正确的端口'
        }],
        systemName: [{ required: true, message: '不能为空' }],
        systemNetCardIp: [{
          pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
          message: '请填写正确的ip'
        }],
        systemNetmask: [{
          pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
          message: '请填写正确的子网掩码'
        }],
        systemGateway: [{
          pattern: /^(?=(\b|\D))(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))(?=(\b|\D))/,
          message: '请填写正确的网关'
        }],
        systemPort: [{
          pattern: /^[0-9]*$/,
          message: '请填写正确的端口'
        }]
      }
    }
  },
  mounted() {
    this.getCommEq()
  },
  created() {

  },
  methods: {
    getCommEq() {
      this.$axios.get('/communicationEquipment/').then((res) => {
        this.tableData = res.data
      })
    },
    editRowEvent(row) {
      // console.log(row)
      this.saveFlag = 2
      this.selectRow = true
      this.showEdit = true
      this.modelId = row.id
      this.formData = {
        id: '',
        name: row.name,
        netCardName: row.netCardName,
        netCardIp: row.netCardIp,
        netmask: row.netmask,
        gateway: row.gateway,
        port: row.port,
        systemName: row.systemName,
        systemNetCardName: row.systemNetCardName,
        systemNetCardIp: row.systemNetCardIp,
        systemNetmask: row.systemNetmask,
        systemGateway: row.systemGateway,
        systemPort: row.systemPort
      }
    },
    insertCommEq() {
      this.saveFlag = 1
      this.showEdit = true
      this.sysShow = true
      this.fanShow = false
    },
    saveForm() {
      if (this.saveFlag === 1) {
        this.$axios.post('/communicationEquipment/', this.formData).then((res) => {
          this.closeModel()
          this.getCommEq()
        })
      } else {
        this.formData.id = this.modelId
        this.$axios.put('/communicationEquipment/', this.formData).then((res) => {
          this.closeModel()
          this.getCommEq()
        })
      }
    },
    deleteCommEq(row) {
      this.$XModal.confirm('您确定要删除该数据?').then(type => {
        if (type === 'confirm') {
          this.$axios.delete('/communicationEquipment/' + row.id).then((res) => {
            this.getCommEq()
          })
        }
      })
    },
    closeModel() {
      this.$refs.form.reset()
      this.selectRow = false
      this.showEdit = false
    },
    fanChange(val) {
      this.sysShow = false
      this.fanShow = true
      if(val.value == '反向隔离内网真实IP'){
        this.systemNameList = [{value:'反向隔离内网虚拟IP',label:'反向隔离内网虚拟IP'}]
        this.formData.systemName = this.systemNameList[0].value
      }else if(val.value == '反向隔离外网真实IP') {
        this.systemNameList = [{value:'反向隔离虚拟真实IP',label:'反向隔离外网虚拟IP'}]
        this.formData.systemName = this.systemNameList[0].value
      }else{
        this.sysShow = true
        this.fanShow = false
        this.systemNameList = [
          { value: '外网服务器', label: '外网服务器' },
          { value: '内网服务器', label: '内网服务器' }
        ]
        this.formData.systemName = ''
      }
    },
    exportDataEvent() {
      this.$axios.post('/communicationEquipment/export', {}, {
        fileName: '',
        responseType: 'blob'// 用于解决中文乱码
      }).then((response) => {
      })
    }
  }
}
</script>

<style scoped>

</style>
