<script setup lang="ts">
import { computed, ref, watch } from "vue"
import { useVModel } from "@vueuse/core"
import { goodTypeOptions, ladderRules } from "./../config/_options"
import { CategoryQuery } from "/@/components/BasicForm";
import SingleImageUpload from "/@/components/ImageUpload/src/single.vue";
import { ElForm } from "element-plus"

import { httpCatinfo } from "/@/api/sellOut/project";

const emit = defineEmits(['add', 'update'])
const props = defineProps<{ type: string; index: number ;visible: boolean; detail: any }>()

const visible = useVModel(props, 'visible')
const formRef = ref<InstanceType<typeof ElForm>>(null)
const loading = ref(false)

const title = computed(() => {
  const mapTitle = { update: '编辑商品要求', create: '添加商品要求', preview: '查看商品要求' }
  return mapTitle[props.type] || mapTitle['create']
})

const rules = computed(() => {
  const { can, ...rest } = ladderRules;
  return { ...rest, can:[{...can[0], required: Number(data.value.good_type) !== 2 } ]}
})

const initialData = () => ({
  budget_price: '',
  good_name: '',
  good_type: '',
  good_img: '',
  can: [],
  num: 0
}) 

const data = ref(initialData())

watch(() =>visible.value, () => {
  if(!visible.value) return
  data.value = { ...props.detail }
}, 
{ immediate: true})

async function submit(){
  try {
    formRef.value && formRef.value.validate()

    loading.value = true
    for(const index in (data.value.can || [])){
      const id = data.value.can[index]
      const result = await httpCatinfo({ id })
      const { cat_name, id: cat_id } = result.data
      data.value.can[index] = { id: cat_id, name: cat_name }
    }
    loading.value = false

    if(props.type === 'create'){
      emit('add',data.value)
    }else {
      emit('update', { data:data.value, index: props.index })
    }

    visible.value = false
  } catch(err){
    console.log(err)
  }
}
</script>

<template>
  <ElDialog :title="title" width="800px" top="10px" center v-model="visible">
    <ElForm size="small" center :model="data" :rules="rules" ref="formRef" v-loading="loading">
      <ElFormItem label="预算单价" prop="budget_price">
        <div class="flex" style="width:100%">
          <ElInputNumber class="flex-1" v-model="data.budget_price" controls-position="right" :precision="2" :min="0" placeholder="预算单价" />
          <p class="ml-[10px]">元</p>
        </div>
      </ElFormItem>

      <ElFormItem label="购买数量" prop='num'>
        <ElInputNumber 
          class="w-full" 
          style="width:100%" 
          v-model="data.num" 
          controls-position="right"
          placeholder="购买数量" 
          :precision="0" 
          :min="0" 
        />
      </ElFormItem>

      <ElFormItem label="商品类型" prop='good_type'>
        <ElSelect class="w-full" style="width:100%" v-model="data.good_type" placeholder="商品类型">
          <ElOption 
            v-for="opt in goodTypeOptions" 
            :value="opt.value" 
            :label="opt.label" 
          />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="商品分类" prop="can">
        <CategoryQuery v-model="data.can" placeholder="商品分类" />
      </ElFormItem>
      
      <ElFormItem label="商品名称" prop="good_name">
        <ElInput v-model="data.good_name" placeholder="商品名称" />
      </ElFormItem>
      
      <ElFormItem label="商品图片" prop="goog_img">
        <SingleImageUpload v-model="data.good_img" />
      </ElFormItem>
    
      <div class="flex justify-end">
        <ElButton type="primary" @click="submit">保存</ElButton>
      </div>
    </ElForm>
  </ElDialog>
</template>
