<template>
  <d-drawer v-model="detailDrawerCtrl" class="w-[800px] p-[20px]">
    <div class="flex flex-col h-full">
        <div class="flex justify-between items-center mb-[12px]">
            <p class="text-[18px]/[26px] ">恶意代码详情</p>
            <d-icon @click="detailDrawerCtrl = false" name="icon-close" size="18px" class="cursor-pointer text-[#71757F]" />
        </div>
        <div class="flex flex-col mb-[12px] flex-1 h-0">
            <div class="malware-detail-card mb-[16px]">
                <p class="title">文件基本信息</p>
                <div class="content">
<!--                    <div class="flex items-center">-->
<!--                        <div class="w-[96px] pr-[20px] flex-shrink-0 text-[#595959]">文件名称</div>-->
<!--                        <div class="single-line-ellipsis">{{ props.detailRow?.packageFullName }}</div>-->
<!--                        <d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(props.detailRow?.packageFullName)" />-->
<!--                    </div>-->
                    <div class="flex items-center">
                        <div class="w-[96px] pr-[20px] flex-shrink-0 text-[#595959]">文件路径</div>
                        <div class="single-line-ellipsis">{{ malwareDetails?.filePath }}</div>
                        <d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(malwareDetails?.filePath)" />
                    </div>
                  <div class="flex items-center">
                        <div class="w-[96px] pr-[20px] flex-shrink-0 text-[#595959]">切片类型</div>
                        <div class="single-line-ellipsis">{{ malwareDetails?.codeType }}</div>
                        <d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(malwareDetails?.codeType)" />
                    </div>
                  <div class="flex items-center">
                        <div class="w-[96px] pr-[20px] flex-shrink-0 text-[#595959]">标识符</div>
                        <div class="single-line-ellipsis">{{ malwareDetails?.identifier }}</div>
                        <d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(malwareDetails?.identifier)" />
                    </div>
                  <div class="flex items-center">
                        <div class="w-[96px] pr-[20px] flex-shrink-0 text-[#595959]">token数量</div>
                        <div class="single-line-ellipsis">{{ malwareDetails?.tokenNum }}</div>
                        <d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(malwareDetails?.tokenNum)" />
                    </div>
                  <div class="flex items-center">
                        <div class="w-[96px] pr-[20px] flex-shrink-0 text-[#595959]">代码片段</div>
                        <div class="single-line-ellipsis">{{ malwareDetails?.code }}</div>
                        <d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(malwareDetails?.code)" />
                    </div>
<!--                    <div class="flex items-center">-->
<!--                        <div class="w-[96px] pr-[20px] flex-shrink-0 text-[#595959]">文件sha256</div>-->
<!--                        <div :title="malwareDetails?.code" class="single-line-ellipsis">{{ malwareDetails?.code }}</div>-->
<!--                        <d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(malwareDetails?.code)" />-->
<!--                    </div>-->
                </div>
            </div>

            <div class="malware-detail-card mb-[16px]">
                <p class="title">调用的敏感API列表</p>
                <div class="content">
                    <d-table
                        :data="malwareDetails?.apisCalled"
                        class="w-full bg-white malware-list-table"
                        :fix-header="malwareDetails?.apisCalled.length > 0"

                        max-height="300px"
                    >
                      <d-column field="isMalicious" header="是否恶意代码">
                        <template #default="scope">
                          <span class="card-val" v-if="scope.row.isMalicious===0">
                            <d-tag color="#5e7ce0" size="sm">否</d-tag>
                          </span>
                                        <span class="card-val" v-else>
                            <d-tag color="#c7000b" size="sm">是</d-tag>
                          </span>
                        </template>
                      </d-column>
                        <d-column
                            field="maliciousCodeCategory"
                            header="恶意代码分类"
                        />
                        <template #empty>
                            <NoData style="padding: 0; margin: -30px 0;" :width="80" />
                        </template>
                    </d-table>

<!--                    <d-pagination-->
<!--                        class="flex justify-end mt-[20px]"-->
<!--                        :total="pager.total"-->
<!--                        v-model:pageSize="pager.pageSize"-->
<!--                        v-model:pageIndex="pager.pageIndex"-->
<!--                        :can-view-total="true"-->
<!--                        :can-change-page-size="true"-->
<!--                        :max-items="5"-->
<!--                        @page-index-change="pageIndexChange"-->
<!--                        @page-size-change="pageSizeChange"-->
<!--                    />-->
                </div>
            </div>

          <div class="malware-detail-card mb-[16px]">
            <p class="title">包含恶意代码的文件列表</p>
            <div class="content">
              <d-table
                :data="malwareDetails?.source"
                class="w-full bg-white malware-list-table"
                :fix-header="malwareDetails?.source.length > 0"

                max-height="300px"
              >
                <d-column
                  field="sink"
                  header="恶意汇"
                />
                <d-column
                  field="flow"
                  header="传播流向"
                />
                <d-column
                  field="purpose"
                  header="代码目的"
                />
                <d-column
                  field="analysis"
                  header="LLM对于这个代码片段的分析"
                />
                <d-column
                  field="createTime"
                  header="创建时间"
                />
                <template #empty>
                  <NoData style="padding: 0; margin: -30px 0;" :width="80" />
                </template>
              </d-table>

              <!--                    <d-pagination-->
              <!--                        class="flex justify-end mt-[20px]"-->
              <!--                        :total="pager.total"-->
              <!--                        v-model:pageSize="pager.pageSize"-->
              <!--                        v-model:pageIndex="pager.pageIndex"-->
              <!--                        :can-view-total="true"-->
              <!--                        :can-change-page-size="true"-->
              <!--                        :max-items="5"-->
              <!--                        @page-index-change="pageIndexChange"-->
              <!--                        @page-size-change="pageSizeChange"-->
              <!--                    />-->
            </div>
          </div>

<!--            <div class="malware-detail-card flex-1 h-0">-->
<!--                <p class="title">关键日志</p>-->
<!--                <div class="content flex flex-col flex-1 h-0">-->
<!--                    <div class="log-box flex-1 overflow-y-scroll">-->
<!--                        {{ malwareDetails?.analysis }}-->
<!--                        {{ malwareDetails?.code }}-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
  </d-drawer>
</template>

<script setup lang="ts">
import { reactive, shallowRef, defineProps, ref, defineExpose } from 'vue';
import NoData from "@/components/NoData/NoData.vue";
import { getMalwareDetailApi, getMalwareDetailApi2 } from '@/api/inboundTask/inboundTaskApi';
import {Message} from "vue-devui/message";
import { type MalwareDetailType } from "@/api/inboundTask/inboundTaskType";

const props = defineProps({
  detailRow: {
        type: Object,
        required: true,
    },
});
const detailDrawerCtrl = ref(false);
const malwareDetails = shallowRef<MalwareDetailType | null>(null);
const threatContentList = shallowRef([]);
const pager = reactive({
    pageIndex: 1,
    pageSize: 10,
    total: 0,
});

async function getMalwareDetails(id) {
    try {
        const res = await getMalwareDetailApi2({
          current: 1,
          size: 10,
          malwareId: id
        });
        if (res.data.code === 200) {
            malwareDetails.value = res.data.data;
        } else {
            Message.error('查询详情失败');
        }
    } catch (e) {
        Message.error('接口错误，查询详情失败');
    }
    getCurrentPageData();
}

function getCurrentPageData() {
    // pager.total = malwareDetails.value.contentInfo.total;
    // const endIndex = pager.pageIndex * pager.pageSize;
    // threatContentList.value = malwareDetails.value.contentInfo.list.slice(endIndex - pager.pageSize, endIndex);
}

function pageIndexChange() {
    getCurrentPageData();
}

function pageSizeChange() {
    pager.pageIndex = 1;
    getCurrentPageData();
}

function handleCopy(text: string) {
    inputCopy(text);
}
const openDetail = (id) => {
  detailDrawerCtrl.value = true;
  getMalwareDetails(id)
}

function inputCopy(text: string) {
    const aux = document.createElement('input');
    aux.setAttribute('value', text);
    document.body.appendChild(aux);
    aux.select();
    document.execCommand('copy');
    document.body.removeChild(aux);
    Message({ type: 'success', message: '复制成功' });
}


// 暴露方法，供父组件调用
defineExpose({
  openDetail,
});
</script>


<style scoped lang="scss">
.malware-detail-card {
  border-radius: 8px;
  border: 1px solid #EEF0F5;
  display: flex;
  flex-direction: column;
  .title {
    color: #191919;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 22px;
    background-color: #F3F3F3;
  }
  .content {
    padding: 20px 16px;
    :deep(.devui-table__thead .header-container) {
      background-color: #F3F3F3;
    }
  }
}
.log-box {
  border-radius: 8px;
  background: #F7F8FA;
  border: 1px solid #EEF0F5;
  padding: 8px 16px;
}
.single-line-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
