<template>

    <view class="content">

        <view class="headerGetbg"></view>

        <view class="bgf mar-24 home-content">

            <view class="box-pack-between list flex-y-center br">
                <text class="ft32 list-title">基本信息</text>
                <view class="info-btns">
                    <view @click="onReset" class="update-btn" v-if="info.delivery_status == 'INACTIVE'">重投 </view>
                    <view @click="onStop" class="update-btn" style="background:#f00"
                        v-if="info.delivery_status == 'ACTIVE'">停止投放</view>
                </view>
            </view>

            <view class="flex-y-center home-content-item" style="padding-top: 24rpx;">
                <text class="home-left-name">投放计划名称：</text>
                <view style="word-break:break-all;">{{info.content.delivery_base_info.delivery_name}}</view>
            </view>
            <view class="flex-y-center home-content-item" style="padding-top: 24rpx;">
                <text class="home-left-name">状态：</text>
                <view style="word-break:break-all;">{{info.content.delivery_status_name}}</view>
            </view>

            <view class="flex-y-center home-content-item">
                <text class="home-left-name">素材图片：</text>
                <image :src="baseURL + info.content.delivery_image" mode="aspectFit" class="logo"
                    @click="showImg(baseURL + info.content.delivery_image)">
                </image>
            </view>

            <view class="flex-y-center home-content-item">
                <text class="home-left-name">投放计划开始时间：</text>
                <text>{{info.content.delivery_base_info.delivery_begin_time}}</text>
            </view>

            <view class="flex-y-center home-content-item">
                <text class="home-left-name">发放计划结束时间：</text>
                <text>{{info.content.delivery_base_info.delivery_end_time}}</text>
            </view>

            <view class="flex-y-center home-content-item">
                <text class="home-left-name">商家活动券名称：</text>
                <text>{{info.activity_name}}</text>
            </view>
            <view class="flex-y-center home-content-item">
                <text class="home-left-name">添加时间：</text>
                <text>{{info.create_time}}</text>
            </view>


        </view>

    </view>
</template>

<script>
    var siteinfo = require('@/siteinfo.js'); //require这个js模块  
    export default {
        data() {
            return {
                info: {},
                id: '',
                baseURL: siteinfo.siteroot,
                updateNum: null,
                popType: ""
            }
        },

        onLoad(e) {
            this.id = e.id;
            this.http();
        },

        onShow(e) {

        },
        onUnload() {

        },

        onHide() {

        },

        methods: {

            getStatusName(status) {
                let name = ""
                switch (status) {
                    case 'ACTIVE':
                        name = "生效中"
                        break;
                    case 'INACTIVE':
                        name = "失效状态"
                        break;
                    case 'AUDITING':
                        name = "审核中"
                        break;
                    case 'AUDIT_NO_PASS':
                        name = "审核不通过"
                        break;
                }
                return name
            },
            http() {
                this.request({
                    url: "alipaycoupon/plan_info",
                    data: {
                        id: this.id,
                    },
                }).then(res => {
                    console.log(res, "res")
                    if (res.code === '200') {
                        this.info = res.data;
                        this.info.content.delivery_status_name = this.getStatusName(res.data.delivery_status)
                        this.info.create_time = this.$utils.dateFormat('YYYY-mm-dd HH:MM:SS', new Date(this.info
                            .create_time * 1000))
                    }
                }).catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                        duration: 2000,
                        success: (res) => {},
                    })
                });
            },
            showImg(src) {
                uni.previewImage({
                    urls: [src]
                })
            },
            //重投
            onReset() {
                console.log('chongtou')
                uni.redirectTo({
                    url: "./addAliPlan?id=" + this.id
                })
            },
            //停止投放
            onStop() {
                //
                uni.showModal({
                    content: '确定停止投放',
                    success: (r) => {
                        if (r.confirm) {
                            this.request({
                                url: "alipaycoupon/delivery_stop",
                                data: {
                                    admin_id: uni.getStorageSync('admin_id'),
                                    delivery_id: this.info.delivery_id,
                                },
                            }).then(res => {
                                if (res.code == 200) {
                                    uni.showModal({
                                        content: res.message,
                                        showCancel: false,
                                        success: () => {
                                            this.http()
                                        }
                                    })

                                } else {
                                    uni.showToast({
                                        title: res.message,
                                        icon: 'none',
                                    })
                                }
                            }).catch((res) => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                })
                            });
                        }
                    }
                })

            }
        },
    }
</script>

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


    .info-btns {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;

    }

    .home-content {
        width: 690rpx;
        opacity: 1;
        background: #ffffff;
        border-radius: 14rpx;
        box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
        margin: 0 auto;
        position: relative;
        font-size: 28rpx;
        padding: 0 24rpx;
        margin-top: 30rpx;

        .list {
            height: 100rpx;
            color: #999999;

            .list-title {
                color: #000000;
                font-size: 30rpx;
            }

            .update-btn {
                padding: 0 16rpx;
                border-radius: 12rpx;
                background: #1E9FFF;
                color: #fff;
                line-height: 56rpx;
                font-size: 24rpx;
            }
        }

        .home-content-item {
            padding-bottom: 24rpx;

            .home-left-name {
                opacity: 1;
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC-Regular;
                font-weight: 400;
                text-align: left;
                color: #99a0ad;
                min-width: 160rpx;
            }

            .home-left-input {
                border: 1rpx solid #ccc;
                padding: 10rpx;
                word-break: break-all;
                flex: 1;
            }

        }
    }

    .logo {
        display: block;
        width: 100rpx;
        height: 100rpx;
        margin-left: auto;
    }

    .update-content {
        width: 80vw;
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: #fff;

        .title {
            font-size: 28rpx;
            color: #666;
        }

        .input-box {
            width: 100%;
            height: 80rpx;
            border: 1rpx solid #ddd;
            margin: 20rpx 0;
            box-sizing: border-box;
            padding: 0 20rpx;
            border-radius: 20rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: #333;
        }

        .update-btns {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            align-items: center;

            .btn {
                display: block;
                width: 20vw;
                height: 60rpx;
                line-height: 60rpx;
                font-size: 30rpx;

                &::after {
                    border: none;
                }
            }

            .cancel-btn {
                background: #f2f2f2;
            }

            .confirm-btn {
                background-color: #3C94FC;
                color: #fff;
            }
        }
    }
</style>
