<template>
  <div>
    <el-card>
      <el-form
        :model="searchForm"
        label-width="70px"
        @submit.prevent="fnResetPaginationTransfer"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="KEYWORDS">
              <el-input
                v-model="searchForm.KEYWORDS"
                placeholder="请输入关键字"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="部门" prop="DEPTIDS">
              <layout-department
                v-model="searchForm.DEPTIDS"
                multiple
                show-checkbox
                collapse-tags
                root-disabled="Y"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="时间" prop="MONTH">
              <el-date-picker
                v-model="searchForm.MONTH"
                format="YYYY-MM"
                value-format="YYYY-MM"
                type="month"
                placeholder="选择查询日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-button type="primary" native-type="submit">搜索</el-button>
              <el-button native-type="reset" @click="fnResetPaginationTransfer">
                重置
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label-width="10px" class="end">
              <el-button
                @click="
                  router.push({
                    path: '/statistical_analysis/inventory_statistics_month/print',
                    query: {
                      ...searchForm,
                      DEPTIDS: searchForm.DEPTIDS?.join(','),
                    },
                  })
                "
              >
                打印
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <layout-card>
      <div class="mb-10 flex">
        <div>备注：红色日期代表周六日</div>
        <div class="flex ml-10">
          <img src="/src/assets/images/print/white/check.png" alt="" />
          完成检查
        </div>
        <div class="flex ml-10">
          <img src="/src/assets/images/print/white/error.png" alt="" />
          未进行检查
        </div>
        <div class="flex ml-10">
          <img src="/src/assets/images/print/white/waring.png" alt="" />
          离岗/休班/周期未结束
        </div>
        <div class="flex ml-10">
          <img src="/src/assets/images/print/white/line.png" alt="" />
          未建立
        </div>
      </div>
      <layout-table
        :data="list"
        v-model:pagination="pagination"
        @get-data="fnGetDataTransfer"
      >
        <el-table-column label="序号" width="70" fixed="left">
          <template v-slot="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="DEPARTMENT_NAME"
          label="部门"
          width="155"
          fixed="left"
        />
        <el-table-column
          prop="POST_NAME"
          label="岗位"
          width="100"
          fixed="left"
        />
        <el-table-column
          prop="USER_NAME"
          label="人员"
          width="100"
          fixed="left"
        />
        <el-table-column
          prop="PERIOD_NAME"
          label="检查周期"
          width="80"
          fixed="left"
        />
        <el-table-column
          prop="NAME"
          label="清单名称"
          width="155"
          fixed="left"
        />
        <el-table-column align="center">
          <template v-slot:header>
            {{ currentMonth }}清单检查详细情况
          </template>
          <el-table-column
            v-for="(item, index) in currentMonthDays"
            :key="index"
            :label="item.toString()"
            width="50"
          >
            <template #header="{ column }">
              <span :style="{ color: fnIsItAWeekend(column) ? 'red' : '' }">
                {{ item }}
              </span>
              <br />
              <span :style="{ color: fnIsItAWeekend(column) ? 'red' : '' }">
                {{ fnDayOfWeek(column) }}
              </span>
            </template>
            <template #default="{ row }">
              <template
                v-if="dayjs().format('YYYY-MM-DD') > fnFormatDate(item)"
              >
                <div
                  v-if="
                    (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                      .TYPE === '1'
                  "
                  style="position: relative"
                  class="flex"
                >
                  <img src="/src/assets/images/print/white/check.png" alt="" />
                  <span
                    v-if="
                      (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                        .CREATTIME === fnFormatDate(item)
                    "
                    style="position: absolute; right: -6px; top: -6px"
                  >
                    {{
                      (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || "")
                        .HIDDEN_COUNT === "0"
                        ? ""
                        : (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || "")
                            .HIDDEN_COUNT
                    }}
                  </span>
                </div>
                <span
                  v-else-if="
                    (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                      .TYPE === '2'
                  "
                  class="flex"
                >
                  <img src="/src/assets/images/print/white/error.png" alt="" />
                </span>
                <span
                  v-else-if="
                    (resMap[row.LISTMANAGER_ID][fnFormatDate(item)] || '')
                      .TYPE === '3'
                  "
                  class="flex"
                >
                  <img src="/src/assets/images/print/white/line.png" alt="" />
                </span>
                <span v-else class="flex">
                  <img src="/src/assets/images/print/white/waring.png" alt="" />
                </span>
              </template>
            </template>
          </el-table-column>
        </el-table-column>
      </layout-table>
    </layout-card>
  </div>
</template>

<script setup>
import LayoutDepartment from "@/components/department/index.vue";
import { serialNumber } from "@/assets/js/utils.js";
import useListData from "@/assets/js/useListData.js";
import { getInventoryStatisticsMonthList } from "@/request/statistical_analysis.js";
import dayjs from "dayjs";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const currentMonth = ref(dayjs().format("YYYY-MM"));
const currentMonthDays = ref(0);
const resMap = ref({});
const { list, searchForm, pagination, fnResetPagination, fnGetData } =
  useListData(getInventoryStatisticsMonthList, {
    defaultSearchForm: {
      MONTH: currentMonth.value,
    },
    key: "list",
    callbackFn: (list, resData) => {
      currentMonth.value = searchForm.value.MONTH;
      resMap.value = resData.resmap;
      currentMonthDays.value = dayjs(currentMonth.value).daysInMonth();
    },
  });
const fnGetDataTransfer = () => {
  fnGetData({
    DEPTIDS: searchForm.value.DEPTIDS?.join(","),
  });
};
const fnResetPaginationTransfer = () => {
  fnResetPagination({
    DEPTIDS: searchForm.value.DEPTIDS?.join(","),
  });
};
const fnIsItAWeekend = (column) => {
  const day = dayjs(`${currentMonth.value}-${column.label}`).day();
  return day === 0 || day === 6;
};
const fnDayOfWeek = (column) => {
  const day = dayjs(`${currentMonth.value}-${column.label}`).day();
  const dayOfWeek = ["日", "一", "二", "三", "四", "五", "六"];
  return dayOfWeek[day];
};
const fnFormatDate = (day) => {
  return currentMonth.value + "-" + day.toString().padStart(2, "0");
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
}

img {
  width: 16px;
  height: 16px;
}
</style>
