<script setup lang="ts">
import { ref } from 'vue';
import { goodColumns } from '../../config/columns';
import { ElButton, ElForm } from 'element-plus';
import { rules } from '../rules';
import BasicDescriptions from '/@/components/BasicDescriptions';
import { UnitInput } from '/@/components/Input';
import { useRenderIcon } from '/@/components/ReIcon/src/hooks';

const formData = ref({
    isToAdjust: '',
    amount: ''
})

const formRef = ref<InstanceType<typeof ElForm> | null>(null)


async function handleSubmit() {
  try {
      await formRef.value?.validate()
  } catch (err) {
      console.log(err)
  }
}
</script>

<template>
    <ElForm label-width="140px" :model="formData" ref="formRef" :rules="rules">
        <ElFormItem label="计提明细">
            <BasicDescriptions style="width: 100%" :columns="goodColumns" :data="{}" />
        </ElFormItem>

        <ElFormItem label="关联凭证">
            <ElTable size="small" border>
                <!-- <ElTableColumn label="凭证编号" /> -->
                <ElTableColumn label="商品编号" />
                <ElTableColumn label="商品名称" />
                <ElTableColumn label="账面数量" />
                <ElTableColumn label="目标商品比例" />
                <ElTableColumn label="关联数量" />
                <ElTableColumn label="税前单价" />
                <ElTableColumn label="税后单价" />
                <ElTableColumn width="60px">
                    <template #label>
                        操作
                        <ElButton :icon="useRenderIcon('add')" />
                    </template>
                </ElTableColumn>
            </ElTable>
        </ElFormItem>

        <ElFormItem label="调整金额" prop="amount">
            <UnitInput v-model="formData.amount" placeholder="调整金额" disabled unit="元" />
        </ElFormItem>

        <ElFormItem label="添加至调整单" prop="isToAdjust">
            <ElSelect v-model="formData.isToAdjust" placeholder="添加至调整单">
                <ElOption label="是" value="1" />
                <ElOption label="否" value="0" />
            </ElSelect>
        </ElFormItem>

        <div class="flex w-full justify-end">
            <ElButton type="primary" @click="handleSubmit">保存</ElButton>
        </div>
    </ElForm>
</template>