<template>
    <view class="container">
        <view class="desc-info" v-if="promo.img || promo.promo_booth_desc">
            <image :src="promo.img" mode="widthFix" class="desc-info-img" @click="showImg(promo.img)"></image>
            <rich-text :nodes="promo.promo_booth_desc"></rich-text>
        </view>
        <form>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">状态</label>
                    <view class="content">
                        {{getStatusName(chaxun.biz_status)}}
                    </view>
                </view>
            </view>
            <view class="form-item" v-if="chaxun.biz_status == 'CREATE_AUDIT_REJECT'">
                <view class="input-block flex box-pack-between">
                    <label class="label">驳回原因</label>
                    <view class="content">
                        <rich-text :nodes="chaxun.reject_reason"></rich-text>
                    </view>
                </view>
            </view>

            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">服务名称</label>
                    <view class="content flex-grow-1 ">
                        <input type="text" v-model="info.servicename" placeholder="请输入"
                            class="input-box text-align-right" />
                    </view>
                </view>
                <view class="tips">≤5个字；名称超字数的需要缩减，例如：高德打车、好师傅维修等；</view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">副标题</label>
                    <view class="content flex-grow-1 ">
                        <input type="text" v-model="info.subhead" placeholder="请输入"
                            class="input-box text-align-right" />
                    </view>
                </view>
                <view class="tips">5-6个字；简要描述或介绍服务功能或者优惠权益，例如：全网极速接驾、上门家具装</view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">卖点标签</label>
                    <view class="content flex-grow-1 ">
                        <input type="text" v-model="info.selling_tag" placeholder="请输入"
                            class="input-box text-align-right" />
                    </view>
                </view>
                <view class="tips">4-5个字；对营销利益点的提炼，例如：极速到家、送货上门、全场5折等；</view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">行动点</label>
                    <view class="content flex-grow-1 ">
                        <input type="text" v-model="info.action_point" placeholder="请输入"
                            class="input-box text-align-right" />
                    </view>
                </view>
                <view class="tips">≤4个字；引导用户点击的文案，例如：去看看、去点餐、去预订等。</view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">logo图</label>
                    <view class="content ">
                        <view class="image-block" :class="{'image-bg':!info.logo}" style="width:180rpx;height:180rpx"
                            @click="uploadFile('logo')">
                            <image :src="baseUrl+info.logo" mode="aspectFit" class="form-img" v-if="info.logo"></image>
                            <image src="../static/images/icon_18.png" mode="aspectFit" class="form-img-add-btn" v-else>
                            </image>
                        </view>
                    </view>
                </view>
                <view class="tips">【提报的logo图需要满足以下要求。<br />
                    ● 图片尺寸：180*180（px）；<br />
                    ● 图片格式：png、jpg静态图片；<br />
                    ● 图片大小：小于等于120kb；<br />
                    ● 图片背景：不可透明；<br />
                    ● 建议使用彩色背景反白logo，在实际展示尺寸中显示更清晰。】</view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">商家素材图（大图）</label>
                    <view class="content ">
                        <view class="image-block" :class="{'image-bg':!info.large_pic}"
                            style="width:257rpx;height:171rpx" @click="uploadFile('large_pic')">
                            <image :src="baseUrl+info.large_pic" mode="aspectFit" class="form-img"
                                v-if="info.large_pic"></image>
                            <image src="../static/images/icon_18.png" mode="aspectFit" class="form-img-add-btn" v-else>
                            </image>
                        </view>
                    </view>
                </view>
                <view class="tips">【大卡图
                    <br />提报的大卡图需要满足以下要求：
                    <br />● 图片尺寸：大卡图514*342 (px)；
                    <br />● 图片格式：场景化图片要求PNG格式，独立元素图片要求JPG格式；
                    <br />● 需要为商品实物/人物/实景图，不允许插画图；
                    <br />● 图片需要体现小程序/服务本身特点，例如：茶饮点餐，图片建议为奶茶商品图。】
                </view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">商家素材图（小图）</label>
                    <view class="content ">
                        <view class="image-block" :class="{'image-bg':!info.small_pic}"
                            style="width:258rpx;height:310rpx;" @click="uploadFile('small_pic')">
                            <image :src="baseUrl+info.small_pic" mode="aspectFit" class="form-img"
                                v-if="info.small_pic"></image>
                            <image src="../static/images/icon_18.png" mode="aspectFit" class="form-img-add-btn" v-else>
                            </image>
                        </view>
                    </view>
                </view>
                <view class="tips">【小卡图
                    <br />提报的小卡图需要满足以下要求：
                    <br />● 图片尺寸：小卡图258*310 (px)；
                    <br />● 图片格式：场景化图片要求PNG格式，独立元素图片要求JPG格式；
                    <br />● 需要为商品实物/人物/实景图，不允许插画图；
                    <br />● 图片需要体现小程序/服务本身特点，例如：茶饮点餐，图片建议为奶茶商品图。】
                </view>
            </view>


     <!-- v-if="['AUDITED','CREATE_AUDIT_REJECT','EDIT_AUDIT_REJECT',''].includes(chaxun.biz_status)" -->
            <view class="sub-btn"
             @click="onSubmit">立即提交</view>
				
				
        </form>
        <view class="is-iphone-x"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                admin_id: '',
                info: {},
                chaxun: {},
                promo: {},
                baseUrl: getApp().globalData.URL
            }
        },
        onLoad() {
            this.admin_id = uni.getStorageSync('admin_id')
            this.getInfo()
        },
        methods: {
            getInfo() {
                this.request({
                    url: 'alipaycoupon/sucai_info',
                    data: {
                        admin_id: this.admin_id
                    }
                }).then(res => {
                    if (res.code == 200) {
                        console.log(res)
                        this.info = res.data.info
                        this.chaxun = res.data.chaxun
                        this.promo = res.data.promo

                    }
                })
            },
            uploadFile(type) {
                uni.chooseMedia({
                    count: 1,
                    mediaType: ['image'],
                    success: (res) => {
                        console.log(res)
                        let tempFilePath = res.tempFiles[0].tempFilePath
                        uni.uploadFile({
                            url: getApp().globalData.URL + '/api/alipaycoupon/upload',
                            filePath: tempFilePath,
                            name: 'file',
                            formData: {
                                type,
                                admin_id: uni.getStorageSync('admin_id')
                            },
                            success: (r) => {
                                console.log(r);
                                if (r.statusCode == 200) {
                                    let data = JSON.parse(r.data)
                                    console.log(data)
                                    if (data.code == 200) {
                                        this.info[type] = data.data.src
                                    } else {
                                        uni.showToast({
                                            title: data.message,
                                            icon: "none"
                                        })
                                    }

                                } else {
                                    uni.showToast({
                                        title: "上传失败，请重试",
                                        icon: "none"
                                    })
                                }
                            }
                        });
                    }
                })
            },
            showImg(src) {
                uni.previewImage({
                    urls: [src]
                })
            },
            getStatusName(status) {
                let name = ""
                switch (status) {
                    case "CREATE_AUDITING":
                        name = "新增审核中"
                        break;
                    case "EDIT_AUDITING":
                        name = "修改审核中"
                        break;
                    case "AUDITED":
                        name = "审核通过"
                        break;
                    case "CREATE_AUDIT_REJECT":
                        name = "新增驳回"
                        break;
                    case "EDIT_AUDIT_REJECT":
                        name = "修改驳回"
                        break;
                }
                return name
            },
            onLeimuChange(e) {
                this.info.category_id = this.leimuList[e.detail.value].code
                this.getCategoryName(this.leimuList[e.detail.value].code)
            },

            onChangeTime(e, name) {
                this.info[name] = e.detail.value
            },
            onSubmit(e) {
                let params = {
                    admin_id: this.admin_id,
                    id: this.info.id,
                    servicename: this.info.servicename,
                    subhead: this.info.subhead,
                    selling_tag: this.info.selling_tag,
                    action_point: this.info.action_point,
                    logo: this.info.logo,
                    large_pic: this.info.large_pic,
                    small_pic: this.info.small_pic,
                }
                this.request({
                    url: 'alipaycoupon/sucai',
                    data: params
                }).then(res => {
                    if (res.code == 200) {
                        uni.showModal({
                            content: "提交成功",
                            showCancel: false,
                            success: (r) => {
                                this.getInfo()
                            }
                        })
                    } else {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        })
                    }
                }).catch(res => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                })

            }
        }
    }
</script>
<style>
    page {
        background-color: #f4f5f6;
    }
</style>
<style lang="scss" scoped>
    @import url("@/static/css/flex.css");


    .container {

        background-color: #f4f5f6
    }

    .desc-info {
        padding: 20rpx;
        font-size: 26rpx;
        line-height: 1.5;
    }

    .desc-info-img {
        display: block;
        width: 100%;
    }

    .text-align-right {
        text-align: right;
    }

    .form-item {
        padding: 20rpx 20rpx;
        font-size: 28rpx;
        line-height: 1.5;
        margin-bottom: 20rpx;
        background: #fff;
        word-break: break-all;

        .input-block {}

        .label {
            flex: none;
            display: block;
            padding-right: 30rpx;
        }

        .content {}

        .input-box {
            width: 100%;
        }

        .tips {
            font-size: 24rpx;
            color: #f00;
            line-height: 1.5;
            border-top: 1rpx solid #f2f2f2;
            margin-top: 20rpx;
            padding-top: 15rpx;
        }

        .image-bg {
            background-color: #f4f5f6;
        }

        .image-block {
            overflow: hidden;
            border-radius: 12rpx;
            position: relative;

            .form-img {
                display: block;
                width: 100%;
                height: 100%;
            }

            .form-img-add-btn {
                display: block;
                width: 100rpx;
                height: 100rpx;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);

            }
        }
    }

    .sub-btn {
        width: 700rpx;
        height: 100rpx;
        background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
        border-radius: 8rpx;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
        text-align: center;
        line-height: 100rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: #fff;
        margin: 0 auto;
    }
</style>
