<script setup lang="ts">
import BasicDescriptions from "/@/components/BasicDescriptions"
import { useDetail } from "/@/hooks/core/useDetail"
import { NumberInput } from "/@/components/Input"
import { goodColumns } from "./config/columns"
import { ref } from "vue"

import { 
  ElFormItem, 
  ElForm, 
  ElButton, 
  ElSelect, 
  ElOption, 
  ElTable, 
  ElTableColumn, 
  ElCollapseItem, 
  ElCollapse, 
  ElTabPane, 
  ElTabs 
} from "element-plus"


const { id, isDetail, title, collapses } = useDetail({ baseName: '调整单', collapseLen: 2 });


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

</script>

<template>
  <div class="padding__container">
    <ElTabs>
      <ElTabPane :label="title">
        <ElCollapse v-model="collapses">
          <ElCollapseItem :title="title" name="1">
            <ElForm label-width="160px">
              <ElFormItem label="计提明细">
                <BasicDescriptions 
                  style="margin-left: 40px" 
                  :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="税后单价" />
                </ElTable>
              </ElFormItem>

              <ElFormItem label="调整金额" prop="amount">
                <NumberInput v-model="formData.amount"  placeholder="调整金额" />
              </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">保存</ElButton>
              </div>
            </ElForm>
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>
    </ElTabs>
  </div>
</template>
