<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="140px" label-position="left">
            <el-form-item label="是否消费赠送积分">
                <el-switch v-model.trim="form.enableRewards" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <template v-if="form.enableRewards">
                <el-form-item label="适用群体">
                    <el-radio-group v-model="form.rewardsGroup">
                        <el-radio label="all">全部</el-radio>
                        <el-radio label="vip">仅会员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="消费赠送积分" prop="consumeAmount">
                    <el-input v-model="form.consumeAmount" style="width: 250px;"
                        @input="inputFilterInt($event, 'consumeAmount')">
                        <template slot="prepend">每消费</template>
                        <template slot="append">元赠送1积分</template>
                    </el-input>
                </el-form-item>
            </template>
            <el-form-item label="开启下单积分抵扣" style="margin-top: 50px;">
                <el-switch v-model.trim="form.enableDeduction" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <template v-if="form.enableDeduction">
                <el-form-item label="适用群体">
                    <el-radio-group v-model="form.deductionGroup">
                        <el-radio label="all">全部</el-radio>
                        <el-radio label="vip">仅会员</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="下单实付抵扣门槛" prop="minPaymentAmount">
                    <el-input v-model="form.minPaymentAmount" style="width: 150px;"
                        @input="inputFilterInt($event, 'minPaymentAmount')">
                        <template slot="append">元</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="下单最高抵扣比例" prop="maxDeductionRatio">
                    <el-input v-model="form.maxDeductionRatio" style="width: 150px;"
                        @input="inputFilterInt($event, 'maxDeductionRatio')">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="下单抵扣积分比例" prop="equivalentPoints">
                    <el-input v-model="form.equivalentPoints" style="width: 220px;"
                        @input="inputFilterInt($event, 'equivalentPoints')">
                        <template slot="prepend">1元等于</template>
                        <template slot="append">积分</template>
                    </el-input>
                </el-form-item>
            </template>
            <el-form-item label="开启积分商城" style="margin-top: 50px;">
                <el-switch v-model.trim="form.enablePointsMall" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="显示样式" v-if="form.enablePointsMall">
                <div class="style_wrap">
                    <div class="item style1" :class="{ active: form.browseMode == 'list' }"
                        @click="form.browseMode = 'list'">
                        <div class="row">
                            <div class="cover"></div>
                            <div class="info">
                                <div class="line"></div>
                                <div class="line"></div>
                                <div class="line"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="cover"></div>
                            <div class="info">
                                <div class="line"></div>
                                <div class="line"></div>
                                <div class="line"></div>
                            </div>
                        </div>
                    </div>
                    <div class="item style2" :class="{ active: form.browseMode == 'grid' }"
                        @click="form.browseMode = 'grid'">
                        <div class="row">
                            <div class="cover"></div>
                            <div class="line"></div>
                        </div>
                        <div class="row">
                            <div class="cover"></div>
                            <div class="line"></div>
                        </div>
                        <div class="row">
                            <div class="cover"></div>
                            <div class="line"></div>
                        </div>
                        <div class="row">
                            <div class="cover"></div>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="onSubmitHandle">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { basicSettingGet, basicSettingPost } from '@/api/points.js'
export default {
    data() {
        return {
            loading: false,
            form: {
                id: '',
                rewardsGroup: 'all',
                deductionGroup: 'all',
                enableRewards: 1,
                consumeAmount: "",
                enableDeduction: 1,
                minPaymentAmount: "",
                maxDeductionRatio: "",
                equivalentPoints: "",
                enablePointsMall: 1,
                browseMode: 'list'
            },
            rules: {
                consumeAmount: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                minPaymentAmount: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                maxDeductionRatio: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                equivalentPoints: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted() {
        this.basicSettingGet()
    },
    methods: {
        // 过滤input只能输入整数
        inputFilterInt(e, key) {
            if (!e) return
            setTimeout(() => {
                this.form[key] = e.replace(/[^\d]/g, '')
            }, 50)
        },
        // 提交
        onSubmitHandle() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true
                        this.form.shopId = localStorage.getItem('shopId')
                        await basicSettingPost(this.form)
                        this.loading = false
                        this.$notify({
                            title: '成功',
                            message: `保存成功`,
                            type: 'success'
                        });
                    } catch (error) {
                        this.loading = false
                        console.log(error)
                    }
                }
            })
        },
        // 获取店铺设置
        async basicSettingGet() {
            try {
                const res = await basicSettingGet()
                if (res.id) {
                    this.form = res
                }
            } catch (error) {
                console.log(error);
            }
        }
    }
}
</script>

<style scoped lang="scss">
.style_wrap {
    display: flex;
    width: 350px;
    gap: 50px;

    .item {
        flex: 1;
        padding: 10px;
        border: 1px solid #ddd;
        $color: #3F9EFF;

        &:hover {
            cursor: pointer;
        }

        &.active {
            border-color: $color;
        }

        .cover {
            background-color: $color;
        }

        .line {
            background-color: #D9D9D9;
        }

        &.style1 {
            display: flex;
            flex-direction: column;
            gap: 20px;

            .row {
                flex: 1;
                display: flex;

                .cover {
                    width: 40px;
                    height: 40px;
                }

                .info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                    padding-left: 10px;

                    .line {
                        flex: 1;

                        &:nth-child(1) {
                            width: 80%;
                            flex: 2;
                        }

                        &:nth-child(3) {
                            width: 50%;
                        }
                    }
                }
            }
        }

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

            .row:nth-child(1) {
                grid-area: 1 / 1 / 2 / 2;
            }

            .row:nth-child(2) {
                grid-area: 1 / 2 / 2 / 3;
            }

            .row:nth-child(3) {
                grid-area: 2 / 1 / 3 / 2;
            }

            .row:nth-child(4) {
                grid-area: 2 / 2 / 3 / 3;
            }

            .row {
                display: flex;
                flex-direction: column;

                .cover {
                    flex: 1;
                }

                .line {
                    height: 4px;
                    margin-top: 4px;
                }
            }
        }
    }
}
</style>