<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="账号" prop="username">
          <ElInput :model-value="formData.username" disabled placeholder="账号"/>
        </ElFormItem>
        <ElFormItem label="客户姓名" prop="nickname">
          <ElInput v-model="formData.nickname" placeholder="客户姓名"/>
        </ElFormItem>
        <ElFormItem label="所属企业" prop="orgName">
          <ElInput :model-value="formData.orgName ?? '-' " disabled placeholder="所属企业"/>
        </ElFormItem>
        <ElFormItem label="联系电话" prop="phone">
          <ElInput v-model="formData.phone" placeholder="联系电话"/>
        </ElFormItem>
        <ElFormItem label="身份类型" prop="identityCategory">
          <ElSelect :model-value="formData.identityCategory" disabled placeholder="身份类型">
            <ElOption v-for="item in identityCategory" :key="item.val" :label="item.txt" :value="item.val"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="结算方式" prop="settlementWay">
          <ElSelect v-model="formData.settlementWay" placeholder="结算方式">
            <ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
          </ElSelect>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import CustomerApi from '@/pages/cst/customer/customer-api.ts'
import Strings from '@/common/utils/strings.ts'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'
import {
  identityCategory,
  settlementWay,
} from '@/pages/cst/customer/constants.ts'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const status = ref<'add' | 'modify'>('add')
const formPanelProps = buildFormPanelProps<CustomerTypes.SearchCustomerResult>({
  title: '',
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve()
    } else {

      status.value = 'modify'
      return CustomerApi
        .detail(id!)
        .then(res => res.data)
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return CustomerApi.add(data)
        .then(props.research)
    } else {
      return CustomerApi.modify(data)
        .then(props.research)
    }
  },
  rules: {
    nickname: [ {required: true, message: '请填写客户姓名', trigger: 'blur'} ],
    phone: [ {required: true, message: '请填写联系电话', trigger: 'blur'} ],
    settlementWay: [ {required: true, message: '请选择结算方式', trigger: 'blur'} ],
  },
})


defineExpose({
  open(data?: CustomerTypes.SearchCustomerResult) {
    formPanelIns.value?.open(data?.id)
    formPanelProps.title = status.value === 'add' ? '新建客户' : '修改客户信息'
  },
})
</script>

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

</style>

