<template>
    <div class="container">
        <div class="content">
            <textarea name="message" maxlength="300" placeholder="请描述一下您遇到的问题" v-model="message"></textarea>
            <div class="num">{{message.length}}/300</div>
            <div class="imgList">
                <div class="img" v-for="(item,index) in imgList" :style="{backgroundImage:'url('+item+')'}">
                    <input @change="change($event,index)" ref="file" type="file" accept="image/*">
                </div>
                <div class="img" v-if="imgList.length==0">
                    <img src="@/assets/icon_zhaopian.png" alt="">
                    <input @change="change($event,imgList.length)" ref="file" type="file" accept="image/*">
                </div>
            </div>
            <div class="contact">
                <div class="title">联系方式</div>
                <input type="number" v-model="phone" placeholder="输入您的电话号码">
            </div>
        </div>

        <div class="btn-content">
            <gm-button type='primary' @click="click">确认</gm-button>
        </div>
    </div>
</template>
<script>
import GmButton from '@/components/Button'
import { mapState } from "vuex";
import EXIF from '../exif'
export default {
    data() {
        return {
            message: '',
            phone: '',
            imgList: []
        }
    },
    created() {


    },
    watch: {
        message() {
            if (this.message.length > 300) {
                this.message = this.message.slice(0, 300)
            }
        },
        phone() {
            if (this.phone.length > 11) {
                this.phone = this.phone.slice(0, 11)
            }
        }
    },
    computed: {
        ...mapState(["userInfo"])
    },
    methods: {
        click() {
            if (this.checkPhone(this.phone)) {
                this.$store.commit('updateLoading', true)
                var result = ''
                this.$http.post({
                    url: '/feedback/save',
                    data: {
                        userId: this.userInfo.id,
                        userName: this.userInfo.nickname,
                        remark: this.message,
                        image: this.imgList.toString(),
                        telephone: this.phone
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        this.$alert({ title: '', content: '感谢您的反馈', showCancel: false, }, () => {
                            history.back()
                        })
                    } else {
                        this.$modal.info({ msg: '失败', duration: 1500 })
                    }
                });
            }
            else {
                this.$modal.info({ msg: '手机号格式错误', duration: 1500 })
            }
        },
        change(e, index) {
            this.compress(e.target.files[0]).then(base64 => {
                this.getImg(base64).then((value) => {
                    console.log(value)
                    if (index == this.imgList.length) {
                        this.imgList.push(value)
                    }
                    else {
                        this.$set(this.imgList, index, value)
                    }
                })
            })
        },
        getImg(base64) {

            return new Promise((resolve, reject) => {
                this.$store.commit('updateLoading', true)
                var result = ''
                this.$http.post({
                    url: '/assets/uploadImg',
                    data: {
                        base64: base64
                    }
                }).then(res => {
                    this.$store.commit('updateLoading', false)
                    if (res.success) {
                        resolve(res.error)
                    } else {

                    }
                });
            })
        },
        compress(file) {

            return new Promise((resolve, reject) => {
                this.$store.commit('updateLoading', true)
                if (!file) {
                    reject()
                    return
                }
                var img = new Image()
                img.onload = () => {

                    var w = img.naturalWidth,
                        h = img.naturalHeight,
                        self = this,
                        cvs = document.createElement('canvas'),
                        ctx = cvs.getContext("2d")
                    EXIF.getData(file, function () {
                        var orientation = EXIF.getTag(this, "Orientation")
                        console.log('orientation', orientation)
                        switch (orientation) {
                            case 3:
                                cvs.width = w
                                cvs.height = h
                                ctx.rotate(180 * Math.PI / 180);
                                ctx.drawImage(img, -w, -h, w, h);
                                break;
                            case 6:
                                cvs.width = h
                                cvs.height = w
                                ctx.rotate(90 * Math.PI / 180);
                                ctx.drawImage(img, 0, -h, w, h);
                                break;
                            case 8:
                                cvs.width = h
                                cvs.height = w
                                ctx.rotate(270 * Math.PI / 180);
                                ctx.drawImage(img, -w, 0, w, h);
                                break;
                            case 2:
                                cvs.width = w
                                cvs.height = h
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.drawImage(img, 0, 0, w, h);
                                break;
                            case 4:
                                cvs.width = w
                                cvs.height = h
                                ctx.translate(w, 0);
                                ctx.scale(-1, 1);
                                ctx.rotate(180 * Math.PI / 180);
                                ctx.drawImage(img, -w, -h, w, h);
                                break;
                            case 5:
                                cvs.width = h
                                cvs.height = w
                                ctx.translate(h, 0);
                                ctx.scale(-1, 1);
                                ctx.rotate(90 * Math.PI / 180);
                                ctx.drawImage(img, 0, -h, w, h);
                                break;
                            case 7:
                                cvs.width = h
                                cvs.height = w
                                ctx.translate(h, 0);
                                ctx.scale(-1, 1);
                                ctx.rotate(270 * Math.PI / 180);
                                ctx.drawImage(img, -w, 0, w, h);
                                break;
                            default:
                                cvs.width = w
                                cvs.height = h
                                ctx.drawImage(img, 0, 0, w, h);
                        }
                        var newImageData = cvs.toDataURL('image/jpeg', 0.6);
                        ctx = null
                        cvs = null
                        self.$store.commit('updateLoading', false)
                        resolve(newImageData)
                    })
                }
                img.src = URL.createObjectURL(file)
            })
        }
    },
    components: { GmButton }
}
</script>
<style lang="less" scoped>
.container {
    background: rgba(242, 242, 242, 1);
}
.content {
    background: rgba(255, 255, 255, 1);
    border-radius: 0.12rem;
    margin: 0.2rem 0.3rem 0;
    padding: 0.3rem 0.3rem 0;
    display: flex;
    flex-direction: column;
    min-height: 6.38rem;
    textarea {
        min-height: 2.7rem;
        outline: none;
        border: 0;
        line-height: 0.4rem;
        color: #000;
        font-size: 0.28rem;

        &::-webkit-input-placeholder {
            font-size: 0.26rem;
            color: rgba(170, 172, 173, 1);
        }
    }

    .num {
        align-self: flex-end;
        font-size: 0.26rem;
        color: rgba(249, 93, 48, 1);
        line-height: 0.36rem;
    }

    .imgList {
        margin: 0.1rem 0 0.15rem;
        display: flex;
        flex-wrap: wrap;

        .img {
            margin-bottom: 0.15rem;
            margin-right: 0.2rem;
            position: relative;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 0.08rem;

            img {
                width: 1.4rem;
                height: 1.4rem;
            }
            input {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
            }
        }
    }

    .contact {
        display: flex;
        height: 1.2rem;
        border-top: 0.02rem solid #f2f4f5;
        .title {
            font-size: 0.28rem;
            color: rgba(0, 0, 0, 1);
            line-height: 0.4rem;
            align-self: center;
        }
        input {
            flex-grow: 1;
            text-align: right;
            min-width: 0;
            border: 0;
            outline: none;
            color: #000;
            font-size: 0.28rem;

            &::-webkit-input-placeholder {
                font-size: 0.26rem;
                color: rgba(170, 172, 173, 1);
            }
        }
    }
}

.btn-content {
    margin: 0.8rem 0.3rem;
}
</style>


