<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-11-03 14:44:51
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-08-18 10:58:25
 * @FilePath: \yuan-huoling-browser\src\views\digitalAssets\networkAssets\hostAsset\appl.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="ya-header">
    <div class="ya-header-bottom">
      <div class="ya-header-row">
        <div class="ya-header-bottom-item ya-box">
          <img
            src="../../../../assets/imgs/dagao.png"
            alt=""
            v-if="headerObj.riskLevel == 'high'"
          />
          <img
            src="../../../../assets/imgs/dazhong.png"
            v-else-if="headerObj.riskLevel == 'middle'"
            alt=""
          />
          <img
            src="../../../../assets/imgs/dadi.png"
            alt=""
            v-else-if="headerObj.riskLevel == 'low'"
          />
          <img
            src="../../../../assets/imgs/safe.png"
            alt=""
            v-else-if="headerObj.riskLevel == 'safe'"
          />
          <img src="../../../../assets/imgs/unknow.png" alt="" v-else />
          <div class="ya-img-right">
            <div class="ya-header-bottom-item-top">ipv4/ipv6</div>
            <div class="ya-header-bottom-item-bottom">
              <div class="ya-ipv-high" v-if="headerObj.riskLevel == 'high'">
                {{ headerObj.ipv4 || '-' }} / {{ headerObj.ipv6 || '-' }}
              </div>
              <div class="ya-ipv-middle" v-if="headerObj.riskLevel == 'middle'">
                {{ headerObj.ipv4 || '-' }} / {{ headerObj.ipv6 || '-' }}
              </div>
              <div class="ya-ipv-low" v-if="headerObj.riskLevel == 'low'">
                {{ headerObj.ipv4 || '-' }} / {{ headerObj.ipv6 || '-' }}
              </div>
              <div class="ya-ipv-safe" v-if="headerObj.riskLevel == 'safe'">
                {{ headerObj.ipv4 || '-' }} / {{ headerObj.ipv6 || '-' }}
              </div>
              <div class="ya-ipv-unknown" v-else>
                {{ headerObj.ipv4 || '-' }} / {{ headerObj.ipv6 || '-' }}
              </div>
            </div>
          </div>
        </div>
        <div class="ya-header-bottom-item">
          <div class="ya-header-bottom-item-top">域名</div>
          <div class="ya-header-bottom-item-bottom" style="max-width: 135px">
            <CustomTooltip
              placement="top"
              :show="true"
              hideAfter="200"
              :text="headerObj.domain || '-'"
            >
            </CustomTooltip>
          </div>
        </div>
        <div class="ya-header-bottom-item">
          <div class="ya-header-bottom-item-top">资产名称</div>
          <div class="ya-header-bottom-item-bottom" style="max-width: 112px">
            <CustomTooltip
              :show="true"
              hideAfter="200"
              placement="top"
              trigger="hover"
              :text="headerObj.name || '-'"
            >
            </CustomTooltip>
          </div>
        </div>
        <div class="ya-header-bottom-item">
          <div class="ya-header-bottom-item-top">网络域</div>
          <div class="ya-header-bottom-item-bottom">
            {{ headerObj.networkAreaName || '-' }}
          </div>
        </div>
        <div class="ya-header-bottom-item">
          <div class="ya-header-bottom-item-top">资产类型</div>
          <div class="ya-header-bottom-item-bottom">
            {{ headerObj.assetTypeName || '-' }}
          </div>
        </div>
        <div class="ya-header-bottom-item">
          <div class="ya-header-bottom-item-top">操作系统</div>
          <div class="ya-header-bottom-item-bottom">
            {{ headerObj.os || '-' }}
          </div>
        </div>
        <div class="ya-header-bottom-item">
          <div class="ya-header-bottom-item-top">采集方式</div>
          <div class="ya-header-bottom-item-bottom">
            {{ headerObj.gatherType || '-' }}
          </div>
        </div>
        <div class="ya-header-bottom-item">
          <div class="ya-header-bottom-item-top">资产状态</div>
          <div class="ya-header-bottom-item-bottom">
            <div class="ya-alive" v-if="headerObj.assetStatus == 'survive'">
              存活
            </div>
            <div
              class="ya-abnormal"
              v-else-if="headerObj.assetStatus == 'abnormal'"
            >
              异常
            </div>
            <div
              class="ya-offline"
              v-else-if="headerObj.assetStatus == 'offLine'"
            >
              离线
            </div>
            <div v-else>-</div>
          </div>
        </div>
        <div class="ya-header-bottom-item">
          <div class="ya-header-bottom-item-top">资产标签</div>
          <div class="ya-header-bottom-item-bottom">
            <div
              class="ya-tag"
              v-if="
                headerObj.assetTagNameSet &&
                headerObj.assetTagNameSet.length > 0
              "
            >
              <div class="ya-tag1" v-if="headerObj.assetTagNameSet[0]">
                {{ headerObj.assetTagNameSet[0] }}
              </div>
              <div class="ya-tag2" v-if="headerObj.assetTagNameSet[1]">
                {{ headerObj.assetTagNameSet[1] }}
              </div>
              <div class="ya-tag3" v-if="headerObj.assetTagNameSet[2]">
                {{ headerObj.assetTagNameSet[2] }}
              </div>
              <div
                class="ya-num"
                v-if="headerObj.assetTagNameSet.length - 3 > 0"
              >
                + {{ headerObj.assetTagNameSet.length - 3 }}
              </div>
            </div>
            <div v-else>-</div>
          </div>
        </div>
        <div class="ya-header-bottom-item">
          <div class="ya-header-bottom-item-top">所属部门</div>
          <div class="ya-header-bottom-item-bottom">
            {{ headerObj.deptName || '-' }}
          </div>
        </div>
      </div>
    </div>
    <YaPageContent
      :tableColumns="column"
      :tableData="tableData"
      :buttons="buttons"
      @init="initData"
      @selectionChange="handleSelectionChange"
      @tableBtnClick="tableBtnClick"
      :total="total"
    >
      <template v-slot:state="{ item }">
        <div v-if="item.assetStatus == 'survive'">
          <img src="../../../../assets/imgs/cunhuo.png" alt="" class="ya-img" />
          <span class="ya-alive">存活</span>
        </div>
        <div v-else-if="item.assetStatus == 'offLine'">
          <img src="../../../../assets/imgs/lixian.png" alt="" class="ya-img" />
          <span class="ya-offline">离线</span>
        </div>
        <div v-else-if="item.assetStatus == 'abnormal'">
          <img src="../../../../assets/imgs/yichang.png" alt="" class="ya-img" />
          <span class="ya-abnormal">异常</span>
        </div>
      </template>
      <template v-slot:level="{ item }">
        <div v-if="item.riskLevel == 'low'">
          <img src="../../../../assets/imgs/diwei.png" alt="" class="ya-img" />
          <span>低危</span>
        </div>
        <div v-else-if="item.riskLevel == 'middle'">
          <img src="../../../../assets/imgs/middle.png" alt="" class="ya-img" />
          <span>中危</span>
        </div>
        <div v-else-if="item.riskLevel == 'high'">
          <img src="../../../../assets/imgs/gaowei.png" alt="" class="ya-img" />
          <span>高危</span>
        </div>
        <div v-else-if="item.riskLevel == 'safe'">
          <img src="../../../../assets/imgs/ssafe.png" alt="" class="ya-img" />
          <span>安全</span>
        </div>
        <div v-else>
          <img src="../../../../assets/imgs/sunknow.png" alt="" class="ya-img" />
          <span>未知</span>
        </div>
      </template>
    </YaPageContent>
    <YaDialogForm
      v-if="dialogProps.showDialog"
      :dialogProps="dialogProps"
      :formColumns="formColumns"
      @submit="handleExportSubmit"
    >
    </YaDialogForm>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { usePermissions } from '../../../../composables/usePermissions';
import { getDictList, downLoadFile } from '@/utils/utils';
import { yaMessage } from '@/utils/message';
import {
  hostApplication,
  appBatchExport,
  appAllExport,
} from '../../../../api/digitalAssets/networkAssets/hostAssets';
import { handleGetIndex } from '../../../../utils/tools';
import { globSettingData } from '@/utils/env';
const { permissionsButtons } = usePermissions();
//头部通过路由传参过来的数据
const headerObj: any = ref({});
// 从后端获取来的列表区域的内容
let tableData = ref([]);
//左侧按钮
let buttons: any = ref([]);
let buttomData: any = ref([]);
//列表区域的表头
const column = reactive([
  {
    type: 'selection',
    width: '65px',
  },
  {
    prop: 'port',
    label: '端口',
    minWidth: '100px',
  },
  {
    prop: 'portStatus',
    label: '端口状态',
    minWidth: '120px',
  },
  {
    prop: 'service',
    label: '服务',
    minWidth: '80px',
  },
  {
    prop: 'url',
    label: '网址',
    minWidth: '80px',
  },
  {
    prop: 'assetStatus',
    label: '资产状态',
    slotName: 'state',
    width: '120px',
  },
  {
    prop: 'assetTypeName',
    label: '资产类型',
    minWidth: '80px',
  },
  {
    prop: 'riskLevel',
    label: '风险等级',
    slotName: 'level',
    width: '120px',
  },
  {
    prop: 'deptName',
    label: '所属部门',
    minWidth: '100px',
  },
  {
    prop: 'gmtModified',
    label: '更新时间',
    width: '190px',
  },
]);
//点击多选框选中的行的数据
let selectData = ref([]);
onMounted(() => {
  if (globSettingData.system === 'base') {
    const index = handleGetIndex(column, 'prop', 'riskLevel');
    column.splice(index, 1);
  }

  headerObj.value =
    JSON.parse(localStorage.getItem('YA_HOST_ASSET_DATA') as string) || {};
  headerObj.value.gatherType = '';
  headerObj.value.gatherTypeNameSet &&
    headerObj.value.gatherTypeNameSet.forEach((item) => {
      headerObj.value.gatherType += item + '/';
    });
  headerObj.value.gatherType = headerObj.value.gatherType.substring(
    0,
    headerObj.value.gatherType.length - 1
  );
  permissionsButtons.map((item) => {
    buttomData.value.push(item.label);
  });
  getButton();
  initDict();
});
// 获取列表数据
const initData = (data) => {
  let _data: any = { ...data };
  _data.hostCode = headerObj.value.code;
  hostApplication(_data).then((res) => {
    const { code, data = {} } = res;
    if (code == 200 && data) {
      tableData.value = data.records || [];
      total.value = data.total;
    }
  });
};
// 让批量删除事件执行
const tableBtnClick = (btn, row) => {
  let { eventName } = btn || {};
  switch (eventName) {
    case 'export':
      batchExport('part');
      break;
    case 'allExport':
      batchExport('all');
      break;
  }
};
//批量导出
let getButton = () => {
  buttons.value.push({
    custom: 'dropdown',
    title: '导出',
    customData: [
      {
        name: '批量导出',
        eventName: 'export',
      },
      {
        name: '全部导出',
        eventName: 'allExport',
      },
    ],
  });
};

//选中的行的信息
const handleSelectionChange = function (val) {
  selectData.value = val;
};

//弹窗是否显示
let dialogProps = reactive({
  showDialog: false,
  title: '选择格式',
  size: '',
});

const fileTypeArr = ref([]);
const initDict = async () => {
  fileTypeArr.value = (await getDictList('excelType')) as [];
};
//弹框的表单数据
const formColumns = ref([
  {
    key: 'fileType',
    type: 'select',
    label: '选择格式',
    col: 24,
    options: fileTypeArr,
    rules: true,
  },
]);
const batchCode: any = ref({});
let exportType = ref(true);
// 导出
const batchExport = function (type) {
  if (tableData.value.length != 0) {
    if (type == 'part') {
      if (selectData.value.length == 0) {
        yaMessage('请选择要批量导出的数据', 'warning');
        return;
      } else {
        exportType.value = true;
        dialogProps.showDialog = true;
        batchCode.value.codeSet = selectData.value?.map((item) => item.code);
      }
    } else {
      exportType.value = false;
      dialogProps.showDialog = true;
    }
  }
};

// 导出
const handleExportSubmit = (obj, resolve) => {
  let query = exportType.value ? appBatchExport : appAllExport;
  let params = exportType.value ? batchCode.value : {};
  params.fileType = obj.fileType;
  params.fileName = '主机资产';
  (!exportType.value) && (params.hostCode = headerObj.value.code);
  query(params).then((res) => {
    downLoadFile(res, '主机资产', obj.fileType);
    yaMessage('导出成功', 'success');
    dialogProps.showDialog = false;
  });
  // .finally(() => {
  //   resolve();
  // });
};
// 页码
const page = ref(1);
//总数居
const total = ref(0);
//页容量
const pageSize = ref(20);
//页容量变化
const sizeChange = function (val: number) {
  pageSize.value = val;
  page.value = 1;
  initData();
};
//页码变化
const currentChange = function (val: number) {
  page.value = val;
  initData();
};
</script>

<style lang="scss" scoped>
@import '@/style/detailHeader.scss';
img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.ya-img {
  margin-right: 8px;
}

.ya-alive {
  color: #55cd79;
}
.ya-offline {
  color: #afafaf;
}
.ya-abnormal {
  color: #f99c6a;
}
</style>
