<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import yaDetailBlock from '../components/yaDetailBlock.vue';
import Dialog from '../components/dialog.vue';
import { getByCode } from '../../../api/collection/infoCollection/inventory';
import { useRoute } from 'vue-router';
const route = useRoute();
const detailData = reactive([
  {
    key: 'assetType',
    label: '资产类型',
    value: '',
  },
  {
    key: 'positionName',
    label: '资产所在区域',
    value: '',
  },
  {
    key: 'importanceLevelName',
    label: '资产重要级别',
    value: '',
  },
  {
    key: 'port',
    label: '开放端口',
    value: '',
  },
  {
    key: 'serviceType',
    label: '服务类型',
    value: '',
  },
  {
    key: 'appMappingIp',
    label: '映射IP',
    value: '',
  },
  {
    key: 'loadBearingSoftwareName',
    label: '承载软件名称',
    value: '',
  },
  {
    key: 'loadBearingSoftwareVersion',
    label: '承载软件版本',
    value: '',
  },
  {
    key: 'webAccessUrl',
    label: 'Web应用访问地址',
    value: '',
  },
]);
//资产归属
const assetsColumn = reactive([
  {
    key: 'companyName',
    label: '所属单位',
    value: '',
  },
  {
    key: 'deptName',
    label: '所属部门',
    value: '',
  },
  {
    key: 'contactId',
    label: '负责人',
    value: '',
  },
  {
    key: 'contactMobile',
    label: '联系方式',
    value: '',
  },
  {
    key: 'contactEmail',
    label: '邮箱',
    value: '',
  },
  {
    key: 'isOwnName',
    label: '是否自有资产',
    value: '',
  },
  {
    key: 'businessSystem',
    label: '所属业务系统',
    value: '',
    col: 24,
  },
]);

//合规信息
const complianceInfoColumn = reactive([
  {
    summarizeLabel: '定级备案信息',
    col: 24,
  },
  {
    key: 'networkUnitType',
    label: '网络单元类型',
    value: '',
  },
  {
    key: 'ratingObjectName',
    label: '定级对象名称',
    value: '',
  },
  {
    key: 'importanceLevelName',
    label: '定级级别',
    value: '',
  },
  {
    summarizeLabel: '等保信息',
    col: 24,
  },
  {
    key: 'protectionLevelName',
    label: '等保级别',
    value: '',
    col: 24,
  },
]);

const dataList = ref({});
//数据初始化
const initData = () => {
  getByCode(route.query).then((res) => {
    const { code, data } = res || {};
    if (code == 200 && data) {
      dataList.value = { ...data.feature, ...data } || {};
      dataList.value.port = route.query.port;
      const assetTagNameSet = dataList.value.assetTagNameSet?.split(',') || [];
      dataList.value.tagData = assetTagNameSet?.map((item, index) => {
        return {
          code: index,
          name: item,
        };
      });
      detailData.map((item) => (item.value = dataList.value[item.key]));
      assetsColumn.map((item) => (item.value = dataList.value[item.key]));
      complianceInfoColumn.map(
        (item) => item.key && (item.value = dataList.value[item.key])
      );
    }
  });
};
onMounted(() => {
  initData();
});
</script>
<template>
  <div class="yaBox">
    <div class="ya-top">
      <img src="../../../assets/image/collection/img-1.png" alt="" />
      <div class="ya-right">
        <div class="ya-right-top">
          <div class="ya-right-top-left">
            <div class="ya-title">
              {{ dataList.hostAssetIp || '-' }}（ {{ dataList.name || '-' }}）
            </div>
            <div
              style="
                 {
                  position: relative;
                  z-index: 11;
                }
              "
            >
              <Dialog :list="dataList.tagData" />
            </div>
          </div>
          <div class="ya-right-top-right">
            <div class="ya-tag">{{ dataList.networkAreaCodeName || '-' }}</div>
          </div>
        </div>
        <div class="ya-right-bottom">
          <div class="ya-item" v-for="item in detailData" :key="item.key">
            <div class="ya-item-left">{{ item.label }}：</div>
            <div class="ya-item-right">
              <yaTooltip
                v-if="item.value"
                placement="top"
                trigger="hover"
                :enterable="false"
                :hide-after="0"
                :content="item.value"
                >{{ item.value }}</yaTooltip
              >
              <div v-else>-</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ya-block">
      <yaDetailBlock title="资产归属" :column="assetsColumn"></yaDetailBlock>
    </div>
    <div class="ya-block">
      <yaDetailBlock
        title="合规信息"
        :column="complianceInfoColumn"
      ></yaDetailBlock>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.yaBox {
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;

  .ya-top {
    padding: 24px;
    background: #ebf7ff;
    border-radius: 6px;
    display: flex;
    ::v-deep .tag-item {
      margin-bottom: 0px;
    }

    img {
      width: 58px;
      height: 58px;
      margin-right: 16px;
    }

    .ya-right {
      flex: 1;

      .ya-right-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .ya-tag {
          height: 20px;
          box-sizing: border-box;
          background: #ebf7ff;
          border-radius: 12px;
          border: 1px solid var(--el-color-primary);
          font-size: 10px;
          color: var(--el-color-primary);
          text-align: center;
          line-height: 16px;
          margin-right: 8px;
        }

        .ya-right-top-left {
          display: flex;
          align-items: center;

          .ya-title {
            font-size: 16px;
            font-weight: 500;
            color: var(--el-overlay-color);
            line-height: 22px;
          }
        }

        .ya-right-top-right {
          display: flex;
          align-items: center;
          color: var(--el-overlay-color);

          .ya-tag {
            color: var(--el-color-success);
            border: 1px solid var(--el-color-success);
          }
        }
      }

      .ya-right-bottom {
        display: flex;
        flex-wrap: wrap;

        .ya-item {
          display: flex;
          line-height: 20px;
          margin-top: 12px;

          .ya-item-left {
            color: rgba(0, 0, 0, 0.6);
          }

          .ya-item-right {
            max-width: 85px;
            overflow: hidden; //块元素超出隐藏
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--el-overlay-color);
          }
        }

        .ya-item:not(:last-child) {
          position: relative;
          margin-right: 32px;
          .ya-item-right {
            &::after {
              content: '';
              display: block;
              width: 1px;
              height: 14px;
              background: var(--el-overlay-color-lighter);
              border-radius: 1px;
              position: absolute;
              top: 3px;
              right: -16px;
            }
          }
        }
      }
    }
  }
}
</style>
