<template>
  <div
    style="background-color: #f3f4f6; width: 100vw; height: 91vh; padding: 20px"
  >
    <el-row :gutter="20">
      <el-col :span="5">
        <div
          style="
            background-color: white;
            padding: 15px;
            height: 80vh;
            width: 100%;
            margin-right: 20px;
          "
          class="grid-content ep-bg-purple"
        >
          <div style="font-size: 20px; color: #409eff">A级权力</div>
          <div style="height: 32.5vh; overflow: auto; margin-top: 20px">
            <div
              style="cursor: pointer"
              id="bg"
              v-for="(item, index) in catagoryList"
              :key="index"
            >
              <div
                :class="selectedIndex == index ? 'active' : ''"
                class="lineStyle"
                style="
                  padding-left: 20px;
                  font-size: 16px;
                  height: 40px;
                  line-height: 40px;
                "
                @click="selectItem(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>

          <div
            v-for="(image, index) in data2"
            :key="index"
            style="margin-top: 25vh"
          >
            <img
              @click="imageClick(image.columnCode)"
              style="width: 100%; border-radius: 5px; margin-top: 5px"
              :src="image.src"
              alt=""
            />
          </div>
          <!-- <div>
            <img
              :src="data2.img4"
              alt=""
              style="width: 14.5vw; border-radius: 5px; margin-top: 5px"
            />
          </div> -->
        </div>
      </el-col>
      <el-col :span="17"
        ><div
          style="padding: 0px; height: 80vh"
          class="grid-content ep-bg-purple"
        >
          <div style="background: white; height: 80vh; overflow-y: auto">
            <div style="padding: 20px; margin-left: 20px">
              <div
                style="
                  color: #409eff;
                  font-size: 24px;
                  font-weight: 800;
                  width: 64vw;
                  padding-bottom: 10px;
                  margin-bottom: 10px;
                  border-bottom: 1px solid #409eff;
                "
              >
                {{ name }}
              </div>
              <div>
                <div
                  v-for="item in data"
                  :key="item"
                  style="height: 50px; line-height: 50px; padding: 0 20px"
                >
                  <div
                    class="hover-li"
                    @click="openPdfViewer(item)"
                    style="
                      width: 95%;
                      height: 50px;
                      line-height: 50px;
                      margin-bottom: 5vh;
                      display: flex;
                      cursor: pointer;
                    "
                  >
                    <div
                      style="
                        height: 50px;
                        line-height: 50px;
                        display: inline-block;
                        margin-bottom: 30px;
                        border-bottom: 1px solid #f1f1f1;
                        width: 100%;
                      "
                    >
                      <div
                        style="
                          width: 5px;
                          height: 5px;
                          background-color: #409eff;
                          display: inline-block;
                          border-radius: 50%;
                          margin-bottom: 23px;
                        "
                      ></div>
                      <div
                        style="
                          display: inline-block;
                          /* max-width: 47vw; */
                          width: 18vw;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          /* min-width: 45vw; */
                          margin-left: 10px;
                        "
                      >
                        {{ item.title }}
                      </div>
                      <div style="float: right; display: inline-block">
                        <div
                          style="
                            display: inline-block;
                            /* width: 150px; */
                            /* float: right; */
                            height: 50px;
                            line-height: 50px;
                            color: #999999;
                            border-bottom: 1px solid #f1f1f1;
                            /* position: relative;
                          right: 0px; */
                          "
                        >
                          {{
                            parseTime(item.createTime, "{y}-{m}-{d} {h}:{m}")
                          }}
                          <!-- </div>
                      <div
                        style="
                          display: inline-block;
                          /* position: relative;
                          right: 0px; */
                          /* border-bottom: 1px solid #f1f1f1; */
                          /* width: 80px; */
                        "
                      > -->
                          <div
                            v-if="item.status == 1"
                            style="
                              color: #e88f21;
                              display: inline-block;
                              margin: 0 20px;
                            "
                          >
                            公示中
                          </div>
                          <div
                            v-else
                            style="
                              color: #44c088;
                              display: inline-block;
                              margin: 0 20px;
                            "
                          >
                            已完成
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  style="
                    float: right;
                    margin-top: 20px;
                    margin-right: 80px;
                    margin-bottom: 20px;
                  "
                >
                  <el-pagination
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                  />
                </div>
              </div>
            </div>
          </div></div
      ></el-col>
    </el-row>
    <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>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCatagory,
  getCatagory,
  delCatagory,
  addCatagory,
  updateCatagory,
} from "@/api/aleave/catagory";
import img2 from "@/assets/home/lzwh.jpg";
import img3 from "@/assets/home/dflz.jpg";
import img4 from "@/assets/home/zqml.jpg";
import img5 from "@/assets/home/jzcm.jpg";
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";
import { workbench } from "@/api/aleave/aleaves";

export default {
  name: "YinetoaWjwWebAGodMmore",
  components: {
    Professional,
    LargePurchase,
    InfrastructureProject,
    CadreSelection,
    AuditAndVerification,
  },
  data() {
    return {
      total: 0,
      name: "",
      dialogVisible: false,
      pageNum: 1,
      pageSize: 10,
      selectedIndex: 0,
      data: [],
      data2: [
        // { src: img2, columnCode: "LZWH" },
        // {
        //   src: img5,
        //   columnCode: "JZCM",
        // },
        // { src: img3, columnCode: "DFLZ" },
        { src: img4, columnCode: "ZQML" },
      ],
      catagoryList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        catagory: 6,
      },
    };
  },
  created() {
    this.getList();
    this.getListCatagory();
    // this.selectArticleByColumnCode();
  },
  mounted() {},

  methods: {
    imageClick(columnCode) {
      this.$router.push({
        path: "/more",
        query: { columnID: columnCode, nowType: "2" },
      });
    },
    async selectArticleByColumnCode() {
      const { rows } = await selectArticleByColumnCode({ code: "AGODPIC" });
      this.data2 = rows;
    },
    openPdfViewer(row) {
      this.dialogVisible = true;

      if (row.catagory == 6) {
        this.getSelectedComponent = Professional;
        this.Id1 = row.id;
        this.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;
      }
    },
    //点击
    selectItem(val, index) {
      this.selectedIndex = index;
      this.queryParams.catagory = val.id;
      this.name = val.name;
      this.getListCatagory();
    },
    getListCatagory() {
      workbench(this.queryParams).then((response) => {
        this.data = response.rows;
        this.total = response.rows.length;
      });
    },
    getList() {
      listCatagory(this.queryParams).then((response) => {
        this.catagoryList = response.rows;
        this.name = response.rows[0].name;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep img {
  max-width: 790px;
}
::v-deep .el-tree-node__content {
  display: flex;
  align-items: center;
  height: 26px;
  cursor: pointer;
  font-size: 16px;
}
::v-deep .el-dialog__body {
  padding: 20px 30px;
  color: var(--el-text-color-regular);
  font-size: var(--el-dialog-content-font-size);
  word-break: break-all;
}
.hover-li:hover {
  background-color: #f5f7fa;
}
.selected {
  font-size: 17px;
  margin-left: 25px;
  padding-right: 25px;
  border-right: 1px solid #e7eaec;
  color: #3792f4; // 字体颜色变为蓝色
}
.lineStyle.active {
  background-color: #ebf5ff;
}
#bg:hover {
  background-color: #f5f7fa;
}
</style>
