<template>
    <div class="nus_comment">
        <nu-scroll
            :list="myList"
            :state.sync="myState"
            :pullUpLoad="myPullUpLoad">
            <template slot-scope="{ list }" slot="hook_group">
                <nu-colview
                    class="nu_comment-group"
                    :gap="gap"
                    :list="list"
                    :filterItem="filterItem">
                    <template slot-scope="{itemData, data}">
                        <com-item
                            class="nu_com-item"
                            v-bind="itemData"
                            :expandTxt="expandTxt"
                            :contractTxt="contractTxt"
                            :status="status"
                            :isShow="isShow"
                            :step="step"
                            :decimal="decimal"
                            :isEdit="isEdit"
                            @imgClick="_onImgClick"
                            @click="_click(data, $event)"
                            @tap="_tap(data, $event)">
                        </com-item>
                    </template>
                </nu-colview>
            </template>
        </nu-scroll>
    </div>
</template>

<script>
import BusinessTmp from '../_comm/BusinessTmp';
import ComItem from './comItem/ComItem';
import NuScroll from '../../layout/scroll';
import NuColview from '../../layout/colview';
import { STATE_TYPE, EVENT_TYPE } from './constants';
export default {
    extends: BusinessTmp,
    name: 'tb-comment',
    components: {
        ComItem,
        NuScroll,
        NuColview
    },
    props: {
        /**
         * 评论列表
         */
        list: {
            type: Array
        },
        /**
         * 间隙
         */
        gap: {
            type: [Number, String],
            default: '11'
        },
        /**
         * 是否支持上拉加载
         */
        pullUpLoad: {
            type: Boolean | Object,
            default () {
                return {
                    threshold: 90
                };
            }
        },
        /**
         * 最多显示评论数
         */
        maxNums: {
            type: Number
        },
        /**
         * 上拉加载状态
         */
        state: {
            type: String,
            default: STATE_TYPE.READY
        },
        /**
         * 扩张的文案
         */
        expandTxt: {
            type: String,
            default: '全文'
        },
        /**
         * 收起的文案
         */
        contractTxt: {
            type: String,
            default: '收起'
        },
        /**
         * 状态
         */
        status: {
            type: Boolean,
            default: false
        },
        /**
         * 是否显示评分
         */
        isShow: {
            type: Boolean
        },
        /**
         * 步长
         */
        step: {
            default: 1
        },
        /**
         * 保留小数/整数位数
         */
        decimal: {
            type: [String, Number],
            default: '1.2'
        },
        /**
         * 是否可以编辑
         */
        isEdit: {
            type: Boolean
        },

        /**
         * 过滤item项数据
         */
        filterItem: {
            type: Function
        }
    },
    data () {
        const _that = this;
        return {
            myState: _that.state,
            myPullUpLoad: _that.pullUpLoad
        };
    },
    computed: {
        /**
         * 获取过滤后的评论列表
         * @returns {Array} 返回评论列表
         */
        myList () {
            const _that = this;
            const _list = _that.list || [];
            let _res = _list;
            const _maxNums = _that.maxNums;
            if (_maxNums || _maxNums + '' === '0') {
                _res = _list.slice(0, _maxNums);
            }
            return _res;
        }
    },
    watch: {
        /**
         * 监听评论列表
         * @param {Array} nowVal 评论列表
         */
        myList (nowVal) {
            const _that = this;
            nowVal = nowVal || [];
            const _maxNums = _that.maxNums;
            if ((_maxNums || _maxNums + '' === '0') &&
                nowVal.length >= _maxNums) {
                _that.myPullUpLoad = false;
            }
        },
        /**
         * 监听下拉加载状态
         * @param { String } nowVal 下拉加载状态
         */
        state (nowVal) {
            this.myState = nowVal;
        },
        /**
         * 监听下拉加载状态
         * @param { String } nowVal 下拉加载状态
         */
        myState (nowVal) {
            const _that = this;
            _that.$emit(EVENT_TYPE.UPDATE_STATE, nowVal);
        }
    },
    methods: {
        /**
         * 当某个图片被点击的回调方法
         * @param {Object} evt 点击项的图片数据
         */
        _onImgClick (evt) {
            this.$emit(EVENT_TYPE.IMG_CLICK, evt);
        },
        /**
         * click事件的回调方法
         * @param {Object} item 数据项
         * @param {Event} evt 事件对象
         */
        _click (item, evt) {
            const _that = this;
            _that._onClick(evt);
            _that.$emit(EVENT_TYPE.ITEM_CLICK, {
                Event: evt,
                data: item
            });
        },
        /**
         * tap事件的回调方法
         * @param {Object} item 数据项
         * @param {Event} evt 事件对象
         */
        _tap (item, evt) {
            const _that = this;
            _that._onTap(evt);
            _that.$emit(EVENT_TYPE.ITEM_CLICK, {
                Event: evt,
                data: item
            });
        }
    }
};
</script>

<style lang="scss">
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';
.nus_comment {
    .nu_list-item {
        padding-top: 10px;
        padding-bottom: 10px;
        @include borderB();
    }
}
</style>
