<template>
    <view class="image-upload-wrap">
        <b-image-collect
            :url="contentItem.uploadPic.url"
            :tip="contentItem.uploadPic.tip"
            :img-file-size="20 * 1024 * 1024"
            :inputname="contentItem.uploadPic.name"
            :limit="contentItem.uploadPic.limit"
            :imgspan="contentItem.uploadPic.imgspan"
            @change="imageCollectChange($event, form)">
        </b-image-collect>
        <view
            class="bottom-links-wrap c-row">
            <block v-for="(btn,index) in contentItem.buttons">
                <view v-if="btn.callbackUrl"
                    @tap="formTap(btn)"
                    :class="[spanClass, 'c-span-btn',
                    btn.colorClass === ''?'btn-bg-white':'btn-bg-green']">
                    {{btn.linkText}}
                </view>
            </block>
        </view>
    </view>
</template>

<script>
/**
 * @file 问诊-对话上传图片，可传多张
 * @author huanghongwei
 */
import ImageCollect from '../common/image-collect';
import {navigate} from '../../utils/navigate';
import {request} from '../../utils/request';

export default {
    config: {
        component: true
    },
    components: {
        'b-image-collect': ImageCollect
    },
    props: {
        contentItem: {
            'type': Object,
            'default': {
                buttons: []
            }
        },
        isLast: {
            type: Boolean
        }
    },
    data() {
        return {
            picIds: '',
            spanClass: 'c-span' + (
                this.contentItem
                && this.contentItem.buttons
                && this.contentItem.buttons.length ? 12 / this.contentItem.buttons.length : '')
        };
    },
    watch: {
        contentItem(v) {
            return {
                spanClass: 'c-span' + (
                    v.buttons
                    && v.buttons.length ? 12 / v.buttons.length : '')
            };
        }
    },
    created() {
        if (this.contentItem.autoUrl && this.isLast) {
            const time = setTimeout(() => {
                navigate({
                    url: this.contentItem.autoUrl
                });
                clearTimeout(time);
            }, 300);
        }
    },
    methods: {
        formTap(btn) {
            let url = btn.callbackUrl;
            let formdata = {
                picIds: this.picIds
            };
            this.$api.showToast({title: '咨询提交中', icon: 'none'});
            request({
                url,
                method: 'POST',
                data: formdata,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                isNeedLogin: true,
                isFirstScreen: false
            }).then(res => {
                if (res.data.jumpMsUrl) {
                    navigate({
                        url: res.data.jumpMsUrl
                    });
                }
            });
        },
        imageCollectChange(imgsObj, form) {
            let pics = [];
            (imgsObj.images || []).map(el => {
                pics.push({
                    picid: el.picID, // 图片id
                    pic1: el.small, // 缩略图地址
                    pic2: el.origin, // 打开放大图片地址
                    orientation: el.orientation
                });
            });
            this.picIds = '';
            for (let i = 0; i < pics.length; i++) {
                if (i === 0) {
                    this.picIds = this.picIds + pics[i].picid;
                }
                else {
                    this.picIds = this.picIds + ',' + pics[i].picid;
                }
            }
        }
    }
};
</script>

<style>
.image-upload-wrap {
    margin: 6px 0;
}
.c-span {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;
}
.bottom-links-wrap {
    height: 38px;
    margin: 5px 0 0;
    line-height: 38px;
    font-size: 14px;
    text-align: center;
}
.c-span-btn:nth-child(1) {
    margin-right: 10px;
}
.c-span-btn {
    border-radius: 60px;
}
.btn-bg-green {
    color: #fff;
    background: #00c8c8;
}
.btn-bg-white {
    color: #555;
    border: 1px #f1f1f1 solid;
}
.c-span:nth-of-type(2) {
    border-left: 1px solid #f1f1f1;
}

</style>