<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-option value="3">素食</a-select-option>
                <a-select-option value="4">荤菜</a-select-option>
                <a-select-option value="5">低卡</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">中份</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;
}

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

const dataSource = ref( [
  {
    key: '1',
    image:'',
    name: '辣椒炒肉',
    age: '素食',
    inventory:'16',
    shelfLife:'小份'
  },
  {
    key: '2',
    image:'',
    name: '番茄炒鸡蛋',
    age:'素食',
    inventory:'10',
    shelfLife:'中份'
  },
  {
    key: '3',
    image:'',
    name: '番茄牛腩',
    age:'荤菜',
    inventory:'28',
    shelfLife:'大份'
  }
])
const columns =  [
  {
    title: '菜品图片',
    dataIndex: 'image',
    key: 'image',
    customRender:(value:any)=>{
       return <a-avatar src="https://www.antdv.com/assets/logo.1ef800a8.svg" />
    }
  },
  {
    title: '菜品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '类别',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '价格',
    dataIndex: 'inventory',
    key: 'inventory',
  },
  {
    title: '份量选项',
    dataIndex: 'shelfLife',
    key: 'shelfLife',
    customRender: (text: any) => {
      return  <a-tag >{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>
