<!-- 新增pad选菜页 -->
<template>
    <div>
        <el-dialog :title="`${preview ? '预览' : form.id ? '编辑' : '添加'}平板菜谱`" top="5vh" width="1000px"
            :visible.sync="dialogVisible" :show-close="preview">
            <div class="content" v-loading="pageLoading">
                <div class="editor_wrap" :class="[`type${typeListActive}`]">
                    <template v-if="typeListActive != 6">
                        <div class="btn_wrap" :class="[`div${index + 1}`]" v-for="(item, index) in form.list"
                            :key="index" @click="showSelectGoods(index)">
                            <div class="btn" v-if="!item.id">
                                <i class="icon el-icon-plus"></i>
                            </div>
                            <div class="cover" v-else>
                                <img class="img" :src="item.coverImg">
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="btn_wrap">
                            <div class="btn">
                                <el-button>一键生成菜单</el-button>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="tab" v-if="!preview">
                    <el-radio-group v-model="typeListActive" @change="tabChange">
                        <el-radio-button :label="item.id" v-for="item in typeList" :key="item.id">
                            {{ item.name }}
                        </el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div class="dialog_footer" v-if="!preview">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" :loading="loading" @click="submitHandle">保 存</el-button>
            </div>
        </el-dialog>
        <shopList ref="shopList" radio @success="selectConfirmGoods" />
    </div>
</template>

<script>
import shopList from '@/components/shopList/index.vue'
import { layoutlist, productGroup, productCategoryDetail, productGroupPut } from '@/api/pad.js'
export default {
    components: { shopList },
    props: {
        category: {
            type: [String, Number],
            default: ''
        }
    },
    data() {
        return {
            dialogVisible: false,
            pageLoading: false,
            loading: false,
            activeItem: 0,
            form: {
                id: '',
                list: []
            },
            typeListActive: 1,
            typeList: [],
            preview: false
        }
    },
    mounted() {
        this.layoutlist()
    },
    methods: {
        // 提交
        async submitHandle() {
            try {
                this.loading = true
                let res = null
                if (this.form.id) {
                    await productGroupPut({
                        id: this.form.id,
                        padLayoutId: this.typeListActive,
                        customName: '',
                        productCategoryId: this.category || this.form.list[0].categoryId,
                        shopId: localStorage.getItem("shopId"),
                        sort: 1,
                        remark: '',
                        productIdList: this.form.list.map(item => item.id)
                    })
                } else {
                    res = await productGroup({
                        padLayoutId: this.typeListActive,
                        customName: '',
                        productCategoryId: this.category,
                        shopId: localStorage.getItem("shopId"),
                        sort: 1,
                        remark: '',
                        productIdList: this.form.list.map(item => item.id)
                    })
                }
                this.loading = false
                this.$message.success(this.form.id ? '编辑成功' : '添加成功')
                this.dialogVisible = false
                this.$emit('success')
            } catch (error) {
                this.loading = false
                console.log(error);
            }
        },
        // 获取
        async layoutlist() {
            try {
                const res = await layoutlist()
                this.typeList = res
            } catch (error) {
                console.log(error);
            }
        },
        // 显示选择商品
        showSelectGoods(index) {
            this.activeItem = index
            this.$refs.shopList.show([], this.category)
        },
        // 确认选择商品
        selectConfirmGoods(res) {
            this.$set(this.form.list, this.activeItem, { ...res[0] })
        },
        // 切换tab
        tabChange() {
            this.form.list = []
            if (this.typeListActive != 6) {
                this.init()
            }
        },
        // 初始化
        init() {
            let num = this.typeList.find(item => item.id == this.typeListActive).maximum
            for (let i = 0; i < num; i++) {
                this.form.list.push({})
            }
        },
        // 获取详情
        async productCategoryDetail(id) {
            try {
                this.pageLoading = true
                const res = await productCategoryDetail(id)
                this.pageLoading = false
                this.typeListActive = res.padLayoutId
                this.form.id = res.id

                this.form.list = []
                this.form.list = res.productList
            } catch (error) {
                console.log(error);
            }
        },
        reset() {
            this.form.id = ''
            this.form.list = []
        },
        // 显示 type=1 编辑 type=2预览
        async show(id = '', type = 1) {
            this.reset()
            this.typeListActive = 1
            this.dialogVisible = true
            this.tabChange()
            if (id) {
                await this.productCategoryDetail(id)
            }
            if (type == 2) {
                this.preview = true
            } else {
                this.preview = false
            }
        }
    }
}
</script>

<style scoped lang="scss">
.content {
    .editor_wrap {
        width: 100%;
        height: 560px;

        &.type2 {
            display: flex;
            gap: 10px;
        }

        &.type3 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 10px;
            grid-row-gap: 10px;

            .div1 {
                grid-area: 1 / 1 / 3 / 2;
            }

            .div2 {
                grid-area: 1 / 2 / 2 / 3;
            }

            .div3 {
                grid-area: 2 / 2 / 3 / 3;
            }
        }

        &.type4 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 10px;
            grid-row-gap: 10px;

            .div1 {
                grid-area: 1 / 1 / 2 / 2;
            }

            .div2 {
                grid-area: 1 / 2 / 2 / 3;
            }

            .div3 {
                grid-area: 2 / 1 / 3 / 2;
            }

            .div4 {
                grid-area: 2 / 2 / 3 / 3;
            }
        }

        &.type5 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 10px;
            grid-row-gap: 10px;

            .div1 {
                grid-area: 1 / 1 / 2 / 2;
            }

            .div2 {
                grid-area: 1 / 2 / 2 / 3;
            }

            .div3 {
                grid-area: 1 / 3 / 2 / 4;
            }

            .div4 {
                grid-area: 2 / 1 / 3 / 2;
            }

            .div5 {
                grid-area: 2 / 2 / 3 / 3;
            }

            .div6 {
                grid-area: 2 / 3 / 3 / 4;
            }
        }

        .btn_wrap {
            flex: 1;
            height: 100%;

            .btn {
                height: 100%;
                border: 1px solid #DDDFE6;
                background: #F7F7FA;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    font-size: 40px;
                    color: #DDDFE6;
                }
            }

            .cover {
                height: 100%;
                background: #F7F7FA;
                position: relative;

                .img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    object-fit: cover;
                }
            }
        }

    }

    .tab {
        display: flex;
        justify-content: center;
        padding-top: 20px;
    }
}

.dialog_footer {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}
</style>