<template>
  <div class="container-wrapper">
    <div class="top">
      <el-button type="primary" :icon="Plus" @click="is_add = true">新增领用</el-button>
    </div>
    <div class="content">
      <el-table :data="dataList" style="width: 100%" @row-click="rowClick">
        <el-table-column prop="useCode" label="单号" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="180"></el-table-column>
        <el-table-column prop="useUserId" label="领用人" width="180"></el-table-column>
        <el-table-column prop="createDatetime" label="创建时间" width="300">
          <template #default="scope">
            {{ formatDate(scope.row.createDatetime) }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <div class="page_btn_list">
        <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageSize"
            :current-page="page"
            :total="total"
            @current-change="changePage"
        />
      </div>
    </div>
    <Mask :width="1200" :height="600" :top="100" :is-show="is_add" @close="is_add=false" title="新增">
      <AddApply @close="closeAddApply"/>
    </Mask>
    <Mask :width="1200" :height="600" :top="100" :is-show="is_detail" @close="is_detail=false" title="编辑">
      <DetailApply :id="id" @close="closeDetailApply"/>
    </Mask>
  </div>
</template>
<script setup lang="ts">
import Mask from "@/components/common/Mask.vue";
import AddApply from "@/components/inventory/apply/AddApply.vue";
import {onMounted, ref} from "vue";
import {post} from "@/utils/request.ts";
import DetailApply from "@/components/inventory/apply/DetailApply.vue";
import {Plus} from "@element-plus/icons-vue";

const is_add = ref(false)
const is_detail = ref(false)
const id = ref('')
const dataList = ref([])
const getList = () => {
  const query = {
    pageNum: 1,
    pageSize: 20,
  }
  post("inventory/apply/list", {query: query}).then((res: any) => {
    dataList.value = res.list
  })
}
onMounted(() => {
  getList()
})
//分页
let pageSize = ref(20)
let total = ref(0)
let page = ref(1)
let changePage = (value: number) => {
  page.value = value
  const query = {
    pageNum: value,
    pageSize: pageSize.value,
  }
  post("inventory/apply/list", {query: query}).then((res: any) => {
    dataList.value = res.list
    total.value = res.total_count
  })
}
const closeAddApply = () => {
  is_add.value = false
  getList()
}
const closeDetailApply = () => {
  is_detail.value = false
}
// 转成YYYY-MM-DD格式
const formatDate = (isoStr: any) => {
  const date = new Date(isoStr);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
}
const rowClick = (row: any) => {
  id.value = row.id
  is_detail.value = true
}
</script>

<style scoped lang="scss">
@use "@/assets/scss/base.scss";
.container-wrapper {
  box-sizing: border-box;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  .content {
    width: 100%;
    flex: 1;
    overflow: hidden;
    margin-top: base.$margin-base;
  }
  .bottom {
    width: 100%;
    height: 60px;
    background-color: #FFF;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    border-top: 1px solid #EEE;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}


</style>