<template>
    <div v-if="product.checked" class="reason">
        <div v-if="product.isLimitSkn === 'Y'" v-on:click="showTip" class="tip">
            <span class="icon icon-love"></span>
            {{refundData.specialNotice.title}}
        </div>
        <div class="select-reason">
            退货原因

            <span class="icon icon-right"></span>
            <select v-model="product.reason.id" name="reason">
                <option v-for="reason in returnReason" v-bind:value="reason.id" selected="{{reason.id === product.reason.id}}">{{reason.name}}</option>
            </select>
        </div>
        <div class="remark">
            <textarea v-model="product.remark" rows="3" max-length="100" placeholder="退货原因说明"></textarea>
        </div>
        <div v-show="specialReturnReason.indexOf(product.reason.id) !== -1" class="image-list clearfix">
            <div class="image-item" v-for="image in imageListForShow">
                <span v-on:click="deleteImage(image.index)" class="icon icon-close"></span>
                <img v-bind:src="image.path">
            </div>
            <upload v-show="imageListForShow.length < 4" class="image-item" v-bind:image-list="product.imageList"></upload>
        </div>
    </div>
</template>

<script>
    const upload = require('component/tool/upload.vue');

    const getImgHost = function(url) {
        let urlArr = url.split('/'),
            num = urlArr[urlArr.length - 1].substr(1, 1),
            domain = 'static.yhbimg.com/goodsimg';

        url = domain + url;
        if (num === '1') {
            return '//img11.' + url;
        } else {
            return '//img12.' + url;
        }
    };

    module.exports = {
        props: ['product', 'refundData'],
        computed: {
            returnReason() {
                return [{
                    id: 0,
                    name: '请选择'
                }].concat(this.refundData.returnReason);
            },
            specialReturnReason() {
                const list = [];

                this.refundData.specialReturnReason.forEach(reason => {
                    list.push(reason.id);
                });

                return list;
            },
            imageListForShow() {
                const list = [];

                this.product.imageList.forEach((path, index) => {
                    list.push({
                        index: index,
                        path: getImgHost(path) + '?imageView2/2/w/160/h/160'
                    });
                });

                return list;
            }
        },
        methods: {
            showTip() {
                alert(this.refundData.specialNotice.remark);
            },
            deleteImage(index) {
                this.product.imageList.splice(index, 1);
            }
        },
        components: {
            upload
        }
    };
</script>

<style>
    .reason {
        font-size: 32px;
        line-height: 90px;
        background: #f6f6f6;

        &:after {
            content: "";
            display: block;
            width: 100%;
            height: 30px;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }

        .tip {
            position: relative;
            padding: 0 30px;
            font-size: 26px;
            background: #fff;

            .icon {
                margin-right: 5px;
            }

            &:after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -1px;
                width: 690px;
                height: 0;
                border-bottom: 1px solid #eee;
            }
        }

        .select-reason {
            position: relative;
            padding: 0 30px;
            width: 100%;
            height: 90px;
            background: #fff;

            &:after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -1px;
                width: 690px;
                height: 0;
                border-bottom: 1px solid #eee;
            }

            .icon,
            select {
                direction: rtl;
                float: right;
                height: 90px;
                line-height: 90px;
                color: #b0b0b0;
            }
        }

        .remark {
            margin-top: 20px;
            padding: 0 30px;
            background: #fff;
            border-top: 1px solid #eee;

            textarea {
                margin-top: 30px;
                width: 100%;
                font-size: 24px;
                line-height: 40px;
                resize: none;
                border: 0;
            }
        }

        .image-list {
            padding: 30px;
            background: #fff;

            .image-item {
                position: relative;
                float: left;
                margin-right: 20px;
                width: 150px;
                height: 150px;

                &:last-child {
                    margin-right: 0;
                }

                .icon-close {
                    position: absolute;
                    right: -20px;
                    top: -20px;
                    font-size: 40px;
                    color: #fff;
                    background: #b0b0b0;
                    border-radius: 100%;
                    z-index: 2;
                }

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .label-input {
                position: relative;
                width: 150px;
                height: 150px;
                font-size: 150px;

                &:before {
                    content: "\e604";
                }

                input {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 0;
                    height: 0;
                    opacity: 0;
                }
            }
        }
    }
</style>