<template>
  <div>
    <div style="padding: 20px">
      <el-form
        :model="dept"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="58px"
      >
        <el-form-item label="月份" prop="month">
          <el-date-picker
            clearable
            @change="changeTime"
            v-model="dept.month"
            type="month"
            value-format="YYYY-MM"
            placeholder="请选择月份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleQuery"
            ><el-icon><Search /></el-icon>查询</el-button
          >
          <el-button
            type="warning"
            plain
            icon="UploadFilled"
            @click="exportAllDept"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <div style="padding: 0px 15px">
        <!-- <div style="font-size: 18px">
          {{ parseTime(this.month, "{y}" + "年" + "{m}") }}月份考勤汇总：
        </div> -->
        <el-table
          :data="tableData"
          border
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column
            width="250"
            align="center"
            prop="date"
            type="index"
            label="序号"
          />
          <el-table-column align="center" prop="deptName" label="科室" />
          <el-table-column align="center" prop="month" label="月份" />
          <el-table-column align="center" prop="" label="状态">
            <template #default="scope">
              <div style="color: red" v-if="scope.row.attendStatus == 0">
                未提交
              </div>
              <div style="color: #0dd068" v-else>已提交</div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="createTime" label="提交时间">
            <template #default="scope">
              {{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}
            </template>
          </el-table-column> -->
          <el-table-column align="center" prop="address" label="汇总表">
            <template #default="scope">
              <el-button
                v-if="scope.row.attendStatus == 1"
                @click="viewForm(scope.row)"
                type="primary"
                text
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 汇总表 -->
    <el-dialog
      v-model="dialogVisible1"
      title="考勤汇总"
      width="85%"
      style="height: 800px"
      :before-close="handleClose"
    >
      <div style="text-align: center; font-size: 24px; font-weight: 700">
        处室每月考勤汇总表
      </div>
      <div style="display: flex; margin-top: 20px">
        <div style="font-size: 18px">处 室 名 称 ：{{ deptName }}</div>
        <div style="font-size: 18px; margin-left: 42vw">
          月 份：
          {{ parseTime(this.month, "{y}" + "年" + "{m}" + "月") }}
        </div>
      </div>
      <div style="font-size: 18px; margin-top: 10px">
        处室主要负责人：{{ deptLeader }}
      </div>
      <div style="margin-top: 20px">
        <el-table :data="tableData1" border>
          <el-table-column
            style="height: 500px; overflow: auto"
            align="center"
            prop="name"
            label="姓名"
          >
            <template #default="scope">
              <a style="color: #007acc" @click="detail(scope.row)">
                {{ scope.row.name }}
              </a>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="quanQin" label="全勤" />
          <el-table-column align="center" prop="chiDao" label="迟到" />
          <el-table-column align="center" prop="zaoTui" label="早退" />
          <el-table-column align="center" prop="kuangGong" label="旷工" />
          <el-table-column align="center" prop="chuChai" label="出差" />
          <el-table-column align="center" prop="shiJia" label="事假" />
          <el-table-column align="center" prop="bingJia" label="病假" />
          <el-table-column align="center" prop="nianXiuJia" label="年休假" />
          <el-table-column align="center" prop="tanQinJia" label="探亲假" />
          <el-table-column align="center" prop="tiaoXiu" label="调休" />
          <el-table-column align="center" prop="remark" label="备注" />
        </el-table>
      </div>
      <div style="font-size: 18px; margin-top: 15px">
        注：1.全勤：填√；2.迟到、早退、旷工按次数填写；3.出差、事、病、年休、探亲、调休按天数填写。
      </div>
      <template #footer>
        <div style="text-align: center" class="dialog-footer">
          <el-button style="padding: 0 30px" type="primary" @click="Preview"
            >预览</el-button
          >
          <el-button
            style="padding: 0 30px"
            type="primary"
            @click="downLoading"
          >
            下载
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 详细 -->
    <el-dialog
      v-model="dialogVisible"
      title="考勤详细"
      width="80%"
      :before-close="handleClose"
    >
      <span style="font-size: 15px">处室人员：{{ fullName }}</span>
      <span style="margin-left: 50px; font-size: 15px">月份：{{ month }}</span>
      <el-table
        :data="tableData2"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column align="center" prop="id" width="100" label="周数">
          <template #default="scope">
            <div style="font-size: 18px">{{ scope.row.weekNumber }}周</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="id" label="周一">
          <template #default="scope">
            <div style="font-size: 18px; float: left; top: 0px">
              {{ parseTime(scope.row.Monday, "{m}" + "-" + "{d}") }}
            </div>
            <div style="margin-left: 3.5vw">
              <!-- style="z-index: 999; position: absolute; top: 5px; right: 10px" -->
              <div style="display: flex">
                上午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.mondayMorning"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    :style="{color:dict.color}">
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.mondayMorning"
                />
                <div></div>
              </div>
              <div style="display: flex">
                下午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.mondayAfternoon"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.mondayAfternoon"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="周二">
          <template #default="scope">
            <div style="font-size: 18px; float: left; top: 0px">
              {{ parseTime(scope.row.Tuesday, "{m}" + "-" + "{d}") }}
            </div>
            <div style="margin-left: 3.5vw">
              <div style="display: flex">
                上午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.tuesdayMorning"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.tuesdayMorning"
                />
                <!-- {{ scope.row[index] }} -->
              </div>
              <div style="display: flex">
                下午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.tuesdayAfternoon"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.tuesdayAfternoon"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="amount1" label="周三">
          <template #default="scope">
            <div style="font-size: 18px; float: left; top: 0px">
              {{ parseTime(scope.row.Wednesday, "{m}" + "-" + "{d}") }}
            </div>
            <div style="margin-left: 3.5vw">
              <div style="display: flex">
                上午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.wednesdayMorning"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.wednesdayMorning"
                />
                <!-- {{ scope.row[index] }} -->
              </div>
              <div style="display: flex">
                下午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.wednesdayAfternoon"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.wednesdayAfternoon"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="amount2" label="周四">
          <template #default="scope">
            <div style="font-size: 18px; float: left; top: 0px">
              {{ parseTime(scope.row.Thursday, "{m}" + "-" + "{d}") }}
            </div>
            <div style="margin-left: 3.5vw">
              <div style="display: flex">
                上午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.thursdayMorning"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.thursdayMorning"
                />
                <!-- {{ scope.row[index] }} -->
              </div>
              <div style="display: flex">
                下午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.thursdayAfternoon"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.thursdayAfternoon"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="amount3" label="周五">
          <template #default="scope">
            <div style="font-size: 18px; float: left; top: 0px">
              {{ parseTime(scope.row.Friday, "{m}" + "-" + "{d}") }}
            </div>
            <div style="margin-left: 3.5vw">
              <div style="display: flex">
                上午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.fridayMorning"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.fridayMorning"
                />
              </div>
              <!-- {{ scope.row[index] }} -->
              <div style="display: flex">
                下午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.fridayAfternoon"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.fridayAfternoon"
                />
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="周六">
          <template #default="scope">
            <div style="font-size: 18px; float: left; top: 0px">
              {{ parseTime(scope.row.Saturday, "{m}" + "-" + "{d}") }}
            </div>
            <div style="margin-left: 3.4vw">
              <div style="display: flex">
                上午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.saturdayMorning"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.saturdayMorning"
                />
              </div>
              <div style="display: flex">
                下午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.saturdayAfternoon"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.saturdayAfternoon"
                />
              </div>
            </div> </template
        ></el-table-column>
        <el-table-column align="center" label="周日">
          <template #default="scope">
            <div style="font-size: 18px; float: left; top: 0px">
              {{ parseTime(scope.row.Sunday, "{m}" + "-" + "{d}") }}
            </div>
            <div style="margin-left: 3.5vw">
              <div style="display: flex">
                上午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.sundayMorning"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.sundayMorning"
                />
              </div>
              <div style="display: flex">
                下午：
                <!-- <el-select
                  disabled
                  v-model="scope.row.sundayAfternoon"
                  clearable
                  style="width: 4.4vw"
                >
                  <el-option
                    v-for="dict in info_kq"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <dict-tag
                  style="display: inline-block"
                  :options="info_kq"
                  :value="scope.row.sundayAfternoon"
                />
              </div>
            </div> </template
        ></el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false"></el-button> -->
          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo } from "@/api/login";
import {
  sureList,
  sure,
  deptList,
  exportAllDept,
} from "@/api/clocking/AttendanceOffice";
import { useDict } from "@/utils/dict";
import { Base64 } from "js-base64";
import { selectByMonth, getDates } from "@/api/clocking/clockingSubmit";
import {
  selectByMonthAndUser,
  generateSummary,
  summaryMore,
  summaryList,
  selectTable,
} from "@/api/clocking/inquireClocking";
export default {
  name: "YinetoaWjwWebAttendanceOffice",

  data() {
    return {
      info_kq: useDict("info_kq").info_kq,
      deptLeader: null,
      showSearch: true,
      dept: {
        status: "0",
        delFlag: "0",
        month: "",
      },
      deptName: "",
      queryParams1: {},
      queryParams: {},
      dialogVisible: false,
      dialogVisible1: false,
      tableData: [],
      tableData1: [],
      tableData2: [],
      fullName: "",
      month: "",
      resUrl: null,
      downUrl: null,
    };
  },
  created() {
    this.getLastMonth();
    // this.nowMonth();
    this.getInfo();
    this.sureList();
    this.deptList();
  },
  mounted() {},

  methods: {
    async detail(row) {
      this.fullName = row.name;
      this.month = row.month;
      let { data } = await selectByMonthAndUser({
        month: row.month,
        userId: row.userId,
      });
      this.tableData2 = data;
      // this.tableData2.map((item) => {
      //   getDates(item.weekNumber).then((res) => {
      //     (item.Monday = res[0]),
      //       (item.Tuesday = res[1]),
      //       (item.Wednesday = res[2]),
      //       (item.Thursday = res[3]),
      //       (item.Friday = res[4]),
      //       (item.Saturday = res[5]),
      //       (item.Sunday = res[6]);
      //   });
      // });
      this.dialogVisible = true;
    },

    async exportAllDept() {
      await exportAllDept({ month: this.dept.month });
      this.download(
        "/system/sure/exportAllDept",
        {
          month: this.dept.month,
        },
        `room_${new Date().getTime()}.xlsx`
      );
    },
    async deptList() {
      let res = await deptList(this.dept);
      this.tableData = res.slice(1, res.length);
      this.tableData.map((item) => {
        item.month = this.dept.month;
      });
    },
    downLoading() {
      var url =
        window.location.origin +
        import.meta.env.VITE_APP_BASE_API +
        "/profile" +
        this.resUrl;
      this.downUrl = url;
      window.open(this.downUrl);
    },
    Preview() {
      var url =
        window.location.origin +
        import.meta.env.VITE_APP_BASE_API +
        "/profile" +
        this.resUrl;
      this.downUrl = url;
      var b64Encoded = Base64.encode(url);

      window.open(
        import.meta.env.VITE_APP_KKFILE2 + encodeURIComponent(b64Encoded)
      );
    },
    handleQuery() {
      this.deptList();
    },
    async viewForm(row) {
      this.dialogVisible1 = true;
      let { data } = await sure(row.sureId);
      this.tableData1 = data.attendanceSummaries;
      this.deptName = data.deptName;
      this.month = data.month;
      this.deptLeader = data.attendanceSummaries[0].deptLeader;
      this.resUrl = data.filePath;
    },
    async sureList() {
      let { rows } = await sureList({
        deptId: this.queryParams1.deptId,
        month: this.dept.month,
      });
      // this.tableData = rows;
    },
    async getInfo() {
      let { user } = await getInfo();
      this.queryParams1.deptId = user.deptId;
    },

    //本月月份
    nowMonth() {
      var date = new Date();
      let year = date.getFullYear();
      let currentMonth = date.getMonth() + 1;
      if (currentMonth < 10) {
        currentMonth = "0" + currentMonth;
      }
      this.dept.month = year + "-" + currentMonth;
    },

    //上个月月份
    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 = lastYearMonth;
      this.dept.month = lastYearMonth;
      this.queryParams.month = lastYearMonth;
      this.month = lastYearMonth;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tag.el-tag--success {
  font-size: 14px;
  --el-tag-bg-color: transparent;
  --el-tag-border-color: transparent;
  padding: 0;
  /* --el-tag-hover-color: var(--el-color-success); */
}
::v-deep .el-tag.el-tag--danger {
  font-size: 14px;
  --el-tag-bg-color: transparent;
  --el-tag-border-color: transparent;
  padding: 0;
  /* --el-tag-hover-color: var(--el-color-success); */
}
::v-deep .el-tag.el-tag--info {
  font-size: 14px;
  --el-tag-bg-color: transparent;
  --el-tag-border-color: transparent;
  padding: 0;
}
</style>
