<!-- 功能：无数据; 作者：ZXS; 时间：2022年08月29日 14:34:03-->
<template>
    <div id="CommonNoData" class="full-content flex-column-center border-box" :class="[noDataStyle, size]">
        <div class="ps-r flex-column-center">
            <img class="no-data" :src="source.img || noDataArr[type].img">
            <p class="c-08a ft12 ps-a bottom17">
                {{ source.text || noDataArr[type].text }}
            </p>
        </div>
        <button v-if="needRefresh" class="refresh-btn bgc-theme-5 c-theme mt16" @click="refreshPage">立即刷新</button>
        <!-- 自定义按钮 -->
        <button v-if="source.customBtn" class="refresh-btn bgc-theme-5 c-theme mt16" @click="customBtnClick">{{ source.customBtn }}</button>
    </div>
</template>

<script>
export default {
    name: 'CommonNoData',
    components: {},
    props: {
        // 大类
        type: {
            type: String,
            default: 'content'
        },
        // 自定义图片、文字、按钮
        source: {
            type: Object,
            default: () => {
                return {
                    img: '',
                    text: '',
                    customBtn: ''
                };
            }
        },
        // 是否需要刷新
        needRefresh: {
            type: Boolean,
            default: false
        },
        // 传入的样式
        noDataStyle: {
            type: String,
            default: 'ptb50'
        },
        // 传入的尺寸
        size: {
            type: String,
            default: ''
        }
    },
    // 组件状态值
    data() {
        return {
            noDataArr: {
                content: {
                    img: require('../../assets/img/noData/noContent.png'),
                    text: '暂无数据'
                },
                customer: {
                    img: require('../../assets/img/noData/noCustomer.png'),
                    text: '暂无客户信息'
                },
                data: {
                    img: require('../../assets/img/noData/noData.png'),
                    text: '数据加载失败'
                },
                file: { img: require('../../assets/img/noData/noFile.png'),
                    text: '暂无文件'
                },
                indent: {
                    img: require('../../assets/img/noData/noIndent.png'),
                    text: '暂无订单'
                },
                log: { img: require('../../assets/img/noData/noLog.png'),
                    text: '暂无日志数据'
                },
                network: {
                    img: require('../../assets/img/noData/noNetwork.png'),
                    text: '网络出问题'
                },
                people: { img: require('../../assets/img/noData/noPeople.png'),
                    text: '暂无客户信息'
                },
                search: {
                    img: require('../../assets/img/noData/noSearch.png'),
                    text: '搜索暂无结果'
                },
                settle: { img: require('../../assets/img/noData/noSettle.png'),
                    text: '暂无结算数据'
                },
                team: { img: require('../../assets/img/noData/noTeam.png'),
                    text: '暂无团队信息'
                }
            }
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        refreshPage() {
            this.$emit('refreshPage');
        },
        customBtnClick() {
            this.$emit('customBtnClick');
        }
    }
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>
#CommonNoData{
	.no-data {
        width: 300px;
    }
    .bottom17{
        bottom: 17px;
    }
    .refresh-btn {
		min-width: 64px;
        padding: 0 12px;
        height: 32px;
		border-radius: 16px;
		overflow: hidden;
		font-size: 14px;
	}
}
.mini{
    .no-data{
        width: 200px !important;
    }
}
</style>
