<template>
  <MOSTY.PageTree :pageTitle="'危险物品采购列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      s
      <div class="btnBox">
        <el-button @click="addInfo">
          <el-icon size="small">
            <Plus />
          </el-icon>新增
        </el-button>
      </div>
    </template>
    <template #table>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
          :isSort="true">
          <template #actions="{ row }">
            <span class="operedit" @click="exitInfo(row, 'edit')">
              <el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handledelete(row)">
              <!-- v-if='isAuth' -->
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="handleSee(row, 'see')"><el-icon>
                <Compass />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
          layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
      </div>
    </template>
  </MOSTY.PageTree>
  <div v-if="comprehensiveShow" class="dialog-box">
    <Procurexq :saveBtnShow="saveBtnShow" :rowid="rowid" @close="close" :title="editObj.title" />
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref } from "vue";
import { getItem } from "@/utils/storage";
import Procurexq from "@/views/yxkzgl/wxwpgl/procurexq.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
const totalHeight = ref()
const rowid = ref(null)
const searchArr = reactive([
  {
    showType: "input",
    prop: "purchasename",
    width: '250px',
    placeholder: "请输入采购名称进行查询"
  }
])
const tableColumn = reactive([
  {
    title: "采购名称",
    prop: "purchasename",
  },
  {
    title: "采购时间",
    prop: "purchasetime",
  },
  {
    title: "采购人",
    prop: "purchaseusername",
  },
  {
    title: "采购部门",
    prop: "purchasedeptname",
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
// 数据
const comprehensiveShow = ref(false);
const editObj = reactive({
  deptname: "",
  title: "",
  savebtn: true,
  seeimg: true,
  editObj: {}
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  orgcode: ""
});
const total = ref(0);
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getListData();
};

function onSearch(obj) {
  listQuery.purchasename = obj.purchasename
  listQuery.pageCurrent = 1;
  getListData();
}
// 获取表格数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  editObj.deptname = getItem("deptId").ssbmid;
  postApi(
    listQuery,
    `/mosty-jcgl/dangergoodsPurchase/queryDangergoodsPurchase`
  ).then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      total.value = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//弹窗关闭
const close = () => {
  comprehensiveShow.value = false;
  getListData();
};

const saveBtnShow = ref(true);
//新增
function addInfo() {
  rowid.value = null
  comprehensiveShow.value = true;
  saveBtnShow.value = true;
  editObj.title = "危险物品采购新增";
}
//修改
function exitInfo(row) {
  rowid.value = row.id
  saveBtnShow.value = true;
  editObj.title = "危险物品采购修改";
  comprehensiveShow.value = true;


}
//详情
function handleSee(row) {
  rowid.value = row.id
  saveBtnShow.value = false;
  editObj.title = "危险物品采购详情";
  comprehensiveShow.value = true;
}
//删除
function handledelete(row) {
  postApi({}, `/mosty-jcgl/dangergoodsPurchase/deleteDangergoodsPurchaseOne/${row.id}`).then((res) => {
    ElMessage.success("删除成功，请前往发放页面修改数据，以确保数据准备性！！");
    getListData();
  })
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};
onMounted(() => {
  totalHeight.value = `calc(100vh - 396px)`
});
</script>

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