<script lang="ts" setup>
import { useVModel } from "@vueuse/core"

const props = defineProps<{ visible: boolean }>()
const visible = useVModel(props, 'visible')
</script>

<template>
  <ElDialog v-model="visible" title="新建退货单" center>
      <ElForm>
        <ElRow gutter="20">
          <ElCol :span="12">
            <ElFormItem label="退货类型">
              <ElSelect style="width: 100%">

              </ElSelect>
            </ElFormItem>
          </ElCol>
          
          <ElCol :span="12">
            <ElFormItem label="退货原因">
              <ElSelect style="width: 100%">

              </ElSelect>
            </ElFormItem>
          </ElCol>

          <ElCol :span="24">
            <ElFormItem label="退货备注">
              <ElInput 
                style="width: 100%" 
                type="textarea" 
                placeholder="退货备注" 
              />
            </ElFormItem>
          </ElCol>

          <ElCol :span="8">
            <ElFormItem label="可退数量">
              <ElInput placeholder="可退数量" />
            </ElFormItem>
          </ElCol>

          <ElCol :span="8">
            <ElFormItem label="退货数量">
              <ElInput placeholder="退货数量" />
            </ElFormItem>
          </ElCol>

          <ElCol :span="8">
            <div class="w-full flex justify-end">
              <ElButton type="primary">保存</ElButton>
              <ElButton>取消</ElButton>
            </div>
          </ElCol>
        </ElRow>
      </ElForm>
  </ElDialog>
</template>
