<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="Id" prop="id">
          <ElInput v-model="formData.id" placeholder="Id"/>
        </ElFormItem>
        <ElFormItem label="归属用户 Id" prop="userId">
          <ElInput v-model="formData.userId" placeholder="归属用户 Id"/>
        </ElFormItem>
        <ElFormItem label="归属客户 Id" prop="customerId">
          <ElInput v-model="formData.customerId" placeholder="归属客户 Id"/>
        </ElFormItem>
        <ElFormItem label="归属组织 Id" prop="orgId">
          <ElInput v-model="formData.orgId" placeholder="归属组织 Id"/>
        </ElFormItem>
        <ElFormItem label="产品 Id；仅当项目类型为“产品”时有值" prop="goodsId">
          <ElInput v-model="formData.goodsId" placeholder="产品 Id；仅当项目类型为“产品”时有值"/>
        </ElFormItem>
        <ElFormItem label="收费项目类型，QiTa-->其他、ChanPin-->产品、YunFei-->运费" prop="expenseItemCategory">
          <ElInput v-model="formData.expenseItemCategory" placeholder="收费项目类型，QiTa-->其他、ChanPin-->产品、YunFei-->运费"/>
        </ElFormItem>
        <ElFormItem label="付费项名称" prop="expenseItemName">
          <ElInput v-model="formData.expenseItemName" placeholder="付费项名称"/>
        </ElFormItem>
        <ElFormItem label="计费策略；字典代码：expense_strategy，MianFei-->免费、TanXing-->弹性、GuDing-->固定、DanJia-->单价" prop="expenseStrategy">
          <ElInput v-model="formData.expenseStrategy" placeholder="计费策略；字典代码：expense_strategy，MianFei-->免费、TanXing-->弹性、GuDing-->固定、DanJia-->单价"/>
        </ElFormItem>
        <ElFormItem label="计量单位；字典代码：unit，Che-->车、Fang-->方、GongLi-->公里、Dun-->吨" prop="unit">
          <ElInput v-model="formData.unit" placeholder="计量单位；字典代码：unit，Che-->车、Fang-->方、GongLi-->公里、Dun-->吨"/>
        </ElFormItem>
        <ElFormItem label="税率" prop="taxRate">
          <ElInput v-model="formData.taxRate" placeholder="税率"/>
        </ElFormItem>
        <ElFormItem label="单价；单位：元，弹性模式-->每档价格" prop="unitPrice">
          <ElInput v-model="formData.unitPrice" placeholder="单价；单位：元，弹性模式-->每档价格"/>
        </ElFormItem>
        <ElFormItem label="起步价；单位：元，<= 起步量 固定费用" prop="initialPrice">
          <ElInput v-model="formData.initialPrice" placeholder="起步价；单位：元，<= 起步量 固定费用"/>
        </ElFormItem>
        <ElFormItem label="起步量" prop="initialQuantity">
          <ElInput v-model="formData.initialQuantity" placeholder="起步量"/>
        </ElFormItem>
        <ElFormItem label="每档的量" prop="everyQuantity">
          <ElInput v-model="formData.everyQuantity" placeholder="每档的量"/>
        </ElFormItem>
        <ElFormItem label="是否可用；0-->否、1-->是" prop="canuse">
          <ElInput v-model="formData.canuse" placeholder="是否可用；0-->否、1-->是"/>
        </ElFormItem>
        <ElFormItem label="备注" prop="memo">
          <ElInput v-model="formData.memo" placeholder="备注"/>
        </ElFormItem>
        <ElFormItem label="创建人 Id； sys_user.id" prop="creatorId">
          <ElInput v-model="formData.creatorId" placeholder="创建人 Id； sys_user.id"/>
        </ElFormItem>
        <ElFormItem label="修改人 Id； sys_user.id" prop="modifierId">
          <ElInput v-model="formData.modifierId" placeholder="修改人 Id； sys_user.id"/>
        </ElFormItem>
        <ElFormItem label="创建时间" prop="createTime">
          <ElInput v-model="formData.createTime" placeholder="创建时间"/>
        </ElFormItem>
        <ElFormItem label="修改时间" prop="modifyTime">
          <ElInput v-model="formData.modifyTime" placeholder="修改时间"/>
        </ElFormItem>
        <ElFormItem label="是否删除； 0-->未删除、1-->已删除" prop="deleted">
          <ElInput v-model="formData.deleted" placeholder="是否删除； 0-->未删除、1-->已删除"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

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

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const status = ref<'add' | 'modify'>('add')
const formPanelProps = buildFormPanelProps<ExpenseItemTypes.SearchExpenseItemResult>({
  title: status.value === 'add' ? '新建收费项目' : '修改收费项目信息',
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve()
    } else {
      status.value = 'modify'
      return ExpenseItemApi
        .detail(id!)
        .then(res => res.data)
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return ExpenseItemApi
        .add(data)
        .then(props.research)
    } else {
      return ExpenseItemApi
        .modify(data)
        .then(props.research)
    }
  },
  rules: {
    id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
    userId: [ {required: true, message: '请填写归属用户 Id', trigger: 'blur'} ],
    customerId: [ {required: true, message: '请填写归属客户 Id', trigger: 'blur'} ],
    orgId: [ {required: true, message: '请填写归属组织 Id', trigger: 'blur'} ],
    goodsId: [ {required: true, message: '请填写产品 Id；仅当项目类型为“产品”时有值', trigger: 'blur'} ],
    expenseItemCategory: [ {required: true, message: '请填写收费项目类型，QiTa-->其他、ChanPin-->产品、YunFei-->运费', trigger: 'blur'} ],
    expenseItemName: [ {required: true, message: '请填写付费项名称', trigger: 'blur'} ],
    expenseStrategy: [ {required: true, message: '请填写计费策略；字典代码：expense_strategy，MianFei-->免费、TanXing-->弹性、GuDing-->固定、DanJia-->单价', trigger: 'blur'} ],
    unit: [ {required: true, message: '请填写计量单位；字典代码：unit，Che-->车、Fang-->方、GongLi-->公里、Dun-->吨', trigger: 'blur'} ],
    taxRate: [ {required: true, message: '请填写税率', trigger: 'blur'} ],
    unitPrice: [ {required: true, message: '请填写单价；单位：元，弹性模式-->每档价格', trigger: 'blur'} ],
    initialPrice: [ {required: true, message: '请填写起步价；单位：元，<= 起步量 固定费用', trigger: 'blur'} ],
    initialQuantity: [ {required: true, message: '请填写起步量', trigger: 'blur'} ],
    everyQuantity: [ {required: true, message: '请填写每档的量', trigger: 'blur'} ],
    canuse: [ {required: true, message: '请填写是否可用；0-->否、1-->是', trigger: 'blur'} ],
    memo: [ {required: true, message: '请填写备注', trigger: 'blur'} ],
    creatorId: [ {required: true, message: '请填写创建人 Id； sys_user.id', trigger: 'blur'} ],
    modifierId: [ {required: true, message: '请填写修改人 Id； sys_user.id', trigger: 'blur'} ],
    createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
    modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
    deleted: [ {required: true, message: '请填写是否删除； 0-->未删除、1-->已删除', trigger: 'blur'} ],
  },
})

defineExpose({
  open(data?: ExpenseItemTypes.SearchExpenseItemResult) {
    formPanelIns.value?.open(data?.id)
  },
})

</script>

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