<template>
  <div>
    <el-tabs class="demo-tabs" ref="navTabs" v-model="activeName3">
      <el-tab-pane
        @tab-click="handleClick2"
        label="反腐纠风"
        name="FFJF.activeName3"
      >
        <div style="display: flex">
          <ul style="padding: 0px; margin: 5px">
            <li
              class="hover-li"
              v-for="(item, index) in dataSix.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="{
                    backgroundColor: item.isRead == 1 ? '#0dd068' : '#d90013',
                  }"
                  style="
                    width: 6px;
                    height: 6px;

                    display: inline-block;
                    border-radius: 50%;
                    margin-bottom: 17px;
                    margin-right: 10px;
                  "
                ></span>
                <span
                  :style="{
                    color: item.isRead == 1 ? '#7a7373' : 'black',
                  }"
                  style="
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 15px;
                    max-width: 25vw;
                    text-align: left;
                  "
                  class="hover-li-div"
                  >{{ 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-tab-pane>
      <el-tab-pane
        @tab-click="handleClick1"
        label="A级权力"
        name="aGods.activeName3"
      >
        <div style="display: flex">
          <ul style="padding: 0px; margin: 5px">
            <li
              class="hover-li"
              v-for="(item, index) in dataAGods.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="openPdfViewer(item)"
              >
                <span
                  :style="{
                    backgroundColor: item.isRead == 1 ? '#0dd068' : '#d90013',
                  }"
                  style="
                    width: 6px;
                    height: 6px;

                    display: inline-block;
                    border-radius: 50%;
                    margin-bottom: 17px;
                    margin-right: 10px;
                  "
                ></span>
                <span
                  :style="{
                    color: item.isRead == 1 ? '#7a7373' : 'black',
                  }"
                  style="
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 15px;
                    max-width: 25vw;
                    text-align: left;
                  "
                  class="hover-li-div"
                  >{{ 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.createTime, "{y}-{m}-{d} ") }}</span
                >
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>

      <el-tab-pane
        @tab-click="handleClick"
        label="职权目录"
        name="ZQML.activeName3"
      >
        <div style="display: flex">
          <ul style="padding: 0px; margin: 5px">
            <li
              class="hover-li"
              v-for="(item, index) in dataFive.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="{
                    backgroundColor: item.isRead == 1 ? '#0dd068' : '#d90013',
                  }"
                  style="
                    width: 6px;
                    height: 6px;

                    display: inline-block;
                    border-radius: 50%;
                    margin-bottom: 17px;
                    margin-right: 10px;
                  "
                ></span>
                <span
                  :style="{
                    color: item.isRead == 1 ? '#7a7373' : 'black',
                  }"
                  style="
                    display: inline-block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 15px;
                    max-width: 25vw;
                    text-align: left;
                  "
                  class="hover-li-div"
                  >{{ 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-tab-pane>
    </el-tabs>
    <div
      @click="moreAgod"
      v-if="activeName3 == 'aGods.activeName3'"
      class="el-tabs-more"
    >
      <span>更多 ></span>
    </div>
    <router-link
      v-else
      :to="{ path: '/more', query: { columnID: activeName3 } }"
      class="el-tabs-more"
    >
      <span>更多 ></span>
    </router-link>

    <el-dialog
      v-model="centerDialogVisible"
      width="80%"
      style="height: 850px"
      title="文章详情"
      :append-to-body="true"
    >
      <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}:{m}")
                        }}
                      </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>
    </el-dialog>
    <el-dialog
      v-model="dialogVisible"
      width="70vw"
      style="height: 825px"
      :before-close="handleClose"
    >
      <div style="margin: 0 auto; width: 980px">
        <component :Id1="Id1" :deskWork="deskWork" :is="getSelectedComponent" />
      </div>

      <template #footer>
        <span
          style="position: absolute; bottom: 15px; right: 35px"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">关闭</el-button>
          <!-- <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button> -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { detailArticle } from "@/api/system/article";
import { workbench } from "@/api/aleave/aleaves";
import { articleList } from "@/api/home/home";
import { useDict } from "@/utils/dict";
import { selectArticleByColumnCode } from "@/api/home/home";
import Professional from "@/views/deakWorkaGodGod/Professional/index";
import LargePurchase from "@/views/deakWorkaGodGod/LargePurchase/index";
import InfrastructureProject from "@/views/deakWorkaGodGod/InfrastructureProject/index";
import CadreSelection from "@/views/deakWorkaGodGod/CadreSelection/index";
import AuditAndVerification from "@/views/deakWorkaGodGod/AuditAndVerification/index";
export default {
  name: "YinetoaWjwWebTabsAGods",
  components: {
    Professional,
    LargePurchase,
    InfrastructureProject,
    CadreSelection,
    AuditAndVerification,
  },
  data() {
    return {
      activeName3: "FFJF.activeName3",
      dataFive: [],
      dataSix: [],
      centerDialogVisible: false,
      Id1: null,
      dialogVisible: false,
      aleave_status: useDict("aleave_status").aleave_status,
      dataAGods: [],
      data: [],
      getSelectedComponent: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        status: null,
        start: "",
        end: "",
      },
      centerDialogVisible: false,
    };
  },

  mounted() {},
  created() {
    this.selectArticleByColumnCode();
    this.selectArticleByColumnCode1();
    this.getList();
    this.articleList();
    nextTick(() => {
      this.$nextTick(() => {
        // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
        const target = document.getElementsByClassName("el-tabs__item");
        const that = this;
        for (let i = 0; i < target.length; i++) {
          target[i].addEventListener("mouseover", () => {
            const tabName = target[i].getAttribute("id");
            const tabns = tabName.split("-");
            const tabns1 = tabns[1].split(".");
            that.handleTabClick(tabns1[1], tabns1[0]);
          });
        }
      });
    });
  },
  methods: {
    handleTabClick(model1, name) {
      console.log(model1, name);
      this[model1] = name + "." + model1;
      //   if (model1 == "activeName") {
      //     this.Code = name;
      //     this.selectArticleByColumnCode();
      //   } else if (model1 == "activeName1") {
      //     this.Code1 = name;
      //     this.selectArticleByColumnCode1();
      //   } else if (model1 == "activeName2") {
      //     this.Code2 = name;
      //     this.selectArticleByColumnCode2();
      //   } else if (model1 == "activeName3") {
      //     this.Code3 = name;
      //     this.selectArticleByColumnCode3();
      //   } else if (model1 == "activeName4") {
      //     this.Code4 = name;
      //     this.selectArticleByColumnCode4();
      //   }
    },
    openPdfViewer(row) {
      this.dialogVisible = true;
      console.log("row", row);
      if (row.catagory == 6) {
        this.getSelectedComponent = Professional;
        this.Id1 = row.id;
        this.deskWork = false;
        // this.$router.push({
        //   path: "/aleave/aGodGod",
        //   query: {
        //     id: row.id,
        //     deskWork: false,
        //   },
        // });
      } else if (row.catagory == 7) {
        this.getSelectedComponent = LargePurchase;
        this.Id1 = row.id;
        this.deskWork = false;
      } else if (row.catagory == 8) {
        this.getSelectedComponent = CadreSelection;
        this.Id1 = row.id;
        this.deskWork = false;
      } else if (row.catagory == 9) {
        this.getSelectedComponent = InfrastructureProject;
        this.Id1 = row.id;
        this.deskWork = false;
      } else if (row.catagory == 10) {
        this.getSelectedComponent = AuditAndVerification;
        this.Id1 = row.id;
        this.deskWork = false;
      }
      setTimeout(() => {
        this.getList();
      }, 300);
    },
    handleClick1() {
      this.getList();
    },
    getList() {
      workbench(this.queryParams).then((response) => {
        this.dataAGods = response.rows.slice(0, 8);
      });
    },
    async articleList() {
      const { rows } = await articleList({ isCarousel: "1" });
      this.data = rows;
      nextTick(() => {
        this.$nextTick(() => {
          // 此时tab的nav才渲染dom 否则拿不到el-tabs__item
          const target = document.getElementsByClassName("el-tabs__item");
          const that = this;
          for (let i = 0; i < target.length; i++) {
            target[i].addEventListener("mouseover", () => {
              const tabName = target[i].getAttribute("id");
              const tabns = tabName.split("-");
              const tabns1 = tabns[1].split(".");
              that.handleTabClick(tabns1[1], tabns1[0]);
            });
          }
        });
      });
    },
    async detail(id) {
      let { data } = await detailArticle(id);
      // this.dataDetail = data;
      this.$nextTick(() => {
        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");
      }
      this.selectArticleByColumnCode();
      this.selectArticleByColumnCode1();
      this.$nextTick(() => {
        this.getList();
      });
    },
    moreAgod() {
      this.$router.push({ path: "/aGodmore" });
    },
    async selectArticleByColumnCode() {
      // //console.log("this.docuCode", this.docuCode);
      const { rows } = await selectArticleByColumnCode({
        code: "ZQML",
        pageNum: 1,
        pageSize: 8,
        orderByColumn: "publishTime",
        isAsc: "Desc",
      });
      this.dataFive = rows;
    },
    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;
    },
    handleClick(tab) {
      this.selectArticleByColumnCode();
    },
    handleClick2() {
      this.selectArticleByColumnCode1();
    },
    async selectArticleByColumnCode1() {
      // //console.log("this.docuCode", this.docuCode);
      const { rows } = await selectArticleByColumnCode({
        code: "FFJF",
        pageNum: 1,
        pageSize: 8,
        orderByColumn: "publishTime",
        isAsc: "Desc",
      });
      this.dataSix = rows;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tabs-more {
  width: 6.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 14px;
  text-align: right;
  color: #1575cc;
  display: block;
  position: absolute;
  top: 3.5rem;
  right: 2rem;
}
::v-deep .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0px;
}
::v-deep .el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: #1575cc;
  z-index: 1;
  transition: width var(--el-transition-duration)
      var(--el-transition-function-ease-in-out-bezier),
    transform var(--el-transition-duration)
      var(--el-transition-function-ease-in-out-bezier);
  list-style: none;
}
::v-deep .el-tabs__item.is-disabled {
  color: var(--el-disabled-text-color);
  cursor: default;
}
</style>
