<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.delivery_status=='AUDITING'?'item-type-one':item.delivery_status=='ACTIVE'?'item-type-two':item.delivery_status == 'AUDIT_NO_PASS'?'item-type-three':'item-type-one'">
                        {{item.delivery_status=='AUDITING'?'审核中':item.delivery_status=='ACTIVE'?'生效中':item.delivery_status=='AUDIT_NO_PASS'?'审核失败':'已失效'}}
                    </view> -->
                    <!-- 	I:未生效,S:已生效,D:已删除,E:已过期 -->
                    <text>{{item.delivery_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">商家活动券名称</text>：{{item.activity_name}}</text>
                        </view>
                        <view class="box-pack-between item-bottom-right flex-y-center">
                            <text><text class="item-bottom-number">添加时间</text>：{{item.create_time}} </text>
                            <text class="iconfont icongengduo"></text>
                        </view>
                    </view>
                </view>
            </navigator>

        </block>

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

        <navigator style="margin-bottom:0" url='./addAliPlan' class="bottom-bar flex-center">
            <button formType="submit" class="flex-center ft28">+添加投放计划</button>
        </navigator>

    </view>

</template>

<script>
    export default {
        data() {
            return {
                list: [],
                page: 1,
                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: {
            bindDetail(id) {
                uni.navigateTo({
                    url: "./aliPlanDetail?id=" + id
                })
            },
            http() {
                let url = "alipaycoupon/plan_index";
                this.request({
                    url,
                    data: {
                        admin_id: uni.getStorageSync("admin_id"),
                        page: this.page,
                        limit: 10,
                    },
                }).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
                        }
                    }
                });
            },
        },
    }
</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>
