<template>
  <AFormPanel
    ref="formPanel"
    :title="status === 'add' ? '新建产品分类' : '修改产品分类'"
    :details-loader="detailsLoader"
    :do-submit="doSubmit"
    :rules="rules"
  >
    <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" placeholder="业务类型">
            <ElOption v-for="item in bizType" :key="item.val" :label="item.txt" :value="item.val"/>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="分类名称" prop="categoryName">
          <ElInput v-model="formData.categoryName" placeholder="分类名称"/>
        </ElFormItem>
        <ElFormItem label="排序" prop="sort">
          <ElInputNumber v-model="formData.sort" :min="0" 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 { type FormRules } from 'element-plus'
import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
import { bizType } from '@/pages/gds/goods-category/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 uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
const status = ref<'add' | 'modify'>('add')
const rules = reactive<FormRules<GoodsCategoryTypes.SearchGoodsCategoryResult>>({
  bizType: [ {required: true, message: '请填写业务类型', trigger: 'blur'} ],
  categoryName: [ {required: true, message: '请填写分类名称', trigger: 'blur'} ],
  picture: [ {required: true, message: '请上传图片', trigger: 'blur'} ],
  sort: [ {required: true, message: '请填写排序', trigger: 'blur'} ],
})

function detailsLoader(id?: string) {
  if (Strings.isBlank(id)) {
    status.value = 'add'
    return Promise.resolve()
  } else {
    status.value = 'modify'
    return GoodsCategoryApi.detail(id!)
      .then((res) => {
        if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
        return res.data
      })
  }
}

function doSubmit(data: GoodsCategoryTypes.SearchGoodsCategoryResult) {
  if (status.value === 'add') {
    return GoodsCategoryApi.add(data)
      .then(props.research)
  } else {
    return GoodsCategoryApi.modify(data)
      .then(props.research)
  }
}

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

</style>
