<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="订单编号" prop="orderSn">
          <ElInput
            v-model="formData.orderSn"
            :disabled="status === 'view'"
            placeholder="订单编号"/>
        </ElFormItem>
        <ElFormItem label="车次" prop="trainNum">
          <ElInput
            v-model="formData.trainNum"
            :disabled="status === 'view'"
            placeholder="车次"/>
        </ElFormItem>
        <ElFormItem label="资金账户" prop="moneyAccountId">
          <ElInput
            v-model="formData.moneyAccountId"
            :disabled="status === 'view'"
            placeholder="资金账户 Id；fin_money_account.id"/>
        </ElFormItem>
        <ElFormItem label="变动前余额" prop="beforeBalance">
          <ElInput
            v-model="formData.beforeBalance"
            :disabled="status === 'view'"
            placeholder="变动前余额"/>
        </ElFormItem>
        <ElFormItem label="变动金额" prop="delta">
          <ElInput
            v-model="formData.delta"
            :disabled="status === 'view'"
            placeholder="变动金额；有正负"/>
        </ElFormItem>
        <ElFormItem label="变动后余额" prop="afterBalance">
          <ElInput
            v-model="formData.afterBalance"
            :disabled="status === 'view'"
            placeholder="变动后余额"/>
        </ElFormItem>
        <ElFormItem label="变动类型" prop="moneyChangeCategory">
          <ElInput
            v-model="formData.moneyChangeCategory"
            :disabled="status === 'view'"
            placeholder="变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付"/>
        </ElFormItem>
        <ElFormItem label="附件地址" prop="fileUrl">
          <ElInput
            v-model="formData.fileUrl"
            :disabled="status === 'view'"
            placeholder="附件地址"/>
        </ElFormItem>
        <ElFormItem label="备注" prop="memo">
          <ElInput
            v-model="formData.memo"
            :disabled="status === 'view'"
            placeholder="备注"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import MoneyFlowApi from '@/pages/fin/money-flow/money-flow-api.ts'
import Strings from '@/common/utils/strings.ts'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})

const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const status = ref<'add' | 'view' | 'modify'>('add')
const formPanelProps = buildFormPanelProps<MoneyFlowTypes.SearchMoneyFlowResult>({
  title: status.value === 'add' ? '新建资金流水' : '修改资金流水信息',
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve()
    } else {
      status.value = 'modify'
      return MoneyFlowApi
        .detail(id!)
        .then(res => res.data)
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return MoneyFlowApi.add(data)
        .then(props.research)
    } else {
      return MoneyFlowApi.modify(data)
        .then(props.research)
    }
  },
  rules: {
    orderSn: [ {required: true, message: '请填写订单编号', trigger: 'blur'} ],
    trainNum: [ {required: true, message: '请填写车次', trigger: 'blur'} ],
    moneyAccountId: [ {required: true, message: '请填写资金账户 Id；fin_money_account.id', trigger: 'blur'} ],
    beforeBalance: [ {required: true, message: '请填写变动前余额', trigger: 'blur'} ],
    delta: [ {required: true, message: '请填写变动金额；有正负', trigger: 'blur'} ],
    afterBalance: [ {required: true, message: '请填写变动后余额', trigger: 'blur'} ],
    moneyChangeCategory: [ {required: true, message: '请填写变动类型；字典代码：money_change_category，ChongZhi-->充值、YingShou-->营收、TuiKuan-->退款、TiaoZhang-->调账、ZhiFu-->支付', trigger: 'blur'} ],
    fileUrl: [ {required: true, message: '请填写附件地址', trigger: 'blur'} ],
    memo: [ {required: true, message: '请填写备注', trigger: 'blur'} ],
  },
})

defineExpose({
  open(data?: MoneyFlowTypes.SearchMoneyFlowResult) {
    formPanelIns.value?.open(data?.id)
  },
})
</script>

<style lang="stylus" scoped>
.form-items {
  grid-template-columns: 1fr 1fr;
}
</style>

