<template>
  <div class="containe">
    <div class="tableWrap">
      <div class="titleWrap">
        <span class="title"></span>
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </div>
      <a-table :dataSource="dataSource" :columns="productColumns" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="handleEdit(record)">编辑</a-button>
            <a-button type="link" @click="handleDelete(record)">删除</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="visible" title="新增" @ok="handleSubmit" @cancel="handleCancel">
      <a-form
        :model="formData"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
        autocomplete="off"
        ref="formRef"
        :rules="productRulesRef"
      >
        <a-form-item label="产品编号" name="thirdProductId">
          <a-input v-model:value="formData.thirdProductId" />
        </a-form-item>
        <a-form-item label="数量" name="quantity">
          <a-input v-model:value="formData.quantity" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue';
  import { ref, reactive, defineExpose, defineProps, watch } from 'vue';
  import { productColumns, productRulesRef } from '../schema';

  const props = defineProps(['editProductList']);
  const visible = ref(false);
  const dataSource = ref<any>([]);
  const formRef = ref();
  const formData = reactive({
    thirdProductId: '',
    quantity: '',
  });

  const handleAdd = () => {
    visible.value = true;
  };

  const handleSubmit = () => {
    formRef.value.validate().then(() => {
      const index = dataSource.value.findIndex((item) => {
        return item.thirdProductId === formData.thirdProductId;
      });

      if (index != -1) {
        dataSource.value[index].quantity = formData.quantity;
      } else {
        dataSource.value.push({
          thirdProductId: formData.thirdProductId,
          quantity: formData.quantity,
        });
      }

      message.success('操作成功');
      handleCancel();
    });
  };

  const handleEdit = (info) => {
    formData.thirdProductId = info.thirdProductId;
    formData.quantity = info.quantity;
    visible.value = true;
  };

  const handleDelete = (info) => {
    const index = dataSource.value.findIndex((item) => {
      return item.thirdProductId === info.thirdProductId;
    });

    dataSource.value.splice(index, 1);
    message.success('删除成功');
  };

  const handleCancel = () => {
    formRef.value.resetFields();
    visible.value = false;
  };

  watch(
    () => props.editProductList,
    (n) => {
      if (n) {
        dataSource.value = n;
      }
    },
    {
      immediate: true,
    },
  );

  defineExpose({ dataSource });
</script>

<style lang="less" scoped>
  @import url('/@/style/index.less');
</style>
