<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="jjrmc" label="节日名称">
          <el-input v-model="listQuery.jjrmc" placeholder="请输入节日名称"></el-input>
        </el-form-item>
          <el-form-item prop="jjrq" label="节日日期">
            <el-date-picker
              style="width: 100%"
              v-model="listQuery.jjrq"
              type="date"
              start-placeholder="请选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
        </el-form-item>
        <el-form-item prop="qwdj" label="日期类型">
          <el-select v-model="listQuery.rqlx" placeholder="请选择日期类型">
            <el-option value="0" label="节假日"></el-option>
            <el-option value="1" label="工作日"></el-option>
          </el-select>
        </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 prop="jjrmc" align="center" label="节日名称"/>
        <el-table-column prop="jjrq" align="center" label="节日日期" />
        <el-table-column prop="rqlx" align="center" label="日期类型">
          <template #default="{ row }">
            <span v-if="row.rqlx == 0">节假日</span>
            <span v-if="row.rqlx == 1">工作日</span>
          </template>
        </el-table-column>
        <el-table-column prop="bz" 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 v-if="dialogFormVisible" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button type="primary" size="small" @click="submit">保存</el-button >
          <el-button size="small" @click="formReset">关闭</el-button>
        </div>
      </div>
      <el-form
        ref="elform"
        :model="form"
        :rules="rules"
        :inline="true"
        label-position="top"
      >
        <el-form-item prop="jjrmc" label="节日名称">
          <el-input v-model="form.jjrmc"></el-input>
        </el-form-item>
        <el-form-item prop="jjrq" label="节日日期">
          <el-date-picker
            style="width: 100%"
            v-model="form.jjrq"
            type="date"
            start-placeholder="请选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item prop="rqlx"  label="日期类型">
          <el-select v-model="form.rqlx">
            <el-option value="0" label="节假日"></el-option>
            <el-option value="1" label="工作日"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" style="width: 100%">
          <el-input v-model="form.bz" placeholder="请输入备注" show-word-limit type="textarea" />
        </el-form-item>
      </el-form>
    </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 { 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;
  getVacationData(listQuery.value).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>
