<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="请输入MTRClientID/ClientID"
            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="6">
        <el-form-item label="注册状态" title="注册状态" prop="registerStatus">
          <el-select
            v-model="queryParams.registerStatus"
            placeholder="请选择注册状态"
            clearable>
            <el-option
              v-for="dict in dict.type.rm_register_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="标识" title="标识" prop="logicalNode">
          <el-select
            v-model="queryParams.logicalNode"
            placeholder="请选择标识"
            clearable>
            <el-option
              v-for="item in logicalNodeList"
              :key="item.value"
              :label="item.label"
              :value="item.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 #tempCopy="{ row, column}">
        {{row.clientId}}<el-link :underline="false" icon="el-icon-document-copy" title="复制" v-clipboard:copy="row.clientId" v-clipboard:success="clipboardSuccess" style="margin-left: 10px;color: #409EFF;"></el-link>
      </template>
      <!--   更新方式   -->
      <template #tempMethod="{ row, column }">
        <dict-tag :options="dict.type.policy_method" :value="row.method"/>
      </template>
      <!--    多公网IP状态    -->
      <template #tempMultipubStatus="{ row, column }">
        <dict-tag :options="dict.type.rm_moreip_status" :value="row.multiPublicIpStatus"/>
      </template>
      <!--    注册状态    -->
      <template #tempStatus="{ row, column }">
        <dict-tag :options="dict.type.rm_register_status" :value="row.registerStatus"/>
      </template>
      <!--    在线状态    -->
      <template #tempOnlineStatus="{ row, column }">
        <dict-tag :options="dict.type.rm_register_online_state" :value="row.onlineStatus"/>
      </template>
    </TableList>
    <!--   配置更新策略    -->
    <el-dialog title="配置更新策略" :visible.sync="viewOpen" width="800px" append-to-body style="padding-bottom: 20px;">
      <mtrAgentView :open="`type_${viewOpen}`" :dialogRowData="dialogRowData" @dialogResult="fnDialogResult"></mtrAgentView>
    </el-dialog>
    <!--   MTR探测策略    -->
<!--    <el-dialog title="MTR探测策略" :visible.sync="mtrProbeOpen" width="1000px" append-to-body style="padding-bottom: 20px;">-->
<!--      <mtrProbeView :open="`type_${mtrProbeOpen}`" :dialogRowData="dialogRowData" @dialogResult="fnDialogResult"></mtrProbeView>-->
<!--    </el-dialog>-->
  </div>
</template>

<script setup name="Register">
  import Form from '@/components/form/index.vue';
  import {listMtrAgent, logicalNodeAll} from '@/api/disRevenue/resource';
  import TableList from '@/components/table/index.vue';
  import mtrAgentView from './mtrAgentView';
  import mtrProbeView from '../mtrProbe/mtrProbeView';
  export default {
    name: 'mtrAgent',
    components: {TableList,Form, mtrAgentView, mtrProbeView},
    dicts: ['rm_moreip_status', 'rm_register_status', 'rm_register_online_state', 'policy_method'],
    data() {
      return {
        roleList: [],
        showSearch: true,
        ids: [],
        single: true,
        // 列显隐信息
        columns: {
          id: { label: `ID`,width: '50'},
          mtrClientId: { label: `MTRClientID`, minWidth: '320', visible: true},
          description:{ label: `描述`,minWidth: '90'},
          version:{ label: `版本`,minWidth: '160', visible: true},
          registerStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '80', visible: true },
          registerTime:{ label: `注册时间`,minWidth: '160'},
          logicalNode: { label: `标识`, minWidth: '120', visible: true},
          onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '100', visible: true },
          heartbeatInterval: { label: `心跳时间间隔`, minWidth: '100'},
          heartbeatCount: { label: `心跳次数`, minWidth: '80'},
          networkInfo: { label: `网卡信息`, minWidth: '100'},
          method: { label: `更新方式`,minWidth: '80', slotName: 'tempMethod'},
          scheduledUpdateTime: { label: `定时更新时间`,minWidth: '160'},
          filePath: { label: `文件地址`,minWidth: '200'},
          fileMd5: {label: '文件MD5', minWidth: '200'},
          lastUpdateResult: { label: `最后一次更新结果`,minWidth: '140', slotName: 'tempResult'},
          lastUpdateTime: { label: `最后一次更新时间`,minWidth: '160'},
        },
        config: {
          tableButton: {
            top: [
              {content: '配置更新策略', fnCode: 'update', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:mtrAgent:update'},
              {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:mtrAgent:export'},
            ],
            line: [
              {content: '查看丢包率趋势', fnCode: 'echartView', type: 'primary', icon: 'el-icon-data-analysis', hasPermi: 'resource:mtrAgent:echartView'},
              {content: '详情', fnCode: 'details', type: 'primary', icon: 'el-icon-view', hasPermi: 'resource:mtrAgent:details'},
              {title: '更多', type: 'primary', hasPermi: ['resource:mtrAgent:update', 'resource:mtrAgent:addMtrProbe'], more: [
                  {content: '配置更新策略', fnCode: 'update', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:mtrAgent:update'},
                  {content: '新建MTR探测策略', fnCode: 'addMtrProbe', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:mtrAgent:addMtrProbe'},
                ]
              }
            ]
          }
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          total: 0
        },
        viewOpen: false,
        mtrProbeOpen: false,
        dialogRowData: {},
        logicalNodeList: [],
      }
    },
    created() {
      this.getList();
      this.fnLogicalNode();
    },
    activated() {
      this.$nextTick(() => {
        this.getList();
      });
    },
    methods: {
      // 逻辑标识接口
      fnLogicalNode() {
        logicalNodeAll().then(val => {
          this.logicalNodeList = val && val.data.map(item => {
            return Object.assign({label: item.logicalNodeId, value: item.logicalNodeId});
          });
        });
      },
      // 处理子组件传递的新值
      handleValueChange(newValue) {
        // 父组件更新自身数据，实现同步
        this.showSearch = newValue;
        // console.log('父组件拿到新值:', newValue);
      },
      /** 查询角色列表 */
      getList() {
        let params = JSON.parse(JSON.stringify(this.queryParams));
        if (params && !params.queryName) {
          params.queryName = null;
        }
        listMtrAgent(this.addDateRange(params)).then(response => {
          this.roleList = response.rows;
          this.queryParams.total = response.total;
        })
      },

      /** 搜索按钮操作 */
      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;
      },
      /** 复制代码成功 */
      clipboardSuccess() {
        this.$modal.msgSuccess("复制成功")
      },
      fnDialogResult(res){
        this.viewOpen = false;
        this.mtrProbeOpen = false;
        if (res && res.open) {
          this.getList();
        }
      },
      callback(result, rowData, selectChange, selectList) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'update':
              this.viewOpen = true;
              this.dialogRowData = rowData || {};
              break;
            case 'details':
              this.$router.push({
                path:'/resource/mtrAgent/view',
                query: {id: rowData.id, readonly: true}
              });
              break;
            case 'addMtrProbe':
              // this.mtrProbeOpen = true;
              // this.dialogRowData = rowData || {};
              this.$router.push({
                path:'/resource/mtrAgent/addMtrProbe',
                query: {
                  routeType: 'mtrAgent',
                  mtrClientId: rowData.mtrClientId
                }
              });
              break;
            case 'echartView':
              this.$router.push({
                path:'/resource/mtrAgent/lossRate',
                query: {mtrClientId: rowData.mtrClientId}
              });
              break;
            case 'export':
              let paramsList = Object.assign({}, this.queryParams,rowData);
              this.download("mtragent/mtrClientRegistration/export", paramsList, `MTRAgent管理_${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: 0 0 10px!important;
  }
</style>
