<template>
    <el-card>
        <h3>选择规格</h3>
        <div>{{ data }}</div>
        <div v-if="JSON.stringify(specData) != '[]'">
            <div v-for="(item, i) in specData" :key="i">
                <div style="margin-bottom: 20px;">
                    <el-tag class="ml-2" effect="dark" size="large">{{ item.specification }}</el-tag>
                </div>
                <el-radio-group v-model="item.specRadio" size="small" @change="radioChange($event, item)">
                    <el-radio-button v-for="(res, r) in item.values" :key="r" :label="res.value" />
                </el-radio-group>
                <!-- <el-tag v-for="(res, r) in item.values" :key="r" class="ml-2" :type="res.type"
                    @click="productTag(item, res, i, r)">{{ res.value }}
                </el-tag> -->
                <el-divider />
            </div>
        </div>
        <el-button v-if="JSON.stringify(specData) != '[]'" type="primary"
            style="float: right; margin-right: 5%; margin-bottom: 20px;" @click="clickAdd">添加</el-button>
    </el-card>

    <el-card>
        <h3>规格属性</h3>
        <el-table :data="attributes">
            <el-table-column label="规格属性">
                <template #default="scope">
                    <!-- <div>{{ scope.row }}</div> -->
                    <el-tag v-for="(item, i) in scope.row.specifications.length" :key="i">{{
                            scope.row.specifications[i]
                    }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button type="danger" size="small" @click="handleAttributeDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup lang='ts'>
import { ref, computed, watch } from 'vue'

let props = defineProps({
    specData: {
        type: Object,
        default: []
    },
    products: {
        type: Object,
        default: []
    }
})

let emits = defineEmits(['productsData'])

let data = computed(() => {
    if (JSON.stringify(props.specData) != '[]') {
        specData.value = []
        group(props.specData)
    } else {
        specData.value = []
        attributes.value = []
    }
})

let specList = ref([] as any)
let attributes = ref([] as any)

var specData = ref([] as any) //符合条件的数据

watch(specData.value, (newVlaue: any) => {
    if (JSON.stringify(newVlaue) === '[]') {
        specData.value = []
        attributes.value = []
    }
})

let setAttributes = (data: any) => {
    if(data) attributes.value = data
}

// 每组只可以取一个
let radioChange = (e: any, item: any) => {
    // console.log(e, item);
    item.values.forEach((res: any) => {
        if (specList.value.indexOf(res.value) != -1) {
            let s = specList.value.indexOf(res.value)
            if (specList.value[s] != e) {
                specList.value.splice(s, 1)
            }
        }
    })
    if (specList.value.indexOf(e) == -1) specList.value.push(e)
    console.log(specList.value, 'specList');

}

let clickAdd = () => {
    let data = {
        id: attributes.value.length,
        specifications: specList.value,
        price: 0.0,
        number: 0,
        url: "",
    }
    attributes.value.push(data)
    specList.value = []
    specData.value = poty.value
    emits('productsData', attributes.value)
    console.log(attributes.value, '规格属性数据');
}
let handleAttributeDelete = (row: any) => {
    let index = attributes.value.indexOf(row);
    attributes.value.splice(index, 1);
}

// let productTag = (item: any, res: any, i: number, r: number) => {
//     console.log(item, res, i, r);
//     let type = specData.value[i].values[r].type
//     if (type == 'success') {
//         specData.value[i].values[r].type = 'info'
//         if (specList.value.indexOf(res.value) != -1) {
//             let s = specList.value.indexOf(res.value)
//             specList.value.splice(s, 1)
//             console.log(specList.value);
//         }
//     } else {
//         // 判断同一级是否有重复的，只可以取一个
//         item.values.forEach((item: any) => {
//             if (specList.value.indexOf(item.value) != -1) {
//                 let s = specList.value.indexOf(item.value)
//                 specList.value.splice(s, 1)
//                 specData.value[i].values[s].type = 'info'
//             }
//         })
//         specData.value[i].values[r].type = 'success'
//         if (specList.value.indexOf(res.value) == -1) {
//             specList.value.push(res.value)
//             console.log(specList.value);
//         }
//     }
// }
let poty = ref()

// 把相同数据分组
let group = (data: any) => {
    let arr = [] as any //记录相同索引
    let test1 = [...data] // 拷贝
    let list = [] as any // 记录相同value
    let spec = test1[0].specification // 记录specification
    test1.forEach((item: any, i: number) => {
        if (item.specification == test1[0].specification) {
            arr.push(i)
            list.push({
                value: item.value,
                type: 'info'
            })
        }
    });
    let sum = -1
    arr.forEach((index: any) => {
        sum++
        if (arr.length > 1) {
            if (index < 0) {
                index = 0
                test1.splice(index, 1)
            } else {
                index -= sum
                test1.splice(index, 1)
            }
        } else {
            test1.splice(index, 1)
        }
    });
    specData.value.push({
        specification: spec,
        values: list,
        specRadio: ''
    })
    if (test1.length === 0) return poty.value = [...specData.value]
    else group(test1)
}

defineExpose({
    setAttributes
})
</script>
 
<style lang="scss" scoped>
.el-divider--horizontal {
    margin: 12px 0 !important;
}
</style>