<template>
  <div>
    <div class="table-des-item">
      <div class="table-des-item-header">
        <svg
          t="1684219359540"
          class="icon img"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1626"
          width="18"
          height="18"
        >
          <path
            d="M551.8336 663.1936H318.8224a39.7312 39.7312 0 0 1-34.0992-20.1728 39.3728 39.3728 0 0 1 0.4608-39.424l116.3264-200.9088a38.7072 38.7072 0 0 1 33.6384-20.1216c13.9264 0.2048 26.7264 7.68 33.6384 19.7632l116.736 200.9088a40.0384 40.0384 0 0 1-33.6896 59.904z m-226.304-43.52h219.904L435.2 430.08l-109.6192 189.5424z"
            p-id="1627"
          ></path>
          <path
            d="M435.5072 478.3616c14.5408 0 21.8624 7.2192 21.8624 21.76v40.4992c0 14.5408-7.3216 21.76-21.8624 21.76-14.592 0-21.8624-7.2192-21.8624-21.76v-40.4992c0-14.5408 7.2704-21.76 21.8624-21.76z m-0.6656 88.7296h1.3312c14.1312 0 21.1968 7.0144 21.1968 21.0944v-0.3584c0 14.08-7.0656 21.0944-21.1968 21.0944h-1.3312c-14.1312 0-21.1968-7.0144-21.1968-21.0944v0.3584c0-14.08 7.0656-21.0944 21.1968-21.0944z m304.3328-162.4064a22.1696 22.1696 0 0 0-21.8624-21.76h-150.3232a21.8112 21.8112 0 1 0 0 43.52h150.3232a22.1696 22.1696 0 0 0 21.8624-21.76z m-21.8624 96.768h-80.0256a21.8112 21.8112 0 1 0 0 43.52h80.0256a21.8112 21.8112 0 1 0 0-43.52z m0 118.2208h-80.0256a21.8112 21.8112 0 1 0 0 43.52h80.0256a21.8112 21.8112 0 1 0 0-43.52z"
            p-id="1628"
          ></path>
          <path
            d="M751.9232 819.2H272.0768C234.9056 819.2 204.8 783.2064 204.8 738.816V285.184C204.8 240.7936 234.9056 204.8 272.0768 204.8h479.8464C789.0944 204.8 819.2 240.7936 819.2 285.184v452.864c0.1536 21.4528-6.8096 42.0864-19.456 57.344-12.6464 15.2064-29.8496 23.808-47.8208 23.808zM279.1424 256C266.3424 256 256 268.8 256 284.672v454.2976a32.512 32.512 0 0 0 6.656 20.48 21.1968 21.1968 0 0 0 16.4864 8.5504h465.408c12.9536 0 23.4496-13.0048 23.4496-29.0304V284.672a32.3072 32.3072 0 0 0-6.912-20.3776 21.0944 21.0944 0 0 0-16.5888-8.2432H279.1424z"
            p-id="1629"
          ></path>
        </svg>
        <span>危害描述</span>
      </div>
      <div class="table-des-item-content mt-12">
        {{ disposalSuggObj.impactZh || '暂无危害描述' }}
      </div>
    </div>
    <div class="table-des-item mt-16">
      <div class="table-des-item-header">
        <svg
          t="1684219338876"
          class="icon img"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1475"
          width="18"
          height="18"
        >
          <path
            d="M776.6016 412.3136c-22.9376 0-28.3648 22.6304-28.3648 35.5328v296.448c0 9.1648-7.3728 16.5888-16.384 16.5888H281.9072a16.5376 16.5376 0 0 1-16.384-16.64V286.1056c0-9.216 7.3216-16.64 16.384-16.64h295.936c12.7488 0 30.9248-10.0864 30.9248-29.0816 0-18.9952-18.176-29.3888-30.9248-29.3888H267.3152A62.976 62.976 0 0 0 204.8 274.432v481.4336A62.976 62.976 0 0 0 267.3152 819.2h474.7776a62.976 62.976 0 0 0 62.464-63.3856V447.8464c0-12.9024-5.0176-35.5328-27.9552-35.5328z"
            p-id="1476"
          ></path>
          <path
            d="M356.9152 672.5632c13.7216 14.592 40.8576-0.9216 45.3632-5.4272l404.0192-409.7024c9.0112-9.1136 20.5824-33.0752 5.9392-46.4384-14.6432-13.3632-37.7856-2.2528-46.7968 6.8096L361.472 627.6096c-8.9088 9.0112-18.2272 30.4128-4.5056 44.9536z"
            p-id="1477"
          ></path>
        </svg>
        <span>处置建议</span>
      </div>
      <div class="table-des-item-content mt-12" v-if="disposalSuggObj.ruleSolutionZh" v-html="disposalSuggObj.ruleSolutionZh"></div>
      <div class="table-des-item-content mt-12" v-else>暂无处置建议</div>
    </div>
    <div class="table-des-item mt-16">
      <div class="table-des-item-header">
        <svg
          t="1684219179586"
          class="icon img"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1325"
          width="18"
          height="18"
        >
          <path
            d="M693.76 363.008V260.096h67.9424A6.2464 6.2464 0 0 0 768 253.952v-43.008a6.2464 6.2464 0 0 0-6.2976-6.144H262.2976A6.2464 6.2464 0 0 0 256 210.944v43.008c0 3.3792 2.8672 6.144 6.2976 6.144h67.9936v102.912c0 62.6176 33.4848 117.6576 84.0704 148.992-50.5856 31.3344-84.0704 86.4256-84.0704 148.992v102.912H262.2976a6.2464 6.2464 0 0 0-6.2976 6.144v43.008c0 3.3792 2.8672 6.144 6.2976 6.144h499.4048a6.2464 6.2464 0 0 0 6.2976-6.144v-43.008a6.2464 6.2464 0 0 0-6.2976-6.144h-67.9936v-102.912c0-62.6176-33.4848-117.6576-84.0704-148.992 50.5856-31.3344 84.0704-86.4256 84.0704-148.992z m-56.9344 297.984v102.912H387.1744v-102.912c0-32.4096 12.9536-62.9248 36.5568-85.76A125.5936 125.5936 0 0 1 512 539.648c33.3312 0 64.7168 12.5952 88.2688 35.584 23.6032 22.8864 36.5568 53.3504 36.5568 85.76z m0-297.984c0 32.4096-12.9536 62.9248-36.5568 85.76A125.5936 125.5936 0 0 1 512 484.352a125.5936 125.5936 0 0 1-88.2688-35.584 118.6304 118.6304 0 0 1-36.5568-85.76V260.096h249.6512v102.912z"
            p-id="1326"
          ></path>
        </svg>
        <span>处置历史</span>
      </div>
      <div class="table-des-item-content mt-12">
        <div class="ya-box-content">
          <div
            class="ya-item"
            v-for="(item, index) in handleHistory"
            v-if="handleHistory.length > 0"
            :key="index"
          >
            <div class="ya-item-line"></div>
            <div class="ya-item-title" :class="{ active: index === 0 }">
              {{ item.operationStatus }}
            </div>
            <div class="ya-item-info">
              <div v-if="item.operator" class="ya-item-info_label">
                <img src="../../assets/image/icon_user.png" />
                <span>{{ item.operator }}</span>
              </div>
              <div class="ya-item-info_label">
                <img src="../../assets/image/icon_time.png" />
                <span>{{ item.operationTime }}</span>
              </div>
            </div>
            <div class="ya-item-desc">{{ item.remark }}</div>
            <div class="ya-item-file" v-if="item.filePath.length > 0">
              <div
                class="ya-item-file_box"
                v-for="(jitem, index) in item.filePath"
                :key="index"
                
              >
                <img
                  class="ya_box_icon"
                  src="../../assets/image/icon_book.png"
                  alt=""
                />
                <span class="ya_box_desc">{{ jitem.name }}</span>
                <span class="ya_box_down" @click="download(jitem)">下载</span>
              </div>
            </div>
          </div>
          <div v-else>暂无处置历史</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, defineProps, defineExpose } from "vue";
import { downLoadAllFile } from "@/utils/utils";
import {
  getDisposalSugg,
  getDisposalInfo,
  getDownload
} from "../../api/threatAlarms/threatAlarms";
interface Props {
  originalInfo?:Object; // 详情查询数据
}
const { originalInfo = {}} = defineProps<Props>();
const handleHistory = ref([]);
/**
 * @description 下载文件
 */
const download = (e) => {
  getDownload({filePath: e.path}).then((res)=>{
    downLoadAllFile(res, e.name+'.'+e.type); 
  })
};
/**
 * @description: 初始化
 */
const disposalSuggObj = ref({
  impactZh: '',
  ruleSolutionZh: '',
})
const init = () => {
  getDisposalSugg({sid: originalInfo.sid}).then(res=>{
    if(res.code == 200) {
      disposalSuggObj.value = res.data
    }
  })
  getDisposalInfo({id: originalInfo.id,date: originalInfo.alarmTime}).then(res=>{
    if(res.code == 200) {
      handleHistory.value = res.data.map((item)=>{
        item.filePath = item.filePath?item.filePath:[]
        return item
      })
    }
  })
}
defineExpose({ init });
onMounted(()=>{
  init()
})
</script>
<style lang="scss" scoped>
.mt-16 {
  margin-top: 16px;
}
.table-des-item {
  border-radius: 2px;
  border: 1px solid var(--el-border-color);
  padding: 12px 16px;
  .table-des-item-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--el-text-color-primary);
    font-size: 16px;
    border-bottom: 1px solid var(--el-border-color);
    padding-bottom: 13px;
    .img {
      width: 20px;
      height: 20px;
      background: var(--el-color-primary);
      margin-right: 12px;
      border-radius: 2px;
      fill: #fff;
    }
  }
  .mt-12 {
    margin-top: 12px;
  }
  .table-des-item-content {
    min-height: 22px;
    word-break: break-all;
    font-size: 14px;
    font-weight: 400;
    color: rgba(23, 70, 89, 0.55);
  }

  .flex-item {
    display: flex;
    .flex-item-item {
      flex: 1;
    }
    .border-right {
      border-right: 1px solid #e6e6e6;
    }
  }
  .item-height {
    height: 200px;
    overflow-y: scroll;
    padding-bottom: 12px;
  }
  .flex-item-item-pd {
    padding: 0 20px;
    padding-right: 0;
  }
  .flex-item-item-pd-title {
    height: 24px;
    padding-top: 10px;
  }
}
.ya-box-content {
  color: #819ba5;
  font-size: 14px;
  margin: 12px 0;
  overflow: auto;
  position: relative;
  word-break: break-word;
  .ya-item {
    padding-left: 18px;
    position: relative;
    padding-bottom: 27px;
    overflow: hidden;
    margin-top: -3px;
    &:nth-child(1) {
      padding-top: 3px;
    }
    &:nth-last-child(1) {
      .ya-item-line {
        border: none;
      }
    }
    .ya-item-line {
      position: absolute;
      border-left: 1px dashed var(--el-border-color);
      width: 1px;
      height: 100%;
      left: 4px;
      top: 16px;
    }
    .ya-item-title {
      font-weight: bold;
      font-size: 14px;
      color: var(--el-text-color-primary);
      padding-bottom: 8px;
      &::before {
        display: inline-block;
        position: absolute;
        content: "";
        left: 0;
        top: 3px;
        width: 10px;
        background: var(--el-border-color);
        border-radius: 50%;
        height: 10px;
        box-sizing: border-box;
      }
      &.active {
        color: #1c92d0;
        &::before {
          background-color: #ffffff;
          border: 2px solid #1c92d0;
          top: 6px;
          width: 12px;
          height: 12px;
        }
      }
    }
    .ya-item-info {
      display: flex;
      align-items: center;
      padding-bottom: 3px;
      .ya-item-info_label {
        line-height: 0;
        color: #819ba5;
        font-size: 12px;
        display: flex;
        align-items: center;
        padding-right: 8px;
        padding-left: 8px;
        border-right: 1px solid var(--el-border-color);
        img {
          margin-right: 4px;
        }
        &:nth-child(1) {
          padding-left: 0;
        }
        &:nth-last-child(1) {
          border: none;
        }
      }
    }
    .ya-item-desc {
      padding-top: 8px;
    }
    .ya-item-file {
      font-size: 12px;
      display: flex;
      flex-wrap: wrap;
      margin-top: 12px;
      .ya-item-file_box {
        display: flex;
        align-items: center;
        margin-right: 16px;
        margin-bottom: 10px;
        padding: 6px;
        border-radius: 4px;
        background: linear-gradient(
          90deg,
          rgba(28, 146, 208, 0) 0%,
          rgba(28, 146, 208, 0.05) 100%
        );
        border: 1px solid var(--el-border-color);
        color: var(--el-text-color-primary);
      }
      .ya_box_icon {
        margin-right: 6px;
      }
      .ya_box_desc {
        display: inline-block;
        width: 144px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 3px;
      }
      .ya_box_down {
        color: #1c92d0;
        cursor: pointer;
      }
    }
  }
}
</style>
