<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-11-01 09:10:04
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-08-18 17:30:47
 * @FilePath: \yuan-huoling-browser\src\views\digitalAssets\hostAssets.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE

-->
<template>
  <div>
    <YaPageContent
    :pageCache="true"
      :tableData="tableData"
      :tableColumns="column"
      :buttons="buttons"
      @init="initData"
      @tableBtnClick="tableBtnClick"
      @selectionChange="handleSelectionChange"
      :total="total"
      @sortChange="handleSortChange"
    >
      <template v-slot:state="{ item }">
        <div v-if="item.assetStatus == 'survive'" class="ya-status">
          <img
            src="../../../assets/imgs/cunhuo.png"
            alt=""
            class="ya-img"
          /><span class="ya-alive">存活</span>
        </div>
        <div v-else-if="item.assetStatus == 'offLine'" class="ya-status">
          <img
            src="../../../assets/imgs/lixian.png"
            alt=""
            class="ya-img"
          /><span class="ya-offline">离线</span>
        </div>
        <div v-else-if="item.assetStatus == 'abnormal'" class="ya-status">
          <img
            src="../../../assets/imgs/yichang.png"
            alt=""
            class="ya-img"
          /><span class="ya-abnormal">异常</span>
        </div>
        <div v-else>-</div>
      </template>
      <template v-slot:level="{ item }">
        <div v-if="item.riskLevel == 'low'" class="ya-status">
          <img src="../../../assets/imgs/diwei.png" alt="" class="ya-img" />
          <span>低危</span>
        </div>
        <div v-else-if="item.riskLevel == 'middle'" class="ya-status">
          <img src="../../../assets/imgs/middle.png" alt="" class="ya-img" />
          <span>中危</span>
        </div>
        <div v-else-if="item.riskLevel == 'high'" class="ya-status">
          <img src="../../../assets/imgs/gaowei.png" alt="" class="ya-img" />
          <span>高危</span>
        </div>
        <div v-else-if="item.riskLevel == 'safe'" class="ya-status">
          <img src="../../../assets/imgs/ssafe.png" alt="" class="ya-img" />
          <span>安全</span>
        </div>
        <div v-else-if="item.riskLevel == 'unknown'" class="ya-status">
          <img
            src="../../../assets/imgs/sunknow.png"
            alt=""
            class="ya-img"
          /><span>未知</span>
        </div>
        <div v-else>-</div>
      </template>
    </YaPageContent>
    <YaDialogForm
      v-if="dialogProps.showDialog"
      :dialogProps="dialogProps"
      :formColumns="formColumns"
      @submit="handleExportSubmit"
    >
    </YaDialogForm>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive,  onMounted } from 'vue';
import { usePermissions } from '../../../composables/usePermissions';
import { useRouter } from 'vue-router';
import { yaMessage } from '../../../utils/message';
import { getDictList, downLoadFile } from '../../../utils/utils';
import {
  queryWebAssets,
  batchExp,
  addDataExp,
} from '../../../api/digitalAssets/networkAssets/webAssets';
import { getDeptData } from '../../../api/digitalAssets/networkAssets/hostAssets';
const router = useRouter();
const { permissionsButtons } = usePermissions();
//弹框的文件类型
const fileTypeArr = ref([]);
//网络域
const networkAreaArr = ref([]);
//所属部门
const deptIdArr = ref([]);
//数据总条数
const total = ref(0);

// 列表的数据
let tableData = ref([]);

//表格标题的字段
const column: any[] = reactive([
  {
    type: 'selection',
    width: '65px',
  },
  {
    prop: 'urlLink',
    label: 'URL地址',
    minWidth: '150px',
    search: true,
    type: 'input',
  },
  {
    prop: 'ipv4',
    label: 'IPv4',
    minWidth: '160px',
    // sortable: "custom",
  },
  {
    prop: 'ipv6',
    label: 'IPv6',
    minWidth: '160px',
  },
  {
    prop: 'target',
    type: 'input',
    label: '资产IP',
    isType: 'ipv4',
    customType: 'ipv4',
    search: true,
    tableHide: true,
  },
  {
    prop: 'port',
    label: '端口',
    minWidth: '100px',
    isType: 'port',
    customType: 'port',
    search: true,
    type: 'input',
  },
  {
    prop: 'domain',
    label: '域名',
    minWidth: '150px',
    search: true,
    type: 'input',
  },
  {
    prop: 'name',
    label: '资产名称',
    minWidth: '150px',
    search: true,
    type: 'input',
  },
  {
    prop: 'networkAreaName',
    label: '网络域',
    minWidth: '110px',
  },
  {
    prop: 'networkAreaCodeSet',
    type: 'select',
    label: '网络域',
    options: networkAreaArr,
    search: true,
    tableHide: true,
  },
  // {
  //   prop: "assetTypeName",
  //   label: "资产类型",
  //   minWidth: "150px",
  // },
  // {
  //   prop: "assetStatus",
  //   label: "资产状态",
  //   slotName: "state",
  //   width: "110px",
  // },
  // {
  //   prop: "riskLevel",
  //   label: "风险等级",
  //   slotName: "level",
  //   width: "110px",
  // },
  // {
  //   prop: "assetTagNameSet",
  //   label: "资产标签",
  //   slotName: "tag",
  //   minWidth: "280px",
  // },
  {
    prop: 'deptName',
    label: '所属部门',
    minWidth: '120px',
  },
  {
    prop: 'gmtModified',
    label: '更新时间',
    width: '190px',
  },
  {
    prop: 'deptIdSet',
    type: 'select',
    label: '所属部门',
    multiple: true,
    options: deptIdArr,
    collapseTags: true,
    clearable: true,
    search: true,
    tableHide: true,
  },
  {
    prop: 'findTime',
    type: 'daterange',
    label: '更新时间',
    valueFormat: 'YYYY-MM-DD',
    startPlaceholder: '开始时间',
    endPlaceholder: '结束时间',
    search: true,
    tableHide: true,
  },
  {
    prop: 'oparation',
    label: '操作',
    width: '60px',
    fixed: 'right',
    buttons: [
      {
        title:'详情',
        icon: 'src/assets/imgs/do.png',
        eventName: 'detail',
        hide: () => {
          return bottomData.has(20009);
        },
      },
    ],
  },
]);
// 可以搜索的条件
const sortData = ref({
  column: '',
  asc: null,
});
//表格中选中复选框的数据
let selectData = ref([]);
//按钮数据
let bottomData: any = new Map();
//左侧按钮的数据
let buttons: any = ref([]);
onMounted(() => {
  permissionsButtons.map((item) => {
    bottomData.set(item.menuId, item);
  });
  // 操作处宽度的自适应
  column.length = bottomData.has(20009) ? column.length : column.length - 1;
  getButton();
  initDict();
});

// 获取列表数据 start
const initData = (data?) => {
  let _data = JSON.parse(JSON.stringify(data.value));
  if (_data.findTime) {
    _data.modifiedTimeStart = _data.findTime[0];
    _data.modifiedTimeEnd = _data.findTime[1];
    delete _data.findTime;
  }
    _data.assetTypeSet = _data.assetTypeSet?.toString()||[];
    _data.deptIdSet = _data.deptIdSet?.toString()||[];
  allRequestData.value.request = { ..._data };
  queryWebAssets(_data).then((res) => {
    const { data, code } = res;
    if (code == 200) {
      tableData.value = data.records || [];
      total.value = data.total;
    }
  });
};
// 排序事件
const handleSortChange = (data) => {
  sortData.value.column = 'ip';
  sortData.value.asc = data.asc;
  initData();
};



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

// 让批量导出事件执行
const tableBtnClick = (btn, row) => {
  let { eventName } = btn || {};
  switch (eventName) {
    case 'detail':
      router.push({
        path: './webAssets/bdetail',
      });
      break;
    case 'export':
      batchExport('part');
      break;
    case 'allExport':
      batchExport('all');
      break;
  }
};
//批量导出
let getButton = () => {
  if (bottomData.has(200012)) {
    buttons.value.push({
      custom: 'dropdown',
      title: bottomData.get(200012).label,
      customData: [
        {
          name: '批量' + bottomData.get(200012).label,
          eventName: 'export',
        },
        {
          name: '全部' + bottomData.get(200012).label,
          eventName: 'allExport',
        },
      ],
    });
  }
};

//弹框的form数据
const formColumns = ref([
  {
    key: 'fileType',
    type: 'select',
    label: '选择格式',
    col: 24,
    options: fileTypeArr,
    rules:true
  },
]);
//弹窗是否显示
let dialogProps = reactive({
  showDialog: false,
  title: '选择格式',
  size: '',
});

const batchCode: any = ref({});
const allRequestData: any = ref({});
let exportType = ref(true);
// 打开导出弹窗
const batchExport = function (type) {
  if (tableData.value && tableData.value.length != 0) {
    if (type == 'part') {
      if (selectData.value && selectData.value.length == 0) {
        yaMessage('请选择要批量导出的数据', 'warning');
        return;
      } else {
        exportType.value = true;
        dialogProps.showDialog = true;
        batchCode.value.codeSet = selectData.value?.map((item) => item.code);
        batchCode.value.fileName = '应用资产';
      }
    } else {
      exportType.value = false;
      dialogProps.showDialog = true;
      allRequestData.value.fileName = '应用资产';
    }
  }
};
// 导出确定按钮
const handleExportSubmit = (obj, resolve) => {
  let query = exportType.value ? batchExp : addDataExp;
  let params = exportType.value ? batchCode.value : allRequestData.value;
  params.fileType = obj.fileType;
  query(params)
    .then((res) => {
      downLoadFile(res, '主机资产', obj.fileType);
      yaMessage('导出成功', 'success');
      dialogProps.showDialog = false;
    })
    .finally(() => {
      resolve();
    });
};

//字典
const initDict = async () => {
  fileTypeArr.value = (await getDictList('excelType')) as [];
  networkAreaArr.value = (await getDictList('networkArea')) as [];
  getDeptData().then((res) => {
    const { data = {} } = res;
    data.forEach((item) => {
      let obj = ref({});
      obj.value.label = item.deptName;
      obj.value.value = item.id;
      deptIdArr.value.push(obj.value);
    });
  });
};
</script>
<style lang="scss" scoped>
.ya-ipv {
  color: #0095ff;
  cursor: pointer;
}
img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.ya-img {
  margin-right: 8px;
}
.ya-tag {
  display: flex;
  height: 100%;
  align-items: center;
  border: none;
  padding: 0;
  background-color: transparent;
}
.ya-tag1,
.ya-tag2,
.ya-tag3,
.ya-num {
  border-radius: 2px;
  line-height: 24px;
  padding: 2px 8px;
}
.ya-tag1 {
  background: rgba(#3cd597, 0.1);
  color: #3cd597;
  margin-right: 12px;
}
.ya-tag2 {
  background: #fdf6ec;
  color: #da8302;
  margin-right: 12px;
}
.ya-tag3 {
  background: #ecf5ff;
  color: #0079eb;
  margin-right: 12px;
}
.ya-num {
  background: rgba(0, 149, 255, 0.12);
  color: #0095ff;
}
.ya-alive {
  color: #55cd79;
}
.ya-offline {
  color: #afafaf;
}
.ya-abnormal {
  color: #f99c6a;
}
.ya-cursor {
  cursor: pointer;
}
.ya-status {
  display: flex;
  align-items: center;
}
</style>
