<template>
  <div>
    <div class="titleBox">
      <div class="title">打卡记录</div>
      <div class="btnBox">
        <!-- <el-button type="primary" @click="add_edit('', 'add')">
          <el-icon style="vertical-align: middle">
            <CirclePlus />
          </el-icon>
          <span style="vertical-align: middle">新增</span>
        </el-button>
        <el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
          <el-icon style="vertical-align: middle">
            <Delete />
          </el-icon>
          <span style="vertical-align: middle">批量删除</span>
        </el-button> -->
      </div>
    </div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="listQuery" :inline="true">
        <el-form-item prop="dkrxm" label="姓名">
          <el-input v-model="listQuery.dkrxm" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getListData"> 查询 </el-button>
          <el-button @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabBox">
      <el-table :data="tableData" border ref="dataTreeList" row-key="id" @selection-change="handleSelectionChange"
        :tree-props="{ children: 'itemList', hasChildren: true }" style="width: 100%" :key="keyCount"
        :height="tableHeight" v-loading="loadingTable" element-loading-background="rgba(0,0,0,0.3)"
        element-loading-text="数据加载中。。">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" align="center" width="60px" label="序号" />
        <el-table-column label="图片" prop="tp" align="center" width="180">
          <template #default="{ row }">
            <div v-if="row.tpid">
              <el-image :append-to-body="true"
                :preview-src-list="[`/mosty-api/mosty-base/minio/image/download/${row.tpid}`]" style="width:75px;"
                :src="`/mosty-api/mosty-base/minio/image/download/${row.tpid}`" fit="cover" lazy />
            </div>
            <el-image style="width:75px;" :append-to-body="true" v-else :src="Person" :preview-src-list="[Person]"
              fit="cover" lazy />
          </template>
        </el-table-column>
        <el-table-column prop="dkrxm" align="center" label="姓名" />
        <el-table-column prop="ssbm" align="center" label="部门" />
        <el-table-column prop="xtCjsj" align="center" label="打卡时间" />
        <el-table-column prop="bxdmc" show-overflow-tooltip align="center" label="必巡点" />
        <!-- <el-table-column label="操作" align="center" fixed="right">
          <template #default="{ row }">
            <el-button @click="add_edit(row, 'edit')" size="small">修改</el-button>
            <el-button @click="delDictItem(row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import {
  ref,
  reactive,
  onMounted,
  onUnmounted,
  getCurrentInstance,
} from "vue";
import {
  getVacationData,
  getVacationAdd,
  getVacationUpdate,
  getVacationDelete,
  getVacationDeleteMore
} from "@/api/service/grade.js";
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
import { getItem } from "@/utils/storage";
const tableData = ref([]); //表格数据
//搜索数据
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
const dialogFormVisible = ref(false); //弹窗
const ids = ref([]); //批量删除的ID
const title = ref("");
const { proxy } = getCurrentInstance();
const searchBox = ref(null); // 搜索盒子
const tableHeight = ref(); // 表格高度
const tableHeight1 = ref(); // 表格高度
const elform = ref(null);
const listQueryzq = ref({
  pageCurrent: 1,
  pageSize: 20
});
//表单数据
const form = ref({
  jjrmc: '',
  jjrq: '',
  rqlx: '',
  bx: ''
});
//表单验证
const rules = reactive({
  jjrmc: [{ required: true, message: "请输入节日名称", trigger: "blur" }],
  jjrq: [{ required: true, message: "请选择节日日期", trigger: "change" }],
  rqlx: [{ required: true, message: "请选择日期类型", trigger: "change" }],
});
const total = ref(0);
const keyCount = ref(0); //tabel组件刷新值
const loadingTable = ref(false);


//获取列表数据
function getListData() {
  loadingTable.value = true;
  qcckPost(listQuery.value, "/mosty-qwzx/tbQwXfbb/selectXfbbDkPage").then((res) => {
    tableData.value = res.records;
    total.value = res.total;
    loadingTable.value = false;
  }).catch(() => {
    loadingTable.value = false;
  });
}

//重置
function reset() {
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 20
  };
  getListData();
}

//提交
function submit() {
  elform.value.validate((valid) => {
    if (valid) {
      if (!form.value.id) {
        getVacationAdd(form.value).then(() => {
          proxy.$message({ type: "success", message: "新增成功" });
          formReset()
          getListData();
        });
      } else {
        getVacationUpdate(form.value).then(() => {
          proxy.$message({ type: "success", message: "修改成功" });
          formReset()
          getListData();
        });
      }
    }
  });
}


// 新增-编辑
function add_edit(row, type) {
  if (row.id) {
    title.value = "编辑节假日期";
    form.value = JSON.parse(JSON.stringify(row))
  } else {
    title.value = "新增节假日期";
  }
  dialogFormVisible.value = true;
}
//重置新增表单
function formReset() {
  form.value = {
    rqlx: '',
    jjrq: '',
    jjrmc: "",
    bz: ''
  };
  dialogFormVisible.value = false
}

//批量数据
const handleSelectionChange = (val) => {
  ids.value = [];
  if (val) {
    val.forEach((item) => {
      ids.value.push(item.id);
    });
  }
};

//批量删除数据
const batchDelete = () => {
  proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
    getVacationDeleteMore(ids.value).then((res) => {
      proxy.$message({ message: "删除成功", type: "success" });
      getListData();
    });
  }).catch(() => {
    proxy.$message.info("已取消");
  });
};

//删除
function delDictItem(row) {
  proxy.$confirm("确定删除当前节假日？", "警告", { type: "warning" }).then(() => {
    getVacationDelete(row.id).then(() => {
      proxy.$message({ type: "success", message: "删除成功" });
      getListData();
    });
  }).catch(() => {
    proxy.$message.info("已取消");
  });
}

// size 改变触发
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

// 页码改变触发
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};

// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
  tableHeight1.value = window.innerHeight - 57 - 20 - 130;
};

onMounted(() => {
  getListData();
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
  tabHeightFn();
  window.onresize = function () {
    tabHeightFn();
  };
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
</script>

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

.updata {
  &::v-deep .el-form-item__content {
    display: flex;
    flex-wrap: nowrap !important;
  }
}

.twoh {
  &::v-deep .el-textarea__inner {
    height: 64px;
  }
}
</style>
