<template>
  <div class="main-box">
    <div class="areaTreeBox fullHeight" id="videoTreeBox">
      <div class="areaTreeInner whiteBlock fullHeight">
        <p class="pageTitle">
          承包商/厂区列表
        </p>
        <div class="area-select">
          <el-select
            v-model="areaSelectVal"
            placeholder="请选择"
            style="width: 100%;margin-top: 10px;"
            size="medium"
          >
            <el-option
              v-for="item in areaList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="treeBox">
          <p class="pageTitle">
            承包商列表
          </p>
          <vue-scroll v-if="level1CompanyData.length > 0">
            <el-tree
              :data="level1CompanyData"
              :props="defaultProps"
              default-expand-all
              node-key="itemId"
              ref="tree"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span
                  style="
                    width: 160px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: inline-block;
                  "
                  :class="
                    data.videoName
                      ? 'videoName'
                      : data.projectName
                      ? 'projectName'
                      : data.companyType == 2
                      ? 'companyName2'
                      : ''
                  "
                  :title="node.label"
                  >{{ node.label }}</span
                >
              </span>
            </el-tree>
          </vue-scroll>
          <div class="placeholderBox" v-else>
            <img src="@/assets/images/noData2.png" alt="" srcset="" />
            <p>{{ $t("message.videoManage.empty") }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="gantt-box">
      <div class="header">
        <div class="left-content">
          <div class="item" v-for="(item, index) in headerList" :key="index">
            <div class="color-block" :style="{ background: item.color }"></div>
            <div class="label">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="gantt-chart" v-if="projects.length > 0">
        <div class="table" @scroll="handleScroll">
          <div class="thead">
            <div class="row">
              <div class="td fixed_1">分部分项工程名称</div>
              <div class="td fixed_2">开始日期</div>
              <div class="td fixed_3" style="border-right: 1px solid #cbd1df">
                完成日期
              </div>
              <div class="td" v-for="date in dateList" :key="date">
                <div class="date">
                  <div class="month">
                    {{ date }}
                  </div>
                  <div class="days">
                    <div
                      class="day"
                      v-for="day in getDays(date)"
                      :key="day.num"
                    >
                      {{ day.num }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tbody">
            <div
              class="row-groups"
              :class="{ open: openedIndex === p.id }"
              v-for="(p, i) in projects"
              :key="p.taskName"
            >
              <div class="row">
                <div
                  class="td fixed_1"
                  @click="handleOpen(p, p.id)"
                  style="color: #333333; padding-left: 25px"
                >
                  <i
                    class="el-icon-arrow-down"
                    v-if="openedIndex === p.id && p.children.length > 0"
                    :style="{
                      visibility:
                        openedIndex === p.id && p.children.length > 0
                          ? 'visible'
                          : 'hidden',
                    }"
                  ></i>
                  <i
                    class="el-icon-arrow-right"
                    v-else
                    :style="{
                      visibility:
                        openedIndex != p.id && p.children.length > 0
                          ? 'visible'
                          : 'hidden',
                    }"
                  ></i>
                  <el-tooltip
                    effect="dark"
                    :content="p.taskName"
                    placement="top-start"
                  >
                    <span>{{ p.taskName }}</span>
                  </el-tooltip>
                </div>

                <!-- <div class="td fixed_1" @click="handleOpen(p, i)" style="color: #333333; padding-left: 25px">
                  <i
                    class="el-icon-arrow-down"
                    v-if="openedIndex === i && p.children.length > 0"
                    :style="{
                      visibility: openedIndex === i && p.children.length > 0 ? 'visible' : 'hidden'
                    }"
                  ></i>
                  <i
                    class="el-icon-arrow-right"
                    v-else
                    :style="{
                      visibility: openedIndex != i && p.children.length > 0 ? 'visible' : 'hidden'
                    }"
                  ></i>
                  <el-tooltip effect="dark" :content="p.taskName" placement="top-start">
                    <span>{{ p.taskName }}</span>
                  </el-tooltip>
                </div> -->

                <div class="td fixed_2">{{ p.startDate }}</div>
                <div class="td fixed_3">{{ p.finishDate }}</div>
                <div
                  class="td"
                  v-for="date in dateList"
                  :key="date + 'grid-date'"
                >
                  <div class="grids">
                    <div
                      class="grid"
                      v-for="day in getDays(date)"
                      :key="'grid' + day.num"
                      :ref="setItemRef(p.id, day.date)"
                    ></div>
                  </div>
                </div>
                <div
                  class="progress"
                  :style="gantt"
                  v-for="(gantt, index) in p.gantts"
                  :key="index"
                  :title="p.taskName + ' ' + headerList[p.status].label"
                  @click="openGanttDialog(p)"
                ></div>
              </div>
              <!-- 第二层 -->
              <div
                class="children"
                v-show="openedIndex === p.id"
                v-for="child in p.children"
                :key="'child-' + child.taskName"
              >
                <div class="row">
                  <div
                    class="td fixed_1"
                    @click="handleOpenSecond(child, child.id)"
                    style="padding-left: 25px"
                  >
                    <i
                      class="el-icon-arrow-down"
                      v-if="
                        openedIndexSecond === child.id &&
                          child.children.length > 0
                      "
                      :style="{
                        visibility:
                          openedIndexSecond === child.id &&
                          child.children.length > 0
                            ? 'visible'
                            : 'hidden',
                      }"
                    ></i>
                    <i
                      class="el-icon-arrow-right"
                      v-else
                      :style="{
                        visibility:
                          openedIndexSecond != child.id &&
                          child.children.length > 0
                            ? 'visible'
                            : 'hidden',
                      }"
                    ></i>
                    <el-tooltip
                      effect="dark"
                      :content="child.taskName"
                      placement="top-start"
                    >
                      <span>{{ child.taskName }}</span>
                    </el-tooltip>
                  </div>
                  <div class="td fixed_2">{{ child.startDate }}</div>
                  <div class="td fixed_3">{{ child.finishDate }}</div>
                  <div
                    class="td"
                    v-for="date in dateList"
                    :key="date + 'grid-date'"
                  >
                    <div class="grids">
                      <div
                        class="grid"
                        v-for="day in getDays(date)"
                        :key="'grid' + day.num"
                        :ref="setItemRef(child.id, day.date)"
                      ></div>
                    </div>
                  </div>
                  <div
                    class="progress"
                    :style="gantt"
                    v-for="(gantt, index) in child.gantts"
                    :key="index"
                    @mouseenter="(e) => handleHover(e, child)"
                    @mouseleave="handleLeave"
                  ></div>
                </div>

                <!-- 第三层 -->
                <div
                  class="children"
                  v-show="openedIndexSecond === child.id"
                  v-for="second in child.children"
                  :key="'child-' + second.taskName"
                >
                  <div class="row">
                    <div
                      class="td fixed_1"
                      @click="handleOpenThird(second, second.id)"
                      style="padding-left: 25px"
                    >
                      <i
                        class="el-icon-arrow-down"
                        v-if="
                          openedIndexThird === second.id &&
                            second.children.length > 0
                        "
                        :style="{
                          visibility:
                            openedIndexThird === second.id &&
                            second.children.length > 0
                              ? 'visible'
                              : 'hidden',
                        }"
                      ></i>
                      <i
                        class="el-icon-arrow-right"
                        v-else
                        :style="{
                          visibility:
                            openedIndexThird != second.id &&
                            second.children.length > 0
                              ? 'visible'
                              : 'hidden',
                        }"
                      ></i>

                      <el-tooltip
                        effect="dark"
                        :content="second.taskName"
                        placement="top-start"
                      >
                        <span>{{ second.taskName }}</span>
                      </el-tooltip>
                    </div>

                    <div class="td fixed_2">{{ second.startDate }}</div>
                    <div class="td fixed_3">{{ second.finishDate }}</div>
                    <div
                      class="td"
                      v-for="date in dateList"
                      :key="date + 'grid-date'"
                    >
                      <div class="grids">
                        <div
                          class="grid"
                          v-for="day in getDays(date)"
                          :key="'grid' + day.num"
                          :ref="setItemRef(second.id, day.date)"
                        ></div>
                      </div>
                    </div>
                    <div
                      class="progress"
                      :style="gantt"
                      v-for="(gantt, index) in second.gantts"
                      :key="index"
                      @mouseenter="(e) => handleHover(e, second)"
                      @mouseleave="handleLeave"
                    ></div>
                  </div>

                  <!-- 第四层 -->
                  <div
                    class="children"
                    v-show="openedIndexThird === second.id"
                    v-for="third in second.children"
                    :key="'child-' + third.taskName"
                  >
                    <div class="row">
                      <div
                        class="td fixed_1"
                        @click="handleOpenFourth(third, third.id)"
                        style="padding-left: 25px"
                      >
                        <i
                          class="el-icon-arrow-down"
                          v-if="
                            openedIndexFourth === third.id &&
                              third.children.length > 0
                          "
                          :style="{
                            visibility:
                              openedIndexFourth === third.id &&
                              third.children.length > 0
                                ? 'visible'
                                : 'hidden',
                          }"
                        ></i>
                        <i
                          class="el-icon-arrow-right"
                          v-else
                          :style="{
                            visibility:
                              openedIndexFourth != third.id &&
                              third.children.length > 0
                                ? 'visible'
                                : 'hidden',
                          }"
                        ></i>
                        <el-tooltip
                          effect="dark"
                          :content="third.taskName"
                          placement="top-start"
                        >
                          <span>{{ third.taskName }}</span>
                        </el-tooltip>
                      </div>

                      <div class="td fixed_2">{{ third.startDate }}</div>
                      <div class="td fixed_3">{{ third.finishDate }}</div>
                      <div
                        class="td"
                        v-for="date in dateList"
                        :key="date + 'grid-date'"
                      >
                        <div class="grids">
                          <div
                            class="grid"
                            v-for="day in getDays(date)"
                            :key="'grid' + day.num"
                            :ref="setItemRef(third.id, day.date)"
                          ></div>
                        </div>
                      </div>
                      <div
                        class="progress"
                        :style="gantt"
                        v-for="(gantt, index) in third.gantts"
                        :key="index"
                        @mouseenter="(e) => handleHover(e, third)"
                        @mouseleave="handleLeave"
                      ></div>
                    </div>

                    <!-- 第五层 -->
                    <div
                      class="children"
                      v-show="openedIndexFourth === third.id"
                      v-for="fouth in third.children"
                      :key="'child-' + fouth.taskName"
                    >
                      <div class="row">
                        <div
                          class="td fixed_1"
                          @click="handleOpenFifth(fouth, fouth.id)"
                          style="padding-left: 25px"
                        >
                          <i
                            class="el-icon-arrow-down"
                            v-if="
                              openedIndexFifth === fouth.id &&
                                fouth.children.length > 0
                            "
                            :style="{
                              visibility:
                                openedIndexFifth === fouth.id &&
                                fouth.children.length > 0
                                  ? 'visible'
                                  : 'hidden',
                            }"
                          ></i>
                          <i
                            class="el-icon-arrow-right"
                            v-else
                            :style="{
                              visibility:
                                openedIndexFifth != fouth.id &&
                                fouth.children.length > 0
                                  ? 'visible'
                                  : 'hidden',
                            }"
                          ></i>
                          <el-tooltip
                            effect="dark"
                            :content="fouth.taskName"
                            placement="top-start"
                          >
                            <span>{{ fouth.taskName }}</span>
                          </el-tooltip>
                        </div>

                        <div class="td fixed_2">{{ fouth.startDate }}</div>
                        <div class="td fixed_3">{{ fouth.finishDate }}</div>
                        <div
                          class="td"
                          v-for="date in dateList"
                          :key="date + 'grid-date'"
                        >
                          <div class="grids">
                            <div
                              class="grid"
                              v-for="day in getDays(date)"
                              :key="'grid' + day.num"
                              :ref="setItemRef(fouth.id, day.date)"
                            ></div>
                          </div>
                        </div>
                        <div
                          class="progress"
                          :style="gantt"
                          v-for="(gantt, index) in fouth.gantts"
                          :key="index"
                          @mouseenter="(e) => handleHover(e, fouth)"
                          @mouseleave="handleLeave"
                        ></div>
                      </div>

                      <!-- 第六层 -->
                      <div
                        class="children"
                        v-show="openedIndexFifth === fouth.id"
                        v-for="fifth in fouth.children"
                        :key="'child-' + fifth.taskName"
                      >
                        <div class="row">
                          <div
                            class="td fixed_1"
                            @click="handleOpenSixth(fifth, fifth.id)"
                            style="padding-left: 25px"
                          >
                            <i
                              class="el-icon-arrow-down"
                              v-if="
                                openedIndexSixth === fifth.id &&
                                  fifth.children.length > 0
                              "
                              :style="{
                                visibility:
                                  openedIndexSixth === fifth.id &&
                                  fifth.children.length > 0
                                    ? 'visible'
                                    : 'hidden',
                              }"
                            ></i>
                            <i
                              class="el-icon-arrow-right"
                              v-else
                              :style="{
                                visibility:
                                  openedIndexSixth != fifth.id &&
                                  fifth.children.length > 0
                                    ? 'visible'
                                    : 'hidden',
                              }"
                            ></i>
                            <el-tooltip
                              effect="dark"
                              :content="fifth.taskName"
                              placement="top-start"
                            >
                              <span>{{ fifth.taskName }}</span>
                            </el-tooltip>
                          </div>
                          <div class="td fixed_2">{{ fifth.startDate }}</div>
                          <div class="td fixed_3">{{ fifth.finishDate }}</div>
                          <div
                            class="td"
                            v-for="date in dateList"
                            :key="date + 'grid-date'"
                          >
                            <div class="grids">
                              <div
                                class="grid"
                                v-for="day in getDays(date)"
                                :key="'grid' + day.num"
                                :ref="setItemRef(fifth.id, day.date)"
                              ></div>
                            </div>
                          </div>
                          <div
                            class="progress"
                            :style="gantt"
                            v-for="(gantt, index) in fifth.gantts"
                            :key="index"
                            @mouseenter="(e) => handleHover(e, fifth)"
                            @mouseleave="handleLeave"
                          ></div>
                        </div>

                        <!-- 第七层 -->
                        <div
                          class="children"
                          v-show="openedIndexSixth === fifth.id"
                          v-for="sixth in fifth.children"
                          :key="'child-' + sixth.taskName"
                        >
                          <div class="row">
                            <div
                              class="td fixed_1"
                              @click="handleOpenSeven(sixth, sixth.id)"
                              style="padding-left: 25px"
                            >
                              <i
                                class="el-icon-arrow-down"
                                v-if="
                                  openedIndexSixth === sixth.id &&
                                    sixth.children.length > 0
                                "
                                :style="{
                                  visibility:
                                    openedIndexSixth === sixth.id &&
                                    sixth.children.length > 0
                                      ? 'visible'
                                      : 'hidden',
                                }"
                              ></i>
                              <i
                                class="el-icon-arrow-right"
                                v-else
                                :style="{
                                  visibility:
                                    openedIndexSixth != sixth.id &&
                                    sixth.children.length > 0
                                      ? 'visible'
                                      : 'hidden',
                                }"
                              ></i>
                              <el-tooltip
                                effect="dark"
                                :content="sixth.taskName"
                                placement="top-start"
                              >
                                <span>{{ sixth.taskName }}</span>
                              </el-tooltip>
                            </div>
                            <div class="td fixed_2">{{ sixth.startDate }}</div>
                            <div class="td fixed_3">{{ sixth.finishDate }}</div>
                            <div
                              class="td"
                              v-for="date in dateList"
                              :key="date + 'grid-date'"
                            >
                              <div class="grids">
                                <div
                                  class="grid"
                                  v-for="day in getDays(date)"
                                  :key="'grid' + day.num"
                                  :ref="setItemRef(sixth.id, day.date)"
                                ></div>
                              </div>
                            </div>
                            <div
                              class="progress"
                              :style="gantt"
                              v-for="(gantt, index) in sixth.gantts"
                              :key="index"
                              @mouseenter="(e) => handleHover(e, sixth)"
                              @mouseleave="handleLeave"
                            ></div>
                          </div>

                          <!-- 第八层 -->
                          <div
                            class="children"
                            v-show="openedIndexSeven === sixth.id"
                            v-for="seventh in sixth.children"
                            :key="'child-' + seventh.taskName"
                          >
                            <div class="row">
                              <div
                                class="td fixed_1"
                                @click="handleOpenEighth(seventh, seventh.id)"
                                style="padding-left: 25px"
                              >
                                <i
                                  class="el-icon-arrow-down"
                                  v-if="
                                    openedIndexSeven === seventh.id &&
                                      seventh.children.length > 0
                                  "
                                  :style="{
                                    visibility:
                                      openedIndexSeven === seventh.id &&
                                      seventh.children.length > 0
                                        ? 'visible'
                                        : 'hidden',
                                  }"
                                ></i>
                                <i
                                  class="el-icon-arrow-right"
                                  v-else
                                  :style="{
                                    visibility:
                                      openedIndexSeven != seventh.id &&
                                      seventh.children.length > 0
                                        ? 'visible'
                                        : 'hidden',
                                  }"
                                ></i>
                                <el-tooltip
                                  effect="dark"
                                  :content="seventh.taskName"
                                  placement="top-start"
                                >
                                  <span>{{ seventh.taskName }}</span>
                                </el-tooltip>
                              </div>
                              <div class="td fixed_2">
                                {{ seventh.startDate }}
                              </div>
                              <div class="td fixed_3">
                                {{ seventh.finishDate }}
                              </div>
                              <div
                                class="td"
                                v-for="date in dateList"
                                :key="date + 'grid-date'"
                              >
                                <div class="grids">
                                  <div
                                    class="grid"
                                    v-for="day in getDays(date)"
                                    :key="'grid' + day.num"
                                    :ref="setItemRef(seventh.id, day.date)"
                                  ></div>
                                </div>
                              </div>
                              <div
                                class="progress"
                                :style="gantt"
                                v-for="(gantt, index) in seventh.gantts"
                                :key="index"
                                @mouseenter="(e) => handleHover(e, seventh)"
                                @mouseleave="handleLeave"
                              ></div>
                            </div>

                            <!-- 第九层 -->
                            <div
                              class="children"
                              v-show="openedIndexEighth === seventh.id"
                              v-for="eighth in seventh.children"
                              :key="'child-' + eighth.taskName"
                            >
                              <div class="row">
                                <div
                                  class="td fixed_1"
                                  style="padding-left: 25px"
                                >
                                  <i
                                    class="el-icon-arrow-down"
                                    v-if="
                                      openedIndexEighth === eighth.id &&
                                        eighth.children.length > 0
                                    "
                                    :style="{
                                      visibility:
                                        openedIndexEighth === eighth.id &&
                                        eighth.children.length > 0
                                          ? 'visible'
                                          : 'hidden',
                                    }"
                                  ></i>
                                  <i
                                    class="el-icon-arrow-right"
                                    v-else
                                    :style="{
                                      visibility:
                                        openedIndexEighth != eighth.id &&
                                        eighth.children.length > 0
                                          ? 'visible'
                                          : 'hidden',
                                    }"
                                  ></i>
                                  <el-tooltip
                                    effect="dark"
                                    :content="eighth.taskName"
                                    placement="top-start"
                                  >
                                    <span>{{ eighth.taskName }}</span>
                                  </el-tooltip>
                                </div>
                                <div class="td fixed_2">
                                  {{ eighth.startDate }}
                                </div>
                                <div class="td fixed_3">
                                  {{ eighth.finishDate }}
                                </div>
                                <div
                                  class="td"
                                  v-for="date in dateList"
                                  :key="date + 'grid-date'"
                                >
                                  <div class="grids">
                                    <div
                                      class="grid"
                                      v-for="day in getDays(date)"
                                      :key="'grid' + day.num"
                                      :ref="setItemRef(eighth.id, day.date)"
                                    ></div>
                                  </div>
                                </div>
                                <div
                                  class="progress"
                                  :style="gantt"
                                  v-for="(gantt, index) in eighth.gantts"
                                  :key="index"
                                  @mouseenter="(e) => handleHover(e, eighth)"
                                  @mouseleave="handleLeave"
                                ></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="tooltips" :style="tooltipsStyle">
            {{ tooltipContent.taskName }}
            <span>
              {{
                tooltipContent.mppStatus == 0
                  ? "未开始"
                  : tooltipContent.mppStatus == 1
                  ? "进行中"
                  : tooltipContent.mppStatus == 2
                  ? "已完成"
                  : "已逾期"
              }}</span
            >
          </div>
        </div>
      </div>
      <div v-else class="noData">
        <img src="@/assets/images/notoDataImg.png" />
      </div>
    </div>
  </div>
</template>

<script>
import { getParentChildTaskListApi } from "@/assets/js/api/progressManagement";
import { getComapnyStatisticsListApi } from "@/assets/js/api/company/project";
export default {
  data() {
    return {
      defaultProps: {
        children: "list",
        label: "name",
      },
      areaSelectVal: "",
      areaList: [{ name: "123厂区", value: 1 }],
      level1CompanyData: [],
      searchSn: "",
      headerList: [
        { label: "未开始", color: "#3a7bff" },
        { label: "进行中", color: "#f1d520" },
        { label: "已完成", color: "#4fd389" },
        { label: "已逾期", color: "#F80840" },
      ],
      colors: ["#3a7bff", "#f1d520", "#4fd389", "#F80840"],
      projects: [],
      itemRefs: [],
      scrollLeft: 0,
      scrollTimer: 0,
      openedIndex: 9999,
      openedIndexSecond: 9999,
      openedIndexThird: 9999,
      openedIndexFourth: 9999,
      openedIndexFifth: 9999,
      openedIndexSixth: 9999,
      openedIndexSeven: 9999,
      openedIndexEighth: 9999,
      openedIndexNinth: 9999,
      openedIndexTenth: 9999,

      tooltipsStyle: [
        {
          display: "none",
          left: 0,
          top: 0,
        },
      ],
      tooltipContent: {
        day: 0,
        name: "",
      },
      dateList: [],
    };
  },
  created() {
    this.searchSn = this.$store.state.projectSn;
    this.getDataList();
    this.loadData();
  },
  computed: {
    dates() {
      let dates = [];
      const mapDates = (data) => {
        data.map((p) => {
          dates.push(p.startDate);
          dates.push(p.finishDate);
          p.children && mapDates(p.children);
        });
      };
      mapDates(this.projects);
      dates = dates.map((date) => date.slice(0, 7)).sort();
      dates = [...new Set(dates)];
      console.log("dateList----", dates);
      return dates;
    },
  },
  watch: {
    dates: {
      immediate: true,
      handler(newDates) {
        this.dateList = newDates;
      },
    },
  },
  methods: {
    loadData() {
      let sn = this.$store.state.projectSn;
      // let projectType = 1; // 展示项目列表
      // if (this.$store.state.userInfo.addProjectType == 1) {
      //   projectType = 0; // 不展示项目列表
      // }
      // getComapnyStatisticsListApi({
      //   sn: sn,
      //   projectType: projectType,
      // }).then((res) => {
      //   this.level1CompanyData = res.result
      // });
      this.level1CompanyData = [{name: 123,list: []}]
      console.log(this.level1CompanyData);
    },
    //获取甘特图数据
    getDataList() {
      getParentChildTaskListApi({
        projectSn: this.searchSn,
      }).then((res) => {
        this.projects = this.dealArr(res.result);
        console.log("获取甘特图数据", this.projects);
        var that = this;
        setTimeout(function() {
          that.setGantts(that.projects);
        }, 300);
      });
    },
    dealArr(arr) {
      arr.map((item) => {
        item.gantts = [];
        item.delay = 0;
        if (item.children && item.children.length > 0) {
          this.dealArr(item.children);
        }
      });
      return arr;
    },

    setItemRef(id, date) {
      var val = id + "@|@" + date;
      return val;

      //  return val;
    },
    getGanttStyle(project) {
      console.log("进入 getGanttStyle --- ", project.id, project.startDate);

      let { startDate, finishDate, id } = project;
      const startArr = startDate.split("-");
      const endArr = finishDate.split("-");
      let startRef = null;
      let endRef = null;
      // 抹灰工程1-1-2022/09/03

      const a = !(startArr[2] % 2);
      console.log(a, ":!(startArr[2] % 2:");
      if (a) {
        const day = startArr[2] - 1;
        startArr[2] = day < 10 ? "0" + day : day;
        startDate = startArr.join("-");
      }
      const b = !(endArr[2] % 2);
      console.log(a, ":!(endArr[2] % 2):");
      if (!(endArr[2] % 2)) {
        const day = endArr[2] - 1;
        endArr[2] = day < 10 ? "0" + day : day;
        finishDate = endArr.join("-");
      }

      console.log("finishDate ------------", this.$refs);
      let startRefVal = id + "@|@" + startDate;
      let endRefVal = id + "@|@" + finishDate;
      console.log(
        "this.$refs[startRefVal] startRefVal------------",
        this.$refs[startRefVal]
      );
      if (this.$refs[startRefVal] == undefined) {
        return { left: 0 + "px", width: 0 + "px" };
      }
      startRef = this.$refs[startRefVal][0];

      endRef = this.$refs[endRefVal][0];

      const startLeft = startRef.offsetLeft;

      const endWidth = endRef.offsetWidth;

      const endLeft = endRef.offsetLeft;
      const ganttWidth = endLeft - startLeft + endWidth;

      return { left: startLeft + "px", width: ganttWidth + "px" };
    },

    setGantts(projects) {
      console.log("进入渲染 setGantts projects-- ", JSON.stringify(projects));
      projects.map((project) => {
        let { finishDate, id, gantts } = project;
        const gantt = this.getGanttStyle(project);
        gantt.background = this.colors[project.mppStatus];
        console.log("进入渲染 setGantts -- ", id, gantt);
        if (gantts) {
          gantts.push(gantt);
        } else {
          project.gantts = [gantt];
        }
        if (project.children.length > 0) {
          // project.children = this.setGantts(project.children)
          project.children && this.setGantts(project.children);
        }
        // return project
        // project.children && this.setGantts(project.children);
      });
    },
    increaseDate(date, delay) {
      const timestamp =
        new Date(date).getTime() + (delay + 1) * 1000 * 60 * 60 * 24;
      return new Date(timestamp)
        .toISOString()
        .replace(/-/g, "-")
        .slice(0, 10);
    },
    getDays(date) {
      const year = date.split("-")[0];
      const month = +date.split("-")[1];
      const large = [1, 3, 5, 7, 8, 10, 12];
      const normal = [4, 6, 9, 11];
      const small = [2];
      let count = 0;
      switch (true) {
        case large.includes(month):
          count = 31;
          break;
        case normal.includes(month):
          count = 30;
          break;
        case small.includes(month):
          count = year % 4 ? 28 : 29;
          break;
      }
      return (() => {
        const days = new Array(count)
          .fill(0)
          .map((item, index) => {
            let num = index + 1;
            let fulldate = date + (num < 10 ? "-0" + num : "-" + num);
            return { num, date: fulldate };
          })
          .filter((item) => item.num % 2);
        if (count === 28) {
          days.push({ num: 28, date: date + "-28" });
        } else if (count === 30) {
          days.push({ num: 30, date: date + "-30" });
        }
        return days;
      })();
    },
    handleOpen(value, index) {
      // console.log(index)
      // console.log(this.openedIndex)
      if (index === this.openedIndex) {
        this.openedIndex = 9999;
      } else {
        this.openedIndex = index;
      }
      var that = this;
      setTimeout(function() {
        // console.log('进入 setTimeoutthis.setGantts', value)
        let arr = [value];
        that.setGantts(arr);
      }, 300);
    },
    handleOpenSecond(value, index) {
      // console.log(index)
      // console.log(this.openedIndex)
      if (index === this.openedIndexSecond) {
        this.openedIndexSecond = 9999;
      } else {
        this.openedIndexSecond = index;
      }
      var that = this;
      setTimeout(function() {
        // console.log('进入 setTimeoutthis.setGantts', value)
        let arr = [value];
        that.setGantts(arr);
      }, 300);
    },
    handleOpenThird(value, index) {
      // console.log(index)
      // console.log(this.openedIndex)
      if (index === this.openedIndexThird) {
        this.openedIndexThird = 9999;
      } else {
        this.openedIndexThird = index;
      }
      var that = this;
      setTimeout(function() {
        // console.log('进入 setTimeoutthis.setGantts', value)
        let arr = [value];
        that.setGantts(arr);
      }, 300);
    },
    handleOpenFourth(value, index) {
      // console.log(index)
      // console.log(this.openedIndex)
      if (index === this.openedIndexFourth) {
        this.openedIndexFourth = 9999;
      } else {
        this.openedIndexFourth = index;
      }
      var that = this;
      setTimeout(function() {
        // console.log('进入 setTimeoutthis.setGantts', value)
        let arr = [value];
        that.setGantts(arr);
      }, 300);
    },
    handleOpenFifth(value, index) {
      // console.log(index)
      // console.log(this.openedIndex)
      if (index === this.openedIndexFifth) {
        this.openedIndexFifth = 9999;
      } else {
        this.openedIndexFifth = index;
      }
      var that = this;
      setTimeout(function() {
        // console.log('进入 setTimeoutthis.setGantts', value)
        let arr = [value];
        that.setGantts(arr);
      }, 300);
    },
    handleOpenSixth(value, index) {
      // console.log(index)
      // console.log(this.openedIndex)
      if (index === this.openedIndexSixth) {
        this.openedIndexSixth = 9999;
      } else {
        this.openedIndexSixth = index;
      }
      var that = this;
      setTimeout(function() {
        // console.log('进入 setTimeoutthis.setGantts', value)
        let arr = [value];
        that.setGantts(arr);
      }, 300);
    },
    handleOpenSeven(value, index) {
      // console.log(index)
      // console.log(this.openedIndex)
      if (index === this.openedIndexSeven) {
        this.openedIndexSeven = 9999;
      } else {
        this.openedIndexSeven = index;
      }
      var that = this;
      setTimeout(function() {
        // console.log('进入 setTimeoutthis.setGantts', value)
        let arr = [value];
        that.setGantts(arr);
      }, 300);
    },
    handleOpenEighth(value, index) {
      // console.log(index)
      // console.log(this.openedIndex)
      if (index === this.openedIndexEighth) {
        this.openedIndexEighth = 9999;
      } else {
        this.openedIndexEighth = index;
      }
      var that = this;
      setTimeout(function() {
        // console.log('进入 setTimeoutthis.setGantts', value)
        let arr = [value];
        that.setGantts(arr);
      }, 300);
    },

    handleScroll(e) {
      console.log("进入 handleScroll");
      if (this.scrollTimer) {
        clearTimeout(this.scrollTimer);
      }
      this.scrollTimer = setTimeout(() => {
        this.scrollLeft = e.target.scrollLeft;
        this.scrollTimer = null;
      }, 100);
      const fixedElement1 = document.querySelectorAll(".fixed_1");
      const fixedElement2 = document.querySelectorAll(".fixed_2");
      const fixedElement3 = document.querySelectorAll(".fixed_3");
      console.log("fixedElement1 :" + fixedElement1);
      console.log("fixedElement1 :" + fixedElement1[0]);
      console.log("fixedElement1 :" + fixedElement1.length);
      for (let i = 0; i < fixedElement1.length; i++) {
        fixedElement1[i].style.left = e.target.scrollLeft + "px";
      }
      for (let i = 0; i < fixedElement2.length; i++) {
        fixedElement2[i].style.left = e.target.scrollLeft + "px";
      }
      for (let i = 0; i < fixedElement3.length; i++) {
        fixedElement3[i].style.left = e.target.scrollLeft + "px";
      }
    },
    handleHover(e, item) {
      console.log(666);
      console.log("鼠标", e);
      console.log(item);
      // if (item.mppStatus == 0 || item.state == 5 || item.state == 6) {
      const { clientX, clientY } = e;
      const decreaseLeft = clientX - 80;
      const decreaseTop = clientY - 250;
      this.tooltipsStyle = {
        left: decreaseLeft + this.scrollLeft + "px",
        top: decreaseTop + "px",
        display: "block",
      };
      this.tooltipContent = {
        taskName: item.taskName,
        mppStatus: item.mppStatus,
      };
      // }
    },
    handleLeave() {
      this.tooltipsStyle.display = "none";
    },
  },
};
</script>

<style scoped lang="less">
.noData {
  text-align: center;
  box-sizing: border-box;
  img {
    position: absolute;
    top: 25%;
    left: 40%;
    width: 15%;
  }
}
.treeStyle() {
  /deep/.el-tree {
    font-size: 15px;
    width: 100%;
    background-color: transparent;
    .el-tree-node {
      white-space: normal;
      &:focus > .el-tree-node__content {
        background-color: transparent;
      }
      &.is-current > .el-tree-node__content {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }
    }
    .el-tree-node__content {
      // height: 32px;
      padding: 7px 0;
      height: auto;
      line-height: 16px;
      position: relative;
      // margin-bottom: 7px;
      &:hover {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }

      .videoName {
        font-size: 14px;
      }
      .projectName {
        font-size: 14px;
        width: calc(100% - 55px);
        display: inline-block;
      }
      .companyName2 {
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        width: 192px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .el-tree-node__expand-icon {
      font-size: 16px;
      padding: 0 6px;
      &.is-leaf {
        color: transparent !important;
      }
    }
    .treeTitle {
      background-color: #f7f7f7;
      margin-bottom: 10px;
    }
  }
}
.main-box {
  display: flex;
  align-items: center;
  overflow-x: scroll;
  width: 100%;
  height: 100%;
  .areaTreeBox {
    display: flex;
    position: relative;
    .treeStyle();
  }
  .areaTreeInner {
    //   background-color: rgba(0, 0, 0, 0.7);
    width: 300px;
    margin-right: 20px;
    padding: 20px 15px;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    .treeBox {
      flex: 1;
      background-color: rgba(216, 216, 216, 0.2);
      padding-top: 10px;
      margin-top: 20px;
    }
  }
  .gantt-box {
    box-sizing: border-box;
    flex: 1;
    height: 100%;
    padding: 18px;
    background: #ffffff;
    border-radius: 8px;

    .header {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 60px;

      .left-content {
        display: flex;
        width: 65%;
        height: 100%;

        .item {
          display: flex;
          align-items: center;
          // width: calc(100% / 4);
          margin-right: 30px;

          .color-block {
            margin-right: 10px;
            width: 15px;
            height: 15px;
            border-radius: 2px;
          }

          .label {
            color: #29304d;
            font-size: 14px;
          }
        }
      }
    }

    .gantt-chart {
      height: calc(100% - 60px);
      overflow: hidden;

      .table {
        position: relative;
        height: 100%;
        overflow-x: auto;

        &::-webkit-scrollbar {
          width: 10px;
          height: 8px;
          cursor: pointer;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: #e6f2ff;
        }

        .thead {
          width: max-content;
          // border-left: 1px solid #0a769a;

          .row {
            display: flex;
            position: relative;

            .fixed_1,
            .fixed_2,
            .fixed_3 {
              width: 200px;
              position: relative;
              background: #e2ebff;
              z-index: 10;
            }

            .fixed_1 {
              border-left: 1px solid #cbd1df;
              left: 0;
            }

            .fixed_2 {
              left: 0px;
            }

            .fixed_3 {
              left: 0px;
            }

            .td {
              flex-shrink: 0;
              box-sizing: border-box;
              height: 42px;
              line-height: 42px;
              background-color: #e2ebff;
              color: #666666;
              font-size: 16px;
              border-top: 1px solid #cbd1df;

              .date {
                line-height: 21px;
                border-left: 1px solid #cbd1df;

                .month {
                  border-bottom: 1px solid #cbd1df;
                }

                .days {
                  display: flex;

                  .day {
                    flex: 1;
                  }
                }
              }

              &:nth-child(1) {
                padding-left: 30px;
                width: 200px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              &:not(:nth-child(1)) {
                width: 100px;
                text-align: center;
              }

              &:nth-child(n + 4) {
                width: 400px;
              }
            }
          }
        }

        .tbody {
          width: max-content;
          // border-left: 1px solid #0a769a;

          .row-groups {
            position: relative;
            height: 42px;
            // &::before {
            // 	content: "";
            // 	position: absolute;
            // 	left: 26px;
            // 	top: 16px;
            // 	width: 0;
            // 	height: 0;
            // 	border-top: 4px solid transparent;
            // 	border-right: 4px solid transparent;
            // 	border-bottom: 4px solid transparent;
            // 	border-left: 4px solid #5be1f4;
            // 	z-index: 99;
            // }

            &.open {
              height: unset;

              // &::before {
              // 	border-left-color: transparent;
              // 	border-top-color: #5be1f4;
              // }
            }

            > .row .td:first-child {
              user-select: none;
              cursor: pointer;
            }

            .row {
              position: relative;
              display: flex;
              border-top: 1px solid #cbd1df;

              .fixed_1,
              .fixed_2,
              .fixed_3 {
                width: 200px;
                position: relative;
                background: #092945;
                z-index: 10;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .fixed_1 {
                left: 0;
                border-left: 1px solid #cbd1df;
              }

              .fixed_2 {
                left: 0px;
              }

              .fixed_3 {
                left: 0px;
              }

              .td {
                flex-shrink: 0;
                box-sizing: border-box;
                height: 42px;
                line-height: 42px;
                background-color: #fff;
                border-right: 1px solid #cbd1df;
                border-bottom: 1px solid #cbd1df;
                border-top: 1px solid #cbd1df;
                color: #333333;
                font-size: 16px;

                .grids {
                  height: 100%;
                  display: flex;

                  .grid {
                    position: relative;
                    flex: 1;
                    height: 100%;

                    &:not(:last-child) {
                      border-right: 1px solid #cbd1df;
                    }
                  }
                }

                &:nth-child(1) {
                  padding-left: 40px;
                  min-width: 200px;
                  box-sizing: border-box;
                }

                &:not(:nth-child(1)) {
                  width: 100px;
                  font-size: 14px;
                  text-align: center;
                }

                &:nth-child(n + 4) {
                  width: 400px;
                }
              }

              .progress {
                flex-shrink: 0;
                position: absolute;
                top: calc(50% - 7px);
                width: 20px;
                height: 14px;
                background: #557dee;
              }
            }

            .children {
              .td {
                height: 38px;
                line-height: 38px;
                font-size: 14px;
              }
            }
          }
        }

        .tooltips {
          text-align: center;
          position: absolute;
          box-sizing: border-box;
          padding: 10px 25px;
          height: 25px;
          border-radius: 5px;
          background-color: #3d4258;
          box-shadow: 1px 1px 10px #ccc;
          color: #fff;
          line-height: 2px;
        }
      }
    }

    .no-data {
      height: calc(100% - 145px);
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #999;
    }
  }
}

/deep/.tabs-option {
  display: none;
}
</style>
