<template>
    <div class="nus_photo"
        v-if="list && list.length > 0">
        <div class="nu_photo-cont">
            <nu-swiper
                class="nu_swiper"
                :options="myOptions"
                :filterItem="filterItem"
                :active-index.sync="myActiveIndex"
                :list="list">
                <template slot-scope="{ itemData,index }">
                    <slot
                        :itemData="itemData"
                        :index="index">
                        <nu-imgc
                            class="nu_photo-img"
                            :class="[myOptions && myOptions.zoom && myOptions.zoom.containerClass]"
                            :aspect="aspect"
                            :isLazy="isLazy"
                            :lazyOptions="lazyOptions"
                            :className="'nu_zoom-container'"
                            :imgUrl="itemData && itemData.text">
                        </nu-imgc>
                    </slot>
                </template>
            </nu-swiper>
            <slot name="hook_nav"
                v-if="navigation">
                <div class="nu_prevNext">
                    <nu-icon class="nu_swiper-prev" :icon="prevIcon"></nu-icon>
                    <nu-icon class="nu_swiper-next" :icon="nextIcon"></nu-icon>
                </div>
            </slot>
            <div class="nu_desc" v-if="desc">{{ desc }}</div>
        </div>
    </div>
</template>

<script>
import { callFn, extend } from 'nimble-lib';
import UtilTmp from '../_comm/UtilTmp';
import NuSwiper from '../../base/swiper';
import NuIcon from '../../widget/icon';
import NuImgc from '../../widget/img/imgc';
import attrSync from '../../../Mixins/attrSync/attrSync';

export default {
    extends: UtilTmp,
    name: 'NuPhoto',
    components: {
        NuSwiper,
        NuIcon,
        NuImgc
    },
    props: {
        /**
         * 图片列表
         */
        list: {
            type: Array
        },
        /**
         * swiper的参数
         */
        options: {},
        /**
         * 向前滑动的icon
         */
        prevIcon: {
            type: String,
            default: '\ue603'
        },
        /**
         * 向后滑动的icon
         */
        nextIcon: {
            type: String,
            default: '\ue602'
        },

        /**
         * 懒加载参数
         */
        lazyOptions: {},
        /**
         * 是否需要lazy
         */
        isLazy: {},
        // 纵横比
        aspect: {},
        /**
         * 前进后退按钮
         */
        navigation: {},
        /**
         * 分页导航
         */
        pagination: {},
        /**
         * 开启焦距功能
         */
        zoom: {
            type: [Object, Boolean],
            default: false
        },
        /**
         * 过滤方法
         */
        filterItem: {}
    },
    mixins: [
        /**
         * 活动索引
         */
        attrSync('activeIndex', {
            value: {
                type: Number,
                default: 0
            }
        })
    ],
    computed: {
        /**
         * 获取描述信息
         * @returns {String} 返回描述信息
         */
        desc () {
            const _that = this;
            const _aIndex = _that.myActiveIndex || 0;
            const _list = _that.list || [];
            const _item = _list[_aIndex];
            let _res = callFn(_that.filterItem || _item, [_item], _that);
            if (typeof _res === 'string') {
                _res = {
                    desc: _item
                };
            }
            return (_item && _item.desc) || '';
        },
        myOptions() {
            return this._getOptions();
        }
    },
    methods: {
        /**
         * 获取swiper的配置参数
         * @returns {Object} 返回参数
         */
        _getOptions () {
            const _that = this;
            return Object.assign({}, {
                autoplay: false,
                loop: false,
                speed: 400
            }, _that.options, {
                navigation: _filterData(_that.navigation, {
                    nextEl: '.nu_swiper-next',
                    prevEl: '.nu_swiper-prev',
                    disabledClass: 'nu_button-disabled'
                }, {}),
                pagination: _filterData(_that.pagination, {
                    type: 'fraction'
                }, {}),
                zoom: _filterData(_that.zoom, {
                    containerClass: 'nu_zoom-container'
                }, false)
            });

            /**
             * 过滤参数
             * @param {Object} data 需要过滤的参数
             * @param {Object} defaultData 默认值
             * @param {Object} defaultEmpty 默认空值
             * @returns {Object} 返回过滤后的参数
             */
            function _filterData (data, defaultData, defaultEmpty) {
                let _res = data;
                if (data) {
                    if (data instanceof Object) {
                        _res = extend(defaultData || {}, data);
                    } else {
                        _res = defaultData;
                    }
                }
                return _res || defaultEmpty;
            }
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';

.nus_popup{
    &.nu_photo-popup{
        .nu_mask{
            background-color: $nuphoto-bg-color;
        }
    }
}

.nus_photo {
    color: $nuphoto-color;
    width: 100%;
    height: 100%;
    position: relative;
    .nu_photo-cont {
        width: 100%;
        height: 100%;
        padding: 50px 0;
    }
    .nu_prevNext {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        height: 0;
        display: flex;
        justify-content: space-between;
        font-size: $nuphoto-navigation-btn-font-size;
        padding: 0 10px;
        z-index: 2;
    }
    .nu_button-disabled {
        color: $nuphoto-navigation-btn-disabled-color;
    }
    .nu_swiper {
        width: 100%;
        height: 100%;
        position: static;
        .nu_slides{
            display: table;
            table-layout: fixed;
        }
        .nu_slide{
            display: table-cell;
            width: 100%;
            vertical-align: middle;
        }
    }
    .nu_indicator-fraction {
        top: 15px;
        bottom: auto;
    }
    .nu_desc {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
    }
    .nu_photo-img{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .nu_img-wrap {
            height: auto;
        }
        .nu_imgc-img {
            max-width: 100%;
            max-height: 100%;
        }
    }
}
</style>
