<template>
    <div class="app-container">
        <!-- <div class="head-container">
            <el-form :model="query" inline>
                <el-form-item>
                    <el-input v-model="query.shopId" placeholder="请输入店铺ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getTableData">查询</el-button>
                    <el-button @click="resetHandle">重置</el-button>
                </el-form-item>
            </el-form>
        </div> -->
        <div class="head-container">
            <el-button type="primary" icon="el-icon-plus" @click="$refs.addActive.show()">
                添加活动
            </el-button>
            <el-button type="primary" icon="el-icon-plus" @click="$refs.downloadQR.show()">
                下载会员充值二维码
            </el-button>
            <div style="margin-top: 35px; font-size: 16px; color: #333;">
                允许充值自定义金额：<el-switch v-model="shopInfo.isCustom" active-value="1" inactive-value="0" size="large"
                    @change="customStatusChange"></el-switch>
            </div>
        </div>
        <div class="head-container">
            <el-table :data="tableData.data" v-loading="tableData.loading">
                <el-table-column label="店铺ID" prop="shopId"></el-table-column>
                <el-table-column label="充值金额" prop="amount"></el-table-column>
                <el-table-column label="赠送金额" prop="giftAmount"></el-table-column>
                <!-- <el-table-column label="赠送金额" prop="handselNum"></el-table-column> 
                <el-table-column label="是否使用优惠券" prop="isUseCoupon">
                    <template v-slot="scope">
                        {{ scope.row.handselType | handselTypeFilter }}
                    </template>
</el-table-column>
<el-table-column label="排序" sortable prop="sort"></el-table-column> -->
                <el-table-column label="赠送积分" prop="giftPoints"></el-table-column>
                <el-table-column label="是否使用优惠券" prop="isUseCoupon">
                    <template v-slot="scope">
                        <!-- <el-switch v-model="scope.row.isUseCoupon" :active-value="1" :inactive-value="0"
                            @change="statusChange($event, scope.row)" disabled></el-switch> -->
                        {{ scope.row.isUseCoupon == 1 ? '是':'否'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template v-slot="scope">
                        <el-button type="text" icon="el-icon-edit"
                            @click="$refs.addActive.show(scope.row)">编辑</el-button>
                        <!-- <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
                            <el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;"
                                slot="reference">删除</el-button>
                        </el-popconfirm> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="head-container">
            <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
                @current-change="paginationChange" layout="total"></el-pagination>
        </div>
        <addActive ref="addActive" @success="getTableData" />
        <QR ref="downloadQR"></QR>
    </div>
</template>

<script>
import handselTypes from './handselTypes'
import addActive from './components/addActive'
import QR from './components/downloadQR.vue'
import { findActivate, storageupActivate } from '@/api/shop'
import { tbShopInfo, tbShopInfoPut } from "@/api/user";
import dayjs from 'dayjs'
export default {
    components: {
        addActive, QR
    },
    data() {
        return {
            query: {
                shopId: ''
            },
            tableData: {
                data: [],
                page: 0,
                size: 10,
                loading: false,
                total: 0
            },
            shopInfo: {
                isCustom: '0',
            }
        }
    },
    filters: {
        handselTypeFilter(value) {
            return handselTypes.find(item => item.value == value).label
        },
        timeFilter(s) {
            return dayjs(s).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    mounted() {
        this.getTableData()
        this.getShopInfo()
    },
    methods: {
        // 切换状态
        async statusChange(e, row) {
            if (row.couponName) {
                try {
                    this.tableData.loading = true
                    const data = { ...row }
                    data.isUseCoupon = e
                    console.log(data.isUseCoupon)
                    await storageupActivate(data)
                    this.getTableData()
                } catch (error) {
                    console.log(error)
                    this.tableData.loading = false
                }
            } else {
                console.log(22)
                this.$message({
                    message: '请选择优惠劵',
                    type: 'warning'
                });
                return false;
            }

        },
        // 重置查询
        resetHandle() {
            this.query.name = ''
            this.query.type = ''
            this.getTableData()
        },
        // 分页回调
        paginationChange(e) {
            this.tableData.page = e - 1
            this.getTableData()
        },
        // 获取商品列表
        async getTableData() {
            this.tableData.loading = true
            try {
                const res = await findActivate({
                    shopId: localStorage.getItem('shopId')
                })
                this.tableData.loading = false
                this.tableData.data = res
                this.tableData.total = res.length
            } catch (error) {
                console.log(error)
            }
        },
        // 请求店铺信息
        async getShopInfo() {
            try {
                const res = await tbShopInfo(localStorage.getItem('shopId'))
                this.shopInfo = res

                if (this.shopInfo.isCustom == null) {
                    this.shopInfo.isCustom = '0'
                }

                console.log(this.shopInfo);

            } catch (error) {
                console.log(error)
            }
        },
        customStatusChange() {
            this.updateShopInfo()
        },
        async updateShopInfo() {
            await tbShopInfoPut(this.shopInfo)
        }
    }
}
</script>
