<template>
    <div class="app-container pageTopForm">
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto">
          <el-col :span="6">
              <el-form-item label="交换机名称" title="交换机名称" prop="queryName">
                  <el-input
                      v-model="queryParams.queryName"
                      placeholder="请输入交换机名称"
                      clearable
                      @keyup.enter.native="handleQuery"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交换机在线状态" title="交换机在线状态" prop="onlineStatus">
              <el-select
                v-model="queryParams.onlineStatus"
                placeholder="请选择交换机在线状态"
                clearable>
                <el-option
                  v-for="dict in dict.type.rm_register_online_state"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="lastBtnSty">
                <el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>

        <!-- 表格数据 -->
      <TableList :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
        <!--    资源类型    -->
        <template #tempType="{ row, column }">
          <dict-tag :options="dict.type.rm_register_resource_type" :value="row.resourceType"/>
        </template>
        <!--   端口     -->
        <template #tempPort="{ row, column }">
          <dict-tag :options="dict.type.rm_register_port" :value="row.resourcePort"/>
        </template>
        <!--    协议    -->
        <template #tempProtocol="{ row, column }">
          <dict-tag :options="dict.type.rm_register_protocol" :value="row.protocol"/>
        </template>
        <!--    注册状态    -->
        <template #tempStatus="{ row, column }">
          <dict-tag :options="dict.type.rm_register_status" :value="row.registrationStatus"/>
        </template>
        <!--    在线状态    -->
        <template #tempOnlineStatus="{ row, column }">
          <dict-tag :options="dict.type.rm_register_online_state" :value="row.onlineStatus"/>
        </template>
      </TableList>
      <!--    弹窗    -->
      <el-dialog title="添加监控策略" :visible.sync="open" width="1000px" append-to-body>
        <MonitorStrategy :open="`type_${open}`" @dialogResult="fnDialogResult"></MonitorStrategy>
      </el-dialog>
    </div>
</template>

<script setup name="Register">
    import {listSwitchManage} from '@/api/disRevenue/resource';
    import TableList from '@/components/table/index.vue';
    // import MonitorStrategy from './monitorStrategy';
    import MonitorStrategy from '../switchMonitorStrat/monitorStrategy';
    export default {
      name: 'SwitchRegister',
      components: {TableList, MonitorStrategy},
      dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state'],
      data() {
        return {
          open: false,
          roleList: [],
          loading: true,
          showSearch: true,
          ids: [],
          single: true,
          meltiple: true,
          // 列显隐信息
          columns: {
            id: { label: `ID`,width: '80'},
            switchName: { label: `交换机名称`, visible: true, minWidth: '200'},
            hardwareSn: { label: `硬件SN`,minWidth: '250'},
            resourceType: { label: `交换机类型`, minWidth: '100', slotName: 'tempType'},
            snmpAddress: { label: `SNMP采集地址`, visible: true, minWidth: '150'},
            snmpPort: { label: `SNMP采集端口`, visible: true, minWidth: '150'},
            onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '120', visible: true },
            upTime:{ label: `上机时间`,minWidth: '160'},
            updateTime:{ label: `修改时间`,minWidth: '160'},
            createTime:{ label: `创建时间`,minWidth: '160'},
            heartbeatCount: { label: `交换机心跳检测次数`, minWidth: '180'},
            heartbeatInterval: { label: `交换机心跳检测周期`, minWidth: '180'},
            heartbeatOid: { label: `交换机心跳检测OID`, minWidth: '180'},
            protocol: { label: `SNMP版本`, minWidth: '150'},
            readWritePermission: { label: `读写权限`, minWidth: '120'},
            securityLevel: { label: `安全级别`, minWidth: '120'},
            encryptionMethod: { label: `加密方式`, minWidth: '120'},
            communityName: { label: `团体名称`, minWidth: '120'},
            resourceUserName: { label: `用户名`, minWidth: '100'},
            resourcePwd: { label: `密码`, minWidth: '100'}
          },
          config: {
            tableButton: {
              top: [
                {content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:switchRegister:add'},
                {content: '接口备注', fnCode: 'portRemarks', type: 'success', icon: 'el-icon-plus', hasPermi: 'resource:switchRegister:portRemarks'},
                {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:switchRegister:export'},
              ],
              line: [
                {content: '图形监控', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:switchRegister:graphicAnalysis'},
                {content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'resource:switchRegister:edit'},
                {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:switchRegister:details'},
                {content: '执行监控策略', fnCode: 'monitorStrategy', type: 'text', icon: 'el-icon-document-checked', hasPermi: 'resource:switchRegister:monitorStrategy'},
                {},{}
                // {content: '注册', fnCode: 'enroll', showName: 'registrationStatus', showVal: '0', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:register:enroll'},
                // {content: '取消注册', fnCode: 'unenroll', showName: 'registrationStatus', showVal: '1', type: 'text', icon: 'el-icon-circle-close', hasPermi: 'resource:register:unenroll'},
              ]
            }
          },
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            total: 0
          }
        }
      },
      created() {
        this.getList();
      },
      activated() {
        this.$nextTick(() => {
          this.getList();
        });
      },
      methods: {
        // 处理子组件传递的新值
        handleValueChange(newValue) {
          // 父组件更新自身数据，实现同步
          this.showSearch = newValue;
          // console.log('父组件拿到新值:', newValue);
        },
        /** 查询角色列表 */
        getList() {
          this.loading = true
          listSwitchManage(this.addDateRange(this.queryParams)).then(response => {
            this.roleList = response.rows;
            this.queryParams.total = response.total;
            this.loading = false;
          })
        },

        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1
          this.getList()
        },

        /** 重置按钮操作 */
        resetQuery() {
          this.$refs['queryRef'].resetFields();
          this.queryParams = {pageNum: 1, pageSize: 10,total: 0};
          // this.resetForm("queryRef");
          this.handleQuery();
        },

        /** 多选框选中数据 */
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.roleId);
          this.single = selection.length != 1;
          this.multiple = !selection.length;
        },
        fnDialogResult(res){
          this.open = false;
        },
        callback(result, rowData, selectChange) {
          // console.log('result==',result);
          if (result && result.fnCode) {
            switch (result.fnCode) {
              case 'add':
                this.$router.push("/resource/switchRegister/edit/index");
                break;
              case 'portRemarks':
                // if (selectChange && selectChange.length <= 0) {
                //   this.$modal.msgWarning("请选择数据！");
                //   return;
                // }
                this.$router.push({
                  path: '/resource/switchRegister/portRemarks',
                  // query: {ids: selectChange}
                });
                break;
              case 'edit':
                this.$router.push({
                  path:'/resource/switchRegister/edit/index',
                  query: {id: rowData.id}
                });
                break;
              case 'details':
                this.$router.push({
                  path:'/resource/switchRegister/edit/index',
                  query: {id: rowData.id, readonly: true}
                });
                break;
              case 'echartView':
                this.$router.push({
                  path:'/resource/switchRegister/monitorChart',
                  query: {clientId: rowData.clientId}
                });
                break;
              case 'monitorStrategy':
                this.open = true;
                break;
              case 'export':
                // let dataList = [];
                // Object.keys(this.columns).forEach(item => {
                //   if (item.visible) {
                //     dataList.push(item.prop);
                //   }
                // });
                // this.download("/system/registration/export", {properties: dataList,}, `资源管理_${new Date().getTime()}.xlsx`);
                let paramsList = Object.assign({}, this.queryParams,rowData);
                this.download("system/switchManagement/export", paramsList, `交换机管理_${new Date().getTime()}.xlsx`, null, 'json');
                break;
              default:

            }
          }
        }
      }
    }
</script>

<style scoped>
  ::v-deep .lastBtnSty .el-form-item__content{
    margin-left: 10px!important;
  }
  ::v-deep .el-dialog__body {
    padding: 0px!important;
  }
</style>
