<template>
  <div class="div-container">
    <div class="top">
      <span style="margin: 0 0 0 12px">物资类型：</span>
      <a-input v-model:value="value" placeholder="" style="margin: 0 20px 0 0" />
      <span>物资品类：</span>
      <a-input v-model:value="value" placeholder="" style="margin: 0 20px 0 0" />
      <span>物资名称：</span>
      <a-input v-model:value="value" placeholder="" style="margin: 0 20px 0 0" />
      <span>仓库类型：</span>
      <a-input v-model:value="value" placeholder="" style="margin: 0 20px 0 0" />
      <span>仓库级别：</span>
      <a-input v-model:value="value" placeholder="" style="margin: 0 20px 0 0" />
      <a-button type="primary" style="margin: 0 20px 0 0">重置</a-button>
      <a-button type="primary" style="margin: 0 12px 0 0">查询</a-button>
    </div>
    <div class="top-button">
      <a-button type="primary" style="margin: 0 12px 0 20px" @click="addInfo" size="large"
        >新增</a-button
      >
      <a-button type="primary" style="margin: 0 20px 0 0" @click="addInfo" size="large"
        >编辑</a-button
      >
      <a-button type="primary" danger size="large" style="margin: 0 20px 0 0">删除</a-button>
      <a-button type="primary" style="margin: 0 20px 0 0" @click="addInfo" size="large"
        >批量导入</a-button
      >
      <a-button type="primary" style="margin: 0 20px 0 0" @click="addInfo" size="large"
        >批量导出</a-button
      >
    </div>
    <div class="table-body">
      <wtable :tableData="tableData" />
    </div>
    <dialogForm ref="dialog" />
  </div>
</template>
<script setup lang="ts">
  // import {  PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { ref, reactive, onMounted } from 'vue';
  import wtable from '/@/views/lifeline/compt/wtable.vue';
  import dialogForm from './dialogForm.vue';

  const dialog = ref();
  const value = ref('');
  onMounted(() => {
    console.log(dialog.value); // Proxy {…}
  });
  let tableData = reactive({
    columns: [
      {
        title: '序号',
        width: '50px',
        dataIndex: 'index',
        key: 'index',
        customRender: (text) => {
          return text.index + 1;
        },
      },
      {
        title: '物资编号',
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        title: '物资名称',
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        title: '库存数量',
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        title: '调拨占用量',
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        title: '可用数量',
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        title: '单位',
        dataIndex: 'name',
        ellipsis: true,
      },
      {
        title: '仓库名称',
        dataIndex: 'age',
        ellipsis: true,
      },
      {
        title: '生产日期',
        dataIndex: 'age',
        ellipsis: true,
      },
      {
        title: '仓库类型',
        dataIndex: 'address',
        ellipsis: true,
      },
      {
        title: '仓库级别',
        dataIndex: 'address',
        ellipsis: true,
      },
      {
        title: '所属区域',
        dataIndex: 'address',
        ellipsis: true,
      },
      {
        title: '行政区划编号',
        dataIndex: 'address',
        ellipsis: true,
      },
      {
        title: '仓库所属单位',
        dataIndex: 'address',
        ellipsis: true,
      },
      {
        title: '物资品类',
        dataIndex: 'address',
        ellipsis: true,
      },
      {
        title: '物资所属单位',
        dataIndex: 'address',
        ellipsis: true,
      },
      {
        title: '操作',
        width: '100px',
        dataIndex: 'operation',
        key: 'operation',
        slots: { customRender: 'action' },
      },
    ],
  });

  function addInfo() {
    dialog.value.show();
  }
</script>

<style lang="less" scoped>
  .div-container {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    padding: 10px;
    margin-right: 0;
    overflow: hidden;

    .top {
      width: 100%;
      height: 50px;
      background: #fff;
      line-height: 50px;
      margin-bottom: 20px;
    }

    .top-button {
      margin-bottom: 20px;

      .ant-btn {
        width: 100px;
        border-radius: 5px;
      }
    }

    .ant-input {
      width: 170px;
      height: 30px;
    }

    .table-body {
      height: 100%;
      padding: 10px;
      background: #fff;
    }
  }
</style>
