<template>
    <view class="container">
        <form @submit="onSubmit">
            <view class="page-block">
                <view class="content">
                    <view class="cell flex  box-pack-between">
                        <view class="title-block required">
                            <text>投放计划名称</text>
                        </view>
                        <view class="desc">
                            <input type="text" name="delivery_name"
                                :value="info.content.delivery_base_info.delivery_name" class="input-box"
                                placeholder="请输入投放计划名称" placeholder-class="desc-placeholder">
                            <view class="tips">请输入4~20个字符</view>
                        </view>
                    </view>

                    <view class="cell flex  box-pack-between">
                        <view class="title-block required">
                            <text>投放计划时间</text>
                        </view>
                        <view class="desc">
                            <uni-datetime-picker v-model="time" type="datetimerange" rangeSeparator="至" />
                        </view>
                    </view>

                    <view class="cell flex  box-pack-between">
                        <view class="title-block required">
                            <text>素材图片</text>
                        </view>
                        <view class="desc">
                            <image :src="baseURL+delivery_image" mode="aspectFit" class="logo-img" v-if="delivery_image"
                                @click="uploadLogo"></image>
                            <image src="@/static/images/upimg.png" mode="aspectFit" class="logo-img" v-else
                                @click="uploadLogo"></image>
                            <view class="tips">上传图片尺寸600*600，支持格式：png、jpg、jpeg、bmp，大小不超过200kb；</view>
                        </view>
                    </view>

                    <view class="cell flex  box-pack-between">
                        <view class="title-block required">
                            <text>商家活动券</text>
                        </view>
                        <view class="desc">
                            <picker :value="activeCouponIndex" :range="couponList" range-key="activity_name"
                                @change="onChooseCoupon">
                                <input type="text" :value="activeCoupon.activity_name" class="input-box"
                                    placeholder="请选择商家活动券" placeholder-class="desc-placeholder" disabled>
                            </picker>
                            <input type="text" :value="activeCoupon.activity_id" name="type"
                                style="position: fixed;left:10000px;top:-10000px;" />
                        </view>
                    </view>
                </view>
            </view>
            <view class="footer-bar">
                <view class="content flex flex-center" style="background: #fff;">
                    <!-- <view class="btn">立即添加</view> -->
                    <button class="btn" hover-class="none" form-type="submit">
                        提交
                    </button>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
    var siteinfo = require('@/siteinfo.js'); //require这个js模块  
    export default {
        data() {
            return {
                id: "",
                store_id: "",
                admin_id: "",
                info: {},
                couponList: [],
                activeCoupon: {},
                baseURL: siteinfo.siteroot,
                delivery_image: "",
                delivery_image_code:"",
                time: [],
            }
        },
        onLoad(e) {

            this.store_id = uni.getStorageSync("store_id");
            this.admin_id = uni.getStorageSync("admin_id")
            if (e.id) {
                this.id = e.id
                this.getInfo()
            }
            this.getCouponList()

        },

        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
            },
            getInfo() {
                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.delivery_image = res.data.content.delivery_image
                        this.delivery_image_code = res.data.content.delivery_base_info.delivery_material
                            .delivery_single_material.delivery_image
                        this.time = [res.data.content.delivery_base_info.delivery_begin_time, res.data.content
                            .delivery_base_info.delivery_end_time
                        ]
                        this.activeCoupon = {
                            activity_id: res.data.content.activity_id,
                            activity_name: res.data.activity_name
                        }

                    } else {
                        uni.showToast({
                            title: res.message,
                            icon: 'none',
                        })
                    }
                }).catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                    })
                });
            },
            getCouponList() {
                this.request({
                    url: "alipaycoupon/plan_coupon",
                    data: {
                        admin_id: this.admin_id,
                    },
                }).then(res => {
                    console.log(res, "res")
                    if (res.code == 200) {
                        this.couponList = res.data
                    } else {
                        uni.showToast({
                            title: res.message,
                            icon: 'none',
                        })
                    }
                }).catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                    })
                });
            },
            onChooseCoupon(e) {
                this.activeCoupon = this.couponList[e.detail.value]
            },
            //上传素材
            uploadLogo() {
                uni.chooseMedia({
                    count: 1,
                    mediaType: ["image"],
                    success: r => {
                        console.log(r)
                        let tempFilePath = r.tempFiles[0].tempFilePath
                        wx.showLoading({
                            title: "上传中..."
                        })
                        uni.uploadFile({
                            url: siteinfo.siteroot +
                                '/index.php?s=/api/alipaycoupon/uplmarketingad',
                            filePath: tempFilePath,
                            name: 'file',
                            formData: {
                                admin_id: this.admin_id,
                                type: "DELIVERY_CHANNEL_PIC"
                            },
                            success: (res) => {
                                console.log(res);
                                wx.hideLoading()
                                if (res.statusCode == 200) {
                                    let data = JSON.parse(res.data)
                                    console.log(data,123)
                                    if (data.code == 200) {
                                        this.delivery_image = data.data.src
                                        this.delivery_image_code = data.data.resource_id
                                    } else {
                                        uni.showToast({
                                            title: data.message,
                                            icon: "none"
                                        })
                                    }
                                } else {
                                    uni.showToast({
                                        title: "上传失败请重试",
                                        icon: "none"
                                    })
                                }
                            },
                            fail: res => {
                                wx.hideLoading()
                            }
                        });
                    }
                })
            },
            onSubmit(e) {
                console.log(e)
                let params = {
                    "admin_id": this.admin_id,
                    "delivery_name": e.detail.value.delivery_name,
                    "delivery_begin_time": this.time[0],
                    "delivery_end_time": this.time[1],
                    "delivery_image": this.delivery_image,
                    "delivery_image_log": this.delivery_image_code,
                    "activity_id": this.activeCoupon.activity_id
                }
                if (this.id) {
                    params.id = this.id
                }

                let errMsg = ""
                if (!params.delivery_name) {
                    errMsg = "请输入投放计划名称"
                } else if (!params.delivery_begin_time || !params.delivery_end_time) {
                    errMsg = "请选择投放计划时间"
                } else if (!params.delivery_image) {
                    errMsg = "请上传素材图片"
                } else if (!params.activity_id) {
                    errMsg = "请选择商家活动券"
                }
                if (errMsg) {
                    uni.showToast({
                        title: errMsg,
                        icon: 'none'
                    })
                    return false
                }
                let url = ['alipaycoupon/plan_add', 'alipaycoupon/plan_edit']
                this.request({
                    url: this.id ? url[1] : url[0],
                    data: params,
                }).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 2000)
                    }
                }).catch((res) => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                });
            },


        }
    }
</script>

<style>
    @import url("../static/css/common.css");

    page {
        background-color: #F4F5F7;
    }

    .timeSelete-left {
        margin: 0 20rpx;
    }

    .timeSelete {
        font-size: 28rpx;
    }

    .desc {
        text-align: right;
    }

    .footer-bar {
        height: 200rpx;
    }

    .footer-bar .content {
        z-index: 1
    }

    .page-block .cell {
        min-height: 60rpx;
        padding: 20rpx 0;
    }

    .page-block .cell .title-block {
        line-height: 60rpx;
    }

    .page-block .cell .input-box {
        height: 60rpx;
        line-height: 60rpx;
    }

    .tips {
        font-size: 24rpx;
        color: #f00;
        text-align: left;
        margin-top: 10rpx;
    }

    .logo-img {
        display: inline-block;
        width: 160rpx;
        height: 160rpx;
    }
</style>
