<template>
    <div v-if="product.checked" class="reason">
        <div class="select-reason">
            <slot name="type">退货原因</slot>

            <span class="icon icon-right"></span>
            <select class="reason" v-model="product.reason.id" name="reason">
                <option v-for="reason in reasons" :key="reason.id" :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="remark" rows="4" max-length="100" placeholder="原因说明"></textarea>
            </div>
            <div class="image-list clearfix">
                <div class="image-item" v-for="image in imageListForShow" :key="image.path">
                    <span @click="deleteImage(image.index)" class="icon icon-close"></span>
                    <img :src="image.path">
                </div>
                <upload v-show="imageListForShow.length < 4" class="image-item" :image-list="product.imageList" :bucket="bucket"></upload>
            </div>
        </template>
    </div>
</template>

<script>
    import upload from 'component/tool/upload.vue';
    import modal from 'common/modal';
    import util from 'common/util';
    import reasonConfig from 'me/return/reason';

    export default {
        props: ['product', 'data'],
        data() {
            return {
                bucket: 'evidenceImages',
                reasons: [],
                specialReasons: [],
                remark: ''
            };
        },
        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: {
            deleteImage(index) {
                this.product.imageList.splice(index, 1);
            }
        },
        components: {
            upload
        },
        watch: {
            remark(val) {
                this.$set(this.product, 'remark', val);
            }
        },
        created() {
            this.reasons = reasonConfig.reasons;
            this.specialReasons = reasonConfig.specialReasons;
        }
    };

</script>

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

        &:after {
            content: "";
            display: block;
            width: 100%;
            height: 30px;
        }

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

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

            .reason {
                margin-right: 25px;
            }
        }
        .remark {
            margin-top: 20px;
            padding: 0 30px;
            background: #fff;
            height: 190px;

            textarea {
                margin-top: 25px;
                width: 100%;
                font-size: 24px;
                line-height: 40px;
                resize: none;
                border: 0;
            }
        }
        .image-list {
            padding: 30px;
            padding-top: 5px;
            background: #fff;

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

                &: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>