<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="showPop(1)" class="update-btn" v-if="info.info.status == 1 || info.info.status == 2 || info.info.status == 3">同步商家券券码 </view>
                    <view @click="showPop(2)" class="update-btn" style="margin-left: 30rpx;" v-if="info.info.status == 2 || info.info.status == 3">提交预算</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.activity_name}}</view>
            </view>

            <view class="flex-y-center home-content-item">
                <text class="home-left-name">活动ID：</text>
                <text>{{info.info.activity_id}}</text>
            </view>

            <view class="flex-y-center home-content-item">
                <text class="home-left-name">卡券类型：</text>
                <text>{{info.content.voucher_type_name}}</text>
            </view>

            <view class="flex-y-center home-content-item">
                <text class="home-left-name">发放时间：</text>
                <text>{{info.content.publish_start_time}}至{{info.content.publish_end_time}}</text>
            </view>

            <view class="flex-y-center home-content-item">
                <text class="home-left-name">商户品牌名称：</text>
                <text>{{info.content.voucher_display_info.brand_name}}</text>
            </view>
            <view class="flex-y-center home-content-item">
                <text class="home-left-name">商户LOGO：</text>
                <image :src="baseURL + info.content.voucher_display_info.brand_logo_url" mode="aspectFit" class="logo"
                    @click="showImg(baseURL + info.content.voucher_display_info.brand_logo_url)">
                </image>
            </view>
            <view class="flex-y-center home-content-item">
                <text class="home-left-name">券详细使用说明：</text>
                <text>{{info.content.voucher_display_info.voucher_description}}</text>
            </view>
            <view class="flex-y-center home-content-item">
                <text class="home-left-name">卡券面额：</text>
                <text>{{info.content.voucher_use_rule.fix_voucher.amount}}</text>
            </view>
            <view class="flex-y-center home-content-item">
                <text class="home-left-name">门槛金额：</text>
                <text>{{info.content.voucher_use_rule.fix_voucher.floor_amount}}</text>
            </view>
            <view class="flex-y-center home-content-item">
                <text class="home-left-name">有效期：</text>
                <text>{{info.content.voucher_use_rule.voucher_valid_period.valid_begin_time}}至{{info.content.voucher_use_rule.voucher_valid_period.valid_end_time}}</text>
            </view>
        </view>
        <uni-popup ref="popup">
            <view class="update-content">
                <view class="title">{{popType == 1?'同步商家券券码(最大上传1000个)':'提交预算(券总预算 = 券码 * 劵面额 )'}}</view>
                <form @submit="onSubUpdate" @reset="formReset">
                    <input :type="popType == 1?'number':'digit'" v-model="updateNum" name="num" placeholder="请输入"
                        class="input-box" />
                    <view class="update-btns">
                        <button @click="hideUpdate" ref="resetBtn" class="btn cancel-btn">取消</button>
                        <button form-type="submit" class="btn confirm-btn">确定</button>
                    </view>
                </form>
            </view>
        </uni-popup>
    </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: {
            showPop(type) {
                this.popType = type
                this.$refs.popup.open('center')
            },
            hideUpdate() {
                this.updateNum = null
                this.$refs.popup.close()
            },
            onSubUpdate(e) {
                console.log(e)
                let params = {
                    admin_id: uni.getStorageSync('admin_id'),
                    coupon_type: 2,
                    id: this.id
                }
                if (this.popType == 1) {
                    params.num = e.detail.value.num
                    if (!params.num) {
                        uni.showToast({
                            title: "请输入商家券券码",
                            icon: "none"
                        })
                        return false
                    }
                } else {
                    params.voucher_quantity = e.detail.value.num
                    if (!params.voucher_quantity) {
                        uni.showToast({
                            title: "请输入提交预算",
                            icon: "none"
                        })
                        return false
                    }
                }

                let url = this.popType == 1 ? 'alipaycoupon/codedeposit' : 'alipaycoupon/ordervoucher'
                this.request({
                    url,
                    data: params,
                }).then(res => {
                    this.hideUpdate()
                    this.http()
                    uni.showModal({
                        content: res.message,
                        showCancel: false
                    })
                }).catch(res => {
                    this.hideUpdate()
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                        duration: 2000,
                        success: (res) => {},
                    })
                })
            },
            getStatusName(status) {
                let name = ""
                switch (status) {
                    case 'FIX_VOUCHER':
                        name = "满减券"
                        break;
                    case 'DISCOUNT_VOUCHER':
                        name = "折扣券"
                        break;
                    case 'SPECIAL_VOUCHER':
                        name = "特价券"
                        break;
                    case 'EXCHANGE_VOUCHER':
                        name = "兑换券"
                        break;
                }
                return name
            },
            http() {
                this.request({
                    url: "alipaycoupon/merchant_coupon_detail",
                    data: {
                        id: this.id,
                    },
                }).then(res => {
                    console.log(res, "res")
                    if (res.code === '200') {
                        this.info = res.data;
                        this.info.content.voucher_type_name = this.getStatusName(res.data.content.voucher_type)
                    }
                }).catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                        duration: 2000,
                        success: (res) => {},
                    })
                });
            },
            showImg(src) {
                uni.previewImage({
                    urls: [src]
                })
            }
        },
    }
</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>
