<template>
  <AFormPanel
    ref="formPanel"
    v-bind="formPanelProps">
    <template #default="formData">
      <div class="form-items">
        <ElFormItem label="图片" prop="picture">
          <Uploader ref="uploader" v-model:file="formData.picture"/>
        </ElFormItem>
        <ElFormItem label="业务类型" prop="bizType">
          <ElSelect v-model="formData.bizType" disabled placeholder="业务类型">
            <ElOption v-for="item in bizType" :key="item.val" :label="item.txt" :value="item.val"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem v-if="formData.bizType===bizType.HuiShouPin" label="国标码" prop="sn">
          <ElInput v-model="formData.sn" placeholder="国标码"/>
        </ElFormItem>
        <ElFormItem label="分类名称" prop="categoryName">
          <ElInput v-model="formData.categoryName" placeholder="分类名称"/>
        </ElFormItem>
        <ElFormItem label="排序" prop="sort">
          <ElInputNumber v-model="formData.sort" :min="0" controls-position="right" placeholder="排序"/>
        </ElFormItem>
        <ElFormItem label="备注" prop="memo">
          <ElInput v-model="formData.memo" placeholder="备注"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import GoodsCategoryApi from '@/pages/gds/goods-category/goods-category-api.ts'
import Strings from '@/common/utils/strings.ts'
import Uploader from '@/components/uploader/Uploader.vue'
import AFormPanel, {
  type AFormPanelInstance,
  buildFormPanelProps,
} from '@/components/a-form-panel/AFormPanel.tsx'
import { bizType } from '@/pages/gds/goods-category/constants.ts'

const props = withDefaults(defineProps<{
  research?: () => void
  defaultBizType: typeof bizType[number]['val']
}>(), {
  research: () => {
  },
})
const formPanelIns = useTemplateRef<AFormPanelInstance>('formPanel')
const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
const status = ref<'add' | 'modify'>('add')
const formPanelProps = buildFormPanelProps<GoodsCategoryTypes.SearchGoodsCategoryResult>({
  title: '新建产品分类',
  detailsLoader(id?: string) {
    if (Strings.isBlank(id)) {
      status.value = 'add'
      return Promise.resolve({
        bizType: props.defaultBizType,
        sort: 0,
      } as GoodsCategoryTypes.SearchGoodsCategoryResult)
    } else {
      status.value = 'modify'
      return GoodsCategoryApi.detail(id!)
        .then((res) => {
          if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
          return res.data
        })
    }
  },
  doSubmit(data) {
    if (status.value === 'add') {
      return GoodsCategoryApi.add({
        bizType: data.bizType,
        categoryName: data.categoryName,
        sn: data.bizType === bizType.HuiShouPin ? data.sn : undefined,
        picture: data.picture,
        sort: data.sort,
        memo: data.memo,
      })
        .then(props.research)
    } else {
      return GoodsCategoryApi.modify({
        id: data.id,
        bizType: data.bizType,
        categoryName: data.categoryName,
        picture: data.picture,
        sort: data.sort,
        memo: data.memo,
      })
        .then(props.research)
    }
  },
  rules: () => {
    return {
      picture: [ {required: true, message: '请上传图片', trigger: 'blur'} ],
      sn: [ {required: props.defaultBizType === bizType.HuiShouPin, message: '请填写国标码', trigger: 'blur'} ],
      categoryName: [ {required: true, message: '请填写分类名称', trigger: 'blur'} ],
      sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
    }
  },
})
watchEffect(() => {
  formPanelProps.title = status.value === 'add' ? '新建产品分类' : '修改产品分类'
})
defineExpose({
  open(data?: GoodsCategoryTypes.SearchGoodsCategoryResult) {
    formPanelIns.value?.open(data?.id)
  },
})
</script>

<style lang="stylus" scoped>
.form-items {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "picture bizType" \
  "picture categoryName" \
  "picture sort";

  for val, ii in (picture bizType categoryName sort) {
    :deep(.el-form-item) {
      &:nth-child({ii+1}) {
        align-items: start;
        grid-area: val
        if ii == 0 {
          max-width 300px
          .el-form-item__content {
            justify-content center
          }
          .el-form-item__error {
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }

  :deep(.el-form-item) {
    &:last-child:nth-child(2n+1) {
      grid-column: span 2;
      width: 100%;
    }
  }
}
</style>
