<template>
    <div id="more-skin" class="more" v-show="isShow">
        <div class="swiper-container" ref="moreList">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <ul class="list">
                        <li class="item" v-if="channelInfo.isSendRed">
                            <a class="icon-red" href="javascript:;" @click="_sendRed"></a>
                            <div class="title">红包</div>
                        </li>
                        <li class="item" v-if="corpId != 1421">
                            <a class="icon-personal" href="javascript:;" @click="_personal"></a>
                            <div class="title">提现</div>
                        </li>
                        <li class="item">
                            <input type="file" style="display: none" ref="file" @change="_uploadImg" accept="image/png,image/jpeg,image/jpg">
                            <a class="icon-upload" @click="_uplaod" href="javascript:;"></a>
                            <div class="title">图片</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="swiper-pagination" style="bottom: -2px;" ref="morePagination"></div>
        </div>
    </div>
</template>

<script>
    import {sendPhoto,sendPhotoByWeixin} from '@/plugins/API/apiAll'
    import UserAgent from '@/plugins/UserAgent/index'

    export default {
        props: {
            isShow: {},
            type: {},
            corpId: {},
            channelInfo: {},
            userInfo: {},
            jumpUrls: {},
        },
        data() {
            return {
                swiper: null
            }
        },
        methods: {
            _initSwiper(){
                if(!this.swiper){
                    let option = {
                        direction: 'horizontal',
                        pagination: {
                            el: this.$refs.morePagination
                        }
                    }
                    this.swiper = new this.$swiper(this.$refs.moreList, option)
                }
            },
            _sendRed(){
                if(!this.userInfo.id){
                    this.$layer.msg('请登录');
                    this.$Bus.$emit('bus-showLogin', true);
                }else{
                    this.$Bus.$emit('bus-remEnclosure')
                    window.location.href = this.jumpUrls.pay_redPacket;
                }
            },
            _personal(){
                if(!this.userInfo.id){
                    this.$layer.msg('请登录');
                    this.$Bus.$emit('bus-showLogin', true);
                }else{
                    this.$Bus.$emit('bus-remEnclosure')
                    window.location.href = this.jumpUrls.center_wallet;
                }
            },
            _uploadImg(e){
                let _this = this;
                let input = e.target;
                if(input.value==''){
                    return false;
                }
                if(input.files && input.files[0]) {
                    let reader = new FileReader();
                    reader.onload = function(evt) {
                        _this._createCanvas(evt.target.result);

                        input.value = ''
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            },
            _createCanvas(src){
                let _this = this;
                let canvas = document.createElement('canvas');
                let cxt = canvas.getContext('2d');
                let img = new Image();
                img.src = src;
                let maxW = window.innerWidth > 300 ? window.innerWidth : 300;
                let maxH = window.innerHeight > 300 ? window.innerHeight : 300;
                img.onload = function() {
                    let w=img.width;
                    let h=img.height;
                    if(w>maxW||h>maxH){
                        let p=w/maxW>h/maxH?w/maxW:h/maxH;
                        w=img.width/p;
                        h=img.height/p;
                        img.width=w;
                        img.height=h;
                    }
                    canvas.width=w;
                    canvas.height=h;
                    cxt.drawImage(img, 0, 0,w,h);
                    let newsrc=canvas.toDataURL("image/jpeg", 0.9);
                    _this._sendPhoto(newsrc);
                }
            },
            _uplaod(){
                let _this = this;
                if(UserAgent.isWx()){
                    let wx = window.wx;
                    wx.chooseImage({
                        count: 1,
                        sizeType: ['original', 'compressed'],
                        sourceType: ['album', 'camera'],
                        success(res) {
                            let localIds = res.localIds;
                            wx.uploadImage({
                                localId: localIds[0],
                                success(e) {
                                    _this._sendPhotoByWeixin(e)
                                },
                                fail() {
                                    _this.$layer.msg('图片上传失败(╬￣皿￣)')
                                }
                            });
                        }
                    });
                }else{
                    this.$refs.file.click()
                }
            },
            async _sendPhoto(src){
                if(!src){
                    return false;
                }
                const res = await sendPhoto({
                    uin: this.channelInfo.uin,
                    channelId: this.channelInfo.id,
                    img: src,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.$layer.msg('已提交审核，请耐心等待');
                }
            },
            async _sendPhotoByWeixin(e){
                const res = await sendPhotoByWeixin({
                    uin: this.channelInfo.uin,
                    channelId: this.channelInfo.id,
                    mediaId: e.serverId,
                    cname: this.channelInfo.cname
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.$layer.msg('已提交审核，请耐心等待');
                }
            },
        },
        watch: {
            isShow(){
                this.$nextTick(() => {
                    this._initSwiper();
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .more{
        position: relative;
        height: 110px;
        padding: 5px;

        .swiper-container{
            width: 100%;
            height: 100%;

            .swiper-slide{
                height: 90px;
                text-align: center;

                .list{
                    display: flex;

                    .item{
                        flex: 0 0 auto;
                        width: 25%;

                        a{
                            display: block;
                            margin: auto;
                            width: 62px;
                            height: 62px;
                            background-color: #F9F9F9;
                            border-radius: 5px;
                            background-position: center center;
                            background-size: 35px auto;
                            background-repeat: no-repeat;

                            &.icon-red{
                                background-image: url("./img/red.png");
                            }
                            &.icon-personal{
                                background-image: url("./img/personal.png");
                            }
                            &.icon-upload{
                                background-image: url("./img/upload.png");
                            }
                        }
                        .title{
                            margin-top: 8px;
                            color: #707377;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
</style>
