<template>
  <div class="global-statistics-container">
    <!-- 系统 -->
    <YaPageContent
      v-if="!selectedTab"
      :buttons="buttonsSystem"
      :tableData="tableData"
      :tableColumns="systemColumn"
      @tableBtnClick="tableBtnClick"
      :total="total"
      @init="initData"
    >
      <template #pageContentTop>
        <div class="ya-tabs">
          <YaTabs
            style="margin-bottom: 12px"
            class="custom-common-tabs"
            :tabs="tabs"
            v-model="selectedTab"
          ></YaTabs></div
      ></template>
    </YaPageContent>
    <!-- 自定义 -->
    <YaPageContent
      v-if="selectedTab"
      ref="multipleTableRef"
      :buttons="buttonsCustomize"
      :tableData="tableData"
      :tableColumns="customizeColumn"
      @tableBtnClick="tableBtnClick"
      :total="total"
      @init="initData"
      @submit="handlerToSubmitCustom"
    >
      <template #pageContentTop>
        <div class="ya-tabs">
          <YaTabs
            style="margin-bottom: 12px"
            class="custom-common-tabs"
            :tabs="tabs"
            v-model="selectedTab"
          ></YaTabs></div
      ></template>
    </YaPageContent>
    <ya-dialog :dialogProps="dialogProps" @subMit="handlerToCertain">
      <template #content
        ><div class="ya-tip-content">重置系统端口，是否继续</div></template
      >
    </ya-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from 'vue';
import {
  getSystemPortData,
  getCustomizePortData,
  systemPortRestore,
  addPort,
  editPort,
  batchExp,
  delPort,
  isSystemPort,
} from '../../../api/system/portStrategy';
import { yaMessage, yaConfirmMessage } from '../../../utils/message';
import { handleGetIndex } from '../../../utils/tools';
import { usePermissions } from '../../../composables/usePermissions';
import actionEdit from '../../../assets/image/collection/edit.png'
import actionDel from '../../../assets/imgs/liwu.png'
const { permissionsButtons } = usePermissions();

//总数据
const total = ref(0);
//弹窗
let dialogProps = reactive({
  showDialog: false,
  title: '系统端口恢复',
});

const selectedTab = ref(0);
const tabs = ref([
  {
    title: '系统端口',
    value: 0,
  },
  {
    title: '自定义端口',
    value: 1,
  },
]);

//系统端口的表头
const systemColumn = [
  {
    prop: 'service',
    label: '服务名',
    minWidth: '260px',
  },
  {
    prop: 'port',
    label: '端口',
    minWidth: '160px',
  },
  {
    prop: 'protocol',
    label: '协议',
    minWidth: '160px',
  },
];
//自定义端口的表头
const customizeColumn = reactive([
  {
    type: 'selection',
    width: '65px',
  },
  {
    prop: 'service',
    label: '服务名',
    minWidth: '260px',
    maxLength: 18,
    rules: [
      {
        pattern: '^[A-Za-z0-9\u4e00-\u9fa5]+$',
        message: '不允许输入空格等特殊符号',
      },
    ],
    drawer: true,
    type: 'input',
    disabled: false,
  },
  {
    prop: 'port',
    label: '端口',
    minWidth: '160px',
    rules: true,
    disabled: false,
    isType:'port',
    customType: 'port',
    drawer: true,
    type: 'input',
  },
  {
    prop: 'protocol',
    label: '协议',
    minWidth: '160px',
    rules: true,
    disabled: false,
    drawer: true,
    type: 'select',
    options: [
      {
        label: 'TCP',
        value: 'TCP',
      },
      {
        label: 'UDP',
        value: 'UDP',
      },
    ],
  },
  {
    width: '130px',
    label: '操作',
    fixed: 'right',
    buttons: [
      {
        title:"编辑",
        icon: actionEdit,
        eventName: 'edit',
      },
      {
        title:'删除',
        icon: actionDel,
        eventName: 'delete',
      },
    ],
  },
]);
//列表数据
let tableData = ref([]);
//右边按钮
let buttonsSystem: any = ref([]);
let buttonsCustomize: any = ref([]);
//按钮
let bottomData: any = new Map();
onMounted(() => {
  permissionsButtons.map((item) => {
    bottomData.set(item.menuId, item);
  });
  getButton();
  let btnArr = [50006, 50007];
  let num = 0;
  btnArr.forEach((item) => {
    num = bottomData.has(item) ? ++num : num;
  });
  if (num == 2) {
    customizeColumn[customizeColumn.length - 1].width = '130px';
  } else if (num == 1) {
    customizeColumn[customizeColumn.length - 1].width = '90px';
  } else if (num == 0) {
    customizeColumn.length = customizeColumn.length - 1;
  }
});
//获取系统端口表单数据
const initData = (data?) => {
  let params = data
    ? data.value
    : {
        pageIndex: 1,
        pageSize: 20,
      };
  let getList;
  getList = selectedTab.value ? getCustomizePortData : getSystemPortData;
  getList(params).then((res) => {
    const { code, data = {} } = res || {};
    if (code == 200) {
      tableData.value = data.records || [];
      total.value = data.total;
    }
  });
};
watch(
  () => selectedTab.value,
  () => {
    initData();
  }
);

//系统端口恢复的点击事件
const portRestore = function () {
  dialogProps.showDialog = true;
};
//系统端口恢复弹窗的确定事件
const handlerToCertain = () => {
  systemPortRestore().then((res) => {
    const { code, message } = res || {};
    if (code == 200) {
      yaMessage(message, 'success');
      dialogProps.showDialog = false;
      initData();
    }
  });
};

//按钮
let getButton = () => {
  if (bottomData.has(50005)) {
    buttonsSystem.value.push({
      text: bottomData.get(50005).label,
      plain: true,
      right: true,
      eventName: 'portRestore',
    });
  }
  if (bottomData.has(50003)) {
    buttonsCustomize.value.push({
      eventName: 'export',
    });
  }
  if (bottomData.has(50004)) {
    buttonsCustomize.value.push({
      eventName: 'add',
    });
  }
};

//表单的点击事件
const tableBtnClick = (btn, row) => {
  let { eventName } = btn || {};
  switch (eventName) {
    case 'portRestore':
      portRestore();
      break;
    case 'edit':
      const i = handleGetIndex(customizeColumn, 'prop', 'port');
      customizeColumn[i].disabled = true;
      break;
    case 'add':
      const j = handleGetIndex(customizeColumn, 'prop', 'port');
      customizeColumn[j].disabled = false;
      break;
  }
};
//内置按钮的点击事件
const handlerToSubmitCustom = (eventName, obj, cb) => {
  let interfaceName;
  let params;
  switch (eventName) {
    case 'export':
      batchExp(obj).then((res) => {
        cb && cb(res, '自定义端口.xlsx');
      });
      break;
    case 'add':
      isSystemPort({ port: obj.port }).then((res) => {
        const { data } = res || {};
        if (data) {
          yaConfirmMessage('系统端口中已存在，是否需要添加？', '系统端口')
            .then(() => addEvent(obj,cb))
            .catch(() => {
              yaMessage('操作已取消', 'info');
            });
        } else {
          addEvent(obj,cb)
        }
      });
      break;
    case 'edit':
      interfaceName = editPort;
      params = obj;
      break;
    case 'delete':
      interfaceName = delPort;
      params = { id: obj.id };
      break;
  }
  let status = false;
  interfaceName &&
    interfaceName(params)
      .then((res) => {
        let { code, message } = res || {};
        if (code == 200) {
          status = true;
          yaMessage(message, 'success');
        }
      })
      .finally(() => {
        cb && cb(status);
      });
};
//新增的接口
const addEvent = (data, cb) => {
  let status = false;
  addPort(data)
    .then((res) => {
      const { code, message } = res || {};
      if (code == 200) {
        status = true;
        yaMessage(message, 'success');
      }
    })
    .finally(() => {
      cb && cb(status);
    });
};
</script>
<style lang="scss" scoped>
.ya-tabs {
  background-color: #fff;
}

.ya-tip-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: rgba(0, 0, 0, 0.8);
}
.ya-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
img {
  width: 22px;
  height: 22px;
  margin-right: 16px;
  vertical-align: middle;
}
.ya-tip-content {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: rgba(0, 0, 0, 0.6);
}
::v-deep .ya-tabs-box {
  margin-bottom: 0px !important;
}
</style>
