<template>
  <div>
    <div style="padding: 20px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="58px"
      >
        <el-form-item label="月份" prop="month">
          <el-date-picker
            clearable
            @change="changeTime"
            v-model="queryParams.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-form-item>
        <el-form-item>
          <el-button
            v-hasPermi="['system:attendance:gen']"
            style="padding: 0 10px"
            @click="collect"
            plain
            type="primary"
            size="mini"
            ><el-icon> <List /> </el-icon>生成汇总表</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange1"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="185"
        ></el-table-column>
        <el-table-column align="center" prop="fullName" label="处室人员" />
        <el-table-column align="center" prop="month" label="月份" />
        <el-table-column align="center" prop="c" label="操作">
          <template #default="scope">
            <el-button @click="moreClocking(scope.row)" type="primary" text
              >详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div v-if="resUrl !== ''" style="margin-top: 10px">
        汇总表：<span @click="Preview()" style="color: #409eff; cursor: pointer"
          >{{ parseTime(this.month, "{y}" + "年" + "{m}" + "月")
          }}{{ deptName }}考勤汇总表.xlsx</span
        >
        <el-button
          @click="downLoading()"
          type="primary"
          plain
          icon="Download"
          style="margin-left: 10px"
          >下载</el-button
        >
        <!-- <span @click="Preview()"></span> -->
      </div>
      <!-- 详细 -->
      <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="tableData1"
          :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: 1rem">
                <!-- 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: 1rem">
                <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: 1rem">
                <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: 1rem">
                <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: 1rem">
                <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: 1rem">
                <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: 1rem">
                <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>
      <!-- 汇总表 -->
      <el-dialog
        v-model="dialogVisible1"
        title="考勤汇总"
        width="68%"
        :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">处 室 名 称 ：{{ this.deptName }}</div>
          <div style="font-size: 18px; margin-left: 42vw">
            月 份：{{
              parseTime(this.queryParams.month, "{y}" + "年" + "{m}" + "月")
            }}
          </div>
        </div>
        <div style="font-size: 18px; margin-top: 10px">
          处室负责人：{{ this.deptLeader }}
        </div>
        <div style="margin-top: 20px">
          <el-table :data="tableData3" border>
            <el-table-column
              align="center"
              prop="name"
              label="姓名"
            ></el-table-column>
            <el-table-column align="center" prop="quanQin" label="全勤">
            </el-table-column>
            <el-table-column
              align="center"
              prop="chiDao"
              label="迟到(次)"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="zaoTui"
              label="早退(次)"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="kuangGong"
              label="旷工(次)"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="chuChai"
              label="出差(天)"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="shiJia"
              label="事假(天)"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="bingJia"
              label="病假(天)"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="nianXiuJia"
              label="年休假(天)"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="tanQinJia"
              label="探亲假(天)"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="tiaoXiu"
              label="调休(天)"
            ></el-table-column>
            <el-table-column align="center" prop="remark" label="备注">
              <template #default="scope">
                <el-input
                  v-model="scope.row.remark"
                  style="border: none"
                ></el-input>
              </template>
            </el-table-column>
          </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="save()"
              >保存</el-button
            > -->
            <el-button type="primary" @click="saveAndsubmit()">
              保存并提交考勤
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  weeks,
  insertList,
  all,
  oneWeek,
  sxweek,
  deptList,
} from "@/api/clocking/weeklyAttendance";
import { Base64 } from "js-base64";
import { selectByMonth, getDates } from "@/api/clocking/clockingSubmit";
import { getInfo } from "@/api/login";
import {
  selectByMonthAndUser,
  generateSummary,
  summaryMore,
  summaryList,
  selectTable,
} from "@/api/clocking/inquireClocking";
import { dept, attendance } from "@/api/clocking/details";
import { useDict } from "@/utils/dict";
export default {
  name: "YinetoaWjwWebInquireClocking",

  data() {
    return {
      show: false,
      deptLeader: "",
      value1: "",
      deptId: null,
      deptName: "",
      info_kq: useDict("info_kq").info_kq,
      tableData1: [],
      tableData3: [],
      dialogVisible: false,
      dialogVisible1: false,
      queryParams: {},
      showSearch: true,
      tableData: [],
      tableData2: [],
      Ids: [],
      resUrl: null,
      downUrl: null,
    };
  },
  created() {
    this.all();
    // this.getLastMonth();
    this.nowMonth();
    this.getInfo();
    this.selectTable();
    // this.selectTable();
  },
  mounted() {},

  methods: {
    downLoading() {
      var url =
        window.location.origin +
        import.meta.env.VITE_APP_BASE_API +
        "/profile" +
        this.resUrl;
      this.downUrl = url;
      console.log(this.resUrl);
      console.log(this.downUrl);
      window.open(this.downUrl);
    },
    //本月月份
    nowMonth() {
      var date = new Date();
      let year = date.getFullYear();
      let currentMonth = date.getMonth() + 1;
      currentMonth < 10 ? (currentMonth = "0" + currentMonth) : currentMonth;
      this.queryParams.month = year + "-" + currentMonth;
      this.month = year + "-" + currentMonth;
      console.log(this.queryParams.month);
    },
    async selectTable() {
      let res = await selectTable(this.queryParams.month);
      this.resUrl = res;
    },
    saveAndsubmit() {
      // if (this.deptLeader == null) {
      //   this.$message.warning("处室主要负责人签字不能为空");
      // } else {

      this.tableData3.forEach((item) => {
        item.deptName = this.deptName;
        item.deptLeader = this.deptLeader;
        item.deptId = this.deptId;
        item.status = "1";
      });
      summaryMore(this.tableData3).then((response) => {
        if (response.code == 200) {
          this.$message.success("提交成功");
          this.dialogVisible1 = false;
          this.$refs.multipleTable.clearSelection();
        }
      });
      // }
      setTimeout(() => {
        this.handleQuery();
      }, 500);
    },
    save() {
      // if (this.deptLeader == null) {
      //   this.$message.warning("处室主要负责人签字不能为空");
      // } else {
      this.tableData3.forEach((item) => {
        item.deptName = this.deptName;
        item.deptLeader = this.deptLeader;
        item.deptId = this.deptId;
        item.status = "0";
      });
      summaryMore(this.tableData3).then((response) => {
        if (response.code == 200) {
          this.$message.success("保存成功");
          this.dialogVisible1 = false;
          this.$refs.multipleTable.clearSelection();
        }
      });
      // }
      setTimeout(() => {
        this.handleQuery();
      }, 500);
      this.$nextTick(() => {});
    },

    async getInfo() {
      let { user } = await getInfo();
      this.deptName = user.dept.deptName;
      this.deptId = user.deptId;
      this.deptLeader = user.nickName;
      console.log("deptLeader", this.deptLeader);
    },
    //搜索
    handleQuery() {
      // this.all();
      this.selectTable();
      this.month = this.queryParams.month;
      this.tableData.forEach((item) => {
        item.month = this.month;
      });
    },
    // 多选框选中数据
    handleSelectionChange1(selection) {
      this.userIds = selection.map((item) => item.userId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //上个月月份
    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.queryParams.month = lastYearMonth;
      this.selectTable();
      this.month = this.queryParams.month;
    },
    async all() {
      let { rows } = await all();
      this.tableData2 = rows;
      for (let i = 0; i < this.tableData2.length; i++) {
        this.tableData2[i].month = this.queryParams.month;
      }
      this.tableData = this.tableData2;
    },
    Preview() {
      var url =
        window.location.origin +
        import.meta.env.VITE_APP_BASE_API +
        "/profile" +
        this.resUrl;
      var b64Encoded = Base64.encode(url);

      window.open(
        import.meta.env.VITE_APP_KKFILE2 + encodeURIComponent(b64Encoded)
      );
    },
    collect() {
      if (this.userIds == undefined) {
        this.$modal.msgError("请勾选需要生成的处室人员信息");
      } else {
        this.dialogVisible1 = true;
        generateSummary({
          month: this.queryParams.month,
          userIds: this.userIds,
        }).then((res) => {
          this.tableData3 = res.rows;
        });
      }
    },
    async moreClocking(row) {
      this.fullName = row.fullName;
      this.month = row.month;
      let { data } = await selectByMonthAndUser({
        month: row.month,
        userId: row.userId,
      });
      console.log("data", data);
      this.tableData1 = data;
      // this.tableData1.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;
    },
  },
};
</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;
}

::v-deep .el-input.is-disabled .el-input__wrapper {
  background-color: rgba(255, 255, 255, 0);
  box-shadow: none;
}

::v-deep .select-trigger .el-tooltip__trigger .el-tooltip__trigger :hover {
  background-color: #f5f7fa;
  box-shadow: none;
  border: none;
}

::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: transparent;
  -webkit-appearance: none;
}

::v-deep .el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  border-style: none !important;
  -webkit-appearance: none;
}

::v-deep el-select {
  border: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none; // 4种兼容
  --el-select-disabled-border: transparent;
}

.el-select {
  --el-select-border-color-hover: var(--el-border-color-hover);
  --el-select-disabled-border: transparent;
  --el-select-font-size: var(--el-font-size-base);
  --el-select-close-hover-color: var(--el-text-color-secondary);
  --el-select-input-color: var(--el-text-color-placeholder);
  --el-select-multiple-input-color: var(--el-text-color-regular);
  --el-select-input-focus-border-color: var(--el-color-primary);
  --el-select-input-font-size: 14px;
}

::v-deep .el-select .el-icon svg {
  height: 0;
  width: 0;
}

::v-deep .el-input .is-disabled {
  cursor: default;
}

::v-deep .el-select {
  font-size: 16px;
  background-color: transparent;
  display: inline-block;
  border: none;
  box-shadow: none;
  /* position: relative; */
  /* vertical-align: middle; */
  /* line-height: 32px; */
}
</style>
