<template>
  <AFormPanel
    ref="formPanel"
    :details-loader="detailsLoader"
    :do-submit="doSubmit"
    :rules="rules"
    :title="status === 'add' ? '新建客户' : '修改客户'">
    <template #default="{formData}">
      <div class="form-items">
        <ElFormItem label="身份类型" prop="identityCategory">
          <ElSelect v-model="formData.identityCategory" placeholder="身份类型">
            <ElOption v-for="item in identityCategory" :key="item.val" :label="item.txt" :value="item.val"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="客户姓名" prop="customerName">
          <ElInput v-model="formData.customerName" placeholder="客户姓名"/>
        </ElFormItem>
        <ElFormItem label="联系电话" prop="phone">
          <ElInput v-model="formData.phone" placeholder="联系电话"/>
        </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 { type FormRules } from 'element-plus'
import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
import {
  identityCategory,
  settlementWay,
} from '@/pages/cst/customer/constants.ts'
import type { ComponentExposed } from 'vue-component-type-helpers'


const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})
const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
const status = ref<'add' | 'modify'>('add')
const rules = reactive<FormRules<CustomerTypes.SearchCustomerResult>>({
  id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
  userId: [ {required: true, message: '请填写用户', trigger: 'blur'} ],
  identityCategory: [ {required: true, message: '请填写身份类型', trigger: 'blur'} ],
  orgId: [ {required: true, message: '请填写企业信息', trigger: 'blur'} ],
  customerName: [ {required: true, message: '请填写客户姓名', trigger: 'blur'} ],
  phone: [ {required: true, message: '请填写客户联系电话', trigger: 'blur'} ],
  settlementWay: [ {required: true, message: '请填写结算方式', trigger: 'blur'} ],
  manager: [ {required: true, message: '请填写是否管理员', trigger: 'blur'} ],
  creatorId: [ {required: true, message: '请填写创建人', trigger: 'blur'} ],
  modifierId: [ {required: true, message: '请填写修改人', trigger: 'blur'} ],
  createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
  modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
  deleted: [ {required: true, message: '请填写是否删除', trigger: 'blur'} ],
})

function 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)
  }
}

function doSubmit(data: CustomerTypes.SearchCustomerResult) {
  if (status.value === 'add') {
    return CustomerApi.add(data)
      .then(props.research)
  } else {
    return CustomerApi.modify(data)
      .then(props.research)
  }
}


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

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

</style>

