<!--报表导出-->
<template>
  <el-dialog :close-on-click-modal="false" draggable v-model="machineVisible" :title="title" width="500">
    <div>
      <div class="smsConfig">
        <el-form :model="form" inline label-width="auto" class=" ml30 mt10">
          <el-form-item label="时间">
            <el-date-picker v-model="timeValue" size="small" type="daterange" :disabled-date="isFutureDate"
              style="width: 250px; margin-right: 10px" unlink-panels :clearable="false" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>

          <el-form-item label="部门集合">
            <el-select v-model="form.deptList" placeholder="请选择部门集合" style="width: 250px" size="small" multiple
              collapse-tags collapse-tags-tooltip>
              <template #header>
                <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
                  全部
                </el-checkbox>
              </template>
              <el-option v-for="item in deptLists" :key="item.deptsIndex" :label="item.deptsname"
                :value="item.deptsIndex" />
            </el-select>
          </el-form-item>
        </el-form>

        <!-- <el-divider />
        <div style="text-align: center">

        </div> -->
      </div>
    </div>
    <template #footer>
      <el-button :icon="Close" @click="setUp" size="small">取消</el-button>
      <el-button type="primary" :icon="Check" @click="save" size="small">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch, inject, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Check, Close } from "@element-plus/icons-vue";
import { getDept, exportForms } from "@/api/statistics/index";
import type { CheckboxValueType } from 'element-plus'
import { useStore } from "vuex";
const store = useStore();
const machineVisible = ref(false);
const title = ref("报表导出");
const timeValue = ref([]);
const deptLists = ref();
//form表单校验规则
const emit = defineEmits(["flushed"]);
const checkAll = ref(false)
const indeterminate = ref(false)
const form = ref({
  searchBeginTime: "",
  searchEndTime: "",
  deptList: [],
  deptId: "",
});
const open = (text: string, data?: any) => {
  timeValue.value = [];
  form.value = {
    searchBeginTime: "",
    searchEndTime: "",
    deptList: [],
    deptId: "",
  };
  machineVisible.value = true;
  init();
};

const init = () => {
  getDept({}).then((res) => {
    deptLists.value = res.data;
  });
};
// watch(form.value.deptList, (val) => {
//   if (val.length == 0) {
//     checkAll.value = false
//     indeterminate.value = false
//   } else if (val.length == deptLists.value.length) {
//     checkAll.value = true
//     indeterminate.value = false
//   } else {

//     indeterminate.value = true
//   }
// })
watch(
  () => form.value.deptList,  // 使用函数返回值的形式
  (val) => {
    if (val.length == 0) {
      checkAll.value = false
      indeterminate.value = false
    } else if (val.length == deptLists.value.length) {
      checkAll.value = true
      indeterminate.value = false
    } else {
      indeterminate.value = true
    }
  },
  { deep: true }  // 添加深度监听选项
)
const handleCheckAll = (val: CheckboxValueType) => {
  indeterminate.value = false
  if (val) {
    form.value.deptList = deptLists.value.map((_) => _.deptsIndex)
  } else {
    form.value.deptList = []
  }
}
const save = () => {
  if (!timeValue.value[0]) {
    ElMessage.warning("请选择时间！");
    return;
  }
  if (form.value.deptList.length == 0) {
    ElMessage.warning("请选择部门集合！");
    return;
  }

  (form.value.deptId = store.state.deptId),
    (form.value.searchBeginTime = timeValue.value[0]),
    (form.value.searchEndTime = timeValue.value[1]
      ? timeValue.value[1].split(" ")[0] + " 23:59:59"
      : "");
  exportForms(form.value).then((res: any) => {
    let blob = new Blob([res], {
      type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8",
    });

    // createObjectURL(blob); //创建下载的链接
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement("a"); // 创建a标签
    link.href = url;
    link.download = "导出报表.docx"; // 设置下载的文件名
    document.body.appendChild(link);
    link.click(); //执行下载
    document.body.removeChild(link);

    machineVisible.value = false;
  });
};

const isFutureDate = (time: any) => {
  return time && time > Date.now();
};

// 取消
const setUp = () => {
  machineVisible.value = false;
  timeValue.value = [];
  form.value = {
    searchBeginTime: "",
    searchEndTime: "",
    deptList: [],
    deptId: "",
  };
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

.smsConfig {
  color: #fff;
}

.title {
  background-color: #0a73ff40;
  height: 30px;
  line-height: 30px;
  font-weight: 600;
  padding-left: 10px;
  margin-bottom: 10px;
  border-left: 10px solid var(--el-color-primary);
}

:deep(.el-card__body) {
  padding: 10px !important;
}

:deep(.el-select) {
  min-width: 80px !important;
}

.checkbox {
  display: flex;
  justify-content: space-between;
}

:deep(.el-form-item__label, ) {
  color: #fff;
}

:deep(.el-checkbox__label) {
  color: #fff;
}

:deep(.el-form-item__label, ) {
  color: #fff;
}

:deep(.el-checkbox__label) {
  color: var(--el-text-color-regular);
}
</style>
