<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";

  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: [
            {
              commodity: "金煌芒果",
              specifications: "无",
              brand: "无",
              units: "斤",
              commodityType: "蔬菜豆制品",
              inventory: 99,
              maxNumber: 99,
              warningValue: 10,
              replenishment: "否"
            },
            {
              commodity: "大红薯",
              specifications: "无",
              brand: "无",
              units: "斤",
              commodityType: "蔬菜豆制品",
              inventory: 99,
              maxNumber: 99,
              warningValue: 10,
              replenishment: "是"
            },
            {
              commodity: "紫叶生菜",
              specifications: "无",
              brand: "无",
              units: "斤",
              commodityType: "蔬菜豆制品",
              inventory: 99,
              maxNumber: 99,
              warningValue: 10,
              replenishment: "否"
            }, {
              commodity: "芥菜",
              specifications: "无",
              brand: "无",
              units: "斤",
              commodityType: "蔬菜豆制品",
              inventory: 99,
              maxNumber: 99,
              warningValue: 10,
              replenishment: "是"
            }
          ],
          size: "5",
          total: "10",
        },
        success: "成功"
      });
    });
  };
  const searchFormOptions = reactive<TableType["searchFormOptions"]>({
    name: {
      type: "input",
      label: "名称"
    },
    type: {
      type: "select",
      label: "所有类型",
      options: [
        {
          value: "蔬菜豆制品",
          label: "蔬菜豆制品"
        },
        {
          value: "肉类",
          label: "肉类"
        },
        {
          value: "禽类",
          label: "禽类"
        },
        {
          value: "烧腊类",
          label: "烧腊类"
        },
        {
          value: "水产冻货",
          label: "水产冻货"
        },
        {
          value: "豆品蛋类",
          label: "豆品蛋类"
        },
        {
          value: "米油杂粮",
          label: "米油杂粮"
        },
        {
          value: "调料干货",
          label: "调料干货"
        },
        {
          value: "厨房用品",
          label: "厨房用品"
        },
        {
          value: "饮品",
          label: "饮品"
        }
      ]
    },
    goods: {
      type: "select",
      label: "是否急需补货",
      options: [{
        value: "否",
        label: "否"
      }, {
        value: "是",
        label: "是"
      }],
    }
  });

  const columns = ref<TableType["columns"]>([
    {
      key: "commodity",
      title: "商品名称",
      width: 150
    },
    {
      key: "specifications",
      title: "规格",
      width: 150
    },
    {
      key: "brand",
      title: "品牌",
      width: 150
    },
    {
      key: "units",
      title: "单位",
      width: 150
    },
    {
      key: "commodityType",
      title: "商品类型",
      width: 150
    },
    {
      key: "inventory",
      title: "库存",
      width: 150
    },
    {
      key: "maxNumber",
      title: "最大数量",
      width: 150
    },
    {
      key: "warningValue",
      title: "警戒值",
      width: 150
    },
    {
      key: "replenishment",
      title: "急需补货",
      width: 150
    },
    {
      key: "",
      title: "操作",
      render: (value: modelDefaultValue) => {
        return (
          <div style={{ display: "flex" }}>
            <n-button
              strong
              secondary
              style={{ marginLeft: "10px" }}
              type='warning'
              onClick={()=>{
                console.log(value,'000');
                title.value = `修改库存`
                userValue.value.commodity = value.commodity
                userValue.value.brand = value.brand
                userValue.value.warningValue = value.warningValue
                userValue.value.units = value.units
                userValue.value.inventory = value.inventory
                userValue.value.maxNumber = value.maxNumber
                userValue.value.specifications = value.specifications
                userValue.value.commodityType = value.commodityType

                modalRef.value = modal.create({
                  title: title.value,
                  preset: 'card',
                  style: {
                    width: '600px',
                  },
                  content: () => (
                    <>
                      <FormPro labelWidth='100' ref={form} v-model:value={userValue.value} form-item-options={formOptionsUser} />
                    </>
                  ),
                  footer: () => (
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'flex-end',
                      }}
                    >
                      <n-button
                        loading={loading.value}
                        style={{ marginRight: '10px' }}
                        type='primary'
                        onClick={() => {
                          resetModelValue()
                          // addUserOrUpdate(value.snowFlakeId)
                        }}
                      >
                        确认
                      </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: modelDefaultValue = {
    // snowFlakeId: "",
    commodity: "",
    specifications: "",
    brand: "",
    units: "",
    commodityType: "",
    inventory: "",
    maxNumber: "",
    warningValue: ""
    // replenishment:''
  };

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

  const resetModelValue = () => {
    userValue.value = { ...userDefaultValue };
    title.value = '新增库存'
  };

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

    })
  }
  const formOptionsUser = reactive<FormItemOptions<any>>({
    //     form表单
    commodity:{
      type: 'input',
      label: '商品名称',
      required: true,
    },
    specifications:{
      type: 'input',
      label: '规格要求',
    },
    brand:{
       type:'input',
       label: '品牌',
    },
    units:{
      type:'select',
      label: '单位',
      required: true,
      options:[
        {
          value:0,
          label:'个'
        },
        {
          value:1,
          label:'斤'
        },
        {
          value:2,
          label:'袋'
        },
      ]
    },
    inventory:{
       type:'inputNumber',
       label: '库存数量',
       required: true,
    },
    maxNumber:{
      type:'inputNumber',
      label:'最大数量',
      required: true,
    },
    warningValue:{
      type:'inputNumber',
      label:'警戒值',
      required: true,
    },
    commodityType:{
        type:'radioGroup',
        label:' 采购类型',
        required: true,
        options: [
          {
            value: 0,
            label: "蔬菜豆制品"
          },
          {
            value: 1,
            label: "肉类"
          },
          {
            value: 2,
            label: "禽类"
          },
          {
            value: 3,
            label: "烧腊类"
          },
          {
            value: 4,
            label: "水产冻货"
          },
          {
            value: 5,
            label: "豆品蛋类"
          },
          {
            value: 6,
            label: "米油杂粮"
          },
          {
            value: 7,
            label: "调料干货"
          },
          {
            value: 8,
            label: "厨房用品"
          },
          {
            value: 9,
            label: "饮品"
          }
      ]
    }
  });
  const loading = ref<boolean>(false);
  const modalRef = ref();
  const title = ref("新增库存");
  const addDepartmentStructure = () => {
    modalRef.value = modal.create({
      title: title.value,
      preset: "card",
      style: {
        width: "600px"
      },
      content: () => (
        <>
          <FormPro labelWidth="100" ref={form} v-model:value={userValue.value} form-item-options={formOptionsUser}></FormPro>
        </>
      ),
      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 {

  }
</style>