<template>
  <div class="DescCard">
    <span class="time">{{ data.time }}</span>
    <div class="info">
      <img src="./images/avatar.svg" />
      <span class="name">{{ data.name }}</span>
      <span class="posts">{{ data.posts }}</span>
    </div>
    <div class="node" v-if="data.processType===1 && data.processId">节点：{{ data.processName }}</div>
    <el-image
      style="width: 100px; height: 100px"
      v-if="
        data.type == 'bmp' ||
        data.type == 'jpg' ||
        data.type == 'jpeg' ||
        data.type == 'png'
      "
      :src="data.url"
      :previewSrcList="[data.url]"
    >
    </el-image> 

    <video
      v-if="data.type == 'mp4' || data.type == 'avi' || data.type == 'xmvb'"
      class="videoClass"
      :src="data.url"
      :poster="data.url"
      muted
      controls
    ></video>
    <div v-if="data.type == 'text'">
      <div class="desc" v-html="data.desc" />
    </div>
    <div class="detailsBox" v-if="data.processType == '3'">
        <div class="item" v-for="item in data.controlResult" :key="item.deviceName">
          <span class="label"> {{ item.deviceName }}：</span>
          <span class="value"> {{ item.content+(item.result.code===200? '　　✅':'　　❌️')+item.result.msg }}</span>
        </div>
      </div>
    <!-- <el-popover
      trigger="click"
      placement="right"
      v-if="data.processType == '3'"
      style="color: red; cursor: pointer;"
    >
      <span slot="reference">详情</span>
      <div class="detailsBox" v-if="data.processType == '3'">
        <div class="item" v-for="item in data.controlResult" :key="item.deviceName">
          <span class="label"> {{ item.deviceName }}：</span>
          <span class="value"> {{ item.content+(item.result.code===200? '　　✅':'　　❌️')+item.result.msg }}</span>
        </div>
      </div>
    </el-popover> -->
    <div
      v-if="data.processType == '4'"
      style="color: red; cursor: pointer"
      @click="openDetailsDialog(data)"
    >
      详情
    </div>
    <Dialog v-model="detailsDialog" width="1085px" top="20px" style="z-index: 9999;">
      <div v-if="data.processType == '4'" class="docx-wrapper" style="height:800px;overflow-y: auto;overflow-x: hidden;">
        <section
          ref="initFile"
          class="docx"
          style="
            padding: 72pt 90.15pt;
            width: 595.3pt;
            min-height: 741.9pt;
            column-count: 1;
            column-gap: 36pt;
          "
        >
          <article>
            <p
              style="
                line-height: 1;
                text-align: center;
                vertical-align: baseline;
                margin-bottom: 10px;
              "
            >
              <span
                lang="en-US"
                style="
                  font-family: 方正小标宋简体;
                  color: rgb(255, 0, 0);
                  min-height: 46pt;
                  font-size: 46pt;
                  font-weight: 700;
                "
                >重要事件</span
              >
            </p>
            <p
              style="
                margin-bottom: 2pt;
                min-height: 15pt;
                line-height: 15pt;
                text-align: center;
                vertical-align: baseline;
              "
            >
              <span
                lang="null"
                style="
                  font-family: 仿宋_GB2312;
                  font-weight: normal;
                  min-height: 10.5pt;
                  font-size: 10.5pt;
                "
                >报送单位：</span
              ><span
                lang="en-US"
                style="
                  font-family: 仿宋_GB2312;
                  font-weight: normal;
                  min-height: 10.5pt;
                  font-size: 10.5pt;
                "
              >
                {{ formFileData.fromDept }}</span
              ><span
                lang="null"
                style="
                  font-family: 仿宋_GB2312;
                  font-weight: normal;
                  min-height: 10.5pt;
                  font-size: 10.5pt;
                "
                >报送时间：</span
              ><span
                lang="en-US"
                style="
                  font-family: 仿宋_GB2312;
                  font-weight: normal;
                  min-height: 10.5pt;
                  font-size: 10.5pt;
                "
                >{{ formFileData.createTime }}</span
              >
            </p>
            <p
              style="
                margin-bottom: 1pt;
                min-height: 10pt;
                line-height: 10pt;
                text-align: center;
                vertical-align: baseline;
              "
            >
              <span
                style="
                  font-family: 'Times New Roman';
                  font-weight: bold;
                  color: rgb(255, 0, 0);
                  min-height: 22pt;
                  font-size: 22pt;
                "
                >——————————————————</span
              >
            </p>
            <p
              style="
                margin-bottom: 6pt;
                min-height: 25pt;
                line-height: 25pt;
                text-align: center;
                vertical-align: baseline;
              "
            >
              <span
                lang="en-US"
                style="
                  font-family: 方正小标宋简体;
                  min-height: 22pt;
                  font-size: 22pt;
                  font-weight: bold;
                "
                >{{ formFileData.title }}</span
              >
            </p>
            <p
              style="
                text-indent: 0pt;
                text-align: left;
                vertical-align: baseline;
              "
            >
              <span
                lang="en-US"
                style="
                  font-family: 仿宋_GB2312;
                  font-weight: normal;
                  color: black;
                  min-height: 16pt;
                  font-size: 16pt;
                "
                >智慧管理中心：</span
              >
            </p>
            <textarea
              v-model="formFileData.content"
              disabled
              style="
                width: 100%;
                height: 40vh;
                line-height: 1.5;
                text-indent: 0pt;
                vertical-align: baseline;
                font-family: 仿宋_GB2312;
                font-weight: normal;
                color: black;
                min-height: 16pt;
                font-size: 16pt;
                background: #fff;
                border: none;
              "
            >

                  {{ formFileData.content }}

              </textarea
            >

            <p
              style="line-height: 1; text-indent: 0pt; vertical-align: baseline"
            ></p>
            <p style="vertical-align: baseline"></p>
            <p
              style="
                margin-bottom: 1pt;
                min-height: 10pt;
                line-height: 10pt;
                text-align: center;
                vertical-align: baseline;
              "
            >
              <span
                style="
                  font-family: 'Times New Roman';
                  font-weight: bold;
                  color: rgb(255, 0, 0);
                  min-height: 22pt;
                  font-size: 22pt;
                "
                >——————————————————</span
              >
            </p>
            <p
              class="docx-num-0-0"
              style="
                display: flex;
                justify-content: space-between;
                margin-top: 0pt;
                text-align: center;
                vertical-align: baseline;
                font-family: 仿宋_GB2312;
                font-weight: normal;
                min-height: 14pt;
                font-size: 14pt;
              "
            >
              <span lang="en-US">填报人:{{ formFileData.createName }} </span>
              <span>联系电话:{{ formFileData.phoneNumber }}</span>
              <span> 签发人：{{ formFileData.issued }}</span>
            </p>
          </article>
        </section>
        <button @click="handleDownload">下载</button>
      </div>
      <div></div>
    </Dialog>
  </div>
</template>

<script>
import Video from "@screen/components/VideoMulti";
import Dialog from "@screen/components/Dialog/index";
import { delay, exportFile2, confirm } from "@screen/utils/common";
import {
  eventDetails,
  getEventImportantFileDetails,
} from "@/api/commandDispatch";
export default {
  name: "DescCard",
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    "data.type": {
      handler(newValue, oldValue) {
        if (newValue != "text") {
          this.data.url = process.env.VUE_APP_BASE_API + this.data.desc;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  components: {
    Video,
    Dialog,
  },
  data() {
    return {
      detailsDialog: false,
      controlResult: [],
      formFileData: {
        fromDept: "齐鲁高速股份有限公司",
        createTime: "2024年04月24日17时22分",
        title: "关于G20青银高速K305+208交通事故的续报1",
        toDept: "智慧管理中心",
        content: "路管等单位及清障救援车辆已到达现场。预计结束时间为12时44分。",
        createName: "张三",
        phoneNumber: "18678866677",
        issued: "康传刚",
        status: 0,
        id: null,
      },
    };
  },
  methods: {
    openDetailsDialog(data) {
      this.detailsDialog = true;
      getEventImportantFileDetails(data.id).then((res) => {
        this.formFileData = res.data;
      });
    },
    // 下载
    handleDownload() {
      exportFile2({
        url: "/business/eventImportantFile/download",
        filename: this.data.desc,
        data: this.formFileData,
        ext: "docx",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detailsBox{
  max-height:160px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #123742;
  padding: 3px 8px;
}
.DescCard {
  font-size: 14px;
  // font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 16px;
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;

  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0d5f79;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  border: 1px solid #00b3cc;

  padding: 9px 15px;
  
  .time {
  }

  .info {
    display: flex;
    gap: 9px;
    align-items: center;

    .name {
      font-size: 16px;
      font-weight: 500;
      line-height: 19px;
    }

    .posts {
    }
  }

  .node {
    color: #ffbf00;
    font-size: 16px;
    line-height: 19px;
  }
  .desc {
    font-size: 16px;
    line-height: 19px;
    word-wrap: break-word; /* 允许在边界内断词 */
    word-break: break-all; /* 如果需要，还可以设置此属性来允许任意位置断词 */
  }
}
.videoClass {
  width: 300px;
  height: 180px;
}
.docx-wrapper {
  background: #fff;
  padding: 30px;
  display: flex;
  flex-flow: column;
  align-items: center;
  > section.docx {
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 30px;
  }
  .docx p,
  p.docx_1 span {
    font-family: var(--docx-minorHAnsi-font);
    color: #00000a;
    min-height: 11pt;
    font-size: 11pt;
  }
  button {
    cursor: pointer;
    width: 100px;
    height: 35px;
    line-height: 35px;
    color: #fff;
    background: #00b3cc;
    border-radius: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
  }
}
</style>