<template>
    <div>
        <el-dialog title="添加分组" :visible.sync="dialogVisible" @close="reset">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
                <el-form-item label="分组名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入分组名称"></el-input>
                </el-form-item>
                <el-form-item label="选择商品">
                    <div>
                        <el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show([...productIds])">
                            添加商品
                        </el-button>
                    </div>
                    <div class="shop_list">
                        <div class="item_wrap" v-for="(item, index) in productIds" :key="item.id"
                            @click="productIds.splice(index, 1)">
                            <div class="item" :data-index="index + 1">
                                <el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
                            </div>
                            <div class="name">{{ item.name }}</div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="分组状态">
                    <el-radio-group v-model="form.isShow">
                        <el-radio :label="1">启用</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分组排序">
                    <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
            </span>
        </el-dialog>
        <shopList ref="shopListRef" @success="slectShop" />
    </div>
</template>

<script>
import { tbProductGroupPost, tbProductGroupPut, productListGet } from '@/api/shop'
import shopList from '@/components/shopList'
export default {
    components: {
        shopList
    },
    data() {
        return {
            dialogVisible: false,
            loading: false,
            form: {
                id: '',
                name: '',
                isShow: 1,
                sort: 0,
                productIds: [],
                shopId: localStorage.getItem('shopId')
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            },
            productIds: []
        }
    },
    methods: {
        slectShop(res) {
            if (this.productIds.length) {
                res.map(async item => {
                    if (!await this.checkShop(item.id)) {
                        this.productIds.push({ ...item })
                    }
                })
            } else {
                this.productIds = res
            }
        },
        // 判断是否存在重复商品
        checkShop(id) {
            let falg = false
            this.productIds.map(item => {
                if (item.id == id) {
                    falg = true
                }
            })
            return falg
        },
        onSubmitHandle() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    this.loading = true
                    try {
                        this.form.productIds = this.productIds.map(item => item.id);
                        let res = null
                        if (!this.form.id) {
                            await tbProductGroupPost(this.form)
                        } else {
                            await tbProductGroupPut(this.form)
                        }
                        this.loading = false
                        this.$emit('success', res)
                        this.close()
                        this.$notify({
                            title: '成功',
                            message: `${this.form.id ? '编辑' : '添加'}成功`,
                            type: 'success'
                        });
                    } catch (error) {
                        console.log(error)
                    }
                }
            })
        },
        async getProduts() {
            try {
                const res = await productListGet(this.form.id)
                this.productIds = res
            } catch (error) {
                console.log(error)
            }
        },
        show(obj) {
            if (obj && obj.id) {
                this.form.id = obj.id
                this.form.isShow = obj.isShow
                this.form.name = obj.name
                this.form.sort = obj.sort
                this.form.productIds = obj.productIds
                this.getProduts()
            }
            this.dialogVisible = true
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form.isShow = 1
            this.form.name = ''
            this.form.sort = 0
            this.form.productIds = []
            this.productIds = []
        }
    }
}
</script>

<style scoped lang="scss">
.shop_list {
    display: flex;
    flex-wrap: wrap;

    .item_wrap {
        $size: 80px;

        .item {
            $radius: 4px;
            width: $size;
            height: $size;
            border-radius: $radius;
            overflow: hidden;
            position: relative;
            margin-right: 10px;
            margin-top: 10px;

            &:hover {
                cursor: pointer;
            }

            &::after {
                content: attr(data-index);
                font-size: 12px;
                height: 20px;
                display: flex;
                padding: 0 10px;
                border-radius: 0 0 $radius 0;
                align-items: center;
                background-color: rgba(0, 0, 0, 0.3);
                backdrop-filter: blur(10px);
                color: #fff;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
            }

            &::before {
                content: '删除';
                font-size: 12px;
                width: 100%;
                height: 20px;
                display: flex;
                padding: 0 10px;
                align-items: center;
                justify-content: center;
                background-color: rgba(0, 0, 0, 0.3);
                backdrop-filter: blur(10px);
                color: #fff;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 10;
                transition: all .1s ease-in-out;
            }
        }

        .name {
            width: $size;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>