<!--
 * @Author: your name
 * @Date: 2022-11-01 14:39:19
 * @LastEditTime: 2022-11-01 16:48:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \rsga\src\views\service\shifTscheduling\index\downXlsx.vue
-->
<template>
  <el-dialog
    title="导出预览"
    width="800px"
    :model-value="modelValue"
    @close="closed"
  >
    <el-form class="mosty-from-wrap" :inline="true">
      <el-form-item label="请选择月份">
        <el-date-picker
          v-model="value"
          type="month"
          @change="serchList"
          :clearable="false"
          value-format="YYYY-MM"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <el-table
      :data="tabList"
      :span-method="objectSpanMethod"
      height="60vh"
      id="downid"
      style="width: 100%"
      v-loading="loadingtable"
      element-loading-background="rgba(0,0,0,0.3)"
      element-loading-text="数据加载中。。"
      border
    >
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column
        prop="time"
        label="日期"
        align="center"
        width="100"
      ></el-table-column>
      <el-table-column label="星期" prop="time" align="center" width="100">
        <template #default="{ row }">
          <span>{{ getWeek(row.time) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="zbldXm"
        label="值班长"
        align="center"
        width="100"
      />
      <el-table-column prop="zbmj" label="值班员" align="center">
        <template #default="{ row }">
          <div>
            {{
              [...JSON.parse(row.zbmj), ...JSON.parse(row.zbfj)]
                .map((item) => item.jlxm)
                .join("、")
            }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">关闭</el-button>
        <el-button :disabled="tabList.length===0" type="primary" @click="exportExcel">导出</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, ref, onMounted, reactive } from "vue";
import { exportData } from "@/api/service/shifTscheduling.js";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
const tabRef = ref(null);
const props = defineProps({
  modelValue: {
    type: Boolean
  },
  data: {
    type: Object
  }
});
const arr = ref([]);
const loadingtable = ref(false)
//列表行合并
const objectSpanMethod = ({ row, colum, rowIndex, columnIndex }) => {
  if (columnIndex === 1) {
    return {
      rowspan: arr.value[rowIndex],
      colspan: 1
    };
  }
};
const value = ref();
//生成列表合并集合
function tempMerges() {
  //列表合并集合
  const a = [];
  //日期数组
  const b = [];
  //时间重合数据集
  const c = tabList.value.map((item) => {
    a.push(0);
    if (b.indexOf(item.time) === -1) {
      b.push(item.time);
    }
    return {
      time: item.time,
      num: tabList.value.filter((tab) => tab.time === item.time).length
    };
  });
  b.forEach((v) => {
    const index = c.map((item) => item.time).indexOf(v);
    a[index] = c[index].num;
  });
  return a;
}
//列表数据
const tabList = ref([]);
const emits = defineEmits(["update:modelValue"]);
// 导出配置
const dcText = reactive({
  title: "导出"
});
const closed = () => {
  emits("update:modelValue", false);
};
function exportExcel() {
  let xlsxParam = { raw: true };
  let wb = XLSX.utils.table_to_book(
    document.querySelector("#downid"),
    xlsxParam
  );
  let wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: "array"
  });
  closed();
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      `${dcText.title}.xlsx`
    );
  } catch (e) {
    if (typeof console !== "undefined") console.log(e, wbout);
  }
  return wbout;
}
//获取列表数据
function getList() {
  loadingtable.value = true
  exportData({ time: value.value, pbid: props.data.id }).then((res) => {
    tabList.value = res;
    arr.value = tempMerges();
    loadingtable.value = false
  });
}
function serchList(val) {
  getList();
}
onMounted(() => {
  value.value = getYm();
  getList();
});

//获取某天星期
function getWeek(time) {
  const weekArr = new Array(
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  );
  var day = new Date(time);
  return weekArr[day.getDay()];
}
//获取当前年月
function getYm() {
  const t = new Date();
  const y = t.getFullYear();
  const m = t.getMonth() < 9 ? "0" + (t.getMonth() + 1) : t.getMonth() + 1;
  return y + "-" + m;
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>