<template>
  <div class="food">
    <a-card :bordered="false" style="width: 100%">
      <div class="foodIndex">
        <div>
          <a-form name="horizontal_login" layout="inline" autocomplete="off" ref="formRef" :model="formState">
            <a-form-item label="食材名称" name="name">
              <a-input placeholder="请输入食材名称"></a-input>
            </a-form-item>
            <a-form-item label="类别" name="type">
              <a-select style="width: 180px" v-model:value="formState.type" placeholder="请选择类别">
                <a-select-option value="0">肉类</a-select-option>
                <a-select-option value="1">蔬菜</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="库存状态" name="inventory">
              <a-select style="width: 180px" v-model:value="formState.inventory" placeholder="请选择库存状态">
                <a-select-option value="0">充足</a-select-option>
                <a-select-option value="1">不足</a-select-option>
                <a-select-option value="2">急需补货</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="保质期" name="shelfLife">
              <a-select style="width: 180px" v-model:value="formState.shelfLife" placeholder="请选择保质期">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">3天内过期</a-select-option>
                <a-select-option value="2">7天内过期</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="存储位置" name="storageLocation">
              <a-select style="width: 180px" v-model:value="formState.storageLocation" placeholder="请选择存储位置">
                <a-select-option value="0">冷藏</a-select-option>
                <a-select-option value="1">冷冻</a-select-option>
                <a-select-option value="2">常温仓库</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
        <div>
          <a-button type="primary">
            <template #icon>
              <ZoomInOutlined/>
            </template>
            搜索
          </a-button
          >
        </div>
      </div>

    </a-card>

    <a-card :bordered="false" class="foodItem">
      <a-table :dataSource="dataSource" :columns="columns" :scroll="{ x: 1500, y: 430 }" />
    </a-card>
  </div>
</template>
<script lang="tsx" setup>
import {ZoomInOutlined} from "@ant-design/icons-vue";
import {reactive, ref, UnwrapRef} from "vue";
import {Dayjs} from 'dayjs';

interface FormState {
  name: string;
  type: string | undefined;
  inventory:string | undefined;
  shelfLife:string | undefined;
  storageLocation:string | undefined;
}

const formState: UnwrapRef<FormState> = reactive({
  name: '',
  type: undefined,
  inventory:undefined,
  shelfLife:undefined,
  storageLocation:undefined
});

const dataSource = ref( [
  {
    key: '1',
    name: '牛肉',
    age: '肉类',
    address: '200kg',
    time:'2025-4-25 14:35:25',
    inventory:'50kg',
    shelfLife:'3天内过期'
  },
  {
    key: '2',
    name: '猪肉',
    age:'肉类',
    address: '400kg',
    time:'2025-4-25 14:35:25',
    inventory:'50kg',
    shelfLife:'正常'
  },
  {
    key: '3',
    name: '胡萝卜',
    age:'蔬菜',
    address: '100kg',
    time:'2025-4-25 14:35:25',
    inventory:'20kg',
    shelfLife:'7天内过期'
  }
])
const columns =  [
  {
    title: '食品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '类别',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '当前库存量',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '入库时间',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '最低库存阈值',
    dataIndex: 'inventory',
    key: 'inventory',
  },
  {
    title: '保质期',
    dataIndex: 'shelfLife',
    key: 'shelfLife',
    customRender: (text: any) => {
      return  <a-tag color={text.text === '3天内过期'?'orange':text.text === '7天内过期'?'red':'green'}>{text.text}</a-tag>
    }
  },
  {
    title: " 操作",
    dataIndex: "operation",
    customRender:()=>{
       return (
           <div>
             <a-button type="primary" danger className="margin-right-sm" >
               删除
             </a-button>
             <a-button className="margin-right-sm">查看</a-button>
             <a-button type="primary">编辑</a-button>
           </div>
       )
    }
  },
]
</script>

<style lang="scss" scoped>
.food {
  height: calc(100vh - 130px);
  // background: #fff;
  overflow: hidden;

  .foodIndex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .foodItem {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
    margin-top: 20px;
  }
}
</style>
