<template>
  <div class="departmentStructure">
    <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, useModal, type FormInst } from "naive-ui";
  import { reactive, ref } from "vue";
  import type { modelDefaultValue } from "@/views/personnelManagement/departmentStructure/index.ts";
  import { TablePro, type TableProProps, FormPro, type FormItemOptions, type TableProInst } from "@/components";

  type TableType = TableProProps<any, any>
  import api from "@/axios";
  import datalist, { type FoodItemValue } from "@/views/smartRecipes/foodManagement/index.ts";
  import CustomImageUpload from "@/components/customImageUpload/index.vue";

  const modal = useModal();
  const form = ref<FormInst | null>(null);
  const reqApi: TableType["requestApi"] = (params) => {
    return new Promise((resolve: any) => {
      resolve({
        code: 200,
        data: {
          pages: "2",
          current: "1",
          records: datalist,
          size: "5",
          total: "10"
        },
        success: "成功"
      });
    });
  };
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
    categories: {
      type: "select",
      label: "食物大类",
      options: [
        {
          value: "蛋类及制品",
          label: "蛋类及制品"
        },
        {
          value: "干豆类及制品",
          label: "干豆类及制品"
        },
        {
          value: "禽肉类及制品",
          label: "禽肉类及制品"
        },
        {
          value: "谷类及制品",
          label: "谷类及制品"
        },
        {
          value: "坚果、种子类",
          label: "坚果、种子类"
        },
        {
          value: "粮油调料",
          label: "粮油调料"
        },
        {
          value: "菌藻类",
          label: "菌藻类"
        },
        {
          value: "蔬菜类",
          label: "蔬菜类"
        },
        {
          value: "厨房用品",
          label: "厨房用品"
        },
        {
          value: "水果类",
          label: "水果类"
        },
        {
          value: "其他",
          label: "其他"
        }
      ]
    },
    subCategories: {
      type: "select",
      label: "食物小类",
      options: [
        {
          value: "食物小类",
          label: "食物小类"
        }
      ]
    },
    goodsLabel: {
      type: "select",
      label: "标签",
      options: [{
        value: "谷薯",
        label: "谷薯"
      }, {
        value: "肉蛋",
        label: "肉蛋"
      }, {
        value: "果蔬",
        label: "果蔬"
      }, {
        value: "豆类坚果",
        label: "豆类坚果"
      }, {
        value: "其他",
        label: "其他"
      }]
    },
    name: {
      type: "input",
      label: "名称"
    }
  });

  const columns = ref<TableType["columns"]>([
    {
      key: "image",
      title: "食物图片",
      width: 100,
      render: (value: any) => {
        return (
          <n-avatar
            round
            src={value.image}
          />
        );
      }
    },
    {
      key: "primaryTypeName",
      title: "食物大类",
      width: 100
    },
    {
      key: "secondaryTypeName",
      title: "食物小类",
      width: 150
    },
    {
      key: "name",
      title: "食物名称",
      width: 100
    },
    {
      key: "labelStr",
      title: "食物标签",
      width: 100
    },
    {
      key: "power",
      title: "热量",
      width: 60
    },
    {
      key: "protein",
      title: "蛋白质",
      width: 70
    },
    {
      key: "fat",
      title: "脂肪",
      width: 60
    },
    {
      key: "carbs",
      title: "碳水化合物",
      width: 100
    },
    {
      key: "dietaryFiber",
      title: "不溶性膳食纤维",
      width: 140
    },
    {
      key: "vitaminA",
      title: "总维生素A",
      width: 100
    },
    {
      key: "vitaminB1",
      title: "维生素B₁",
      width: 100
    },
    {
      key: "vitaminB2",
      title: "维生素B₂",
      width: 100
    },
    {
      key: "vitaminC",
      title: "维生素C",
      width: 80
    },
    {
      key: "vitaminE",
      title: "维生素E",
      width: 80
    },
    {
      key: "ca",
      title: "钙",
      width: 50
    },
    {
      key: "zn",
      title: "锌",
      width: 80
    },
    {
      key: "fe",
      title: "铁",
      width: 20
    },
    {
      key: "createUserName",
      title: "提交人",
      width: 80
    },
    {
      key: "createTime",
      title: "提交时间",
      width: 80
    },
    {
      key: "updateTime",
      title: "更新时间",
      width: 80
    },
    {
      key: "",
      title: "操作",
      fixed: "right",
      render: (value: FoodItemValue) => {
        return (
          <div style={{ display: "flex" }}>
            <n-button
              strong
              secondary
              style={{ marginLeft: "10px" }}
              type="warning"
              onClick={() => {
                console.log(value, "000");
                title.value = `修改食材原料`;
                userValue.value.image = value.image
                userValue.value.ca = value.ca
                userValue.value.carbs = value.carbs
                userValue.value.fat = value.fat
                userValue.value.fe = value.fe
                userValue.value.power = value.power
                userValue.value.se = value.se
                userValue.value.vitaminA = value.vitaminA
                userValue.value.vitaminC = value.vitaminC
                userValue.value.vitaminE = value.vitaminE
                userValue.value.vitaminB1 = value.vitaminB1
                userValue.value.vitaminB2 = value.vitaminB2
                userValue.value.name = value.name
                userValue.value.zn = value.zn
                userValue.value.dietaryFiber = value.dietaryFiber
                userValue.value.protein = value.protein
                userValue.value.labelStr = value.labelStr
                userValue.value.primaryTypeName = value.primaryTypeName
                userValue.value.secondaryTypeName = value.secondaryTypeName

                modalRef.value = modal.create({
                  title: title.value,
                  preset: "card",
                  style: {
                    width: "1000px"
                  },
                  content: () => (
                    <div style="height:600px;overflow-y: auto;scrollbar-width: none;">
                      <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
                               form-item-options={formOptions1User} gridProps={{ cols: 1, xGap: 8, itemResponsive: true }}>
                      </FormPro>
                      <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
                               form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
                      </FormPro>
                    </div>

                  ),
                  footer: () => (
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "flex-end"
                      }}
                    >
                      <n-button
                        loading={loading.value}
                        style={{ marginRight: "10px" }}
                        type="primary"
                        onClick={() => {
                          modalRef.value.destroy();
                          resetModelValue();
                        }}
                      >
                        确认
                      </n-button>
                      <n-button
                        onClick={() => {
                          modalRef.value.destroy();
                          resetModelValue();
                        }}
                      >
                        取消
                      </n-button>
                    </div>
                  ),
                  onAfterLeave: () => {
                    resetModelValue();
                  }
                });
              }}
            >编辑
            </n-button>
            <n-button type="error" style={{ margin: "0 10px" }}>
              删除
            </n-button>
          </div>
        );
      }
    }

  ]);
  const userDefaultValue = {
    ca: "",
    carbs: "",
    code: "",
    createTime: "",
    createUserId: "",
    createUserName: "",
    dietaryFiber: "",
    fat: "",
    fe: "",
    id: "",
    image: "",
    label: "",
    labelStr: "",
    name: "",
    power: "",
    primaryType: "",
    primaryTypeName: "",
    protein: "",
    se: "",
    secondaryType: "",
    secondaryTypeName: "",
    supplier: "",
    supplyCost: "",
    supplyProductCode: "",
    supplyProductName: "",
    updateTime: "",
    vitaminA: "",
    vitaminB1: "",
    vitaminB2: "",
    vitaminC: "",
    vitaminE: "",
    zn: ""
  };

  const userValue = ref<FoodItemValue>({
    ...userDefaultValue
  });

  const resetModelValue = () => {
    userValue.value = { ...userDefaultValue };
  };

  const addUserOrUpdate = () => {
    form.value?.validate().then(() => {
      // loading.value = true

    });
  };
  const formOptionsUser = reactive<FormItemOptions<FoodItemValue>>({
    primaryTypeName: {
      type: "select",
      label: "食物大类",
      required: true,
      labelAlign: "center",
      options: [
        {
          value: "蛋类及制品",
          label: "蛋类及制品"
        },
        {
          value: "干豆类及制品",
          label: "干豆类及制品"
        },
        {
          value: "禽肉类及制品",
          label: "禽肉类及制品"
        },
        {
          value: "谷类及制品",
          label: "谷类及制品"
        },
        {
          value: "坚果、种子类",
          label: "坚果、种子类"
        },
        {
          value: "粮油调料",
          label: "粮油调料"
        },
        {
          value: "菌藻类",
          label: "菌藻类"
        },
        {
          value: "蔬菜类",
          label: "蔬菜类"
        },
        {
          value: "厨房用品",
          label: "厨房用品"
        },
        {
          value: "水果类",
          label: "水果类"
        },
        {
          value: "其他",
          label: "其他"
        }
      ]
    },
    secondaryTypeName: {
      type: "select",
      label: "食物小类",
      required: true,
      options: [
        {
          value: "大豆",
          label: "大豆"
        },
        {
          value: "红豆",
          label: "红豆"
        },
        {
          value: "绿豆",
          label: "绿豆"
        }
      ]
    },
    name: {
      type: "input",
      label: "食物名称",
      required: true
    },
    labelStr: {
      type: "radioGroup",
      label: "食物标签",
      required: true,
      options: [{
        value: "谷薯",
        label: "谷薯"
      }, {
        value: "肉蛋",
        label: "肉蛋"
      }, {
        value: "果蔬",
        label: "果蔬"
      }, {
        value: "豆类坚果",
        label: "豆类坚果"
      }, {
        value: "其他",
        label: "其他"
      }]
    },
    power: {
      type: "input",
      label: "能量（kcal/100g）"
    },
    protein: {
      type: "input",
      label: "蛋白质（g/100g）"
    },
    fat: {
      type: "input",
      label: "脂肪（g/100g）"
    },
    carbs: {
      type: "input",
      label: "碳水化合物（g/100g）"
    },
    dietaryFiber: {
      type: "input",
      label: "不溶性膳食纤维（g/100g）"
    },
    vitaminA: {
      type: "input",
      label: "维生素A（μgRAE/100g）"
    },
    vitaminB1: {
      type: "input",
      label: "维生素B1（mg/100g）"
    },
    vitaminB2: {
      type: "input",
      label: "维生素B2（mg/100g）"
    },
    vitaminC: {
      type: "input",
      label: "维生素C（mg/100g）"
    },
    vitaminE: {
      type: "input",
      label: "维生素E（mg/100g）"
    },
    ca: {
      type: "input",
      label: "钙（mg/100g）"
    },
    zn: {
      type: "input",
      label: "锌（mg/100g）"
    },
    fe: {
      type: "input",
      label: "铁（mg/100g）"
    }
  });
  const formOptions1User = reactive<FormItemOptions<FoodItemValue>>({
    // // form表单
    image: {
      type: "custom",
      label: "",
      customRender: (modelValue) => {
        return (
          <div style="margin: auto;text-align: center">
            <div>
              <n-image
                width="150"
                height="150"
                src={modelValue.image}
              />
            </div>
            上传菜品图片
          </div>
        );
      }
    },
  });
  const loading = ref<boolean>(false);
  const modalRef = ref();
  const title = ref("添加食材原料");
  const addDepartmentStructure = () => {
    modalRef.value = modal.create({
      title: title.value,
      preset: "card",
      style: {
        width: "1000px"
      },
      content: () => (
        <div style="height:600px;overflow-y: auto;scrollbar-width: none;">
          <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
                   form-item-options={formOptions1User} gridProps={{ cols: 1, xGap: 8, itemResponsive: true }}>
          </FormPro>
          <FormPro labelPlacement={"top"} ref={form} v-model:value={userValue.value}
                   form-item-options={formOptionsUser} gridProps={{ cols: 2, xGap: 16, itemResponsive: true }}>
          </FormPro>
        </div>

      ),
      footer: () => (
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end"
          }}
        >
          <n-button
            loading={loading.value}
            style={{ marginRight: "10px" }}
            type="primary"
            onClick={() => {
              addUserOrUpdate();
            }}
          >
            确认
          </n-button>
          <n-button
            onClick={() => {
              modalRef.value.destroy();
              resetModelValue();
            }}
          >
            取消
          </n-button>
        </div>
      ),
      onAfterLeave: () => {
        resetModelValue();
      }
    });
  };
</script>
<style scoped lang="scss">
  .departmentStructure {
    //overflow-y: auto;

  }
</style>