<template>
  <div>
    <!-- 反腐纠风 -->
    <div v-if="articleList.length != 0" style="margin-top: 10px">
      <div id="hover">
        <div
          v-for="item in articleList"
          :key="item"
          style="display: flex; padding: 7px 0px 7px 7px; width: 28vw"
        >
          <div style="width: 10px">
            <div
              style="
                width: 6px;
                height: 6px;
                margin-top: 7px;
                background-color: #409eff;
                border-radius: 50%;
              "
            ></div>
          </div>

          <div style="display: inline-block; margin-left: 5px">
            <div
              @click="detail(item.id)"
              id="titleHover"
              style="
                font-size: 15px;
                width: 20vw;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                cursor: pointer;
              "
            >
              <span>{{ item.title }}</span>
            </div>
            <div style="color: #8e959c; font-size: 14px; margin-top: 12px">
              <div style="display: inline-block">
                {{ parseTime(item.createTime, "{y}-{m}-{d} {h}:{i}") }}
              </div>
              <span style="margin-left: 15px">{{ item.createBy }}</span>
            </div>
          </div>
          <div></div>
        </div>
      </div>
    </div>
    <div style="margin-top: 5vh" v-else>
      <el-empty :image="emptyImage" />
    </div>
    <view-pdf
      ref="importRef"
      @guanbi="handleQuery"
      :key="$route.fullPath"
      :receiverData="receiverData"
    />
    <el-dialog
      v-model="centerDialogVisible"
      width="80%"
      title="文章详情"
      :append-to-body="true"
      center
      :fullscreen="dialogScale"
      draggable
    >
      <div
        style="position: absolute; right: 50px; top: 24px"
        @click="dialogScale ? (dialogScale = false) : (dialogScale = true)"
      >
        <el-icon><FullScreen /></el-icon>
      </div>
      <!-- <template #title>
      <div class="dialog-title">
        <span>文章详情</span>
        <div class="dialog-btns">
          <el-icon @click="fullscreen"><FullScreen /></el-icon>
          <i class="el-icon-full-screen"></i
          ><i class="el-icon-minus" @click="minimize"></i>
        </div>
      </div>
    </template> -->
      <div
        style="
          margin: 0 auto;
          background-color: #f2f2f2;
          height: 750px;
          overflow: auto;
        "
      >
        <div>
          <div>
            <div><div class="grid-content ep-bg-purple" /></div>
            <div style="">
              <div
                style="
                  background-color: white;
                  height: 100%;
                  width: 850px;
                  margin: 0 auto;
                  border: 2px solid #ececec;
                  padding: 15px 10px;
                "
              >
                <div
                  style="
                    border: 3px solid #f8f8f8;
                    min-height: 1000px;
                    width: 825px;
                    height: 100%;
                  "
                >
                  <div
                    style="background-color: #f8f8f8; width: 100%"
                    class="grid-content ep-bg-purple"
                  >
                    <div
                      style="
                        font-size: 25px;
                        font-weight: 600;

                        line-height: 50px;

                        text-align: center;
                        border-bottom: 1px solid #c0c0c0;
                      "
                    >
                      <div style="font-size: 25px">
                        {{ title1 }}
                      </div>
                    </div>
                    <div
                      style="
                        font-size: 15px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        width: 700px;
                        display: inline-block;
                        padding-left: 120px;
                      "
                    >
                      <div style="display: inline-block">
                        发布人：{{ createBy }}
                      </div>
                      <div style="display: inline-block; margin: 0 25px">
                        发布时间：{{
                          parseTime(publishTime, "{y}-{m}-{d} {h}:{i}")
                        }}
                      </div>
                      <div style="display: inline-block">
                        浏览量：{{ views }}
                      </div>
                    </div>
                    <div
                      style="float: right; margin-right: 20px; margin-top: 3px"
                    >
                      <el-button
                        @click="miniFontSize"
                        size="small"
                        style="padding: 5.5px"
                        >A-</el-button
                      >
                      <el-button
                        @click="addFontSize"
                        size="small"
                        style="padding: 4px"
                        >A+</el-button
                      >
                    </div>
                    <div
                      :style="{ fontSize: fontSize + 'px' }"
                      style="padding: 30px 15px; background-color: white"
                    >
                      <div v-html="responseData"></div>
                      <div
                        v-for="image in getImagesFromData(responseData)"
                        :key="image"
                      >
                        <el-image
                          :fit="contain"
                          :src="image.src"
                          :alt="image.alt"
                          :width="image.width"
                          :height="image.height"
                        />
                      </div>
                      <div v-for="item in fjFiles" :key="item">
                        <el-icon style="color: #1b6ef3; font-size: 26px"
                          ><Paperclip style="padding-top: 15px" /></el-icon
                        ><a
                          style="color: #1b6ef3; font-size: 16px"
                          target="_blank"
                          :href="item.url"
                          >{{ item.name }}</a
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div><div class="grid-content ep-bg-purple" /></div>
          </div>
        </div>
      </div>

      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">
            确认
          </el-button>
          <div style="text-align: center; margin-bottom: 20px">
            <el-button type="primary " @click="centerDialogVisible = false"
              >关闭</el-button
            >
          </div>
        </span>
      </template> -->
    </el-dialog>
  </div>
</template>

<script>
import { detailArticle } from "@/api/system/article";
import { moreArticle } from "@/api/system/article";
import { useDict } from "@/utils/dict";
import emptyImage from "@/assets/images/none.png";
export default {
  name: "YinetoaPublicNotice",

  data() {
    return {
      fontSize: 16,
      emptyImage,
      dialogScale: false,
      // 查询参数
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        columnId: 28,
      },
      articleList: [],
      Id1: null,
      dialogVisible: false,
      aleave_status: useDict("aleave_status").aleave_status,
      data: [],
      getSelectedComponent: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        status: null,
        start: "",
        end: "",
      },
      centerDialogVisible: false,
    };
  },
  created() {
    // this.getList();
    this.listByColumnId1();
  },
  mounted() {},

  methods: {
    addFontSize() {
      if (this.fontSize < 19) {
        this.fontSize = this.fontSize + 1;
      }
    },
    miniFontSize() {
      if (this.fontSize > 14) {
        this.fontSize = this.fontSize - 1;
      }
    },
    listByColumnId1() {
      this.loading = true;

      moreArticle(this.queryParams1).then((res) => {
        this.articleList = res.rows.slice(0, 6);
        this.loading = false;
      });
    },
    //////////////////////////////

    async detail(id) {
      let { data } = await detailArticle(id);
      // this.dataDetail = data;
      this.goToDetailPage(data);
    },
    goToDetailPage(row) {
      if (!row.urlLink) {
        this.centerDialogVisible = true;

        this.title1 = row.title;
        this.fjFiles = row.fjFiles;
        this.publishTime = row.publishTime;
        this.createBy = row.createBy;
        this.views = row.views;
        this.responseData = row.content;
      } else if (row.urlLink) {
        window.open(row.urlLink, "_blank");
      }
    },

    getImagesFromData(data) {
      // 在这里解析数据，提取图片信息并返回一个包含图片相关属性的数组
      // 例如，假设数据中的图片信息是以<img>标签的形式呈现的：
      const imagePattern =
        /<img\s*src="([^"]+)"\s*alt="([^"]+)"\s*width="(\d+)"\s*height="(\d+)"\s*\/?>/g;
      const images = [];
      let match;
      while ((match = imagePattern.exec(data)) !== null) {
        const src = match[1];
        const alt = match[2];
        const width = parseInt(match[3], 10);
        const height = parseInt(match[4], 10);
        images.push({ src, alt, width, height });
      }
      return images;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  /* padding: var(--el-dialog-padding-primary); */
  /* padding-bottom: 0px; */
  padding: 0px;
  margin-right: 16px;
  word-break: break-all;
}
#titleHover :hover {
  color: #409eff !important;
  text-decoration: underline !important;
}
::v-deep img {
  max-width: 790px;
}
#hover :hover {
  background-color: aliceblue;
}
</style>
