<!--
 * @Author: tqh
 * @FilePath: /yuan-qingdao-zld-browser/src/views/disposal/notifications/components/viewDetail.vue
 * @Date: 2022-9-8 09:00:00
-->
<script setup lang="ts">
import { downLoadFileU } from "../../../api/disposal";
import { downLoadAllFile } from "../../../utils/utils";
const yaTheme = localStorage.getItem("YA_THEME");
import warn1 from "../../../assets/image/warn/warn1.png";
import warn_dark from "../../../assets/image/warn/warn_dark.png";
import warn2 from "../../../assets/image/warn/warn2.png";
import warn3 from "../../../assets/image/warn/warn3.png";
import warn4 from "../../../assets/image/warn/warn4.png";
import warn5 from "../../../assets/image/warn/warn5.png";
import warn6 from "../../../assets/image/warn/warn6.png";
import warn7 from "../../../assets/image/warn/warn7.png";

const props = defineProps({
  viewObj: Object,
});
// console.log(props.viewObj, '============')
let Obj = {
  title: "勒索病毒处置",
  status: 0, // 威胁预警状态：1 已创建 2已下发；通报处置转态：1 已创建 2 待研判 3 待处置 4 待复核 5 待审核 6 已结束
  level: 0, // 0 高 1 中 2 低
  creatorName: "", // 创建人
  createTime: "", // 创建时间
  issueTime: "", // 下发时间
  desObj: {
    title: "",
    content: "",
  },
  enterpriseType: 1, // 企业模块类型 1 威胁预警 2 通报任务
  enterpriseList: [],
  enterpriseTypeList: [],
  fileList: [], // 附件下载
  dealList: [],
};
const detailObj = Object.assign(Obj, props.viewObj);
// console.log(detailObj, '=====')
// let dealList = ref([]);
// if (detailObj.dealList) {
//   if (detailObj.dealList.length > 0) {
//     detailObj.dealList.forEach((item) => {
//       if (item.taskFile) {
//         let taskFile = item.taskFile.split(",")
//         item.taskFile = taskFile
//       }
//     })
//   }
// }
// console.log(detailObj.dealList)
// 文件流转blob对象下载

const downFile = async (e) => {
  console.log(e);
  let str = e.name.split(".");
  let parms = {
    fileName: str[0] + "_" + e.timeStamp + "." + str[1],
  };
  let res = await downLoadFileU(parms);
  if (res) {
    downLoadAllFile(res, e.name);
  }
};
</script>

<template>
  <div>
    <div class="warn-view">
      <div class="warn-view-bg">
        <img :src="detailObj.level == 0 ? warn2 : detailObj.level == 1 ? warn6 : warn7
          " />
      </div>
      <div class="warn-view-info">
        <div class="warn-status">
          <div class="warn-status-title ya-primary-text">
            {{ detailObj.title }}
          </div>
          <span v-if="detailObj.enterpriseType == 1">
            <div class="warn-status-status" v-if="detailObj.status" :class="[
              detailObj.status == 1
                ? 'warn-status-status-bg1'
                : detailObj.status == 2
                  ? 'warn-status-status-bg2'
                  : '',
            ]">
              <div class="warn-status-status-i" :class="[
                detailObj.status == 1
                  ? 'warn-status-status-i-active-1'
                  : detailObj.status == 2
                    ? 'warn-status-status-i-active-2'
                    : '',
              ]"></div>
              {{
                detailObj.status == 1
                ? "已创建"
                : detailObj.status == 2
                  ? "已下发"
                  : ""
              }}
            </div>
          </span>
          <span v-if="detailObj.enterpriseType == 2">
            <div class="warn-status-status" v-if="detailObj.status" :class="[
              detailObj.status == 1
                ? 'warn-status-status-bg1'
                : detailObj.status == 2
                  ? 'warn-status-status-bg6'
                  : detailObj.status == 3
                    ? 'warn-status-status-bg2'
                    : detailObj.status == 4
                      ? 'warn-status-status-bg3'
                      : detailObj.status == 5
                        ? 'warn-status-status-bg4'
                        : 'warn-status-status-bg5',
            ]">
              <div class="warn-status-status-i" :class="[
                detailObj.status == 1
                  ? 'warn-status-status-i-active-1'
                  : detailObj.status == 2
                    ? 'warn-status-status-i-active-6'
                    : detailObj.status == 3
                      ? 'warn-status-status-i-active-2'
                      : detailObj.status == 4
                        ? 'warn-status-status-i-active-3'
                        : detailObj.status == 5
                          ? 'warn-status-status-i-active-4'
                          : 'warn-status-status-i-active-5',
              ]"></div>
              {{
                detailObj.status == 1
                ? "已创建"
                : detailObj.status == 2
                  ? "待研判"
                  : detailObj.status == 3
                    ? "待处置"
                    : detailObj.status == 4
                      ? "待复核"
                      : detailObj.status == 5
                        ? "待审核"
                        : "已结束"
              }}
            </div>
          </span>
          <div class="warn-status-level" :class="[
                        detailObj.level == 2
                          ? 'warn-status-level1'
                          : detailObj.level == 1
                            ? 'warn-status-level2'
                            : 'warn-status-level3',
                      ]">
            <span v-if="detailObj.enterpriseType == 1">
              {{
                detailObj.level == 0
                ? "高预警等级"
                : detailObj.level == 1
                  ? "中预警等级"
                  : "低预警等级"
              }}
            </span>
            <span v-if="detailObj.enterpriseType == 2">
              {{
                detailObj.level == 0
                ? "高通报等级"
                : detailObj.level == 1
                  ? "中通报等级"
                  : "低通报等级"
              }}
            </span>
          </div>
        </div>
        <div class="warn-info">
          <div class="warn-info-item">
            <!-- <img :src="warn4"/> -->
            <i class="iconfont icon-zhuceren1 ya-regular-text" style="margin-right: 3px"></i>
            <div>
              <div class="warn-info-line">
                <div class="ya-regular-text">创建人</div>
                <div class="warn-info-item-name ya-primary-text">
                  {{ detailObj.creatorName }}
                </div>
              </div>
            </div>
          </div>
          <div class="warn-info-item warn-info-item-time">
            <i class="iconfont icon-shoucizhuceshijian1 ya-regular-text" style="margin-right: 3px"></i>
            <div class="warn-info-line">
              <div class="ya-regular-text">创建时间</div>
              <div class="warn-info-item-name ya-primary-text">
                {{ detailObj.createTime }}
              </div>
            </div>
          </div>
          <div class="warn-info-item warn-info-item-time">
            <i class="iconfont icon-zhucedaoqishijian1 ya-regular-text" style="margin-right: 3px"></i>
            <div>
              <div class="ya-regular-text">下发时间</div>
              <div class="warn-info-item-name ya-primary-text">
                {{ detailObj.issueTime ? detailObj.issueTime : "暂未下发" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 描述模块 -->
    <div class="warn-view-content" v-if="detailObj.desObj">
      <div class="flex ya-primary-text">
        <div class="warn-left-div ya-primary-bg-color"></div>
        <div>{{ detailObj.desObj.title }}</div>
      </div>
      <div class="warn-view-content-item warn-left-des warn-view-bottom ya-regular-text">
        {{ detailObj.desObj.content }}
      </div>
    </div>
    <!-- 企业名称模块 -->
    <div class="warn-view-content" v-if="detailObj.enterpriseType == 1 && detailObj.enterpriseList">
      <div class="flex ya-primary-text">
        <div class="warn-left-div ya-primary-bg-color"></div>
        <div>企业名称</div>
      </div>
      <div class="warn-view-content-item warn-view-content-item-flex warn-view-bottom">
        <div class="warn-view-content-item-flex-item ya-border-color ya-regular-text"
          v-for="item in detailObj.enterpriseList">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="warn-view-content" v-if="detailObj.enterpriseType == 2">
      <div class="warn-view-content-flex">
        <div class="flex ya-primary-text">
          <div class="warn-left-div ya-primary-bg-color"></div>
          <div>
            <div>企业名称</div>
          </div>
        </div>
        <div class="flex ya-primary-text">
          <div class="warn-left-div ya-primary-bg-color"></div>
          <div>支持单位</div>
        </div>
        <div class="flex ya-primary-text">
          <div class="warn-left-div ya-primary-bg-color"></div>
          <div>是否研判</div>
        </div>
      </div>
      <div class="flex" v-if="detailObj.enterpriseTypeList">
        <div class="warn-view-content-flex-title ya-regular-text" v-for="item in detailObj.enterpriseTypeList">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="warn-view-content" v-if="detailObj.fileList && detailObj.fileList.length > 0">
      <div class="flex ya-primary-text">
        <div class="warn-left-div ya-primary-bg-color"></div>
        <div>附件下载</div>
      </div>
      <div class="warn-view-content-item warn-view-content-item-flex">
        <div class="warn-view-content-item-flex-down" v-for="item in detailObj.fileList" @click="downFile(item)">
          <div class="warn-view-content-item-flex-down-flex">
            <img :src="yaTheme === 'light' ? warn1 : warn_dark" />
            <div class="warn-view-content-item-flex-down-co ya-regular-text">
              {{ item.name }}
            </div>
          </div>
          <div class="warn-view-content-item-flex-down-text ya-primary-color">
            下载
          </div>
        </div>
      </div>
    </div>
    <div class="warn-view-content" v-if="detailObj.dealList && detailObj.dealList.length > 0">
      <div class="flex ya-primary-text">
        <div class="warn-left-div ya-primary-bg-color"></div>
        <div>处理记录</div>
      </div>
      <div class="warn-view-content-item-deal ya-regular-text ya-border-color">
        <div class="warn-view-content-item-deal-item" v-for="item in detailObj.dealList">
          <div class="warn-view-content-item-deal-icon">
            <div class="warn-view-content-item-deal-icon-img ya-border-color"></div>
          </div>
          <div class="warn-view-content-item-deal-icon-line"></div>
          <div>
            <div class="warn-view-content-item-deal-status ya-primary-text">
              {{
                item.node == 1
                ? "创建"
                : item.node == 2
                  ? "研判"
                  : item.node == 3
                    ? "处置"
                    : item.node == 4
                      ? "复核"
                      : item.node == 5
                        ? "审核"
                        : "已结束"
              }}
            </div>
            <div class="warn-view-content-item-deal-info">
              <div class="warn-view-content-item-deal-text">
                <i class="iconfont icon-zhuceren1 ya-regular-text" style="margin-right: 3px"></i>
                <div>{{ item.approvedName }}</div>
              </div>
              <div class="warn-view-content-item-deal-line"></div>
              <div class="warn-view-content-item-deal-text">
                <i class="iconfont icon-shoucizhuceshijian1 ya-regular-text" style="margin-right: 3px"></i>
                <div>{{ item.createTime }}</div>
              </div>
            </div>
            <div class="warn-view-content-item-deal-info-con">
              {{ item.resultInformation }}
            </div>
            <div class="warn-view-content-item-deal-info-con-flex">
              <div class="warn-view-content-item-deal-info-down ya-regular-text" v-for="itemOne in item.taskFileName"
                @click="downFile(itemOne)">
                <div class="warn-view-content-item-deal-info-down-flex">
                  <img :src="yaTheme === 'light' ? warn1 : warn_dark" />
                  <div class="warn-view-content-item-deal-info-down-con">
                    {{ itemOne.name }}
                  </div>
                </div>
                <div class="warn-view-content-item-deal-info-down-text ya-primary-color">
                  下载
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.warn-view {
  display: flex;
  margin-top: 15px;

  .warn-view-bg {
    width: 160px;
    height: 159px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .warn-view-info {
    flex: 1;
  }

  .warn-status {
    display: flex;
    align-items: center;

    .warn-status-title {
      font-size: 20px;
      font-weight: 600;
      max-width: 280px;
      color: rgba(0, 0, 0, 0.65);
    }

    .warn-status-status {
      font-size: 14px;
      font-weight: 400;
      width: 73px;
      height: 24px;
      text-align: center;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 8px;

      .warn-status-status-i {
        width: 8px;
        height: 8px;
        margin-right: 6px;
      }

      .warn-status-status-i-active-1 {
        background: #e65857;
      }

      .warn-status-status-i-active-2 {
        background: #4e9b40;
      }

      .warn-status-status-i-active-3 {
        background: #45bcca;
      }

      .warn-status-status-i-active-4 {
        background: #677dff;
      }

      .warn-status-status-i-active-5 {
        background: #9e7afe;
      }

      .warn-status-status-i-active-6 {
        background: #fe7f09;
      }
    }

    .warn-status-status-bg1 {
      color: #e65857;
      background: rgba(230, 88, 87, 0.08);
    }

    .warn-status-status-bg2 {
      color: #4e9b40;
      background: rgba(78, 155, 64, 0.08);
    }

    .warn-status-status-bg3 {
      color: rgba(69, 188, 202, 1);
      background: rgba(69, 188, 202, 0.08);
    }

    .warn-status-status-bg4 {
      color: rgba(103, 125, 255, 1);
      background: rgba(103, 125, 255, 0.08);
    }

    .warn-status-status-bg5 {
      color: rgba(158, 122, 254, 1);
      background: rgba(158, 122, 254, 0.08);
    }

    .warn-status-status-bg6 {
      color: rgba(254, 127, 9, 1);
      background: rgba(254, 127, 9, 0.08);
    }

    .warn-status-level {
      font-size: 14px;
      width: 86px;
      height: 24px;
      line-height: 24px;
      border-radius: 12px;
      text-align: center;
      font-weight: 400;
    }

    .warn-status-level1 {
      background: rgba(0, 149, 255, 0.08);
      color: rgba(46, 150, 224, 1);
    }

    .warn-status-level2 {
      background: rgba(241, 131, 1, 0.08);
      color: rgba(195, 154, 37, 1);
    }

    .warn-status-level3 {
      background: rgba(217, 8, 8, 0.08);
      color: rgba(246, 195, 183, 1);
    }
  }

  .warn-info {
    display: flex;
    align-content: center;
    // justify-content: space-between;
    margin-top: 21px;
    color: rgba(3, 3, 3, 0.4);
    font-size: 12px;

    .warn-info-item-time {
      margin-left: 20px;
    }

    .warn-info-item {
      display: flex;
      font-size: 12px;

      .warn-info-line {
        border-right: 1px solid rgba(235, 235, 235, 1);
        padding-right: 45px;
      }

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

      .warn-info-item-name {
        font-size: 14px;
        margin-top: 6px;
        color: rgba(3, 3, 3, 0.65);
      }
    }

    // .warn-info-item:last-child .warn-info-line {
    //   border: none !important;
    //   margin-left: 0;
    // }
  }
}

.warn-view-content {
  .warn-view-content-flex {
    display: flex;

    .flex {
      flex: 1;
    }
  }

  .warn-view-content-flex-title {
    flex: 1;
    font-size: 14px;
    color: rgba(3, 3, 3, 0.4);
    margin-left: 10px;
    margin-top: 8px;
    margin-bottom: 24px;
  }

  .warn-view-bottom {
    margin-bottom: 24px;
  }

  .flex {
    display: flex;
    align-items: center;
    color: rgba(3, 3, 3, 0.65);
    font-size: 14px;
    font-weight: 400;

    .warn-left-div {
      width: 3px;
      height: 14px;
      background: #0095ff;
      margin-right: 6px;
    }
  }

  .warn-left-des {
    margin-left: 9px;
  }

  .warn-view-content-item {
    margin-top: 12px;
    color: rgba(3, 3, 3, 0.4);
    font-size: 14px;
    font-weight: 400;
  }

  .warn-view-content-item-flex {
    display: flex;
    flex-wrap: wrap; // 强制换行

    .warn-view-content-item-flex-item {
      margin-bottom: 8px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      height: 22px;
      padding: 0 8px;
      line-height: 22px;
      margin-right: 8px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1; //行数
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .warn-view-content-item-flex-down {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; // 强制换行
    background: linear-gradient(90deg,
        rgba(0, 149, 255, 0) 0%,
        rgba(0, 149, 255, 0.05) 100%);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 48px;
    font-size: 14px;
    margin-bottom: 16px;

    .warn-view-content-item-flex-down-flex {
      display: flex;
      align-items: center;
    }

    .warn-view-content-item-flex-down-co {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1; //行数
      overflow: hidden;
      text-overflow: ellipsis;
      width: 250px;
      margin-left: 6px;
    }

    img {
      width: 24px;
      height: 28px;
      position: relative;
      top: 2px;
      margin-left: 10px;
    }

    .warn-view-content-item-flex-down-text {
      color: rgba(0, 149, 255, 1);
      width: 40px;
      text-align: left;
    }
  }

  .warn-view-content-item-flex-down:hover {
    cursor: pointer;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  }

  .warn-view-content-item-flex-down:nth-child(odd) {
    margin-right: 18px;
  }

  .warn-view-content-item-deal {
    // display: flex;
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 16px;
    margin-top: 12px;

    .warn-view-content-item-deal-item {
      display: flex;
    }

    .warn-view-content-item-deal-icon {
      position: relative;
      top: 5px;

      .warn-view-content-item-deal-icon-img {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 8px;
        background: #ccc;
        z-index: 2;
      }

      .warn-view-content-item-deal-icon-img-active {
        border: 2px solid rgba(0, 149, 255, 1);
        width: 6px;
        height: 6px;
        background: #fff;
      }
    }

    .warn-view-content-item-deal-icon-line {
      border-left: 1px dashed rgba(184, 184, 184, 1);
      position: relative;
      left: -14px;
      top: 15px;
      z-index: 0;
    }

    .warn-view-content-item-deal-status-active {
      color: rgba(0, 149, 255, 1) !important;
    }

    .warn-view-content-item-deal-status {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
      font-weight: 500;
      margin-bottom: 11px;
    }

    .warn-view-content-item-deal-info-con {
      font-size: 14px;
    }

    .warn-view-content-item-deal-info-con-flex {
      display: flex;
      flex-wrap: wrap; // 强制换行
      margin-bottom: 25px;
    }

    .warn-view-content-item-deal-info {
      display: flex;
      align-items: center;
      margin-bottom: 11px;

      .warn-view-content-item-deal-text {
        display: flex;
        align-items: center;

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

      .warn-view-content-item-deal-line {
        margin: 0 8px;
        width: 1px;
        height: 16px;
        background: #ebebeb;
      }
    }

    .warn-view-content-item-deal-info-down {
      // height: 32px;
      background: linear-gradient(90deg,
          rgba(0, 149, 255, 0) 0%,
          rgba(0, 149, 255, 0.05) 100%);
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 3px 5px;
      color: rgba(0, 0, 0, 0.65);
      font-size: 12px;
      margin-top: 8px;

      .warn-view-content-item-deal-info-down-flex {
        display: flex;
        align-items: center;

        img {
          width: 17px;
          height: 20px;
          margin-right: 6px;
        }
      }

      .warn-view-content-item-deal-info-down-con {
        max-width: 120px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; //行数
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .warn-view-content-item-deal-info-down-text {
        font-size: 12px;
        color: rgba(0, 149, 255, 1);
        width: 30px;
        text-align: center;
      }
    }

    .warn-view-content-item-deal-info-down:nth-child(odd) {
      margin-right: 16px;
      margin-left: 16px;
    }

    .warn-view-content-item-deal-info-down:first-child {
      margin-left: 0;
    }
  }
}

.warn-view-content-item-deal .warn-view-content-item-deal-item:last-child .warn-view-content-item-deal-icon-line {
  display: none;
}

.warn-view-content-item-deal .warn-view-content-item-deal-item:first-child .warn-view-content-item-deal-icon-img {
  border-radius: 50%;
  margin-right: 8px;
  border: 2px solid rgba(0, 149, 255, 1);
  width: 6px;
  height: 6px;
  background: #fff;
}

.warn-view-content-item-deal .warn-view-content-item-deal-item:first-child .warn-view-content-item-deal-status {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 11px;
  // color: rgba(0, 149, 255, 1) !important;
}

.warn-view-content-item-deal-info-down:hover {
  cursor: pointer;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
</style>
