<template>
  <div>
    <div class="top_user justify-between">
      <div class="row">
        <img :src="userInfo.Avatar" alt="" />
        <div class="">
          <p class="user_name">你好，{{ userInfo.NickName }}</p>
          <p class="user_year">工龄：{{ userInfo.WorkYear }}年</p>
        </div>
        <div class="tag">
          <div v-for="(i, index) in userInfo.PositionUsers" :key="index">
            {{ i.PositionName }}
          </div>
        </div>
      </div>
      <div
        class="row items-center"
        v-if="calcVisible('r_home_btn_black_artist')"
      >
        <n-badge :value="state.blackArtistCount" :max="99">
          <n-button quaternary @click="handleOpenBlackArtist()">
            画家黑名单
          </n-button>
        </n-badge>
      </div>
    </div>
    <div class="num_box">
      <n-grid x-gap="24" :cols="4" offset="1">
        <n-gi>
          <div class="item_box">
            <div class="title">审批申请</div>

            <n-grid :x-gap="12" :cols="2">
              <n-grid-item>
                <div class="item_num" @click="pushOpen(1, 1)">
                  <p class="num col">{{ state.apply.pendingApprovalCount }}</p>
                  <p class="label">待你审批</p>
                </div>
              </n-grid-item>
              <n-grid-item>
                <div class="item_num" @click="pushOpen(1, 2)">
                  <p class="num col">{{ state.apply.submitApprovalCount }}</p>
                  <p class="label">你已提交待审批</p>
                </div>
              </n-grid-item>
            </n-grid>
          </div>
        </n-gi>
        <n-gi>
          <div class="item_box">
            <div class="title">考勤申请</div>
            <n-grid :x-gap="12" :cols="2">
              <n-grid-item>
                <div class="item_num" @click="pushOpen(2, 1)">
                  <p class="num col">{{ state.apply.pendingClockInCount }}</p>
                  <p class="label">待你审批</p>
                </div>
              </n-grid-item>
              <n-grid-item>
                <div class="item_num" @click="pushOpen(2, 2)">
                  <p class="num col">{{ state.apply.submitClockInCount }}</p>
                  <p class="label">你已提交待审批</p>
                </div>
              </n-grid-item>
            </n-grid>
          </div>
        </n-gi>
        <n-gi :span="2">
          <div class="item_box">
            <div class="title">
              考勤
              <p style="text-align: center">
                可到[我的考勤]菜单页查看或处理更多内容
              </p>
            </div>
            <div class="week">
              考勤周期：
              <n-date-picker
                v-model:value="state.currentMonth"
                :actions="['confirm']"
                type="month"
                @confirm="changeMonth"
                style="width: 100px"
              />
            </div>
            <n-grid :x-gap="12" :cols="4">
              <n-grid-item>
                <div class="item_num">
                  <p class="num">
                    {{ state.clickInfo.attendanceDayNum }} /
                    {{ state.clickInfo.needAttendanceDayNum }}
                  </p>
                  <p class="label">本月出勤(天)</p>
                </div>
              </n-grid-item>
              <n-grid-item>
                <div class="item_num">
                  <p class="num">{{ state.clickInfo.abnormalClock }}</p>
                  <p class="label">我的异常考勤</p>
                </div>
              </n-grid-item>
              <n-grid-item>
                <div class="item_num">
                  <p class="num">{{ state.clickInfo.averageHourNum }}</p>
                  <p class="label">平均工时(小时)</p>
                </div>
              </n-grid-item>
              <n-grid-item>
                <div class="item_num">
                  <p class="num">{{ state.clickInfo.overWorkHour }}</p>
                  <p class="label">加班(小时)</p>
                </div>
              </n-grid-item>
            </n-grid>
          </div>
        </n-gi>
      </n-grid>
    </div>
    <div style="margin: 0 35px">
      <n-grid x-gap="24" :cols="4">
        <n-gi :span="3">
          <div class="table-tabs">
            <n-tabs type="line" animated :size="'small'">
              <template #suffix>
                <div
                  v-if="calcVisible('r_home_btn_bulletin_create')"
                  style="cursor: pointer"
                  @click="openCreate"
                >
                  <img
                    style="width: 28px; height: 28px"
                    src="@/assets/image/home/zu2959@2x.png"
                    alt=""
                  />
                </div>
              </template>
              <n-tab-pane name="公告" tab="公告">
                <n-data-table
                  virtual-scroll
                  :bottom-bordered="false"
                  :bordered="false"
                  :columns="columns"
                  :data="listData"
                  :max-height="340"
                  class="tab-table"
                />
              </n-tab-pane>
            </n-tabs>
          </div>
        </n-gi>
        <n-gi>
          <div class="table-tabs">
            <n-tabs type="line" animated :size="'small'">
              <template #suffix>
                <div class="pev_per_btn">
                  <n-button quaternary size="tiny" @click="getBefore()">
                    <template #icon>
                      <n-icon><ArrowBackIcon /></n-icon>
                    </template>
                    前一天
                  </n-button>
                  <n-button
                    :disabled="state.recordDate >= timeDate"
                    quaternary
                    icon-placement="right"
                    size="tiny"
                    @click="getAfter()"
                  >
                    后一天
                    <template #icon>
                      <n-icon><ArrowForwardIcon /></n-icon>
                    </template>
                  </n-button>
                </div>
              </template>
              <n-tab-pane name="打卡情况" tab="打卡情况" class="pane_wrapper">
                <n-spin
                  style="
                    display: flex;
                    justify-content: center;
                    margin-top: 100px;
                  "
                  size="medium"
                  :show="state.isLoadRecord"
                  v-if="state.isLoadRecord"
                />
                <div v-else>
                  <div
                    style="
                      padding: 10px 0 20px 0;
                      color: rgba(31, 34, 37, 0.9);
                      font-weight: bolder;
                      font-size: 16px;
                    "
                  >
                    {{ state.currentDay }}
                  </div>
                  <div v-if="!state.isEmpty">
                    <div
                      class="on_click_box"
                      :style="
                        index === state.recordList.length - 1
                          ? ''
                          : 'border-left: 1px solid #e0e0e5;'
                      "
                      v-for="(item, index) in state.recordList"
                      :key="index"
                    >
                      <!-- 圆点 -->
                      <div class="circle">
                        <div
                          class="miss"
                          v-if="
                            item.actionType === 'miss' ||
                            item.actionType === 'late' ||
                            item.actionType === 'before' ||
                            item.actionType === 'outWorkBefore' ||
                            item.actionType === 'outWorkLate'
                          "
                        ></div>
                        <div class="common" v-else></div>
                      </div>
                      <!-- 内容 -->

                      <div
                        :class="
                          item.actionType === 'miss' ||
                          item.actionType === 'late' ||
                          item.actionType === 'before' ||
                          item.actionType === 'outWorkBefore' ||
                          item.actionType === 'outWorkLate'
                            ? 'error_bg item_box'
                            : 'common_bg item_box'
                        "
                      >
                        <div style="padding: 10px 15px">
                          <p
                            style="color: rgba(0, 0, 0, 0.9); font-weight: bold"
                          >
                            {{ item.onOff === "on" ? "上班" : "下班" }}时间
                            {{ item.workTime }}
                            <n-tag
                              v-for="(n, idx) in item.applyInfo"
                              :key="idx"
                              class="tag"
                            >
                              {{ n.applyTypeZhCN }}
                            </n-tag>
                          </p>
                          <p v-if="item.actionType === 'miss'">
                            未打卡 <span style="color: #cf3050">缺卡</span>
                          </p>
                          <p
                            v-else-if="item.actionType === 'common'"
                            style="color: #46299d"
                          >
                            {{ item.actionTime.split(" ")[1] }} 已打卡
                          </p>
                          <p
                            style="color: #cf3050"
                            v-else-if="item.actionType === 'late'"
                          >
                            {{ item.actionTime.split(" ")[1] }}
                            <span>迟到</span>
                          </p>
                          <p
                            style="color: #cf3050"
                            v-else-if="item.actionType === 'before'"
                          >
                            {{ item.actionTime.split(" ")[1] }}
                            <span>早退</span>
                          </p>
                          <p v-else-if="item.actionType === 'outWork'">
                            {{ item.actionTime.split(" ")[1] }} 已打卡
                          </p>
                          <p
                            style="color: #cf3050"
                            v-else-if="item.actionType === 'outWorkLate'"
                          >
                            {{ item.actionTime.split(" ")[1] }}
                            <span>外勤迟到</span>
                          </p>
                          <p
                            style="color: #cf3050"
                            v-else-if="item.actionType === 'outWorkBefore'"
                          >
                            {{ item.actionTime.split(" ")[1] }}
                            <span style="color: #cf3050">外勤早退</span>
                          </p>
                          <p v-else>
                            <span v-if="item.actionTime">{{
                              item.actionTime.split(" ")[1]
                            }}</span>
                            <span v-else>未打卡</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    style="
                      display: flex;
                      justify-content: center;
                      margin-top: 100px;
                    "
                    v-else
                  >
                    <div>
                      <img
                        src="@/assets/image/no-record.png"
                        alt=""
                        style="width: 238px; height: 130px"
                      />
                      <p
                        style="
                          font-size: 16px;
                          color: rgba(0, 0, 0, 0.4);
                          text-align: center;
                        "
                      >
                        暂无打卡记录
                      </p>
                    </div>
                  </div>
                </div>
              </n-tab-pane>
            </n-tabs>
          </div>
        </n-gi>
      </n-grid>
    </div>
    <n-modal
      v-model:show="showModal1"
      class="custom-card"
      :mask-closable="false"
      align="center"
      preset="card"
      block-scroll
      style="width: 1385px; display: flex; flex-direction: column"
      :bordered="false"
    >
      <template #header>
        <div
          class="text-center"
          style="color: #1f2225; font-size: 20px; font-weight: 600"
        >
          公告详情
        </div>
      </template>
      <div class="content3">
        <div class="wrap1">
          <div class="wrap1_1">公告标题</div>
          <div class="wrap1_2">{{ currentRow.Title }}</div>
        </div>
        <div class="wrap2">
          <div class="wrap2_1">公告内容</div>
          <div class="wrap2_2" v-html="detailData.Content"></div>
        </div>
        <div class="wrap3" v-if="detailData.Attachments?.length > 0">
          <div class="wrap3_1">附件</div>
          <div class="wrap3_2">
            <div
              @click="viewPdf(item.url)"
              v-for="(item, index) of detailData.Attachments?.map((x) => {
                return {
                  name: getLastFileName(x),
                  url: x,
                };
              })"
              class="mb-[10px]"
            >
              <n-button type="primary" text>
                {{ item.name }}
              </n-button>
            </div>
          </div>
        </div>
        <div class="wrap4">
          <div class="wrap4_1">已阅人员</div>
          <div class="wrap4_2">
            <n-button
              size="small"
              style="margin-right: 20px; margin-bottom: 10px"
              v-for="item of personnel.Read"
              type="tertiary"
            >
              {{ item.Nickname }}
            </n-button>
          </div>
        </div>
        <div class="wrap5">
          <div class="wrap5_1">未阅人员</div>
          <div class="wrap5_2">
            <n-button
              size="small"
              style="margin-right: 20px; margin-bottom: 10px"
              v-for="item of personnel.UnRead"
              type="tertiary"
            >
              {{ item.Nickname }}
            </n-button>
          </div>
        </div>
      </div>
      <template #action>
        <div class="justify-center row">
          <n-button
            style="width: 161px; height: 34px; margin-left: 20px"
            color="#46299D"
            @click="handleDetailCancel"
            >返回</n-button
          >
        </div>
      </template>
    </n-modal>
    <n-modal
      v-model:show="showModal2"
      class="custom-card"
      :mask-closable="false"
      align="center"
      preset="card"
      block-scroll
      style="width: 1385px; display: flex; flex-direction: column"
      :bordered="false"
    >
      <template #header>
        <div
          class="text-center"
          style="color: #1f2225; font-size: 20px; font-weight: 600"
        >
          新建公告
        </div>
      </template>
      <div class="content4">
        <div class="wrap1">
          <div class="pack1 fl-mb-sm">
            <div class="pack1_1">公告标题</div>
            <div class="pack1_2">
              <n-input
                style="width: 100%"
                v-model:value="state.createData.Title"
                type="text"
                placeholder="请输入标题"
              />
            </div>
          </div>
          <div class="pack2 fl-mb-sm">
            <div class="pack2_1">公告内容</div>
            <div class="pack2_2">
              <fl-markdown
                :val="state.createData.Content"
                @getEditorVal="handleValChange"
              ></fl-markdown>
            </div>
          </div>
          <div class="pack3 fl-mb-sm">
            <div class="pack3_1">附件上传</div>
            <div class="pack3_2">
              <n-upload
                accept=".pdf"
                v-model:file-list="state.createData.Attachments"
                :custom-request="customRequest"
                @before-upload="beforeUpload"
                @update:file-list="changeFile"
              >
                <n-button>上传PDF</n-button>
              </n-upload>
            </div>
          </div>
          <div class="pack4 fl-mb-sm">
            <div class="pack4_1">选择告知人员</div>
            <div class="pack4_2 fl-ml-sm">
              <fl-mul-tags
                :config="{
                  selectAll: true,
                  field: 'Participant',
                  value: [],
                  optionsConfig: {
                    url: 'user/list',
                    params: [
                      {
                        label: 'Page',
                        value: 1,
                      },
                      {
                        label: 'PageSize',
                        value: 9999,
                      },
                      {
                        label: 'status',
                        value: 'notactive',
                      },
                    ],
                    labelField: 'NickName',
                    valueField: 'ID',
                  },
                }"
                :val="state.createData.Participant"
                @triggerUpdateVal="(val) => handleTagChange(val, 'Participant')"
              />
            </div>
          </div>
        </div>
      </div>
      <template #action>
        <div class="justify-center row">
          <n-button
            style="width: 161px; height: 34px"
            color="#C7C7C9"
            @click="handleCreateCancel"
            >取消</n-button
          >
          <n-button
            style="width: 161px; height: 34px; margin-left: 20px"
            color="#46299D"
            @click="handleCreateSubmit"
            >确定</n-button
          >
        </div>
      </template>
    </n-modal>
    <addDialog
      v-model:visible="state.showApprovalModal"
      @onClose="addColseFn"
      :activeKey="state.activeKey"
      :TabType="state.TabType"
    ></addDialog>
  </div>

  <n-modal
    v-model:show="state.dialogDel"
    style="width: 600px"
    :mask-closable="false"
    preset="card"
  >
    <template #header>
      <div
        class="col-12 row justify-center relative"
        style="border-bottom: 1px solid #dfd7f2"
      >
        <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
          删除
        </div>
      </div>
    </template>
    <div class="row justify-center fl-pa-md">
      <div class="font-20" style="color: #1f2225ff; margin: 80px 0">
        确定删除选中的公告吗？
      </div>
      <div class="col-12 row justify-center">
        <n-button
          tertiary
          style="width: 161px; background: #c7c7c9ff; color: #fff"
          class="fl-mr-md"
          @click="handleDialogDelCancel"
          >返回</n-button
        >

        <n-button
          tertiary
          style="width: 161px; background: #46299dff; color: #fff"
          @click="handleDialogDelSubmit"
          :loading="state.btnLoading"
          >确定</n-button
        >
      </div>
    </div>
  </n-modal>
  <black-artist
    v-if="state.dialogBlackArtist"
    ref="blackArtistRef"
    @triggerCloseModal="handleDialogBlackClose"
  />
</template>

<script setup>
import { ref, getCurrentInstance, reactive, nextTick } from "vue";
import { Local } from "@/utils/storage.js";
const userInfo = ref(Local.get("userInfo"));
import pdfImg from "@/assets/file/pdf.png";
import flMarkdown from "@/components/layout/markdown/wangeditor.vue";
import { scheduleInfo, scheduleRead, userList } from "@/api-norm/home/index.js";
import { NButton, NDatePicker } from "naive-ui";
import FlMulTags from "./multags.vue";
import { processError, processSuccess } from "@/utils/helper/message";

import { uploadImg } from "@/api-norm/common/index.js";
// import addDialog from "./components/applyDialog.vue";
import {
  ArrowBack as ArrowBackIcon,
  ArrowForward as ArrowForwardIcon,
} from "@vicons/ionicons5";
import moment from "moment";
import dayjs from "dayjs";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
import blackArtist from "./components/blackartist.vue";
dayjs.extend(isSameOrAfter);

const app = document.getElementById("app");

const currentInstance = getCurrentInstance();
const { $request, $hadRule } =
  currentInstance.appContext.config.globalProperties;
const showModal1 = ref(false);
const showModal2 = ref(false);
// 周期
const getLastMonth = (subtractMonths) => {
  let monthT = dayjs().valueOf();
  if (dayjs().isSameOrAfter(dayjs().date(26))) {
    monthT = dayjs().add(1, "month").valueOf();
  }
  return subtractMonths
    ? dayjs(monthT).subtract(subtractMonths, "month").valueOf()
    : monthT;
};

let timeDate = Date.now();
console.log(timeDate);
console.log(new Date());

const state = reactive({
  btnLoading: false,
  dialogDel: false,
  dialogData: {},
  dialogBlackArtist: false,
  blackArtistCount: 0,
  LastBlackListTime: null,
  createData: {
    CommonSeal: [],
    Attachments: [],
  },
  currentMonth: new Date().getTime(),
  currentDay: "",
  clickInfo: {
    attendanceDayNum: 0,
    needAttendanceDayNum: 0,
    abnormalClock: 0,
    averageHourNum: 0,
    overWorkHour: 0,
  },
  apply: {
    pendingApprovalCount: 0, //审核申请-待你审核数量
    submitApprovalCount: 0, //审核申请-你提交待审核数量
    pendingClockInCount: 0, //考勤申请-待你审核数量
    submitClockInCount: 0, //考勤申请-你提交待审核数量
  },
  isEmpty: false,
  recordList: [], // 打卡记录
  isLoadRecord: false,
  currentDate: timeDate,
  recordDate: timeDate,
  showApprovalModal: false,
  checkPeo: [], // 告知创建选择的人员
});

const getCurrentDate = (timestamp) => {
  // 获取当前日期
  const now = dayjs(new Date(timestamp));
  /*  	// 获取星期几，返回值是 0 到 6，其中 0 是周日，6 是周六
	const dayOfWeek = now.day();
	// 获取星期几的名称
	const dayOfWeekName = now.format('dd'); // 'dd' 格式化输出星期几的缩写*/
  const dayOfWeekNameFull = now.format("dddd"); // 'dddd' 格式化输出星期几的全称
  console.log(`今天是：${now.format("YYYY-MM-DD")}，${dayOfWeekNameFull}`);
  state.currentDay = `${now.format("YYYY.MM.DD")} ${dayOfWeekNameFull}`;
  // return `${now.format('YYYY.MM.DD')} ${dayOfWeekNameFull}`
};

const listData = ref([]);
const columns = [
  {
    title: "标题",
    key: "Title",
  },
  {
    title: "发起人",
    key: "InitiatorNickname",
    width: 100,
  },
  {
    title: "发布时间",
    key: "CreatedTime",
  },
  {
    title: "操作",
    key: "address",
    width: 200,
    render(row) {
      return [
        h(
          NButton,
          {
            type: "primary",
            style: { lineHeight: "40px", marginRight: "8px" },
            onClick: () => {
              viewDetail(row);
            },
          },
          { default: () => "查看详情" }
        ),
        calcVisible("r_btn_home_notice_del") &&
          h(
            NButton,
            {
              type: "primary",
              style: { lineHeight: "40px" },
              onClick: () => {
                handeDelNotice(row);
              },
            },
            { default: () => "删除" }
          ),
      ];
    },
  },
];

// 打开待你审批
const pushOpen = (type, num) => {
  state.TabType = type;
  state.activeKey = num;
  state.showApprovalModal = true;
};

const addColseFn = () => {
  state.showApprovalModal = false;
  applyCount();
};

// 公告列表
const getPageData2 = () => {
  let url = "workbench/schedule-list";
  let params = {
    Page: 1,
    PageSize: 9999,
  };
  $request.HTTP.components.postDataByParams(url, params).then((res) => {
    if (res.status === 0) {
      listData.value = res.data.Data || [];
    }
  });
};

const detailData = ref({});
const personnel = ref({});
const currentRow = ref({});
// 查看公告详情
const viewDetail = async (row) => {
  currentRow.value = row;
  showModal1.value = true;
  const res = await scheduleInfo({
    Uuid: row.Uuid,
  });
  const res1 = await scheduleRead({
    Uuid: row.Uuid,
  });

  if (res.status === 0) {
    detailData.value = res.data;
  }
  if (res1.status === 0) {
    const filterItems = (items) =>
      items.filter((item) => {
        if (!Array.isArray(item.Comp)) return true;
        return !item.Comp.some(
          (dep) => JSON.parse(dep).Name === "开发测试用部门"
        );
      });

    personnel.value.Read = filterItems(res1.data.Read);
    personnel.value.UnRead = filterItems(res1.data.UnRead);
  }
};
const handleValChange = (val) => {
  state.createData.Content = val;
};
// 获取公章
const getImgs = () => {
  let url = "workbench/common-seal-list";
  let params = {};
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.imgList =
          res.data &&
          res.data.map((item) => {
            return { label: item, value: item };
          });
      } else {
        processError(res.msg || "获取数据失败");
      }
    },
    (err) => {
      processError(err.message);
    }
  );
};
// 公告-告知人-列表
const handleTagChange = ({ defaultCheckDep, selectOptions }, field) => {
  state.checkPeo = selectOptions;
  let calcOpt = defaultCheckDep.map((item) => {
    return {
      label: item.label,
      value: item.value,
      comp: item.comp,
    };
  });
  state.createData[field] = calcOpt;
};
// 新建公告
const handleCreateSubmit = () => {
  if (!state.createData.Title) {
    message.warning("请输入公告标题");
    return;
  }
  if (!state.createData.Content) {
    message.warning("请输入公告内容");
    return;
  }
  let url = "workbench/schedule-add";
  let params = {
    Title: state.createData.Title,
    Content: state.createData.Content,
    CommonSeal: state.createData.CommonSeal,
    Participant: state.createData.Participant || [],
    Attachments: state.createData.Attachments?.map((x) => {
      return x.url;
    }),
  };
  if (state.checkPeo.length === 0) {
    return message.error('"请选择告知人员",');
  }
  params.CommonSeal = params.CommonSeal.length == 0 ? "" : params.CommonSeal[0];
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        message.success('"发布成功"');
        showModal2.value = false;
        getPageData2();
      } else {
        message.error('res.message || "操作失败",');
      }
    },
    (err) => {
      message.error('err.message || "操作失败",');
    }
  );
};
const beforeUpload = (data) => {
  const fileType = ["application/pdf"];
  if (fileType.indexOf(data.file.type) === -1) {
    message.error("请选择pdf格式的文件");
    return false;
  }
  return true;
};
function getLastFileName(path) {
  const parts = path.split("/");
  return parts.pop();
}
const calcVisible = (ruleBtn) => {
  if (ruleBtn) {
    return $hadRule(ruleBtn);
  }
  return false;
};
const viewPdf = (item) => {
  window.open(item);
};
const customRequest = async ({
  file,
  data,
  headers,
  withCredentials,
  action,
  onFinish,
  onError,
  onProgress,
}) => {
  const formData = new FormData();
  console.log("file", file);
  formData.append("file", file.file);
  formData.append("source", "artwork");
  formData.append("type", "");
  formData.append("defineFileName", file.name);
  const res = await uploadImg(formData);
  if (res.status === 0) {
    file.url = res.data.ori_url;
    onFinish();
    message.success("上传成功");
    console.log(state.createData.Attachments, "state.createData.Attachments");
  } else {
    onError();
  }
};
const changeFile = (file) => {};
const openCreate = () => {
  state.checkPeo = [];
  showModal2.value = true;
  state.createData.Content = "";
  state.createData.Title = "";
  state.createData.Attachments = [];
};
const handleCreateCancel = () => {
  showModal2.value = false;
};
const handleDetailCancel = () => {
  showModal1.value = false;
};
// 考勤 数值
const getNum = () => {
  let url = "/homePage/clockIn/info";
  let params = {
    staffUID: Local.get("userInfo").ID,
    month: moment(state.currentMonth).format("YYYY-MM"),
    collectionType: 23,
  };
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.clickInfo = res.data;
      } else {
        message.error('res.message || "操作失败",');
      }
    },
    (err) => {
      message.error('err.message || "操作失败",');
    }
  );
};
const changeMonth = (e) => {
  console.log(e);
  state.currentMonth = e;
  getNum();
};
// 申请-数值
const applyCount = () => {
  let url = "/homePage/apply/count";
  $request.HTTP.components.postDataByParams(url, {}).then(
    (res) => {
      if (res.status === 0) {
        state.apply = res.data;
      } else {
        message.error('res.message || "操作失败",');
      }
    },
    (err) => {
      message.error('err.message || "操作失败",');
    }
  );
};
// 前一天
const getBefore = () => {
  state.recordDate = state.recordDate - 24 * 60 * 60 * 1000;
  getCurrentDate(state.recordDate);
  getOnClick();
};
// 后一天
const getAfter = () => {
  state.recordDate = state.recordDate + 24 * 60 * 60 * 1000;
  getCurrentDate(state.recordDate);
  getOnClick();
};

// 打卡记录
const getOnClick = () => {
  state.isLoadRecord = true;
  let url = "/homePage/clockIn/record";
  let params = {
    staffUID: Local.get("userInfo").ID,
    date: moment(state.recordDate).format("YYYY-MM-DD"),
    collectionType: 1,
  };
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      state.isLoadRecord = false;
      if (res.status === 0) {
        // state.apply = res.data;
        if (res.data) {
          state.isEmpty = false;
          state.recordList = res.data;
        } else {
          state.isEmpty = true;
        }
      } else {
        message.error('res.message || "操作失败",');
      }
    },
    (err) => {
      state.isLoadRecord = false;
      message.error('err.message || "操作失败",');
    }
  );
};
onMounted(() => {
  getPageData2();
  getImgs();
  getNum();
  applyCount();
  getOnClick();
  getCurrentDate(timeDate);
  getBlackArtistInfo();
});

const handeDelNotice = (row) => {
  state.dialogData = row;
  state.dialogDel = true;
};
const handleDialogDelCancel = () => {
  state.dialogDel = false;
};
const handleDialogDelSubmit = () => {
  let url = "workbench/del-schedule";
  let params = {
    Uuid: state.dialogData.Uuid,
  };
  state.btnLoading = true;
  $request.HTTP.components.postDataByParams(url, params).then((res) => {
    state.btnLoading = false;
    if (res.status === 0) {
      state.dialogDel = false;
      getPageData2();
      processSuccess("操作成功");
    } else {
      processError(res.msg || "操作失败");
    }
  });
};
const blackArtistRef = ref(null);
const handleOpenBlackArtist = () => {
  state.dialogBlackArtist = true;
  // 该接口主要用来去除未读消息
  let url = "artist/black-read";
  let params = {
    LastBlackListTime: state.LastBlackListTime,
  };
  $request.HTTP.components.postDataByParams(url, params).then((res) => {
    if (res.status === 0) {
      state.blackArtistCount = 0;
    }
  });
  nextTick(() => {
    blackArtistRef.value.setDialogVisible(true);
  });
};
const handleDialogBlackClose = () => {
  state.dialogBlackArtist = false;
};
const getBlackArtistInfo = () => {
  let url = "artist/black-unread-count";
  let params = {
    staffUID: Local.get("userInfo").ID,
  };
  $request.HTTP.components.postDataByParams(url, params).then((res) => {
    state.blackArtistCount = res.data.Count;
    state.LastBlackListTime = res.data.LastBlackListTime;
  });
};
</script>

<style lang="scss" scoped>
.top_user {
  margin: 37px 35px 20px 35px;
  padding: 16px 19px;
  border-radius: 3px;
  background: #fff;
  display: flex;
  // align-items: center;
  color: #000000;
  img {
    width: 61px;
    height: 61px;
    margin-right: 17px;
  }
  .user_name {
    font-weight: bold;
    font-size: 18px;
  }
  .user_year {
    font-weight: bold;
    color: #8b8b8b;
    font-size: 18px;
  }
  .tag {
    display: flex;
    align-items: flex-start;
    margin-left: 28px;
    div {
      border: 1px solid #e0e0e6;
      background: #f7f7f7;
      border-radius: 20px;
      padding: 3px 15px 2px 15px;
      margin: 0 10px;
    }
  }
}
.num_box {
  margin: 0 35px 20px 35px;

  .item_box {
    padding: 15px 28px;
    position: relative;
    background: #fff;
    .title {
      text-align: center;
      color: #1f2225;
      font-size: 18px;
      height: 45px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.09);

      p {
        margin: -5px 0 0 0;
        font-size: 10px;
        color: #9ea4aa;
      }
    }
    .week {
      position: absolute;
      display: flex;
      align-items: center;
      right: 30px;
      top: 20px;
      font-size: 14px;
      span {
        color: #46299d;
      }
    }
    .item_num {
      text-align: center;
      .num {
        font-size: 48px;
        font-weight: bolder;
        color: #1f2225;
        text-align: center;
      }
      .col {
        color: #46299d !important;
      }
      .label {
        font-size: 16px;
        color: #9ea4aa;
        text-align: center;
      }
    }
  }
}
.table-tabs {
  // border: 1px solid red;
  background: #fff;
  padding: 0 35px;
  :deep(.n-tabs-tab__label) {
    font-size: 18px;
  }
}
.pev_per_btn {
  display: flex;
  justify-content: space-between;
  width: 180px;
  :deep(.n-button) {
    color: #1f2225;
    font-size: 14px !important;
  }
  // border: 1px solid red;
}
.pane_wrapper {
  height: 420px;
  // border: 1px solid red;
}
.on_click_box {
  padding-bottom: 25px;
  margin-left: 10px;
  position: relative;
  .circle {
    background: #fff;
    height: 30px;
    position: absolute;
    top: -10px;
    left: -6px;
    padding-top: 9px;
    div {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .common {
      background: #46299d;
    }
    .miss {
      background: #cf3050;
    }
    .info {
      background: #e0e0e4;
    }
  }
  .item_box {
    margin-left: 15px;
    // background: #fff;
    // border: 1px solid #e0e0e4;
    border-radius: 4px;
    .tag {
      background: #1f80f0 !important;
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
      padding: 1px 6px;
      height: 20px;
    }
  }
  .common_bg {
    background: #eee9f8;
    border: 1px solid #b2a6d6;
    border-radius: 5px;
  }
  .error_bg {
    background: #fbeef1;
    border: 1px solid #f3cbd3;
    border-radius: 5px;
  }
}
:deep(
    .n-upload-file-list
      .n-upload-file.n-upload-file--with-url
      .n-upload-file-info
      .n-upload-file-info__name
  ) {
  color: $theme-primary;
}
:deep(.n-image) {
  padding: 10px;
}
.w-e-text {
  text-align: start;
}

.n-input__input {
  text-align: start;
}

.content1_1 {
  padding: 15px 20px 15px 20px;

  .wrap2 {
    display: grid;
    grid-template-columns: 120px 120px 120px;
    gap: 10px;
  }

  .wrap1 {
    margin-bottom: 13px;
    font-size: 17px;
    color: #000;
  }
}
</style>
<style lang="scss" scoped>
.view-upload {
  :deep(.n-upload-file-list) {
    margin: 0;
  }
}

* {
  text-align: start;
}
.content4 {
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;

  .wrap1 {
    .pack4 {
      display: flex;

      .pack4_1 {
        flex-shrink: 0;
        width: 84px;
      }

      .pack4_2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        height: 100%;
        .pack4_2_2 {
          width: 100%;
          .pack4_2_2_1 {
            height: 100%;
            overflow-y: auto;
            border: 1px solid #e0e0e5;
            width: 100%;

            .pack4_2_2_1_1 {
              display: flex;
              align-items: center;
              width: 100%;
              height: 35px;
              border-bottom: 1px solid #e0e0e5;
            }
            .pack4_2_2_1_2 {
              display: flex;
              flex-wrap: wrap;
              padding: 10px 20px 10px 20px;
              .pack4_2_2_1_2_1 {
                min-width: 150px;
                flex-wrap: wrap;
              }
            }
          }
        }
      }
    }

    .pack3 {
      display: flex;

      .pack3_1 {
        flex-shrink: 0;
        width: 84px;
      }

      .pack3_2 {
        display: flex;
        justify-content: start;
        width: 400px;

        img {
          margin-left: 10px;
          width: 100px;
          height: 100px;
        }
      }
    }

    .pack2 {
      display: flex;

      .pack2_1 {
        flex-shrink: 0;
        width: 84px;
      }

      .pack2_2 {
        width: 100%;
      }
    }

    .pack1 {
      display: flex;
      align-items: center;

      .pack1_1 {
        flex-shrink: 0;
        width: 84px;
      }

      .pack1_2 {
        width: 100%;
      }
    }
  }

  .wrap2 {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.content3 {
  position: relative;
  width: 100%;
  height: 753px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: start;

  .wrap5 {
    display: flex;

    .wrap5_1 {
      margin-right: 50px;
      flex-shrink: 0;
      width: 56px;
    }

    .wrap5_2 {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      overflow-y: auto;
    }
  }

  .wrap4 {
    margin-bottom: 24px;
    display: flex;

    .wrap4_2 {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      max-height: 200px;
      overflow-y: auto;
    }

    .wrap4_1 {
      margin-right: 50px;
      flex-shrink: 0;
      width: 56px;
    }
  }

  .wrap1 {
    margin-bottom: 24px;

    .wrap1_1 {
      margin-right: 50px;
      flex-shrink: 0;
      width: 56px;
    }

    display: flex;
  }

  .wrap2 {
    margin-bottom: 24px;
    display: flex;
    .wrap2_1 {
      margin-right: 50px;
      flex-shrink: 0;
      width: 56px;
    }
  }

  .wrap3 {
    margin-bottom: 24px;
    display: flex;

    .wrap3_1 {
      margin-right: 50px;
      flex-shrink: 0;
      width: 56px;
    }
  }
}

.content2 {
  display: flex;
  gap: 20px;
  height: 750px;

  .wrap1 {
    width: 936px;
    background-color: #fff;
  }
  .wrap2 {
    flex: 1;
    height: 100%;
    padding: 20px 12px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 10px #ccc;
    display: flex;
    flex-direction: column;
    .exhibition {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow-y: auto;
      .exhibition_1 {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background-color: rgba(188, 188, 188, 0.18);
        padding: 8px;
        box-sizing: border-box;
        margin-bottom: 10px;
        .exhibition_1_title {
          font-size: 16px;
          margin-bottom: 6px;
          font-weight: bold;
        }
        .exhibition_1_title::before {
          content: ""; /* 插入一个空的内容 */
          display: inline-block; /* 让伪元素表现得像一个内联块级元素 */
          width: 8px; /* 设置圆点的大小 */
          height: 8px;
          margin-right: 10px; /* 可选：添加一些右边距，以便圆点和标题之间有一些空间 */
          border-radius: 50%; /* 设置为50%来创建一个圆形 */
          background-color: $theme-primary; /* 设置圆点的颜色为蓝色 */
          vertical-align: middle;
        }
        .exhibition_1_content {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          .exhibition_1_content_item {
            display: flex;
          }
        }
      }
    }
  }
}

:deep(.n-date-panel__vertical-divider) {
  display: none;
}

:deep(.n-date-panel-calendar.n-date-panel-calendar--end) {
  display: none;
}

:deep(.n-date-panel-actions) {
  display: none;
}

:deep(.v-x-scroll) {
  height: 59px;
}

:deep(.n-tabs-tab) {
  padding: 0;
}

:deep(.n-tabs-tab__label) {
  font-weight: bolder;
}

.tab-table {
  // :deep(.n-data-table) {
  --n-td-color-hover: rgba(255, 255, 255, 0) !important;
  // }

  :deep(.n-tab-pane) {
    padding-top: 0;
  }

  :deep(.n-data-table-th) {
    padding-left: 0;
    padding-top: 14px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    color: #1f2225;
    background-color: #fff;
  }

  :deep(.n-data-table-td) {
    padding: 8px 0 8px 0;
  }

  :deep(.n-data-table-tr) {
    .n-data-table-td {
      border: none;
    }
  }
}

.grid-container {
  background-color: #f9f9fd;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

  .grid-item {
    background-color: #fff;

    &.item10 {
      padding-left: 35px;
      padding-right: 35px;
      display: flex;
      flex-direction: column;
      position: relative;
      .mask {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        z-index: 999;
      }
      .wrap3 {
        .wrap3_1 {
          cursor: pointer;
          margin-top: 16px;
          color: #1f2225;
          font-size: 14px;
          padding: 5px 10px 5px 18px;

          display: flex;
          align-items: center;

          &:hover {
            background-color: #eee9f8;
          }

          .wrap3_1_4 {
            color: #9ea4aa;
            font-size: 12px;
            margin-left: auto;
          }

          .wrap3_1_3 {
            margin-left: 20px;
          }

          .wrap3_1_2 {
            margin-left: 10px;
          }

          .wrap3_1_1 {
            width: 4px;
            height: 26px;
            border-radius: 2px;
            background-color: $theme-primary;
          }
        }
      }

      .wrap2 {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .wrap1 {
        display: flex;
        justify-content: space-between;
        height: 59px;

        .wrap1_2 {
          display: flex;
          align-items: center;

          .wrap1_2_3 {
            font-size: 14px;
            color: #1f2225;
          }

          .wrap1_2_2 {
            margin-right: 6px;
            margin-left: 7px;
            width: 8.67px;
            height: 8.67px;
            border-radius: 50%;
            background-color: $theme-primary;
          }

          .wrap1_2_1 {
            font-size: 14px;
            color: #1f2225;
          }
        }

        .wrap1_1 {
          display: flex;
          align-items: center;

          .wrap1_1_2 {
            cursor: pointer;
            margin-left: 12px;

            img {
              width: 20px;
              height: 20px;
            }
          }

          .wrap1_1_1 {
            font-weight: bold;
            vertical-align: middle;
            padding-top: 19px;
            border-bottom: 2px $theme-primary solid;
            height: 100%;
            color: #1f2225;
            font-size: 18px;
          }
        }
      }
    }

    &.item7 {
      padding: 0 35px 17px 35px;
    }

    &.item3,
    &.item4,
    &.item5,
    &.item6 {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-left: 29px;
      padding-right: 29px;

      .wrap4 {
        font-size: 16px;
        color: #9ea4aa;
      }

      .wrap3 {
        font-weight: bold;
        font-size: 48px;
        color: #1f2225;
      }

      .wrap1 {
        font-weight: 500;
        font-size: 18px;
        color: #1f2225;
        margin-top: 15px;
        margin-bottom: 15px;
      }

      .wrap2 {
        opacity: 0.09;
        height: 1px;
        width: 100%;
        background-color: #000;
      }
    }

    &.item2 {
      cursor: pointer;

      .hover-show {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .wrap2 {
          margin-left: 23px;
          font-size: 30px;
          color: #1f2225;
        }

        .wrap1 {
          img {
            width: 41px;
            height: 36px;
          }
        }
      }
    }
    &.row2 {
      height: 184px;
    }
    &.row4 {
      height: 184px;
    }
    &.row3 {
      height: 273px;
    }
    &.row1 {
      height: 93px;
    }
    &.item1 {
      padding: 16px 19px 16px 19px;
      display: flex;
      align-items: center;

      .wrap3 {
        margin-left: 28px;
        display: flex;
        align-self: start;
        overflow-y: auto;
        .wrap3_1 {
          white-space: nowrap;
          margin-right: 10px;
          color: #000;
          padding: 3px 15px 3px 15px;
          background-color: #f7f7f7;
          border-radius: 20px;
          height: 25px;
          line-height: 20px;
          font-size: 14px;
        }
      }

      .wrap2 {
        margin-left: 17px;

        .wrap2_1 {
          font-size: 18px;
          font-weight: bold;
          color: #8b8b8b;
        }

        .wrap2_2 {
          font-size: 18px;
          font-weight: bold;
          color: #000;
        }
      }

      .wrap1 {
        img {
          width: 61px;
          height: 61px;
        }
      }
    }

    &.item-merge-3-col {
      grid-column: 1 / span 3;
    }

    &.item-merge-4-col {
      grid-column: 1 / -1;
    }
  }
}

.item-merge-2-row {
  grid-column: 4;
  grid-row: span 2; /* 在第四列，跨越第三和第四行 */
}
</style>
