<template>
  <layout-card>
    <div id="printContent">
      <!--      TODO 打印分页截断-->
      <el-divider content-position="left">员工清单检查统计（月）</el-divider>
      <div class="mb-10 flex">
        <div>备注：</div>
        <div class="flex ml-10">
          <img
            src="/src/assets/images/print/white/check.png"
            alt=""
            class="print_no_use"
          />
          <img
            src="/src/assets/images/print/black/check.png"
            alt=""
            class="print_use"
          />
          完成检查
        </div>
        <div class="flex ml-10">
          <img
            src="/src/assets/images/print/white/error.png"
            alt=""
            class="print_no_use"
          />
          <img
            src="/src/assets/images/print/black/error.png"
            alt=""
            class="print_use"
          />
          未进行检查
        </div>
        <div class="flex ml-10">
          <img
            src="/src/assets/images/print/white/waring.png"
            alt=""
            class="print_no_use"
          />
          <img
            src="/src/assets/images/print/black/waring.png"
            alt=""
            class="print_use"
          />
          离岗/休班/周期未结束
        </div>
        <div class="flex ml-10">
          <img
            src="/src/assets/images/print/white/line.png"
            alt=""
            class="print_no_use"
          />
          <img
            src="/src/assets/images/print/black/line.png"
            alt=""
            class="print_use"
          />
          未建立
        </div>
      </div>
      <div class="print_no_use">
        <layout-table :data="list" :show-pagination="false">
          <el-table-column label="序号" width="70" fixed="left" type="index" />
          <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> {{ MONTH }}清单检查详细情况</template>
            <el-table-column
              v-for="(item, index) in currentMonthDays"
              :key="index"
              :label="item.toString()"
              width="50"
            >
              <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>
      </div>
      <table class="print_use">
        <thead>
          <tr>
            <th rowspan="2">序号</th>
            <th rowspan="2">部门</th>
            <th rowspan="2">岗位</th>
            <th rowspan="2">人员</th>
            <th rowspan="2">检查周期</th>
            <th rowspan="2">清单名称</th>
            <th :colspan="currentMonthDays">{{ MONTH }}清单检查详细情况</th>
          </tr>
          <tr>
            <th v-for="(item, index) in currentMonthDays" :key="index">
              {{ item }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.DEPARTMENT_NAME }}</td>
            <td>{{ item.POST_NAME }}</td>
            <td>{{ item.USER_NAME }}</td>
            <td>{{ item.PERIOD_NAME }}</td>
            <td>{{ item.NAME }}</td>
            <td v-for="(item1, index1) in currentMonthDays" :key="index1">
              <template
                v-if="dayjs().format('YYYY-MM-DD') > fnFormatDate(item1)"
              >
                <div
                  v-if="
                    (resMap[item.LISTMANAGER_ID][fnFormatDate(item1)] || '')
                      .TYPE === '1'
                  "
                  style="position: relative"
                  class="flex"
                >
                  <img src="/src/assets/images/print/black/check.png" alt="" />
                  <span
                    v-if="
                      (resMap[item.LISTMANAGER_ID][fnFormatDate(item1)] || '')
                        .CREATTIME === fnFormatDate(item1)
                    "
                    style="position: absolute; right: -6px; top: -6px"
                  >
                    {{
                      (resMap[item.LISTMANAGER_ID][fnFormatDate(item1)] || "")
                        .HIDDEN_COUNT
                    }}
                  </span>
                </div>
                <span
                  v-else-if="
                    (resMap[item.LISTMANAGER_ID][fnFormatDate(item1)] || '')
                      .TYPE === '2'
                  "
                  class="flex"
                >
                  <img src="/src/assets/images/print/black/error.png" alt="" />
                </span>
                <span
                  v-else-if="
                    (resMap[item.LISTMANAGER_ID][fnFormatDate(item1)] || '')
                      .TYPE === '3'
                  "
                  class="flex"
                >
                  <img src="/src/assets/images/print/black/line.png" alt="" />
                </span>
                <span v-else class="flex">
                  <img src="/src/assets/images/print/black/waring.png" alt="" />
                </span>
              </template>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="tc mt-10">
      <el-button type="primary" v-print="'#printContent'">打印</el-button>
    </div>
    <div v-html="PRINT_STYLE" />
  </layout-card>
</template>

<script setup>
import useListData from "@/assets/js/useListData.js";
import { getInventoryStatisticsMonthList } from "@/request/statistical_analysis.js";
import dayjs from "dayjs";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { PRINT_STYLE } from "@/assets/js/constant.js";

const route = useRoute();
const { KEYWORDS, DEPTIDS, MONTH } = route.query;
const currentMonthDays = ref(0);
const resMap = ref({});
const { list } = useListData(getInventoryStatisticsMonthList, {
  otherParams: {
    showCount: 9999,
    KEYWORDS,
    DEPTIDS,
    MONTH,
  },
  key: "list",
  callbackFn: (list, resData) => {
    resMap.value = resData.resmap;
    currentMonthDays.value = dayjs(MONTH).daysInMonth();
  },
});
const fnFormatDate = (day) => {
  return MONTH + "-" + day.toString().padStart(2, "0");
};
</script>

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

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