<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2022-11-05 09:12:57
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-07-11 19:50:10
 * @FilePath: \yuan-huoling-browser\src\views\digitalAssets\networkAssets\webAssets\adetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yaBox">
    <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-else-if="headerObj.assetStatus == 'middle'"
                >
                  {{ headerObj.ipv4 || "-" }} / {{ headerObj.ipv6 || "-" }}
                </div>
                <div
                  class="ya-ipv-low"
                  v-else-if="headerObj.riskLevel == 'low'"
                >
                  {{ headerObj.ipv4 || "-" }} / {{ headerObj.ipv6 || "-" }}
                </div>
                <div
                  class="ya-ipv-safe"
                  v-else-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">URL地址</div>
            <div class="ya-header-bottom-item-bottom" style="max-width: 131px">
              <CustomTooltip
                :show="true"
                :text="headerObj.urlLink || '-'"
                placement="top"
                hideAfter="200"
              >
                {{ headerObj.urlLink }}
              </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.port || "-" }}
            </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
                :show="true"
                :text="headerObj.domain || '-'"
                placement="top"
                hideAfter="200"
              >
                {{ 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"
                :text="headerObj.name || '-'"
                placement="top"
                hideAfter="200"
              >
                {{ 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">
              <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 || 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>
                <template v-if="headerObj.assetTagNameSet.length - 3 > 0">
                  <div
                    class="ya-num"
                    v-for="(item, index) in headerObj.assetTagNameSet.slice(3)"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </template>
              </div>
              <div v-else>-</div>
            </div>
          </div>
          <div class="ya-header-bottom-item">
            <div class="ya-header-bottom-item-top item-top1">所属部门</div>
            <div class="ya-header-bottom-item-bottom">
              {{ headerObj.deptName || "-" }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="yaContent">
      <div class="ya-content-item">
        <yaTableList
          :column="assetsDetailTitle"
          title="资产详情信息"
          :type="assetDetailDataList.assetData.type"
        >
          <template v-slot:address="{ item }">
            <div class="ya-address" v-if="item.content">
              <img src="../../../../assets/image/icon-position.png" alt="" />{{
                item.content
              }}
            </div>
            <div v-else>-</div>
          </template>
        </yaTableList>
      </div>
      <div class="ya-content-item">
        <yaTableList
          :column="dataBaseTitle"
          title="网站信息"
          :data="netWorkInfo"
          :type="networkInfoList.networkInfo.type"
          :page="pageIndex"
          :pageSize="pageSize"
          :handlePageSizeChange="handlePageSizeChange"
          :handlePageChange="handlePageChange"
          :total="total"
        >
          <template v-slot:siteTitle="{ item }">
            <div class="ya-siteTitle" v-if="item.title">
              <span> {{ item.title }}</span>
            </div>
            <div v-else>-</div>
          </template>
          <template v-slot:language="{ item }">
            <div class="ya-tag" v-if="item.devLang && item.devLang.length > 0">
              <div class="ya-tag1" v-if="item.devLang || item.devLang[0]">
                {{ item.devLang[0] }}
              </div>
              <div class="ya-tag2" v-if="item.devLang[1]">
                {{ item.devLang[1] }}
              </div>
              <div class="ya-tag3" v-if="item.devLang[2]">
                {{ item.devLang[2] }}
              </div>
              <div class="ya-num" v-if="item.devLang.length - 3 > 0">
                + {{ item.devLang.length - 3 }}
              </div>
            </div>
            <div v-else>-</div>
          </template>
          <template v-slot:frontEndFrame="{ item }">
            <div
              class="ya-tag"
              v-if="item.frontEndFrame && item.frontEndFrame.length > 0"
            >
              <div
                class="ya-tag1"
                v-if="item.frontEndFrame || item.frontEndFrame[0]"
              >
                {{ item.frontEndFrame[0] }}
              </div>
              <div class="ya-tag2" v-if="item.frontEndFrame[1]">
                {{ item.frontEndFrame[1] }}
              </div>
              <div class="ya-tag3" v-if="item.frontEndFrame[2]">
                {{ item.frontEndFrame[2] }}
              </div>
              <div class="ya-num" v-if="item.frontEndFrame.length - 3 > 0">
                + {{ item.frontEndFrame.length - 3 }}
              </div>
            </div>
            <div v-else>-</div>
          </template>
          <template v-slot:component="{ item }">
            <div
              class="ya-tag"
              v-if="item.component && item.component.length > 0"
            >
              <div class="ya-tag1" v-if="item.component || item.component[0]">
                {{ item.component[0] }}
              </div>
              <div class="ya-tag2" v-if="item.component[1]">
                {{ item.component[1] }}
              </div>
              <div class="ya-tag3" v-if="item.component[2]">
                {{ item.component[2] }}
              </div>
              <div class="ya-num" v-if="item.component.length - 3 > 0">
                + {{ item.component.length - 3 }}
              </div>
            </div>
            <div v-else>-</div>
          </template>
        </yaTableList>
      </div>
      <div
        class="ya-content-item"
        id="ya-detail"
        v-if="globSettingData.system !== 'base'"
      >
        <div class="ya-content-item-top">
          风险详情(共{{ (riskDetailObj && riskDetailObj.length) || 0 }}条)
          <div class="ya-img">
            <el-icon style="font-size: 12px; color: #333"
              ><ArrowUpBold
                v-show="riskDetail"
                @click="riskDetail = !riskDetail" /><ArrowDownBold
                v-show="!riskDetail"
                @click="riskDetail = !riskDetail"
            /></el-icon>
          </div>
        </div>
        <div class="ya-content-item-bottomRisk" v-show="riskDetail">
          <div
            class="ya-content-item-bottom-item"
            v-for="(item, index) in riskDetailObj"
            :key="index"
          >
            <div class="ya-item-top">
              <img
                src="../../../../assets/imgs/red.png"
                alt=""
                v-if="item.level == 1"
              />
              <img
                src="../../../../assets/imgs/orange.png"
                alt=""
                v-else-if="item.level == 2"
              />
              <img
                src="../../../../assets/imgs/blue.png"
                alt=""
                v-else-if="item.level == 3"
              />
              <img
                src="../../../../assets/imgs/green.png"
                alt=""
                v-else-if="item.level == 4"
              />
              <img src="../../../../assets/imgs/gray.png" alt="" v-else />
              {{ item.name || "-" }}
            </div>
            <div class="ya-item-center">
              <span>{{ item.classification || "-" }}</span>
              <span>{{ item.port || "-" }}</span
              ><span>{{ item.handleStatusStr || "-" }}</span
              ><span>{{ item.findTime || "-" }}</span>
            </div>
            <div class="ya-item-bottom">
              <span v-if="item.handleStatus == 1" class="ya-down">
                <svg
                  style="vertical-align: middle"
                  width="15px"
                  height="15px"
                  viewBox="0 0 15 15"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <g
                    id="页面-1"
                    stroke="none"
                    stroke-width="1"
                    fill="none"
                    fill-rule="evenodd"
                  >
                    <g
                      id="画板"
                      transform="translate(-526.000000, -315.000000)"
                      fill="#047BEB"
                      fill-rule="nonzero"
                    >
                      <g
                        id="路径"
                        transform="translate(528.000000, 317.000000)"
                      >
                        <path
                          d="M6.12152778,0 C6.35739939,0 6.54861111,0.191211721 6.54861111,0.427083333 C6.54861111,0.636746988 6.39753024,0.811123816 6.19829655,0.847285782 L6.12152778,0.854166667 L1.28125,0.854166667 C1.07158742,0.854166667 0.897209756,1.00524849 0.861047591,1.20448155 L0.854166667,1.28125 L0.854166667,7.54513889 C0.854166667,7.75480877 1.00524373,7.92918076 1.20447996,7.96534157 L1.28125,7.97222222 L9.82291667,7.97222222 C10.0325919,7.97222222 10.2069597,7.82115165 10.2431195,7.62191109 L10.25,7.54513889 L10.25,5.83680556 C10.25,5.60093394 10.4412117,5.40972222 10.6770833,5.40972222 C10.886747,5.40972222 11.0611238,5.56080309 11.0972858,5.76003679 L11.1041667,5.83680556 L11.1041667,7.54513889 C11.1041667,8.21114158 10.5960446,8.75844024 9.94631163,8.82052381 L9.82291667,8.82638889 L1.28125,8.82638889 C0.615257113,8.82638889 0.0679497988,8.31826348 0.00586517663,7.66853325 L0,7.54513889 L0,1.28125 C0,0.615260705 0.508134643,0.0679502214 1.15785726,0.00586521391 L1.28125,0 L6.12152778,0 Z"
                        ></path>
                        <path
                          d="M5.59375,7.97222222 C5.82386865,7.97222222 6.01525785,8.12330309 6.05494781,8.32253679 L6.0625,8.39930556 L6.0625,10.6770833 C6.0625,10.9129549 5.85263348,11.1041667 5.59375,11.1041667 C5.36363135,11.1041667 5.17224215,10.9530858 5.13255219,10.7538521 L5.125,10.6770833 L5.125,8.39930556 C5.125,8.16343394 5.33486652,7.97222222 5.59375,7.97222222 Z"
                        ></path>
                        <path
                          d="M8.39930556,10.25 C8.63517717,10.25 8.82638889,10.4598665 8.82638889,10.71875 C8.82638889,10.9488686 8.67530802,11.1402578 8.47607432,11.1799478 L8.39930556,11.1875 L2.70486111,11.1875 C2.4689895,11.1875 2.27777778,10.9776335 2.27777778,10.71875 C2.27777778,10.4886314 2.42885864,10.2972422 2.62809234,10.2575522 L2.70486111,10.25 L8.39930556,10.25 Z"
                        ></path>
                        <path
                          d="M10.3750898,2.11814537 C10.5418762,1.95135895 10.8122904,1.95135895 10.9790769,2.11814537 C11.125015,2.26408348 11.1432572,2.48936163 11.0338036,2.65513475 L10.9790769,2.72213241 L9.55546574,4.14574352 C9.40952763,4.29168164 9.18424949,4.3099239 9.01847636,4.20047031 L8.9514787,4.14574352 L7.52786759,2.72213241 C7.36108117,2.55534599 7.36108117,2.28493178 7.52786759,2.11814537 C7.6738057,1.97220725 7.89908385,1.95396499 8.06485697,2.06341857 L8.13185463,2.11814537 L9.25301667,3.23968333 L10.3750898,2.11814537 Z"
                        ></path>
                        <path
                          d="M9.24583333,0 C9.47595198,0 9.66734118,0.115705822 9.70703114,0.268289663 L9.71458333,0.3270833 L9.71458333,2.9437497 C9.71458333,3.12439282 9.50471681,3.270833 9.24583333,3.270833 C9.01571469,3.270833 8.82432549,3.15512718 8.78463552,3.00254334 L8.77708333,2.9437497 L8.77708333,0.3270833 C8.77708333,0.146440181 8.98694986,0 9.24583333,0 Z"
                        ></path>
                      </g>
                    </g>
                  </g></svg
                ><span class="ya-hand" @click="issuingRisk(item)">
                  下发</span
                ></span
              ><span class="ya-detail ya-hand" @click="goToDetail(item)"
                >查看详情</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  getWebInfo,
  disposalAssets,
  getRiskDetailData,
  issuedRisk,
} from "../../../../api/digitalAssets/networkAssets/webAssets";
import yaTableList from "../../../../components/table/table.vue";
import { useRoute, useRouter } from "vue-router";
import { assetDetailDataList, networkInfoList } from "./data";
import { ElIcon } from "element-plus";
import { ArrowDownBold, ArrowUpBold } from "@element-plus/icons-vue";
import { getUserInfoCache } from "../../../../utils/auth/user";
import { yaMessage } from "../../../../utils/message";
import { globSettingData } from "@/utils/env";
const route = useRoute();
const router = useRouter();
let perforceTest = ref(true);
let riskDetail = ref(true);
//资产详情的数据
const assetsDetailTitle: any = ref(
  JSON.parse(JSON.stringify(assetDetailDataList.assetData.column))
);
const assetsDetailList: any = ref({});
const scanData = ref([]);
//网站信息的数据
const dataBaseTitle: any = ref(
  JSON.parse(JSON.stringify(networkInfoList.networkInfo.column))
);
//通过路由传递来的数据
const headerObj: any = ref({});
//处理资产详情表格的内容区
const getAssetsDetail = function () {
  let params = { appCode: headerObj.value.code };
  disposalAssets(params).then((res) => {
    const { code, data = {} } = res;
    if (code == 200) {
      assetsDetailList.value = (data && data.feature) || [];
      assetsDetailList.value.organizationName = data && data.organizationName;
      assetsDetailList.value.principalUser = data && data.principalUser;
      assetsDetailList.value.principalUserPhone =
        data && data.principalUserPhone;
      assetsDetailList.value.positionName = data && data.positionName;
      assetsDetailList.value.isRecord = data && data.isRecord;
      assetsDetailList.value.service = data && data.service;
      assetsDetailList.value.sourceTypeName = data && data.sourceTypeName;
      assetsDetailTitle.value.forEach((item) => {
        for (let child in assetsDetailList.value) {
          if (item.id == child) {
            if (typeof assetsDetailList.value[child] == "boolean") {
              assetsDetailList.value[child] =
                assetsDetailList.value[child] === true ? "是" : "否";
            }
            item.content = assetsDetailList.value[child];
          }
        }
      });
    }
  });
};
//页码
let pageIndex = ref(1);
//页容量
let pageSize = ref(10);
//数据的总条数
let total = ref(0);
//页码变化的事件
const handlePageChange = (val) => {
  pageIndex.value = val;
  getNetworkInfoList();
};
//页容量变化的事件
const handlePageSizeChange = (val) => {
  pageSize.value = val;
  getNetworkInfoList();
};
//网站信息的表单数据
const netWorkInfo: any = ref([]);
//网站信息
const getNetworkInfoList = function () {
  let params = {
    code: headerObj.value.code, //
    pageSize: pageSize.value,
    pageIndex: pageIndex.value,
  };
  getWebInfo(params).then((res) => {
    netWorkInfo.value = (res && res.records) || [];
    total.value = res && res.total;
  });
};
interface UserInfo {
  userAuthentication: {
    principal: {
      roleId: number;
    };
  };
}
const userinfo: UserInfo = (getUserInfoCache() || {}) as UserInfo;
const roleid = ref(Number(userinfo.userAuthentication.principal.roleId));
//下发风险
const issuingRisk = (val) => {
  let params = ref({});
  params.value = {
    flawId: val.id,
    userId: roleid.value,
    detail: "111",
  };
  issuedRisk(params.value).then((res) => {
    const { code, message } = res;
    if (code == 200) {
      yaMessage(message, "success");
      getRiskDetailEvent();
    }
  });
};
//获取风险详情的数据
const riskDetailObj: any = ref([]);
const getRiskDetailEvent = () => {
  const params = {
    appCode: headerObj.value.code,
  };
  getRiskDetailData(params).then((res) => {
    const { code, data = [] } = res || {};
    riskDetailObj.value = data;
  });
};
onMounted(() => {
  headerObj.value =
    JSON.parse(localStorage.getItem("YA_WEB_ASSET_DATA") as string) || {};
  getAssetsDetail();
  getNetworkInfoList();
  globSettingData.system !== "base" && getRiskDetailEvent();
});
const goToDetail = (val) => {
  localStorage.setItem("YA_VUL_DATA", JSON.stringify(val));
  router.push({
    path: "../../assetRisk/hostVulnerability/fdetail",
  });
};
</script>
<style lang="scss" scoped>
@import "../../../../style/detailHeader.scss";
.yaBox {
  margin-bottom: 50px;
  background-color: #f3f5f6;
  overflow: auto;
  .yaContent {
    .ya-content-item {
      width: 100%;
      background: #ffffff;
      border-radius: 4px;
      padding: 22px;
      box-sizing: border-box;
      margin-bottom: 30px;
      .ya-address {
        display: flex;
        align-items: center;
        img {
          width: 20px;
          height: 20px;
          margin-right: 6px;
        }
      }
      .ya-siteTitle span {
        color: #0079eb;
        text-decoration: underline;
        cursor: pointer;
      }
      .ya-content-item-top {
        font-size: 20px;
        font-weight: 500;
        color: #333333;
        line-height: 22px;
        margin-bottom: 22px;
        display: flex;
        .ya-img {
          width: 22px;
          height: 22px;
          background: #f3f5f6;
          border-radius: 4px;
          border: 1px solid #d1dae2;
          margin-left: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .ya-content-item-bottom {
        width: 100%;
        border-radius: 2px;
        display: flex;
        justify-content: space-between;
        .ya-performance-item {
          width: 32%;
          height: 288px;
          .custom-row-item {
            height: 100%;
          }
          .ya-card {
            padding: 0px;
          }
        }
      }
    }

    #ya-detail {
      .ya-content-item-bottomRisk {
        border: none;
        display: flex;
        flex-wrap: wrap;
      }
    }
    .ya-content-item-bottom-item:not(:nth-child(3n)) {
      margin-right: 1%;
    }
    .ya-content-item-bottom-item {
      width: 32%;
      height: 104px;
      border-radius: 4px;
      border: 1px solid #dfe3e7;
      margin-bottom: 18px;
      padding: 16px;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 400;
      .ya-item-top {
        color: #333333;
        line-height: 20px;
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
          margin-right: 6px;
        }
      }
      .ya-item-center {
        color: #a3aeba;
        line-height: 20px;
        margin-top: 8px;
        padding-left: 15px;
        span {
          padding: 0px 9px;
          position: relative;
        }
        span::after {
          content: "";
          width: 1px;
          height: 13px;
          display: inline-block;
          background-color: #d1dae2;
          margin-left: 9px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
        span:last-child::after {
          display: none;
        }
      }
      .ya-item-bottom {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #047beb;
        line-height: 17px;
        margin-top: 8px;
        padding-left: 25px;
        display: flex;
        .ya-down {
          display: inline-flex;
          align-items: center;
        }
        img {
          width: 16px;
          height: 16px;
          vertical-align: middle;
          margin-right: 2px;
        }
        .ya-detail {
          border-bottom: 1px solid #047beb;
        }
        .ya-hand {
          cursor: pointer;
          margin-right: 23px;
        }
      }
    }
  }
}
.ya-tag {
  display: flex;
  height: 100%;
  align-items: center;
  border: none;
  background-color: transparent;
  padding: 0px;
}
.ya-tag1,
.ya-tag2,
.ya-tag3,
.ya-num {
  border-radius: 2px;
  line-height: 24px;
  padding: 2px 8px;
}
.ya-tag1 {
  background: #fdf6ec;
  color: #da8302;
  margin-right: 7px;
}
.ya-tag2 {
  background: #ecf5ff;
  color: #0079eb;
  margin-right: 7px;
}
.ya-tag3 {
  background: rgba(#3cd597, 0.1);
  color: #3cd597;
  margin-right: 7px;
}
.ya-num {
  background: rgba(0, 149, 255, 0.12);
  color: #0095ff;
}
</style>
