<template>
  <div>
    <div
      style="
        background-color: #f4f7fc;
        width: 100vw;
        height: 103vh;
        padding: 20px;
      "
    >
      <el-row :gutter="10">
        <el-col :span="14">
          <div class="grid-content ep-bg-purple">
            <div style="border-radius: 5px; height: 400px">
              <div style="display: inline-block; float: left; width: 100%">
                <div
                  style="
                    width: 49%;
                    background-color: white;
                    padding: 15px 20px;
                    float: left;
                    height: 400px;
                    display: inline-block;
                    border-radius: 5px;
                    position: relative;
                  "
                >
                  <el-tabs v-model="activeName2" class="demo-tabs">
                    <el-tab-pane label="收件箱" name="1">
                      <template v-slot:label>
                        <!-- <span
                          style="
                            vertical-align: middle;
                            display: inline-block;
                            height: 40px;
                          "
                        >
                          <el-icon
                            size="21"
                            style="
                              color: #409eff;
                              padding-top: 5px;
                              margin-right: 5px;
                            "
                            ><ChatLineRound
                          /></el-icon>
                        </span> -->
                        <span style="color: #409eff">收件箱</span>
                      </template>
                      <inBox :columnData="columnData" />
                    </el-tab-pane>
                  </el-tabs>
                  <div @click="Inboxmore" class="el-tabs-more">
                    <span>更多 ></span>
                  </div>
                </div>
                <div
                  style="
                    width: 49%;
                    background-color: white;
                    padding: 15px 20px;
                    float: left;
                    margin-left: 0.8vw;
                    height: 400px;
                    display: inline-block;
                    border-radius: 5px;
                    position: relative;
                  "
                >
                  <el-tabs v-model="activeName5" class="demo-tabs">
                    <el-tab-pane name="aa">
                      <template v-slot:label>
                        <span
                          style="
                            vertical-align: middle;
                            display: inline-block;
                            height: 40px;
                          "
                        >
                          <!-- <el-icon
                            size="21"
                            style="
                              color: #409eff;
                              padding-top: 5px;
                              margin-right: 5px;
                            "
                            ><Promotion
                          /></el-icon> -->
                        </span>
                        发件箱
                      </template>
                      <outBox :columnData="columnData"></outBox>
                    </el-tab-pane>
                  </el-tabs>
                  <div @click="Outboxmore" class="el-tabs-more">
                    <span>更多 ></span>
                  </div>
                </div>
                <div
                  style="
                    width: 49%;
                    margin-top: 15px;
                    background-color: white;
                    padding: 15px 20px;
                    float: left;
                    height: 460px;
                    display: inline-block;
                    border-radius: 5px;
                    position: relative;
                  "
                >
                  <el-tabs v-model="activeName22" class="demo-tabs">
                    <el-tab-pane name="activeName22.first">
                      <template v-slot:label>
                        <span
                          style="
                            vertical-align: middle;
                            display: inline-block;
                            height: 40px;
                          "
                        >
                          <!-- <el-icon
                            size="21"
                            style="
                              color: #409eff;
                              padding-top: 5px;
                              margin-right: 5px;
                            "
                            ><List
                          /></el-icon> -->
                        </span>
                        待办工作
                      </template>

                      <todoList :columnData="columnData" @pf="parent" />
                    </el-tab-pane>
                    <el-tab-pane label="我的提交" name="activeName22.second">
                      <submitWork :columnData="columnData" />
                    </el-tab-pane>
                  </el-tabs>
                  <div @click="todoworkmore(activeName22)" class="el-tabs-more">
                    <span>更多 ></span>
                  </div>
                </div>
                <div
                  style="
                    width: 49%;
                    background-color: white;
                    padding: 15px 20px;
                    float: left;
                    margin-left: 0.8vw;
                    height: 460px;
                    margin-top: 15px;
                    position: relative;
                    display: inline-block;
                    border-radius: 5px;
                  "
                >
                  <el-tabs v-model="activeName4" class="demo-tabs">
                    <el-tab-pane label="已办工作" name="a">
                      <template v-slot:label>
                        <span
                          style="
                            vertical-align: middle;
                            display: inline-block;
                            height: 40px;
                          "
                        >
                          <!-- <el-icon
                            size="21"
                            style="
                              color: #409eff;
                              padding-top: 5px;
                              margin-right: 5px;
                            "
                            ><Checked
                          /></el-icon> -->
                        </span>
                        已办工作
                      </template>
                      <completedWork ref="goodslist" :columnData="columnData" />
                    </el-tab-pane>
                  </el-tabs>
                  <div @click="officedonemore" class="el-tabs-more">
                    <span>更多 ></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content ep-bg-purple">
            <div
              style="
                width: 72%;
                background-color: white;
                float: left;
                height: 400px;
                display: inline-block;
                border-radius: 5px;
              "
            >
              <dutyOn></dutyOn>
            </div>

            <div
              style="
                width: 72%;
                background-color: white;
                float: left;
                padding: 15px 20px;
                height: 460px;
                display: inline-block;
                margin-top: 15px;
                border-radius: 5px;
                position: relative;
              "
            >
              <el-tabs ref="tabs1" v-model="activeName11" class="demo-tabs">
                <el-tab-pane name="activeName11.one">
                  <template v-slot:label>
                    <span
                      style="
                        vertical-align: middle;
                        display: inline-block;
                        height: 40px;
                      "
                    >
                      <!-- <el-icon
                        size="21"
                        style="
                          color: #409eff;
                          padding-top: 5px;
                          margin-right: 5px;
                        "
                        ><DataBoard
                      /></el-icon> -->
                    </span>
                    A级权力
                  </template>
                  <publicNotice :columnData="columnData" />
                </el-tab-pane>
                <el-tab-pane label="反腐纠风" name="activeName11.FFJF">
                  <AntiCorruptionAndRectification></AntiCorruptionAndRectification>
                </el-tab-pane>
                <!-- <el-tab-pane label="重大事项决策" name="activeName11.ZDSXJC">
                  <MajorDecision></MajorDecision>
                </el-tab-pane> -->
              </el-tabs>
              <div
                @click="moreAgod"
                v-if="activeName11 == 'activeName11.one'"
                class="el-tabs-more"
              >
                <span>更多 ></span>
              </div>
              <router-link
                v-else
                :to="{
                  path: '/more',
                  query: { columnID: activeName11, nowType: '1' },
                }"
                class="el-tabs-more"
              >
                <span>更多 ></span>
              </router-link>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import todoList from "./deskWork/todoList.vue";
import completedWork from "./deskWork/completedWork.vue";
import inBox from "./deskWork/inBox.vue";
import { ref, nextTick } from "vue";
import outBox from "./deskWork/outBox.vue";
import watchList from "./deskWork/watchList.vue";
import publicNotice from "./deskWork/publicNotice.vue";
import AntiCorruptionAndRectification from "./deskWork/AntiCorruptionAndRectification.vue";
import MajorDecision from "./deskWork/MajorDecision.vue";
import dutyOn from "./deskWork/dutyOn.vue";
import submitWork from "./deskWork/submitWork.vue";

import url from "../../assets/img/通告.png";
import url1 from "../../assets/img/信件.png";
import url2 from "../../assets/img/公告.png";
import url3 from "../../assets/img/说明.png";
import url4 from "../../assets/img/文档.png";
import url5 from "../../assets/img/资讯.png";
import url6 from "../../assets/img/安全中心.png";
import url7 from "../../assets/img/jbz.jpg";
import url8 from "../../assets/img/jl1.png";
import url9 from "../../assets/img/jl2.png";
import url10 from "../../assets/img/jl3.png";
import url11 from "../../assets/img/jl4.png";
import url12 from "../../assets/img/ad1.png";
import url13 from "../../assets/img/ad2.png";
import url14 from "../../assets/img/ad3.png";
import url15 from "../../assets/img/ad4.png";

export default {
  name: "YinetoaIndex",
  components: {
    todoList,
    completedWork,
    inBox,
    outBox,
    watchList,
    publicNotice,
    dutyOn,
    submitWork,
    AntiCorruptionAndRectification,
    MajorDecision,
  },
  data() {
    return {
      calendarValue1: new Date(),
      activeday: [
        // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5
        { dat: "2023-03-21" },
        { dat: "2023-03-15" },
        { dat: "2023-03-05" },
      ],

      activeName22: "activeName22.first",
      activeName11: "activeName11.one",
      activeName2: "1",
      activeName3: "11",
      activeName4: "a",
      activeName5: "aa",
      url,
      url1,
      url2,
      url3,
      url4,
      url5,
      url6,
      url7,
      url8,
      url9,
      url10,
      url11,
      url12,
      url13,
      url14,
      url15,
    };
  },
  computed: {},
  mounted() {
    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[0], tabns1[1]);
          });
        }
      });
    });
  },

  methods: {
    officedonemore() {
      this.$router.push({ path: "/official/offcialdone" });
    },
    todoworkmore(activeName22) {
      console.log("52552", activeName22);
      if (activeName22 == "activeName22.first") {
        this.$router.push({ path: "/official/todowork" });
      } else {
        this.$router.push({ path: "/official/myapply" });
      }
    },
    Outboxmore() {
      this.$router.push({ path: "/email", query: { page11: 2 } });
    },
    Inboxmore() {
      this.$router.push({ path: "/email", query: { page11: 1 } });
    },
    parent() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.goodslist.getList();
        });
      }, 300);
    },
    moreAgod() {
      this.$router.push({ path: "/aGodmore" });
    },
    handleTabClick(model1, name) {
      this[model1] = model1 + "." + name;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__item.is-active {
  color: #409eff;
}

::v-deep .el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #409eff;
  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-active {
  color: #409eff !important;
}

::v-deep .el-tabs__item {
  font-size: 17px;
  //   color: #888888;
  padding: 0 10px;
}

::v-deep .el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0px;
}

.is-selected {
  color: #1989fa;
}

::v-deep .el-calendar-table__row {
  height: 40px !important;
}

::v-deep .el-calendar__body {
  padding: 0 20px;
}

.el-tabs-more {
  width: 6.25rem;
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 14px;
  text-align: right;
  color: #409eff;
  display: block;
  position: absolute;
  top: 0.8rem;
  right: 2rem;
  cursor: pointer;
}
</style>
