<template>
  <MOSTY.PageTree :pageTitle="'危险物品发放列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <section class="button">
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
      </section>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
          :isSort="true">
          <template #actions="{ row }">
            <span class="operesee" @click="handleSee(row, 'see')"><el-icon>
                <Compass />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </template>
  </MOSTY.PageTree>
  <!-- 新增 -->
  <div v-if="comprehensiveShow" class="dialog-box">
    <Grantxq :saveBtnShow="saveBtnShow" :editObj="editObj.editObj" @close="close" :title="editObj.title" />
  </div>
</template>

<script setup>
// 引入
import { reactive, ref } from "vue";
import { getItem } from "@/utils/storage";
import Grantxq from "@/views/yxkzgl/wxwpgl/grantxq.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
// 数据
const comprehensiveShow = ref(false);
const searchArr = reactive([
  {
    showType: "input",
    prop: "grantname",
    width: '250px',
    placeholder: "请输入发放名称进行查询"
  }
])
const tableColumn = reactive([
  {
    title: "发放名称",
    prop: 'grantname'
  },
  {
    title: "发放人",
    prop: 'grantusername'
  },
  {
    title: "发放部门",
    prop: 'grantdeptname'
  },
  {
    title: "领用时间",
    prop: 'granttime'
  },
  {
    title: "领用人",
    prop: 'useusername'
  },
  {
    title: "领用部门",
    prop: 'usedeptname'
  },
  {
    title: "操作",
    prop: 'actions',
    slot: true
  }
])
//查询条件

const editObj = reactive({
  deptname: "",
  title: "",
  savebtn: true,
  seeimg: true,
  editObj: {}
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  orgcode: ""
});
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getListData();
};
function onSearch(obj) {
  listQuery.grantname = obj.grantname
  listQuery.pageCurrent = 1;
  getListData()
}
// 获取表格数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  editObj.deptname = getItem("deptId").ssbmid;
  postApi(listQuery, `/mosty-jcgl/dangergoodsGrant/queryDangergoodsGrant`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        listQuery.total = res.total;
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}
//弹窗关闭
const close = () => {
  comprehensiveShow.value = false;
  getListData();
};
//详情
const getmain = (id) => {
  if (id) {
    getApi(
      {},
      "/mosty-jcgl/dangergoodsGrant/getDangergoodsGrantById/" + id
    ).then((res) => {
      if (res) {
        editObj.editObj = res;
        if (editObj.editObj.file) {
          if (editObj.editObj.file.index0f("[") != -1) {
            editObj.editObj.file = JSON.parse(editObj.editObj.file)
          } else {
            editObj.editObj.file = editObj.editObj.file.split(",");
          }
        }
      }
    });
    //消防队成员
    getApi(
      { id: id },
      "/mosty-jcgl/dangergoodsGrantChild/queryDangergoodsGrantChildById"
    ).then((res) => {
      if (res) {
        editObj.editObj.tbDangergoodsGrantChildList = res;
      }
    });
  }
};
const saveBtnShow = ref(true);
//新增
function addInfo() {
  editObj.editObj = null;
  comprehensiveShow.value = true;
  saveBtnShow.value = true;
  editObj.title = "危险物品发放新增";
}
//详情
function handleSee(row) {
  editObj.title = "危险物品发放详情";
  getmain(row.id);
  comprehensiveShow.value = true;
  saveBtnShow.value = false;
}

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

</script>

<style lang="scss" scoped>
.button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>