<template>
  <MOSTY.PageTree :pageTitle="'食堂人员信息列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #titleright>
      <div class="toggle" :class="{ active: isOpen }" @click="isOpen = !isOpen">
        <span>统计</span>
        <el-icon>
          <DArrowLeft />
        </el-icon>
      </div>
    </template>
    <template #serach>
      <div class="box mt10 ml10" v-if="isOpen" ref="getHeight">
        <section class="flex">
          <Sjtj :info="practitioners" :isShowTip="false" :isShowBottom="false" :width="265" mb="6px" />
        </section>
      </div>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <el-divider />
      <div class="headBox" style="display: flex; justify-content: flex-end; align-items: center">
        <div class="btnBox">
          <el-button @click="addInfo('add', null)" v-if='isAuth'><el-icon size="small">
              <Plus />
            </el-icon>新增</el-button>
          <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出表格</span>
          </el-button>
        </div>
      </div>
      <section :style="{ 'height': totalHeight }">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
          :isSort="true" @SortChange="SortChange" style="width: 100%;">
          <template #sex="{ row }">
            <dict-tag v-if="row.sex" :options="D_BZ_XB" :value="row.sex" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #sfgq="{ row }">
            <dict-tag v-if="row.sfgq" :options="D_BZ_SF" :value="row.sfgq" :tag="false" />
            <span v-else>无</span>
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" v-if='isAuth' @click="addInfo('exit', row.id)" size="small"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm v-if='isAuth' confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="delInfo(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="addInfo('see', row.id)" size="small"><el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <!-- 新增弹出框 -->
  <div v-if="dialogVisible" class="dialog-box">
    <addrytz :formData="data" @changeAddVi="changeAddVi">
    </addrytz>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { getItem } from "@/utils/storage";
import { exportXlsx } from "@/excel/Export2Excel.js";
import addrytz from "./addrytz.vue";
import { getAuth } from "@/utils/tools.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
const { proxy } = getCurrentInstance();
const { D_BZ_XB, D_BZ_SF, D_BZ_AQRYWHCD } = proxy.$dict("D_BZ_XB", 'D_BZ_SF', "D_BZ_AQRYWHCD");
const searchArr = reactive([
  {
    showType: "select",
    prop: "sfgq",
    width: '250px',
    options: D_BZ_SF,
    placeholder: '请选择是否到期'
  },
  {
    showType: "input",
    prop: "peoplename",
    width: '250px',
    placeholder: '请输入人员名称进行查询'
  }
]);
const practitioners = ref([
  { title: '到期数', num: 0, dm: '01', icon: 'ccss/icon_01.png' },
  { title: '即将到期数', num: 0, dm: '02', icon: 'ccss/icon_02.png' }
]);
const tableColumn = ref([
  {
    title: "人员姓名",
    prop: "peoplename",
    sortable: true
  },
  {
    title: "身份证号",
    prop: "idcard",
    sortable: true
  },
  {
    title: "性别",
    prop: "sex",
    slot: true,
    sortable: true
  },
  {
    title: "出生日期",
    prop: "birthdate",
    sortable: true
  },
  {
    title: "健康证号",
    prop: "jkzh",
    sortable: true
  },
  {
    title: "发证日期",
    prop: "issuingtime",
    sortable: true
  },
  {
    title: "有效期",
    prop: "effectivetime",
    sortable: true
  },
  {
    title: "是否到期",
    prop: "sfgq",
    slot: true,
    sortable: true
  },
  {
    title: "工作地点",
    prop: "workplace",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const dialogVisible = ref(false);
const isOpen = ref(false);
const loadingShow = ref(false);
const isAuth = ref(false)
const getHeight = ref(null)
const totalHeight = ref(null)
//查询条件
const data = reactive({
  deptname: "",
  title: "",
  savebtn: true,
  seeimg: true,
  img: []
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
  sfgq: '',
  pageCurrent: 1,
  pageSize: 20,
});
const tableloading = ref(false);
onMounted(() => {
  isAuthorize()
  nextTick(() => {
    totalHeight.value = `calc(100vh - 389px)`
  })
});
// 是否可以操作
const isAuthorize = async () => {
  isAuth.value = await getAuth()
}
//排序
function SortChange(prop, order) {
  if (prop == 'peoplename') {
    listQuery.sortField = 'id'
  } else {
    listQuery.sortField = prop
  }
  listQuery.sortOrder = order
  getTableData()
}
const onSearch = (obj) => {
  listQuery.sfgq = obj.sfgq;
  listQuery.peoplename = obj.peoplename;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getListData();
};
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getcount(val.id)
  getListData();
};
watch(
  () => listQuery.sfgq,
  (val) => {
    if (val) {
      getListData();
    }
  }
);
watch(() => isOpen.value, (val) => {
  nextTick(() => {
    if (val) {
      totalHeight.value = `calc(100vh - ${400 + getHeight.value.offsetHeight}px)`
    } else {
      totalHeight.value = `calc(100vh - 389px)`
    }

  })
}, {
  deep: true,
  immediate: true
})
//导出表格
const export2Excel = () => {
  loadingShow.value = true;
  let title = {
    peoplename: "人员姓名",
    idcard: "身份证号",
    sex: "性别",
    culture: "学历",
    birthdate: "出生日期",
    workplace: "工作地点",
    issuingtime: "发证日期",
    effectivetime: "有效期",
  };
  const param = {
    pageCurrent: 1,
    pageSize: 10000,
    orgcode: listQuery.orgcode
  }
  postApi(param, "/mosty-jcgl/peopleParameter/queryPeopleParameter").then((res) => {
    if (res.records) {
      let data = res.records;
      if (data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          data[i].sex = proxy.$getDictVal(data[i].sex, D_BZ_XB);
          data[i].culture = proxy.$getDictVal(data[i].culture, D_BZ_AQRYWHCD);
        }
        let tablename = "人员信息列表.xlsx";
        exportXlsx(title, data, '人员信息列表', tablename);
      } else {
        ElMessage.warning('暂无数据');
      }
    }
  }).finally(() => {
    loadingShow.value = false
  })
};

function getListData() {
  tableloading.value = true;
  data.deptname = getItem("deptId").ssbmid;
  postApi(listQuery, `/mosty-jcgl/peopleParameter/queryPeopleParameter`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        tableData.value.forEach(item => {
          if (new Date(item.effectivetime).getTime() < Date.now()) {
            item.sfgq = '1'
          } else {
            item.sfgq = '2'
          }
        })
        pageConfiger.total = res.total;
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  );
}

//获取统计数据
function getcount(orgcode) {
  getApi({ orgcode }, '/mosty-jcgl/peopleParameter/countPeopleParameter').then(res => {
    if (res) {
      practitioners.value[0].num = res.gq ? res.gq : 0;
      practitioners.value[1].num = res.ygq ? res.ygq : 0;
    }
  })
}

//新增
function addInfo(type, id) {
  if (type == 'add') {
    data.savebtn = true;
    data.seeimg = false;
    data.id = null;
    data.title = "食堂人员信息新增";
  } else if (type == 'exit') {
    data.savebtn = true;
    data.seeimg = false;
    data.id = id;
    data.title = "食堂人员信息修改";

  } else {

    data.savebtn = false;
    data.seeimg = true;
    data.id = id;
    data.title = "食堂人员信息详情";

  }

  dialogVisible.value = true;
}
// 关闭弹窗
const changeAddVi = () => {
  dialogVisible.value = false;
  data.savebtn = true;
  data.seeimg = false;
  data.title = "";
  data.id = null;
  getListData();
};
//删除
function delInfo(row) {
  postApi(
    {},
    "/mosty-jcgl/peopleParameter/deletePeopleParameterOne/" + row.id
  ).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
}


//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};
</script>

<style lang="scss" scoped>
.toggle {
  position: none;
  z-index: 0;
  height: 40px;
  line-height: 40px;
  color: var(--el-color-primary);
  right: 13px;
  top: 10px;
  cursor: pointer;

  .el-icon {
    margin-left: 5px;
    float: right;
    margin-top: 14px;
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}


.headBox {
  display: flex;
  align-items: felx-end !important;
  ;
  padding: 0px 10px;
  margin: 10px 0;
  background: #fff;
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}




.img_fix {
  margin-left: 100px;
}
</style>