<template>
  <div>
    <div
      style="
        background-color: #f4f7fc;
        width: 90vw;
        height: 100vh;
        padding: 10px 20px;
      "
    >
      <div style="padding: 20px">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          v-show="showSearch"
          label-width="58px"
        >
          <el-form-item label="周数">
            <!-- <el-date-picker
            clearable
            @change="changeTime"
            v-model="queryParams.month"
            type="month"
            value-format="YYYY-MM"
            placeholder="请选择月份"
          >
          </el-date-picker> -->
            <el-date-picker
              v-model="queryParams.weekNum"
              type="week"
              format="ww[周]"
              placeholder="选择周"
              :weekdays="[1, 2, 3, 4, 5, 6, 0]"
              :first-day-of-week="1"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery"
              ><el-icon><Search /></el-icon>查询</el-button
            >
          </el-form-item>
        </el-form>
        <div style="display: flex; margin-bottom: 10px">
          <div>部门名称：{{ deptName }}</div>
          <div style="display: flex; margin-left: 50px; font-size: 15px">
            <div
              @click="preWeek(this.firstDay)"
              style="color: #409eff; cursor: pointer"
            >
              <el-icon :size="20"
                ><ArrowLeft style="padding-top: 8px"
              /></el-icon>
              上一周
            </div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div
              @click="nextWeek(this.firstDay)"
              style="color: #409eff; cursor: pointer"
            >
              下一周
              <el-icon :size="20"
                ><ArrowRight style="padding-top: 8px"
              /></el-icon>
            </div>
          </div>
          <div style="margin-left: 18vw">
            第{{ weekNum }}周（{{ firstDay }}至{{ lastDay }}）

            <span v-if="submitOr" style="color: #1ed76d; font-weight: 700"
              >已保存</span
            >
            <span v-else style="color: red; font-weight: 700">未保存</span>
          </div>
        </div>
        <div>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%; height: 65vh; overflow: auto"
          >
            <el-table-column
              prop="fullName"
              label="姓名"
              align="center"
              width="120"
            ></el-table-column>
            <el-table-column
              align="center"
              :prop="weekList[0]"
              :label="weekList[0]"
            >
              <template #default="scope">
                <div
                  style="
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    position: relative;
                    top: 18px;
                    margin-left: 0.2vw;
                  "
                  :style="{
                    backgroundColor:
                      scope.row.mondayMorning == 0
                        ? '#1ed76d'
                        : scope.row.mondayMorning == 1 ||
                          scope.row.mondayMorning == 2 ||
                          scope.row.mondayMorning == 3 ||
                          scope.row.mondayMorning == 4 ||
                          scope.row.mondayMorning == 5 ||
                          scope.row.mondayMorning == 6 ||
                          scope.row.mondayMorning == 7 ||
                          scope.row.mondayMorning == 8 ||
                          scope.row.mondayMorning == 9 ||
                          scope.row.mondayMorning == 10 ||
                          scope.row.mondayMorning == 12 ||
                          scope.row.mondayMorning == 13 ||
                          scope.row.mondayMorning == 14 ||
                          scope.row.mondayMorning == 15 ||
                          scope.row.mondayMorning == 16
                        ? 'red'
                        : scope.row.mondayMorning == 11
                        ? '#909399'
                        : 'white',
                  }"
                ></div>
                <div>
                  上午：
                  <el-select
                    popper-class="tagClass"
                    v-model="scope.row.mondayMorning"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    >
                      <template #default>
                        <!-- 11 {{ dict.value }} -->
                        <!-- <StatusTag
                        :type="info_kq[dict.value]"
                        :txt="info_kq[dict.value]"
                      /> -->
                      </template>
                    </el-option>
                  </el-select>
                  <!-- {{ scope.row[index] }} -->
                </div>
                <div
                  :style="{
                    backgroundColor:
                      scope.row.mondayAfternoon == 0
                        ? '#1ed76d'
                        : scope.row.mondayAfternoon == 1 ||
                          scope.row.mondayAfternoon == 2 ||
                          scope.row.mondayAfternoon == 3 ||
                          scope.row.mondayAfternoon == 4 ||
                          scope.row.mondayAfternoon == 5 ||
                          scope.row.mondayAfternoon == 6 ||
                          scope.row.mondayAfternoon == 7 ||
                          scope.row.mondayAfternoon == 8 ||
                          scope.row.mondayAfternoon == 9 ||
                          scope.row.mondayAfternoon == 10 ||
                          scope.row.mondayAfternoon == 12 ||
                          scope.row.mondayAfternoon == 13 ||
                          scope.row.mondayAfternoon == 14 ||
                          scope.row.mondayAfternoon == 15 ||
                          scope.row.mondayAfternoon == 16
                        ? 'red'
                        : scope.row.mondayAfternoon == 11
                        ? '#909399'
                        : 'white',
                  }"
                  style="
                    width: 8px;
                    height: 8px;

                    border-radius: 50%;
                    position: relative;
                    top: 28px;
                    margin-left: 0.2vw;
                  "
                ></div>
                <div style="margin-top: 10px">
                  下午：
                  <el-select
                    v-model="scope.row.mondayAfternoon"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              :prop="weekList[1]"
              :label="weekList[1]"
            >
              <template #default="scope">
                <div
                  :style="{
                    backgroundColor:
                      scope.row.tuesdayMorning == 0
                        ? '#1ed76d'
                        : scope.row.tuesdayMorning == 1 ||
                          scope.row.tuesdayMorning == 2 ||
                          scope.row.tuesdayMorning == 3 ||
                          scope.row.tuesdayMorning == 4 ||
                          scope.row.tuesdayMorning == 5 ||
                          scope.row.tuesdayMorning == 6 ||
                          scope.row.tuesdayMorning == 7 ||
                          scope.row.tuesdayMorning == 8 ||
                          scope.row.tuesdayMorning == 9 ||
                          scope.row.tuesdayMorning == 10 ||
                          scope.row.tuesdayMorning == 12 ||
                          scope.row.tuesdayMorning == 13 ||
                          scope.row.tuesdayMorning == 14 ||
                          scope.row.tuesdayMorning == 15 ||
                          scope.row.tuesdayMorning == 16
                        ? 'red'
                        : scope.row.tuesdayMorning == 11
                        ? '#909399'
                        : 'white',
                  }"
                  style="
                    width: 8px;
                    height: 8px;

                    border-radius: 50%;
                    position: relative;
                    top: 18px;
                    margin-left: 0.2vw;
                  "
                ></div>
                <div>
                  上午：
                  <el-select
                    v-model="scope.row.tuesdayMorning"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                  <!-- {{ scope.row[index] }} -->
                </div>
                <div style="margin-top: 10px">
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.tuesdayAfternoon == 0
                          ? '#1ed76d'
                          : scope.row.tuesdayAfternoon == 1 ||
                            scope.row.tuesdayAfternoon == 2 ||
                            scope.row.tuesdayAfternoon == 3 ||
                            scope.row.tuesdayAfternoon == 4 ||
                            scope.row.tuesdayAfternoon == 5 ||
                            scope.row.tuesdayAfternoon == 6 ||
                            scope.row.tuesdayAfternoon == 7 ||
                            scope.row.tuesdayAfternoon == 8 ||
                            scope.row.tuesdayAfternoon == 9 ||
                            scope.row.tuesdayAfternoon == 10 ||
                            scope.row.tuesdayAfternoon == 12 ||
                            scope.row.tuesdayAfternoon == 13 ||
                            scope.row.tuesdayAfternoon == 14 ||
                            scope.row.tuesdayAfternoon == 15 ||
                            scope.row.tuesdayAfternoon == 16
                          ? 'red'
                          : scope.row.tuesdayAfternoon == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  下午：
                  <el-select
                    v-model="scope.row.tuesdayAfternoon"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              :prop="weekList[2]"
              :label="weekList[2]"
            >
              <template #default="scope">
                <div>
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.wednesdayMorning == 0
                          ? '#1ed76d'
                          : scope.row.wednesdayMorning == 1 ||
                            scope.row.wednesdayMorning == 2 ||
                            scope.row.wednesdayMorning == 3 ||
                            scope.row.wednesdayMorning == 4 ||
                            scope.row.wednesdayMorning == 5 ||
                            scope.row.wednesdayMorning == 6 ||
                            scope.row.wednesdayMorning == 7 ||
                            scope.row.wednesdayMorning == 8 ||
                            scope.row.wednesdayMorning == 9 ||
                            scope.row.wednesdayMorning == 10 ||
                            scope.row.wednesdayMorning == 12 ||
                            scope.row.wednesdayMorning == 13 ||
                            scope.row.wednesdayMorning == 14 ||
                            scope.row.wednesdayMorning == 15 ||
                            scope.row.wednesdayMorning == 16
                          ? 'red'
                          : scope.row.wednesdayMorning == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  上午：
                  <el-select
                    v-model="scope.row.wednesdayMorning"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                  <!-- {{ scope.row[index] }} -->
                </div>
                <div style="margin-top: 10px">
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.wednesdayAfternoon == 0
                          ? '#1ed76d'
                          : scope.row.wednesdayAfternoon == 1 ||
                            scope.row.wednesdayAfternoon == 2 ||
                            scope.row.wednesdayAfternoon == 3 ||
                            scope.row.wednesdayAfternoon == 4 ||
                            scope.row.wednesdayAfternoon == 5 ||
                            scope.row.wednesdayAfternoon == 6 ||
                            scope.row.wednesdayAfternoon == 7 ||
                            scope.row.wednesdayAfternoon == 8 ||
                            scope.row.wednesdayAfternoon == 9 ||
                            scope.row.wednesdayAfternoon == 10 ||
                            scope.row.wednesdayAfternoon == 12 ||
                            scope.row.wednesdayAfternoon == 13 ||
                            scope.row.wednesdayAfternoon == 14 ||
                            scope.row.wednesdayAfternoon == 15 ||
                            scope.row.wednesdayAfternoon == 16
                          ? 'red'
                          : scope.row.wednesdayAfternoon == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  下午：
                  <el-select
                    v-model="scope.row.wednesdayAfternoon"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              :prop="weekList[3]"
              :label="weekList[3]"
            >
              <template #default="scope">
                <div>
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.thursdayMorning == 0
                          ? '#1ed76d'
                          : scope.row.thursdayMorning == 1 ||
                            scope.row.thursdayMorning == 2 ||
                            scope.row.thursdayMorning == 3 ||
                            scope.row.thursdayMorning == 4 ||
                            scope.row.thursdayMorning == 5 ||
                            scope.row.thursdayMorning == 6 ||
                            scope.row.thursdayMorning == 7 ||
                            scope.row.thursdayMorning == 8 ||
                            scope.row.thursdayMorning == 9 ||
                            scope.row.thursdayMorning == 10 ||
                            scope.row.thursdayMorning == 12 ||
                            scope.row.thursdayMorning == 13 ||
                            scope.row.thursdayMorning == 14 ||
                            scope.row.thursdayMorning == 15 ||
                            scope.row.thursdayMorning == 16
                          ? 'red'
                          : scope.row.thursdayMorning == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  上午：
                  <el-select
                    v-model="scope.row.thursdayMorning"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                  <!-- {{ scope.row[index] }} -->
                </div>
                <div style="margin-top: 10px">
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.thursdayAfternoon == 0
                          ? '#1ed76d'
                          : scope.row.thursdayAfternoon == 1 ||
                            scope.row.thursdayAfternoon == 2 ||
                            scope.row.thursdayAfternoon == 3 ||
                            scope.row.thursdayAfternoon == 4 ||
                            scope.row.thursdayAfternoon == 5 ||
                            scope.row.thursdayAfternoon == 6 ||
                            scope.row.thursdayAfternoon == 7 ||
                            scope.row.thursdayAfternoon == 8 ||
                            scope.row.thursdayAfternoon == 9 ||
                            scope.row.thursdayAfternoon == 10 ||
                            scope.row.thursdayAfternoon == 12 ||
                            scope.row.thursdayAfternoon == 13 ||
                            scope.row.thursdayAfternoon == 14 ||
                            scope.row.thursdayAfternoon == 15 ||
                            scope.row.thursdayAfternoon == 16
                          ? 'red'
                          : scope.row.thursdayAfternoon == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  下午：
                  <el-select
                    v-model="scope.row.thursdayAfternoon"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :prop="weekList[4]"
              :label="weekList[4]"
            >
              <template #default="scope">
                <div>
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.fridayMorning == 0
                          ? '#1ed76d'
                          : scope.row.fridayMorning == 1 ||
                            scope.row.fridayMorning == 2 ||
                            scope.row.fridayMorning == 3 ||
                            scope.row.fridayMorning == 4 ||
                            scope.row.fridayMorning == 5 ||
                            scope.row.fridayMorning == 6 ||
                            scope.row.fridayMorning == 7 ||
                            scope.row.fridayMorning == 8 ||
                            scope.row.fridayMorning == 9 ||
                            scope.row.fridayMorning == 10 ||
                            scope.row.fridayMorning == 12 ||
                            scope.row.fridayMorning == 13 ||
                            scope.row.fridayMorning == 14 ||
                            scope.row.fridayMorning == 15 ||
                            scope.row.fridayMorning == 16
                          ? 'red'
                          : scope.row.fridayMorning == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  上午：
                  <el-select
                    v-model="scope.row.fridayMorning"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                  <!-- {{ scope.row[index] }} -->
                </div>
                <div style="margin-top: 10px">
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.fridayAfternoon == 0
                          ? '#1ed76d'
                          : scope.row.fridayAfternoon == 1 ||
                            scope.row.fridayAfternoon == 2 ||
                            scope.row.fridayAfternoon == 3 ||
                            scope.row.fridayAfternoon == 4 ||
                            scope.row.fridayAfternoon == 5 ||
                            scope.row.fridayAfternoon == 6 ||
                            scope.row.fridayAfternoon == 7 ||
                            scope.row.fridayAfternoon == 8 ||
                            scope.row.fridayAfternoon == 9 ||
                            scope.row.fridayAfternoon == 10 ||
                            scope.row.fridayAfternoon == 12 ||
                            scope.row.fridayAfternoon == 13 ||
                            scope.row.fridayAfternoon == 14 ||
                            scope.row.fridayAfternoon == 15 ||
                            scope.row.fridayAfternoon == 16
                          ? 'red'
                          : scope.row.fridayAfternoon == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  下午：
                  <el-select
                    v-model="scope.row.fridayAfternoon"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :prop="weekList[5]"
              :label="weekList[5]"
            >
              <template #default="scope">
                <div>
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.saturdayMorning == 0
                          ? '#1ed76d'
                          : scope.row.saturdayMorning == 1 ||
                            scope.row.saturdayMorning == 2 ||
                            scope.row.saturdayMorning == 3 ||
                            scope.row.saturdayMorning == 4 ||
                            scope.row.saturdayMorning == 5 ||
                            scope.row.saturdayMorning == 6 ||
                            scope.row.saturdayMorning == 7 ||
                            scope.row.saturdayMorning == 8 ||
                            scope.row.saturdayMorning == 9 ||
                            scope.row.saturdayMorning == 10 ||
                            scope.row.saturdayMorning == 12 ||
                            scope.row.saturdayMorning == 13 ||
                            scope.row.saturdayMorning == 14 ||
                            scope.row.saturdayMorning == 15 ||
                            scope.row.saturdayMorning == 16
                          ? 'red'
                          : scope.row.saturdayMorning == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  上午：
                  <el-select
                    v-model="scope.row.saturdayMorning"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
                <div style="margin-top: 10px">
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.saturdayAfternoon == 0
                          ? '#1ed76d'
                          : scope.row.saturdayAfternoon == 1 ||
                            scope.row.saturdayAfternoon == 2 ||
                            scope.row.saturdayAfternoon == 3 ||
                            scope.row.saturdayAfternoon == 4 ||
                            scope.row.saturdayAfternoon == 5 ||
                            scope.row.saturdayAfternoon == 6 ||
                            scope.row.saturdayAfternoon == 7 ||
                            scope.row.saturdayAfternoon == 8 ||
                            scope.row.saturdayAfternoon == 9 ||
                            scope.row.saturdayAfternoon == 10 ||
                            scope.row.saturdayAfternoon == 12 ||
                            scope.row.saturdayAfternoon == 13 ||
                            scope.row.saturdayAfternoon == 14 ||
                            scope.row.saturdayAfternoon == 15 ||
                            scope.row.saturdayAfternoon == 16
                          ? 'red'
                          : scope.row.saturdayAfternoon == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  下午：
                  <el-select
                    v-model="scope.row.saturdayAfternoon"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :prop="weekList[6]"
              :label="weekList[6]"
            >
              <template #default="scope">
                <div>
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.sundayMorning == 0
                          ? '#1ed76d'
                          : scope.row.sundayMorning == 1 ||
                            scope.row.sundayMorning == 2 ||
                            scope.row.sundayMorning == 3 ||
                            scope.row.sundayMorning == 4 ||
                            scope.row.sundayMorning == 5 ||
                            scope.row.sundayMorning == 6 ||
                            scope.row.sundayMorning == 7 ||
                            scope.row.sundayMorning == 8 ||
                            scope.row.sundayMorning == 9 ||
                            scope.row.sundayMorning == 10 ||
                            scope.row.sundayMorning == 12 ||
                            scope.row.sundayMorning == 13 ||
                            scope.row.sundayMorning == 14 ||
                            scope.row.sundayMorning == 15 ||
                            scope.row.sundayMorning == 16
                          ? 'red'
                          : scope.row.sundayMorning == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  上午：
                  <el-select
                    v-model="scope.row.sundayMorning"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
                <div style="margin-top: 10px">
                  <div
                    :style="{
                      backgroundColor:
                        scope.row.sundayAfternoon == 0
                          ? '#1ed76d'
                          : scope.row.sundayAfternoon == 1 ||
                            scope.row.sundayAfternoon == 2 ||
                            scope.row.sundayAfternoon == 3 ||
                            scope.row.sundayAfternoon == 4 ||
                            scope.row.sundayAfternoon == 5 ||
                            scope.row.sundayAfternoon == 6 ||
                            scope.row.sundayAfternoon == 7 ||
                            scope.row.sundayAfternoon == 8 ||
                            scope.row.sundayAfternoon == 9 ||
                            scope.row.sundayAfternoon == 10 ||
                            scope.row.sundayAfternoon == 12 ||
                            scope.row.sundayAfternoon == 13 ||
                            scope.row.sundayAfternoon == 14 ||
                            scope.row.sundayAfternoon == 15 ||
                            scope.row.sundayAfternoon == 16
                          ? 'red'
                          : scope.row.sundayAfternoon == 11
                          ? '#909399'
                          : 'white',
                    }"
                    style="
                      width: 8px;
                      height: 8px;

                      border-radius: 50%;
                      position: relative;
                      top: 18px;
                      margin-left: 0.2vw;
                    "
                  ></div>
                  下午：
                  <el-select
                    v-model="scope.row.sundayAfternoon"
                    clearable
                    style="width: 90px"
                  >
                    <el-option
                      v-for="dict in info_kq"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: center; margin-top: 40px">
            <el-button
              size="large"
              :disabled="disabled"
              style="padding: 0 70px"
              @click="submitAttendance()"
              type="primary"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  weeks,
  insertList,
  all,
  oneWeek,
  sxweek,
  deptList,
  holiday,
  attendanceEditDay,
} from "@/api/clocking/weeklyAttendance";
import moment from "moment"; //导入文件
import { ElMessage, ElMessageBox } from "element-plus";
// import type { Action } from "element-plus";
import { useDict } from "@/utils/dict";
import { selectByMonth, getDates } from "@/api/clocking/clockingSubmit";
import { getInfo } from "@/api/login";

export default {
  name: "YinetoaWeeklyAttendance",
  data() {
    return {
      selYear: "",
      submitOr: true,
      currentDate: new Date(),
      value1: [],
      days: [],
      dataYear: {},
      holidays: null,
      tagStyleElem: "",
      dataStart: [],
      disabled: true,
      disabled1: true,
      loading: true,
      selsectVal: "",
      showSearch: true,
      deptName: "",
      startDate: "",
      endDate: "",
      weekNum: null,
      weekNum1: null,
      weekList: [],
      listDatas: [],
      listData: {},
      tableData: [],
      queryParams: {
        weekNum: "",
      },
      tableData1: [],
      tableData2: [],
      monthSelect: [],
      anowMonth: null,
      firstDay: "",
      nowDate: "",
      lastDay: "",
      lastDay1: "",
      firstDay1: "",
      clicked: false,
      info_kq: useDict("info_kq").info_kq,
    };
  },

  created() {
    // this.weeks();

    this.getWeekNum();
    this.oneWeek();
    this.getLastMonth();
    // this.nowDate1();
    this.getInfo();
    this.nowMonth();
    this.selectByMonth();
    this.holiday();
    this.deptList();
    // this.tagStyleElem = window.document.head.appendChild(
    //   document.createElement("style")
    // );
  },
  mounted() {
    this.oneAndFive();
  },
  methods: {
    async holiday() {
      let res = await holiday(this.weekNum);
      this.holidays = res;
    },
    //部门成员
    async all() {
      this.$modal.loading("加载中，请稍候...");
      this.tableData2 = [];
      let { rows } = await all();
      this.tableData2 = rows;
      let a = this.tableData2.filter(
        (item) => !this.tableData.some((ele) => ele.fullName === item.fullName)
      );
      this.days = [];
      for (let m = 0; m < this.holidays.length; m++) {
        this.days.push(this.holidays[m].slice(0, 2));
      }
      for (let i = 0; i < a.length; i++) {
        a[i].weekNumber = this.weekNum;
        a[i].weekStart = this.startDate;
        a[i].weekEnd = this.endDate;
        a[i].mondayMorning = "0";
        a[i].mondayAfternoon = "0";
        a[i].tuesdayMorning = "0";
        a[i].tuesdayAfternoon = "0";
        a[i].wednesdayMorning = "0";
        a[i].wednesdayAfternoon = "0";
        a[i].thursdayMorning = "0";
        a[i].thursdayAfternoon = "0";
        a[i].fridayMorning = "0";
        a[i].fridayAfternoon = "0";
        a[i].saturdayMorning = "0";
        a[i].saturdayAfternoon = "0";
        a[i].sundayMorning = "0";
        a[i].sundayAfternoon = "0";
      }
      for (let x = 0; x < this.days.length; x++) {
        for (let i = 0; i < a.length; i++) {
          if (this.days[x] == "周日") {
            a[i].sundayMorning = "11";
            a[i].sundayAfternoon = "11";
          } else if (this.days[x] == "周一") {
            a[i].mondayMorning = "11";
            a[i].mondayAfternoon = "11";
          } else if (this.days[x] == "周二") {
            a[i].tuesdayMorning = "11";
            a[i].tuesdayMorning = "11";
          } else if (this.days[x] == "周三") {
            a[i].wednesdayMorning = "11";
            a[i].wednesdayAfternoon = "11";
          } else if (this.days[x] == "周四") {
            a[i].thursdayMorning = "11";
            a[i].thursdayAfternoon = "11";
          } else if (this.days[x] == "周五") {
            a[i].fridayMorning = "11";
            a[i].fridayAfternoon = "11";
          } else if (this.days[x] == "周六") {
            a[i].saturdayMorning = "11";
            a[i].saturdayAfternoon = "11";
          }
        }
      }

      this.tableData = this.tableData.concat(a);
      this.$modal.closeLoading();
    },
    // 获取每月第一周周数
    getFirstWeekOfMonth(year, month) {
      var year = new Date(this.queryParams.month).getFullYear();
      var week = moment(new Date(this.queryParams.month)).format("E");
      var startweek = moment(new Date(year + "-01-01")).format("E");

      var millisDiff =
        new Date(this.queryParams.month).getTime() -
        new Date(year + "-01-01").getTime();

      var days =
        (millisDiff -
          week * (24 * 60 * 60 * 1000) -
          (7 - startweek) * (24 * 60 * 60 * 1000)) /
        86400000;
      this.weekNum = days / 7 + 4;
      // return this.weekNum;
    },
    //本月月份
    nowMonth() {
      var date = new Date();
      let year = date.getFullYear();
      let currentMonth = date.getMonth() + 1;
      this.queryParams.month = year + "-" + currentMonth;
      this.month = year + "-" + currentMonth;
    },
    async getDates() {
      this.dataYear.weekNumber = this.weekNum;

      let res = await getDates(this.dataYear);
      console.log("res", res);
      this.firstDay = res[0];
      this.lastDay = res[6];

      var daysOfWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      this.weekList = [];
      this.weekList = res.map((date) => {
        return daysOfWeek[new Date(date).getDay()] + "（" + date + "）";
      });
      this.monthSelect = [];

      this.monthSelect.push(this.firstDay.slice(5, 7));
      this.monthSelect.push(this.lastDay.slice(5, 7));
      // console.log("firstDay", this.firstDay.slice(0, 4));
      // console.log("lastDay", this.lastDay.slice(0, 4));
      // console.log("sel", this.monthSelect);
      this.startDate = this.firstDay;
      this.endDate = this.lastDay;
    },

    async nextWeek() {
      this.disabled = false;
      this.tableData = [];
      // if (this.queryParams.month.slice(5, 7) < this.lastDay.slice(5, 7)) {
      //   this.$modal.msgError("已是" + this.queryParams.month + "月的最后一周");
      // } else {
      this.$modal.loading();
      const firstMonth = new Date(this.firstDay).getMonth() + 1;
      const lastMonth = new Date(this.lastDay).getMonth() + 1;
      const day = new Date(this.lastDay).getDate();
      if (
        lastMonth == 12 &&
        (day == 31 ||
          day == 30 ||
          day == 29 ||
          day == 28 ||
          day == 27 ||
          day == 26)
      ) {
        this.weekNum = 1;
        this.dataYear.year = Number(this.dataYear.year) + 1;
      } else {
        this.weekNum++;
      }

      this.holiday();
      if (this.weekNum == this.weekNum1) {
        this.disabled = false;
      }
      this.getDates();
      // this.tableData = [];
      for (let item in this.dataStart) {
        if (item == this.weekNum) {
          this.tableData = this.dataStart[item];
          this.startDate = this.dataStart[item][0].weekStart.slice(0, 10);
        }
      }
      // }
      if (this.tableData.length == 0) {
        this.deptList();
        this.all();
      } else {
        this.submitOr = true;
      }
      this.oneAndFive();
      this.$modal.closeLoading();
    },
    preWeek() {
      this.disabled = false;
      this.tableData = [];
      // if (this.queryParams.month.slice(5, 7) > this.firstDay.slice(5, 7)) {
      //   this.$modal.msgError("已是" + this.queryParams.month + "月的第一周");
      // } else {
      this.$modal.loading();
      if (this.weekNum > 1) {
        this.weekNum--;
      } else {
        console.log("this.weekNum", this.weekNum);
        let i = 0;
        i = i + 1;
        console.log("i", i);
        if (this.firstDay.slice(0, 4) == this.lastDay.slice(0, 4)) {
          this.dataYear.year = Number(this.firstDay.slice(0, 4)) - 1;
        } else {
          this.dataYear.year = this.firstDay.slice(0, 4);
        }

        // const year = new Date().getFullYear() - i;
        // console.log("year", year);
        const year = this.dataYear.year;

        const inputDate = new Date(year + "-12-31");
        // 获取一年中的第一天
        const firstDayOfYear = new Date(inputDate.getFullYear(), 0, 1);
        // 计算输入日期与一年中的第一天之间的天数差
        const daysDifference = Math.floor(
          (inputDate - firstDayOfYear) / (24 * 60 * 60 * 1000)
        );
        // 计算周数
        const weekNumber = Math.ceil(
          (daysDifference + firstDayOfYear.getDay() + 1) / 7
        );

        this.weekNum = weekNumber;
      }

      this.holiday();
      if (this.weekNum == this.weekNum1) {
        this.disabled = false;
      }
      this.getDates();
      // this.tableData = [];
      console.log("this.dataStart", this.dataStart);
      for (let item in this.dataStart) {
        if (item == this.weekNum) {
          this.tableData = this.dataStart[item];
        }
      }
      // }
      if (this.tableData.length == 0) {
        this.deptList();
        this.all();
      }
      this.oneAndFive();
      this.$modal.closeLoading();
    },
    // 获取1-5号日期
    oneAndFive() {
      attendanceEditDay().then((res) => {
        // this.getConfigKey("attendanceEditDay").then((response) => {
        //   console.log("res", response);
        // });
        let today = new Date();
        // 计算1到5号之间的所有日期
        let startDate = new Date(today.getFullYear(), today.getMonth(), "01");
        // let endDate = new Date(today.getFullYear(), today.getMonth(), "05");
        let endDate = new Date(
          today.getFullYear(),
          today.getMonth(),
          res.msg >= 10 ? res.msg : "0" + res.msg
        );
        this.today = moment(today).format("YYYY-MM-DD").slice(8, 10);
        // this.today = "01";

        this.oneDay = moment(startDate).format("YYYY-MM-DD").slice(8, 10);
        this.fiveDay = moment(endDate).format("YYYY-MM-DD").slice(8, 10);
        // this.anowMonth = new Date(this.queryParams.weekNum).getMonth() + 1;
        this.anowMonth = new Date(today).getMonth() + 1;
        this.anowMonth =
          this.anowMonth >= 10 ? this.anowMonth : "0" + this.anowMonth;
        // &&
        //   (this.lastYearMonth == this.anowMonth - 1 || this.anowMonth - 1 == 0)
        // console.log(111);
        console.log(this.monthSelect);
        let NowYear = new Date().getFullYear();
        console.log(NowYear);
        console.log(this.selYear);
        for (let i = 0; i < this.monthSelect.length; i++) {
          if (this.monthSelect[i] == this.anowMonth) {
            this.disabled = false;
            break;
          } else if (
            this.today >= this.fiveDay &&
            (this.lastYearMonth == this.anowMonth - 1 ||
              this.anowMonth - 1 == 0)
          ) {
            // 禁用

            this.disabled = true;
            return;
          } else {
            this.disabled = false;
            return;
          }
        }
      });
    },
    //上个月月份
    getLastMonth() {
      var year, lastMonth;
      var date = new Date();
      var nowYear = date.getFullYear(); //当前年：四位数字
      var nowMonth = date.getMonth(); //当前月：0-11
      if (nowMonth == 0) {
        //如果是0，则说明是1月份，上一个月就是去年的12月
        year = nowYear - 1;
        lastMonth = 12;
      } else {
        //不是1月份，年份为当前年，月份本来是要减1的，但是由于`getMonth()`的月份本身就是少了1的，所以月份不用变。
        year = nowYear;
        lastMonth = nowMonth;
      }
      lastMonth = lastMonth < 10 ? "0" + lastMonth : lastMonth; //月份格式化：月份小于10则追加个0
      let lastYearMonth = year + "-" + lastMonth;
      this.lastYearMonth = lastMonth;
      this.queryParams.month = lastYearMonth;
    },

    //两个日期之间的间隔日期
    getDayAll(starDay, endDay) {
      var arr = [];
      var dates = [];

      // 设置两个日期UTC时间
      var db = new Date(starDay);
      var de = new Date(endDay);
      // 获取两个日期GTM时间
      var s = db.getTime() - 24 * 60 * 60 * 1000;
      var d = de.getTime() - 24 * 60 * 60 * 1000;
      // 获取到两个日期之间的每一天的毫秒数
      for (var i = s; i <= d; ) {
        i = i + 24 * 60 * 60 * 1000;
        arr.push(parseInt(i));
      }
      // 获取每一天的时间  YY-MM-DD
      for (var j in arr) {
        var time = new Date(arr[j]);
        var year = time.getFullYear(time);
        var mouth =
          time.getMonth() + 1 >= 10
            ? time.getMonth() + 1
            : "0" + (time.getMonth() + 1);
        var day = time.getDate() >= 10 ? time.getDate() : "0" + time.getDate();
        var YYMMDD = year + "-" + mouth + "-" + day;
        dates.push(YYMMDD);
      }
      var daysOfWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      this.weekList = dates.map((date) => {
        return daysOfWeek[new Date(date).getDay()] + "（" + date + "）";
      });
      return dates;
    },
    async handleQuery() {
      // this.disabled = false;
      this.getFirstWeekOfMonth();

      this.tableData = [];
      this.weekList = [];
      this.firstDay = "";
      this.lastDay = "";
      this.dataYear.year = new Date(this.queryParams.weekNum).getFullYear();
      this.selYear = this.dataYear.year;
      this.anowMonth = new Date(this.queryParams.weekNum).getMonth() + 1;
      // 输入日期
      const day = new Date(this.queryParams.weekNum).getDate();
      console.log("6845", this.queryParams.weekNum);
      if (
        this.anowMonth == 12 &&
        (day == 31 ||
          day == 30 ||
          day == 29 ||
          day == 28 ||
          day == 27 ||
          day == 26)
      ) {
        this.weekNum = 1;
        if (this.weekNum == 1) {
          this.dataYear.year =
            new Date(this.queryParams.weekNum).getFullYear() + 1;
          this.selYear = this.dataYear.year;
        }
      } else {
        const inputDate = new Date(this.queryParams.weekNum);
        // 获取一年中的第一天
        const firstDayOfYear = new Date(inputDate.getFullYear(), 0, 1);
        // 计算输入日期与一年中的第一天之间的天数差
        const daysDifference = Math.floor(
          (inputDate - firstDayOfYear) / (24 * 60 * 60 * 1000)
        );
        // 计算周数
        const weekNumber = Math.ceil(
          (daysDifference + firstDayOfYear.getDay() + 1) / 7
        );

        this.weekNum = weekNumber;
      }

      this.deptList();
      this.getDates();
      this.oneAndFive();
      // let { data } = await selectByMonth(this.queryParams.month);
      // this.weekNum = Object.entries(data)[0][0];
      // this.tableData = Object.entries(data)[0][1];
      // this.firstDay = Object.entries(data)[0][1][0].weekStart.slice(0, 10);
      // this.lastDay = Object.entries(data)[0][1][0].weekEnd.slice(0, 10);
      // this.getDayAll(this.firstDay, this.lastDay);
      // this.getweekPreNext();
    },
    async selectByMonth() {
      this.getDates();
      let { data } = await selectByMonth(this.queryParams.month);
      this.dataStart = data;
      Object.entries(data).map((item) => {
        if (this.weekNum == item[0]) {
          this.tableData = item[1];
          this.firstDay = this.tableData[0].weekStart.slice(0, 10);
          this.lastDay = this.tableData[0].weekEnd.slice(0, 10);
          this.getDayAll(this.firstDay, this.lastDay);
        }
      });
      // this.weekNum = Object.entries(data)[0][0];
      // this.tableData = Object.entries(data)[0][1];

      // this.getweekPreNext();
    },
    nowDate1() {
      let currentDate = new Date();
      var year = currentDate.getFullYear();
      var month = currentDate.getMonth() + 1; // 月份是从0开始的，所以要加1
      month = month < 10 ? "0" + month : month;
      var date = currentDate.getDate();
      date = date < 10 ? "0" + date : date;
      var dayDate = year + "-" + month + "-" + date;
      this.nowDate = dayDate;
      this.startDate = dayDate;
    },
    //上一周下一周值班数据
    async deptList() {
      this.loading = true;
      this.submitOr = true;
      this.tableData = [];
      let { rows } = await deptList({ weekNumber: this.weekNum });
      if (rows.length == 0) {
        this.submitOr = false;
        this.tableData = rows;
        this.all();
      } else {
        this.tableData = rows;
        this.all();
      }
      this.loading = false;
    },
    // 一周考勤
    async oneWeek() {
      this.loading = true;
      let { rows } = await oneWeek({ weekNumber: this.weekNum });
      this.tableData = rows;
      this.loading = false;
      this.all();
    },

    //获取当前日期是第几周
    getWeekNum() {
      this.disabled = false;
      //获得当前日期是第几周的方法
      this.dataYear.year = moment(new Date()).format("YYYY"); //获得当前年份
      this.queryParams.weekNum = moment(new Date()); //获得今天是第几周
      var year = new Date().getFullYear();
      this.dataYear.year = year;
      var week = moment(new Date()).format("E"); //获得今天是星期几
      var startweek = moment(new Date(year + "-01-01")).format("E"); //获得今年的1月1号是星期几
      //今天到1月1号的时间戳之差
      var millisDiff =
        new Date(moment().format("yyyy-MM-DD")).getTime() -
        new Date(year + "-01-01").getTime();
      var days =
        (millisDiff -
          week * (24 * 60 * 60 * 1000) -
          (7 - startweek) * (24 * 60 * 60 * 1000)) /
        86400000;
      this.weekNum = days / 7 + 2;
      // this.getDates();
      this.weekNum1 = this.weekNum;
      // this.queryParams.weekNum = year - 1 + this.weekNum + "[周]";
      console.log("weeknnum", this.weekNum);
      return this.weekNum;

      //这里加的2代表的是本周和今年1月1号所在的那一周
    },

    //基本信息
    async getInfo() {
      let { user } = await getInfo();
      this.deptName = user.dept.deptName;
    },
    //添加考勤
    submitAttendance() {
      const currentDate = new Date();
      // const currentDay = 2;
      const currentDay = currentDate.getDate();
      const currentMonth = currentDate.getMonth() + 1;
      this.oneAndFive();

      // 本月周
      // if (
      //   this.weekNum1 == this.weekNum ||
      //   (currentDay > 20 &&
      //     currentDay < 26 &&
      //     this.lastYearMonth == this.anowMonth)
      // ) {
      // 当前月上个月
      this.anowMonth = new Date(this.queryParams.weekNum).getMonth() + 1;
      let anowMonth1 = new Date(this.queryParams.weekNum).getMonth() + 1;
      // if (
      //   this.lastYearMonth == this.anowMonth - 1 ||
      //   this.anowMonth - 1 == 0 ||
      //   this.anowMonth == anowMonth1
      // ) {

      ElMessageBox.confirm("是否确认保存该部门考勤？", "系统提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          insertList(this.tableData);
          ElMessage({
            type: "success",
            message: "保存成功",
          });
          this.disabled = false;
          this.submitOr = true;
        })
        .catch(() => {
          this.disabled = false;
        });

      // } else {
      //   ElMessage.error("不可编辑");
      //   // this.disabled = true;
      //   return;
      // }
      this.disabled = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.tagClass {
  color: red;
}
</style>
