<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 v-if="status !== 'add'" label="产品编码" prop="sn">
          <ElInput v-model="formData.sn" placeholder="产品编码" readonly/>
        </ElFormItem>
        <ElFormItem label="产品分类" prop="goodsCategoryId">
          <GoodsCategoryDropTable v-model="formData.goodsCategoryId"/>
        </ElFormItem>
        <ElFormItem label="产品名称" prop="goodsName">
          <ElInput v-model="formData.goodsName" :disabled="status === 'view'" placeholder="产品名称"/>
        </ElFormItem>
        <ElFormItem label="规格" prop="specParams">
          <ElInput v-model="formData.specParams" :disabled="status === 'view'" placeholder="规格"/>
        </ElFormItem>
        <ElFormItem label="排序" prop="sort">
          <ElInputNumber v-model="formData.sort" :disabled="status === 'view'" placeholder="请输入排序"/>
        </ElFormItem>
        <ElFormItem label="计量单位" prop="unit">
          <ADict v-model="formData.unit" :disabled="status === 'view'" dict-key="unit" placeholder="计量单位"/>
        </ElFormItem>
        <ElFormItem label="是否可用" prop="canuse">
          <el-switch v-model="formData.canuse" :disabled="status === 'view'"/>
        </ElFormItem>
        <ElFormItem label="备注" prop="memo">
          <ElInput v-model="formData.memo" :disabled="status === 'view'" placeholder="请输入备注"/>
        </ElFormItem>
      </div>
    </template>
  </AFormPanel>
</template>

<script lang="ts" setup>
import GoodsApi from '@/pages/gds/goods/goods-api.ts'
import Strings from '@/common/utils/strings.ts'
import { type FormRules } from 'element-plus'
import Uploader from '@/components/uploader/Uploader.vue'
import ADict from '@/components/a-dict/ADict.vue'
import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
import GoodsCategoryDropTable from '@/pages/gds/goods-category/GoodsCategoryDropTable.vue'

const props = withDefaults(defineProps<{
  research?: () => void
}>(), {
  research: () => {
  },
})

const formPanelIns = useTemplateRef<InstanceType<typeof AFormPanel>>('formPanel')
const uploaderIns = useTemplateRef<InstanceType<typeof Uploader>>('uploader')
const status = ref<'add' | 'view' | 'modify'>('add')
const rules = reactive<FormRules<GoodsTypes.SearchGoodsResult>>({
  goodsCategoryId: [ {required: true, message: '请填写产品类型', trigger: 'blur'} ],
  sn: [ {required: true, message: '请填写产品编码', trigger: 'blur'} ],
  goodsName: [ {required: true, message: '请填写产品名称', trigger: 'blur'} ],
  specParams: [ {required: true, message: '请填写规格', trigger: 'blur'} ],
  picture: [ {required: true, message: '请填写图片', trigger: 'blur'} ],
  unit: [ {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 GoodsApi
      .detail(id!)
      .then((res) => {
        if (res.data.picture != null) uploaderIns.value?.setDefaultFiles([ res.data.picture ])
        return res.data
      })
  }
}

function doSubmit(data: GoodsTypes.SearchGoodsResult) {
  if (status.value === 'add') {
    return GoodsApi.add(data)
      .then(props.research)
  } else if (status.value === 'modify') {
    return GoodsApi.modify(data)
      .then(props.research)
  }
}

defineExpose({
  open(data: GoodsTypes.SearchGoodsResult = {}) {
    formPanelIns.value?.open(data.id)
  },
})
</script>

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

  :deep(.el-form-item) {
    &:first-child {
      align-items: start;
      grid-area: picture
      max-width 300px

      .el-form-item__content {
        justify-content center
      }
    }

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