<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>
            {{specialNotice.title}}
        </div>
        <div class="select-reason">
            <slot name="type">退货原因</slot>

            <span class="icon icon-right"></span>
            <select v-model="product.reason.id" name="reason">
                <option v-for="reason in reasons" v-bind:value="reason.id" selected="{{reason.id === product.reason.id}}">{{reason.name}}</option>
            </select>
        </div>
        <template v-if="specialReasons.indexOf(product.reason.id) !== -1">
            <div class="remark">
                <textarea v-model="product.remark" rows="3" max-length="100" placeholder="原因说明"></textarea>
            </div>
            <div 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" v-bind:bucket="bucket"></upload>
            </div>
        </template>
    </div>
</template>

<script>
    const upload = require('component/tool/upload.vue');
    const modal = require('common/modal');
    const util = require('common/util');
    const reasonConfig = require('me/return/reason');

    module.exports = {
        props: ['product', 'data'],
        data() {
            return {
                bucket: 'evidenceImages',
                reasons: [],
                specialReasons: [],
                specialNotice: {}
            };
        },
        computed: {
            imageListForShow() {
                const list = [];

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

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

        created() {
            this.$set('reasons', reasonConfig.reasons);
            this.$set('specialReasons', reasonConfig.specialReasons);
            this.$set('specialNotice', reasonConfig.specialNotice);
        }
    };

</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>