<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-10-23 16:42:06
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-12-25 15:16:49
 * @FilePath: \housekeeping-admin\src\views\decorate\component\widgets\sticky-category\add-category.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <div>
            <del-wrap class="max-w-[400px]" v-for="(item, index) in modelValue" :key="index" @close="handleDelete(index)">
                <div class="bg-fill-light flex w-full p-4 mb-4 flex-col">
                    <div class="flex">
                        <span class="text-tx-regular flex-none mr-3 w-[84px] text-right">选择分类</span>
                        <el-cascader
                            class="w-full ls-input"
                            v-model="item.categoryId"
                            :options="categoryData"
                            :props="optionProps"
                            clearable
                            @change="val => handleChange(val, index)"
                        />
                    </div>

                    <div class="flex mt-[18px]">
                        <span class="text-tx-regular flex-none mr-3">展示服务数量</span>
                        <el-input v-model="item.sliceNum" placeholder="请输入" maxlength="5" />
                    </div>
                </div>
            </del-wrap>
        </div>
        <div>
            <el-button type="primary" @click="handleAdd">添加</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
import { ref, reactive } from 'vue'
import { apiCategoryLists } from '@/api/service/category'

const props = defineProps({
    modelValue: {
        type: Array as PropType<any[]>,
        default: () => []
    },
    max: {
        type: Number,
        default: 4
    },
    min: {
        type: Number,
        default: 1
    }
})

interface Lists {
    name: string
    id: number | string
}
const categoryData = ref<Array<Lists> | null>([])
// 获取分类通用列表
const getCategoryLists = async (): Promise<void> => {
    const res: any = await apiCategoryLists({})
    categoryData.value = res.lists
}
getCategoryLists()
const optionProps = reactive({
    multiple: false,
    checkStrictly: false,
    label: 'name',
    value: 'id',
    children: 'sons',
    emitPath: false
})

const handleAdd = () => {
    if (props.modelValue?.length < props.max) {
        props.modelValue.push({
            categoryId: '',
            sliceNum: ''
        })
    } else {
        feedback.msgError(`最多添加${props.max}个`)
    }
}
const handleDelete = (index: number) => {
    // if (props.modelValue?.length <= props.min) {
    //     return feedback.msgError(`最少保留${props.min}个`)
    // }
    props.modelValue.splice(index, 1)
}
const handleChange = (val, ind) => {
    console.log('val, ind', val, ind)
    const obj = categoryData.value?.find(i => i.id == val)
    console.log('obj', obj)
    props.modelValue[ind].categoryName = obj?.name
}
</script>

<style lang="scss" scoped></style>
