<template>
  <div>
    <div style="margin-top: 10px">
      <div id="hover">
        <div
          v-for="item in data"
          :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="openPdfViewer(item)"
              id="titleHover"
              style="
                font-size: 15px;
                width: 13vw;
                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
              style="
                display: flex;
                position: absolute;
                right: 0;
                width: 70px;
                margin-top: 5px;
                vertical-align: middle;
                height: 20px;
                line-height: 20px;
              "
            >
              <span
                style="
                  font-size: 14px;
                  display: inline-block;
                  /* height: 40px; */
                  width: 58px;
                  /* line-height: 40px; */
                "
              >
                <span v-if="item.status == 1" style="color: #e88f21"
                  >公示中</span
                >
                <span v-else style="color: #44c088">已完成</span>
                <!-- <dict-tag :options="aleave_status" :value="item.status" /> -->
              </span>
              <!-- <div style="width: 56px">
                <div id="button1">
                  <el-button
                    round
                    v-if="item.WFState == 3"
                    type="info"
                    size="small"
                    style="
                      padding: 0 10px;
                      width: 50px;
                      margin-left: 5px;
                      margin-top: 1.6vh;
                    "
                  >
                    已完成
                  </el-button>
                </div>

                <div id="button2">
                  <el-button
                    round
                    v-if="item.WFState == 5"
                    type="danger"
                    size="small"
                    style="
                      padding: 0 10px;
                      width: 50px;
                      margin-left: 5px;
                      margin-top: 1.6vh;
                    "
                  >
                    退回
                  </el-button>
                </div>

                <div id="button">
                  <el-button
                    round
                    v-if="item.WFState == 2"
                    type="primary"
                    size="small"
                    style="
                      padding: 0 10px;
                      width: 50px;
                      margin-left: 5px;
                      margin-top: 1.6vh;
                    "
                  >
                    运行中
                  </el-button>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <view-pdf
      ref="importRef"
      @guanbi="handleQuery"
      :key="$route.fullPath"
      :receiverData="receiverData"
    />
    <el-dialog
      v-model="dialogVisible"
      width="70vw"
      style="height: 815px"
      :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: 30px"
          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 { useDict } from "@/utils/dict";
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";
import { noticeList } from "@/api/deskWork/publicNotice";
import { selectArticleByColumnCode } from "@/api/home/home";
export default {
  name: "YinetoaPublicNotice",
  components: {
    Professional,
    LargePurchase,
    InfrastructureProject,
    CadreSelection,
    AuditAndVerification,
  },
  data() {
    return {
      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();
  },
  mounted() {},

  methods: {
    openPdfViewer(row) {
      this.dialogVisible = true;
      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;
      }
    },
    getList() {
      workbench(this.queryParams).then((response) => {
        this.data = response.rows.slice(0, 6);
      });
    },
    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>
