<template>
  <div class="app-container pageTopForm">
    <div class="w100 mb10" style="height: 125px;font-size: 14px">
      <div v-for="(item,index) of headerList" class="disInlineBlock h100 verticalAlign" :style="`margin-right:${index + 1 === headerList.length ? 'none' : '1%'}`"
           style="width: 32.66%; border: 1px solid #d8dce6;border-radius: 10px;padding: 10px 20px;">
        <div>{{item.title}}</div>
        <div class="mtb10">{{item.percent}}%</div>
        <el-progress :percentage="item.percent" :show-text="false"></el-progress>
        <div class="mt10" style="font-size: 12px">
          <span><span class="mr10">{{item.btmOne}}</span>{{item.numOne}}</span>
          <template v-if="index + 1 === headerList.length">
            <br/>
            <span><span class="mr10">{{item.btmTow}}</span>{{item.numTow}}</span>
          </template>
          <span v-else class="ml20"><span class="mr10">{{item.btmTow}}</span>{{item.numTow}}</span>
        </div>
      </div>
    </div>
    <el-row :gutter="20">
      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
        <!--部门数据-->
        <pane size="16">
          <el-col>
            <div class="head-container">
              <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
            </div>
            <div class="head-container">
              <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
            </div>
          </el-col>
        </pane>
        <!--用户数据-->
        <pane size="84">
          <el-form :model="queryParams" ref="queryRef" v-show="showSearch" label-width="80px">
            <el-col :span="7">
              <el-form-item label="搜索" prop="switchName">
                <el-input
                  v-model="queryParams.switchName"
                  placeholder="请输入硬件SN/资源名称/IP地址"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="资源类型" prop="bandwidthType">
                <el-select
                  v-model="queryParams.bandwidthType"
                  placeholder="请选择资源类型"
                  clearable>
                  <el-option
                    v-for="dict in dict.type.rm_topology_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="在线状态" prop="status">
                <el-select
                  v-model="queryParams.status"
                  placeholder="请选择在线状态"
                  clearable>
                  <el-option
                    v-for="dict in dict.type.rm_topology_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item class="lastBtnSty">
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
          <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
            <template #tempType="{ row, column }">
              <dict-tag :options="dict.type.rm_topology_type" :value="row.connectedDeviceType"/>
            </template>
          </TableList>
        </pane>
      </splitpanes>
    </el-row>
  </div>
</template>

<script setup>
  import TableList from "@/components/table/index.vue"
  import EchartsPie from "@/components/echartsList/pie.vue"
  import {listTopology, delTopology} from "@/api/disRevenue/resource"
  import {deptTreeSelect } from "@/api/system/user"
  import { Splitpanes, Pane } from "splitpanes"
  import "splitpanes/dist/splitpanes.css"
  export default {
    name: 'ResMonitor',
    components: {TableList,EchartsPie, Splitpanes, Pane},
    dicts: ['rm_topology_type'],
    data() {
      return {
        loading: true,
        // 部门名称
        deptName: undefined,
        // 所有部门树选项
        deptOptions: undefined,
        defaultProps: {
          children: "children",
          label: "label"
        },

        showSearch: true,
        roleList: [],
        queryParams: {
          total: 0,
          pageNum: 1,
          pageSize: 10
        },
        // 列显隐信息
        columns: {
          id: { label: `ID`, visible: false },
          switchSn: { label: `硬件SN`,visible: true},
          switchName: { label: `资源名称`, visible: true },
          interfaceName: { label: `ip地址`, visible: true },
          connectedDeviceType: { label: `监控项`, slotName: 'tempType', visible: true },
          serverName: { label: `自动发现项`, visible: true},
          serverSn: { label: `CPU使用率%`,visible: true},
          serverPort: { label: `内存使用率`, visible: true }
        },
        config: {
          searcherForm: [
            {label: '交换机名称', prop: 'roleName', type: 'selset', options: []}
          ],
          tableButton: {
            // top: [
            //   {content: '导出', fnCode: 'export', type: 'primary', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:resMonitor:export'},
            // ],
            line: [
              {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'disRevenue:resource:resMonitor:details'},
            ]
          }
        },
        headerList: [
          {title: '服务器在线率', percent: 50, btmOne: '服务器在线数', numOne: '1000', btmTow: '服务器总数', numTow: '2000'},
          {title: '交换机在线率', percent: 50, btmOne: '交换机在线数', numOne: '1000', btmTow: '交换机总数', numTow: '2000'},
          {title: '服务器整体发送带宽利用率', percent: 50, btmOne: '服务器发送带宽总量', numOne: '10020 Mbps', btmTow: '服务器总带宽', numTow: '2000000 Mbps'},
        ],
        dataList: [{
          centerVal: '56',
          unit: '台',
          center: ['20%', '50%'],
          color: ['#31bb42', '#f96602'],
          data: [
            { value: 36, name: '在线服务器' },
            { value: 20, name: '离线服务器' }
          ]
        },{
          centerVal: '10',
          unit: '台',
          center: ['20%', '50%'],
          color: ['#1c7dbc', '#f80a4f'],
          data: [
            { value: 8, name: '在线交换机' },
            { value: 2, name: '离线交换机' }
          ]
        },{
          centerVal: '82',
          unit: '%',
          center: ['20%', '50%'],
          color: ['#1a7aff', '#f96602'],
          data: [
            { value: 82, name: '服务器整体带宽利用率' },
            { value: 18, name: '离线交换机' }
          ]
        }]
      }
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val)
      }
    },
    created() {
      this.getList();
      this.getDeptTree();
    },
    methods: {
      /** 查询部门下拉树结构 */
      getDeptTree() {
        deptTreeSelect().then(response => {
          this.deptOptions = response.data;
        })
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.deptId = data.id;
        this.handleQuery();
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        listTopology(this.addDateRange(this.queryParams)).then(response => {
          this.roleList = response.rows;
          this.queryParams.total = response.total;
          this.loading = false;
        })
      },
      // 处理子组件传递的新值
      handleValueChange(newValue) {
        // 父组件更新自身数据，实现同步
        this.showSearch = newValue;
        // console.log('父组件拿到新值:', newValue);
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryRef");
        this.handleQuery();
      },

      callback(result, rowData, selectChange) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'details':
              this.$router.push({
                path:'/disRevenue/resource/resMonitor/details/index',
                query:{
                  id: rowData.id
                }
              });
              break;
            case 'delete':
              this.$modal.confirm('是否确认删除数据项？').then(function() {
                return delTopology(selectChange)
              }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功")
              }).catch(() => {});
              break;
            case 'export':
              let dataList = [];
              Object.keys(this.columns).forEach(item => {
                if (item.visible) {
                  dataList.push(item.prop);
                }
              });
              this.download("/system/management/export", {
                properties: dataList,
              }, `拓扑管理_${new Date().getTime()}.xlsx`);
              break;
            default:
          }
        }
      }
    }
  }
</script>
<style scoped>
  ::v-deep .lastBtnSty .el-form-item__content{
    margin-left: unset!important;
  }
</style>
