<template>
    <div class="portrait-style">
        <a-avatar slot="avatar" :src="imgUrl" @click="showMessage"></a-avatar>
    </div>
</template>
<script>
    /**
     * 导航头像组件
     * src
     */
    import interConfig from '../api/commonInter.js';
    import {Avatar} from 'ant-design-vue';
    import BaseConfig from '../../../global-llibs/base-config'
    import StaticParams from '../../../global-llibs/staticParams';

    export default {
        data() {
            return {
                imgUrl: this.$store.state.userStore.portraitUrl,
            }
        },
        props: ['personId'],
        created() {
            if(this.$props.personId !== ""){
                this.getImgSrc(this.$props.personId)
            }
        },
        methods: {
            showMessage() {
                this.$emit('showMessage')
            },
            getImgSrc(personId) {
                let param = {
                    person_id: personId,
                    identity_id: 5
                }
                this.InterfaceConfig.callInterface([{
                    url: interConfig.getPersonTxBy.url,
                    params: param,
                    method: interConfig.getPersonTxBy.method,
                    isTestLogin: interConfig.getPersonTxBy.isTestLogin,
                }], (result) => {
                    // console.log('获取头像------', result)
                    if (result[0].data.file_id !== "") {
                        //this.imgUrl = result[0].data.file_id + ',' + result[0].data.extension
                        let url = StaticParams.getThumbUrl(result[0].data.file_id + "." + result[0].data.extension, 100, 100, 100);
                        this.imgUrl = url;
                    }
                })
            },
        },
        watch: {
            personId: function (newVal) {
                this.getImgSrc(newVal)
            },
            '$store.state.userStore.portraitUrl': function (newVal,oldVal) {
                this.imgUrl = newVal;
            },
        },
        components: {
            AAvatar: Avatar
        }
    }
</script>
<style scoped lang="scss">
    .portrait-style {
        display: flex;
        justify-content: center;
        align-items: center;
        /*cursor:pointer;*/
        .ant-avatar {
            width: 32px;
            height: 32px;
        }
    }
</style>