<template>
  <div style="display: flex">
    <ul style="padding: 0px">
      <li
        class="hover-li"
        v-for="(item, index) in data.slice(0, 8)"
        :key="index"
        style="
          display: flex;
          height: 40px;
          line-height: 40px;
          padding: 0px;

          position: relative;
          border-bottom: 1px dashed #e5e5e5;
        "
      >
        <div style="width: 40vw; cursor: pointer" @click="detail(item.id)">
          <span
            style="
              width: 6px;
              height: 6px;
              background-color: #409eff;
              display: inline-block;
              border-radius: 50%;
              margin-bottom: 17px;
              margin-right: 10px;
            "
          ></span>
          <span
            style="
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 15px;
              max-width: 25vw;
              color: #333333;
              text-align: left;
            "
            >{{ item.title }}</span
          >
          <span
            style="
              display: inline-block;
              height: 40px;
              line-height: 40px;
              margin-left: 10px;
            "
          >
            <el-icon
              style="
                margin-right: 40px;
                position: absolute;
                top: 0px;

                font-size: 17px;
                color: #409eff;
                font-weight: 700;
              "
              v-if="item.urlLink != null"
              ><Link style="width: 20px; height: 20px; margin-top: 20px"
            /></el-icon>
          </span>

          <span
            style="
              display: inline-block;
              float: right;
              font-size: 15px;
              text-align: right;
              margin-right: 2.2vw;
              color: #9d9d9d;
              margin-top: 1px;
            "
            >{{ parseTime(item.publishTime, "{y}-{m}-{d} ") }}</span
          >
        </div>
      </li>
    </ul>
  </div>
  <el-dialog
    v-model="centerDialogVisible"
    width="65%"
    title="文章详情"
    :append-to-body="true"
    center
    draggable
    :fullscreen="dialogScale"
  >
    <div
      style="position: absolute; right: 50px; top: 24px"
      @click="dialogScale ? (dialogScale = false) : (dialogScale = true)"
    >
      <el-icon><FullScreen /></el-icon>
    </div>
    <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;
                      line-height: 27px;
                      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>
</template>

<script>
import { selectArticleByColumnCode } from "@/api/home/home";
import { detailArticle } from "@/api/system/article";
export default {
  name: "YinetoaNewCenter",
  props: {
    /* 表格行数据 */
    docuCode: {
      type: String,
    },
  },
  data() {
    return {
      fontSize: 18,
      data: [],
      dialogScale: false,
      dataDetail: [],
      centerDialogVisible: false,
      title1: "",
      publishTime: null,
      createBy: null,
      views: null,
      fjFiles: [],
      responseData: null,
    };
  },

  created() {
    this.selectArticleByColumnCode();
  },
  mounted() {
    // this.select/ArticleByColumnCode();
  },
  methods: {
    addFontSize() {
      if (this.fontSize < 20) {
        this.fontSize = this.fontSize + 0.3;
      }
    },
    miniFontSize() {
      if (this.fontSize > 14) {
        this.fontSize = this.fontSize - 0.3;
      }
    },
    async detail(id) {
      let { data } = await detailArticle(id);
      // this.dataDetail = data;
      this.goToDetailPage(data);
    },
    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;
    },

    goToDetailPage(row) {
      if (!row.urlLink) {
        this.centerDialogVisible = true;
        //console.log("row", row);
        this.title1 = row.title;
        this.fjFiles = row.fjFiles;
        this.publishTime = row.publishTime;
        this.createBy = row.createBy;
        this.views = row.views;
        this.responseData = row.content;
        this.selectArticleByColumnCode();
      } else if (row.urlLink) {
        window.open(row.urlLink, "_blank");
      }
    },
    async selectArticleByColumnCode() {
      // //console.log("this.docuCode", this.docuCode);
      const { rows } = await selectArticleByColumnCode({ code: "ZQML" });
      this.data = rows;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep img {
  max-width: 790px;
}
.el-tabs__header {
  margin: 0px;
}
.hover-li:hover {
  color: #409eff;
  // background-color: #f5f7fa;
}
</style>
