<!-- 编辑弹窗 -->
<template>
  <ele-modal
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    :title="isUpdate ? '编辑商户商品库存' : '添加商户商品库存'"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
      :wrapper-col="
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
    >
      <a-form-item label="商品" name="goodsId">
        <a-select v-model:value="form.goodsId" placeholder="请选择商品" style="width: 100%">
          <a-select-option v-for="(item, index) in goodsList" :value="item.goodsId" :key="index">{{
              item.goodsName
            }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="库存数量" name="stock">
        <a-input
          allow-clear
          placeholder="请输入库存"
          v-model:value="form.stock"
        />
      </a-form-item>

    </a-form>
  </ele-modal>
</template>

<script lang="ts" setup>
import {ref, reactive, watch} from 'vue';
import {Form, message} from 'ant-design-vue';
import {assignObject} from 'ele-admin-pro';
import {addGoodsStockInMerchant, updateGoodsStockInMerchant} from '@/api/shop/goodsStockInMerchant';
import {GoodsStockInMerchant} from '@/api/shop/goodsStockInMerchant/model';
import {useThemeStore} from '@/store/modules/theme';
import {storeToRefs} from 'pinia';
import {FormInstance} from 'ant-design-vue/es/form';
import {Goods} from "@/api/shop/goods/model";
import {listGoods} from "@/api/shop/goods";

// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const {styleResponsive} = storeToRefs(themeStore);

const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: GoodsStockInMerchant | null;
}>();

const emit = defineEmits<{
  (e: 'done'): void;
  (e: 'update:visible', visible: boolean): void;
}>();

// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);

// 用户信息
const form = reactive<GoodsStockInMerchant>({
  id: undefined,
  goodsId: undefined,
  skuId: undefined,
  num: undefined,
  merchantId: undefined,
  stock: undefined,
  status: undefined,
  comments: undefined,
  sortNumber: undefined,
  userId: undefined,
  deleted: undefined,
  tenantId: undefined,
  createTime: undefined,
  updateTime: undefined,
});

/* 更新visible */
const updateVisible = (value: boolean) => {
  emit('update:visible', value);
};

// 表单验证规则
const rules = reactive({

});

const {resetFields} = useForm(form, rules);

/* 保存编辑 */
const save = () => {
  if (!formRef.value) {
    return;
  }
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      const formData = {
        ...form
      };
      const saveOrUpdate = isUpdate.value ? updateGoodsStockInMerchant : addGoodsStockInMerchant;
      saveOrUpdate(formData)
        .then((msg) => {
          loading.value = false;
          message.success(msg);
          updateVisible(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          message.error(e.message);
        });
    })
    .catch(() => {
    });
};

const goodsList = ref<Goods[]>([])
const getGoodsList = async () => {
  goodsList.value = await listGoods()
}

watch(
  () => props.visible,
  async (visible) => {
    if (visible) {
      await getGoodsList()
      if (props.data) {
        assignObject(form, props.data);
        isUpdate.value = true;
      } else {
        isUpdate.value = false;
      }
    } else {
      resetFields();
    }
  },
  {immediate: true}
);
</script>
