<script setup lang="ts">
import { httpList, httpSpecValueall, httpCreateSpecValue } from "/@/api/components/spec"
import { onMounted, ref, shallowRef, computed, watch } from "vue"
import { ElForm, ElMessage } from "element-plus"
import { useVModel } from "@vueuse/core"
import { useTask } from "/@/hooks/core"
import { rules } from "./config"

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

const data = useVModel(props, 'data')
const visible = useVModel(props, 'visible')

const specValue = shallowRef('')
const isUpdate = computed(() => props.index !== -1)
const formRef = ref<InstanceType<typeof ElForm> | null>(null)

const specTask= useTask({ initialData: [] })
const specValueTask = useTask({ initialData: [] })


const createSpecValueTask = useTask({ 
  success() {
    ElMessage.success('规格值添加成功!')
     specValueTask.run(httpSpecValueall({ spec_id: data.value.spec_id }))
    specValue.value = ""
  } 
})

function handleCreateSpecValue(){
  if(!data.value.spec_id){
    ElMessage.warning('请选择规格类型')
    return
  }
  if(specValue.value.trim().length === 0){
    ElMessage.warning('请输入规格值名称')
    return
  }
  createSpecValueTask.run(httpCreateSpecValue({  
    spec_id: data.value.spec_id,
    spec_value: specValue.value
  }))
}


async function confirm(){
 try{
  await formRef.value.validate()
  const { spec_id, spec_value_id } = data.value
  const spec = specTask.data.find(({id}) => spec_id === id)
  const specValue = specValueTask.data.find(({ id }) => spec_value_id === id)

  const specData = {
    spec_id,
    spec_value_id,
    spec_label: spec.spec_name,
    spec_value_label: specValue.spec_value
  }
  emit(isUpdate.value ? 'update' : 'add', specData, props.index)
  visible.value = false
 } catch(err) {
   console.log(err)
 }  
}

onMounted(() => specTask.run(httpList()))

watch(() => data.value.spec_id, (spec_id) => {
  if(spec_id){
    specValueTask.run(httpSpecValueall({ spec_id }))
  }else{
    specValueTask.data = []
    return
  }
}, {
  immediate: true
})
</script>

<template>
  <ElDialog v-model="visible" center :title="`${isUpdate ? '编辑' : '添加'}商品规格值`">
    <ElForm label-width="80px" :rules="rules" :model="data" ref="formRef" v-loading="createSpecValueTask.loading">
      <ElFormItem label="规格类型" prop="spec_id">
        <ElSelect
          v-model="data.spec_id"
          style="width: 100%" 
          placeholder="规格类型" 
          v-loading="specTask.loading"
          clearable       
        >
          <ElOption 
            v-for="item in specTask.data"
            :disabled="item.status === '0'"
            :label="item.spec_name" 
            :value="item.id"
            :key="item.id"
          />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="规格值" prop="spec_value_id">
        <ElSelect
          v-model="data.spec_value_id"
          style="width: 100%" 
          v-if="specValueTask.data.length > 0"
          v-loading="specValueTask.loading"
        >
          <ElOption 
            v-for="item in specValueTask.data"
            :label="item.spec_value"
            :value="item.id"
            :key="item.id"
          />
        </ElSelect>

        <p v-else>暂无规格值,请添加！</p>
      </ElFormItem>

      <div class="flex justify-between">
        <div class="flex">
          <ElInput class="mr-[10px]" v-model="specValue" placeholder="规格值名称,如红色" />
          <ElButton @click="handleCreateSpecValue">新增规格值</ElButton>
        </div>

        <ElButton type="primary" @click="confirm">保存</ElButton>
      </div>
    </ElForm>
  </ElDialog>
</template>
