
<template>
  <div class="shareRecipes">
    <!--共享食谱-->
    <TablePro ref="tableRef" :request-api="reqApi" :search-form-options="searchFormOptions" :columns="columns"
              :single-line="false"
              :isPageTable="true">
      <template #headerExtra>
<!--        <n-button strong secondary type="primary" @click="addDepartmentStructure"> 添加库存</n-button>-->
        <n-button strong secondary type="primary" >导出</n-button>
      </template>
    </TablePro>
  </div>
</template>
<script setup lang="tsx">
import { NButton } from "naive-ui";
import { TablePro,type TableProProps } from "@/components";
import { reactive, ref } from "vue";
import shareRecipesValueList, {type shareRecipesValue } from './index.ts'
type TableType = TableProProps<any, any>;
const reqApi: TableType["requestApi"] = (params) =>{
     return new Promise((resolve)=>{
       resolve({
         code: 200,
         data: {
           current: "1",
           // @ts-ignore
           pages: "2",
           records: shareRecipesValueList,
           size: "10",
           total: "12"
         },
         message: "操作成功！"
       });
     })
}

const searchFormOptions = reactive<TableType["searchFormOptions"]>({
  classification: {
    type: "select",
    label: "分类",
    options:[
      {
        value:'nutrition',
        label:'营养特点'
      },
      {
        value:'audience',
        label:'人群适配'
      },
      {
        value:'flavor',
        label:'口味风格'
      },
      {
        value:'菜系',
        label:'菜系'
      },
      {
        value:'烹饪方式',
        label:'烹饪方式'
      },
      {
        value:'场景/用途',
        label:'场景/用途'
      },
    ],
    componentsProps:{
      onChange: async (values:any)=>{
        console.log(values);
      },
    }
  },
  mealsLabel:{
     type:'select',
     label:'标签',
     options:[
       {
         value:'低脂',
         label:'低脂'
       },
       {
         value:'高蛋白',
         label:'高蛋白'
       },
       {
         value:'辣味',
         label:'辣味'
       },
       {
         value:'富含纤维',
         label:'富含纤维'
       }
     ]
  },
  foundingUnits:{
      type:'input',
      label:'创建单位'
  }
})
const columns = ref<TableType["columns"]>([
  {
    key:'images',
    title:'菜品图',
    render: (value: any) => {
      return (
        <n-image
          width="30"
          src={value.images}
        />
      );
    }
  },
  {
    key:'dishNames',
    title:'菜名'
  },
  {
    key:'classification',
    title:'分类'
  },
  {
    key:'foundingUnits',
    title:'上传单位'
  },
  {
    key:'collection',
    title:'收藏数'
  },
  {
    key:'praise',
    title:'点赞数'
  },
  {
    key:'',
    title:'操作',
    render:(value:shareRecipesValue)=>{
       return (
         <div>
           <n-button
             strong
             secondary
             style={{ marginLeft: "10px" }}
             type="warning">查看详情</n-button>
         </div>
       )
    }
  }
])
</script>
<style scoped lang="scss">

</style>