<template>
  <CustomCard>
    <h2>肥料基本信息</h2>
    <TypeMenu v-model:type="type" />
    <br />
    <avue-crud ref="crud" v-model:page="pageData" :data="data" :option="option"></avue-crud>
  </CustomCard>
</template>

<script setup>
import { ref, watch } from 'vue';
import CustomCard from '@/components/CustomCard.vue';
import TypeMenu from '../../common/TypeMenu.vue';
import { CRUD_OPTIONS } from '@/config';

/* --------------- data --------------- */
// #region
const type = ref('');
watch(
  () => type.value,
  () => {
    console.log(type.value);
  },
  {
    deep: true,
  }
);

const crud = ref();
const data = ref([]);
const pageData = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});
const option = ref({
  CRUD_OPTIONS,
  selection: false,
  column: [
    {
      prop: 'keywords',
      label: '关键字',
    },
    {
      prop: '',
      label: '编号',
    },
    {
      prop: 'xxxName',
      label: '名称',
    },
    {
      prop: '',
      label: '厂家',
    },
    {
      prop: '',
      label: '经销商',
    },
    {
      prop: '',
      label: '化学成分',
    },
    {
      prop: '',
      label: '产品规格',
    },
    {
      prop: '',
      label: '保质期',
    },
  ],
});
// #endregion

/* --------------- methods --------------- */
// #region

// #endregion
</script>

<style lang="scss" scoped>
h2 {
  font-size: 24px;
  font-weight: bold;
  font-family: '黑体';
}
</style>
