<template>
    <view class="content">
        <view class="page-top">
            <uni-search-bar :radius="100" placeholder="搜索" @confirm="search"></uni-search-bar>
        </view>
        <no-none v-if='list.length<=0'></no-none>
        <block v-else>
            <navigator @click="bindDetail(item.id)" style="margin-top: 30rpx;" class="item" v-for="(item,index) of list"
                :key='index'>
                <view class="border-b item-title flex-y-center">
                    <view class="item-type flex-center"
                        :class="item.status=='I'?'item-type-one':item.status=='S'?'item-type-two':item.status=='D'?'item-type-one':'item-type-three'">
                        {{item.status=='I'?'未生效':item.status=='S'?'已生效':item.status=='D'?'已删除':'已过期'}}
                    </view>
                    <!-- 	I:未生效,S:已生效,D:已删除,E:已过期 -->
                    <text>{{item.brand_name}}</text>
                </view>

                <view class="item-bottom flex-y-center">
                    <view class="flex-grow-1">
                        <view class="box-pack-between item-bottom-right">
                            <text><text class="item-bottom-number">模板id</text>：{{item.template_id}}</text>
                        </view>
                        <view class="box-pack-between item-bottom-right flex-y-center">
                            <text><text class="item-bottom-number">总金额</text>：{{item.total_amount}} </text>
                            <text class="iconfont icongengduo"></text>
                        </view>
                    </view>
                </view>
            </navigator>

        </block>

        <view style="height: 90px;"></view>

        <navigator style="margin-bottom:0" url='./addCoupon' class="bottom-bar flex-center">
            <button formType="submit" class="flex-center ft28">+新增优惠劵</button>
        </navigator>

    </view>

</template>

<script>
    export default {
        data() {
            return {
                defaultIndex: 0,
                list: [],
                page: 1,
                $test: this.$test.$test,
                URL: getApp().globalData.URL,
                is_load: false
            }
        },

        onLoad() {
            uni.setNavigationBarTitle({
                title: "抵扣券列表"
            })
        },

        onShow() {
            this.page = 1;
            this.list = [];
            this.http();
        },

        onReachBottom(e) {
            if (!this.is_load) {
                this.page = this.page + 1;
                this.http();
            }
        },

        methods: {
            enit(id) {
                uni.navigateTo({
                    url: "./add?id=" + id
                })
            },
            previewImg(logourl) {
                let URL = this.URL + logourl;
                uni.previewImage({
                    urls: [URL]
                });
            },
            bindDetail(id) {
                uni.navigateTo({
                    url: "./couponDetail?id=" + id
                })
            },
            del(id, index) {
                uni.showModal({
                    title: '提示',
                    content: '是否要删除？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '确定',
                    success: res => {
                        if (res.confirm) {
                            this.request({
                                url: 'tag/delete',
                                data: {
                                    id: id,
                                },
                            }).then(res => {
                                console.log(res, "res")
                                if (res.code === 200 || res.code === "200") {
                                    this.list.splice(index, 1);
                                }
                            }).catch(() => {
                                uni.showToast({
                                    title: res.message,
                                    icon: "none",
                                })
                            });
                        }
                    },
                    fail: () => {},
                    complete: () => {}
                });

            },

            http() {
                let url = "Smdcshop/alipaycoupon";
                this.request({
                    url,
                    data: {
                        admin_id: uni.getStorageSync("admin_id"),
                        page: this.page,
                        limit: 10,
                    },
                    showLoading: true,
                }).then(res => {
                    console.log(res, "res")
                    if (res.code === "200") {
                        this.list = this.list.concat(res.data);
                        if (res.data.length == 0) {
                            this.is_load = true
                        } else {
                            this.is_load = false
                        }
                    }
                });
            },

            del(id, index) {
                uni.showModal({
                    title: '提示',
                    content: '是否要删除？',
                    showCancel: true,
                    cancelText: '取消',
                    confirmText: '确定',
                    success: res => {
                        if (res.confirm) {
                            this.request({
                                url: "tikpush/del",
                                data: {
                                    id: id,
                                },
                            }).then(res => {
                                console.log(res, "res")
                                if (res.code === 200 || res.code === "200") {
                                    this.list.splice(index, 1);
                                }
                            }).catch(() => {
                                uni.showToast({
                                    title: res.message,
                                    icon: "none",
                                })
                            });
                        }
                    },
                    fail: () => {},
                    complete: () => {}
                });
            },


        },
    }
</script>

<style lang="scss">
    page {
        background: #F5F7FA;
    }

    .page-top {
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 99;
        padding: 10rpx 0;
        box-shadow: 0 5rpx 10rpx #f0f0f0;
    } 

    .item {
        width: 690rpx;
        background: #ffffff;
        margin: 0 auto;
        padding: 0rpx 24rpx;
        opacity: 1;
        border-radius: 8rpx;
        box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);

        .item-title {
            opacity: 1;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            color: #333333;
            padding: 24rpx 0;

            .item-type {
                margin-right: 16rpx;
                // width: 78rpx;
                height: 36rpx;
                font-size: 21rpx;
                opacity: 1;
                border-radius: 4rpx;
                color: #FFFFFF;
                border-bottom: 1rpx solid #F1F1F1;
                padding: 0 13rpx;
            }

            .item-type-one {
                background: linear-gradient(134deg, #FF8C1A 2%, #FF8C1A 98%);
            }

            .item-type-two {
                background: linear-gradient(135deg, #4992ff 2%, #61a8fc 97%);
            }

            .item-type-three {
                background: linear-gradient(134deg, #febe07 2%, #ffcc3e 98%);
            }

        }

        .item-bottom {
            font-size: 26rpx;
            padding: 20rpx 0 24rpx 0;
            color: #666666;

            .item-bottom-left {
                width: 90rpx;
                height: 90rpx;
                margin-right: 24rpx;
                min-width: 90rpx;
                margin-bottom: 16rpx;
            }

            .item-bottom-right {
                margin-bottom: 16rpx;

                .item-bottom-number {
                    color: #99A0AD;
                }
            }

        }

    }

    .color-ffa {
        color: #3387FF;
    }

    .icongengduo {
        color: #999;
        font-size: 24rpx;
    }

    .bottom-bar {
        position: fixed;
        bottom: 0px;
        width: 100%;
        z-index: 1000;
        background: #FFFFFF;
        padding: 30rpx 0;
    }

    .bottom-bar button {

        width: 690rpx;
        height: 98rpx;
        opacity: 1;
        background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
        border-radius: 8rpx;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
        margin: 0 auto;


        opacity: 1;
        font-size: 36rpx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;

        color: #ffffff;

    }

    .label {
        min-width: 70rpx;
        height: 44rpx;
        /* line-height: 44rpx; */
        padding: 0 10rpx;
        color: #FFFFFF;
        font-size: 24rpx;
        background-color: #1E9FFF;
        margin-left: 20rpx;
        border-radius: 5rpx;
    }
</style>
