<template>
  <page-container>
    <!-- 页面操作栏 -->
    <template #ops>
      <a-row>
        <a-col :span="18">
          <a-input-search v-model:value="searchKey" :placeholder="`请输入`" allow-clear enter-button
            @search="loadData()"></a-input-search>
        </a-col>
        <a-col :span="6">
          <a-button type="primary" style="margin-left: 10px" @click="showModal">
            <template #icon>
              <icon-font type="icon-plus" />
            </template>
            {{ pageType === '1' ? '申请入库' : '申请出库' }}
          </a-button>
        </a-col>
      </a-row>
    </template>
    <!-- 页面表格内容 -->
    <div style="min-height: calc(100vh - 305px)">
      <!-- 表格行 -->
      <a-table :columns="columns" :data-source="pagedata?.records" bordered :pagination="pagination" :loading="loading"
        row-key="key">

      </a-table>
    </div>
  </page-container>

  <!-- 弹窗 -->
  <a-modal v-model:open="open" title="Basic Modal" width="100%" wrap-class-name="full-modal" @ok="handleOk">
    <apply></apply>
  </a-modal>
</template>

<script setup lang="ts">

import api from '@/api'
import { IPage } from '@/api/api'
import apply from './applyModal.vue';


const props = defineProps({
  pageType: {
    type: String as PropType<'1' | '2'>, // 1 入库 2 出库
    required: false,
    default: '1'
  }
})

const { pageType } = toRefs(props)

const searchKey = ref('')
const pagedata = ref<IPage<material.ApplyDTO>>()
const loading = ref(false)



// 加载数据的方法
const loadData = async (page = 1, size = 10) => {
  loading.value = true
  api.materialApi.apply.searchPage(
    //1: 采购入库 2: 归还入库 3: 出库外借
    {
      applyType: 1,
      page: page || pagedata.value?.current,
      size: size || pagedata.value?.size,
      type: searchKey.value,
      code: searchKey.value,
      name: searchKey.value
    },
    (data) => {
      loading.value = false
      pagedata.value = data
    },
  )
}
//初始加载
loadData()

//表格列
const columns = [
  {
    title: '类型',
    dataIndex: 'type',
  },
  {
    title: '申请人',
    dataIndex: 'applicant',
  },
  {
    title: '申请日期',
    dataIndex: 'applyDate',
  },
  {
    title: '是否确认',
    dataIndex: 'isConfirm',
  },
  {
    title: '创建人',
    dataIndex: 'createdBy',
  },
  {
    title: '创建时间',
    dataIndex: 'createdTime',
  }
]

//分页信息
const pagination = computed(() => {
  return {
    current: pagedata.value?.current,
    pageSize: pagedata.value?.size,
    total: pagedata.value?.total,
    onChange: (page: number, pageSize: number) => {
      loadData(page, pageSize)
    },
  }
})

const open = ref<boolean>(false);

const showModal = () => {
  open.value = true;
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};

</script>

<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>
