<template>
    <div class="table-card-body-wrapper">
        <div class="table-card-all">
            <!--头像区域-->
            <div ref="top" class="photo">
                <span v-if="!dataTitle.photo || dataTitle.gesch==''">
                    <svg aria-hidden="true" width="90px" height="90px" v-if="dataTitle.gesch=='2'||dataTitle.gesch=='女'">
                        <use xlink:href="#iconuser-girl-copy" width="100%"></use>
                    </svg>
                    <svg aria-hidden="true" width="90px" height="90px" v-else>
                        <use xlink:href="#iconuser-boy-copy" width="100%"></use>
                    </svg>
                </span>
                <div class="photo-img" v-else>
                    <img :src="dataTitle.photo" alt="" width="90px" height="90px">
                </div>
                <Ellipsis :text="dataTitle.name?dataTitle.name:''" :length="3" tooltip/>
                <p>{{dataTitle.pernr}}</p>
            </div>
            <!--内容区域-->
            <div ref="bottom" class="context">
                <p class="context-p">
                    <Icon type="logo-buffer" style="margin-right: 8px"/>
                    <span class="p-ell">{{dataBody.department}}</span>
                </p>
                <p class="context-p">
                    <Icon type="md-person" style="margin-right: 8px"/>
                    <span class="p-ell">{{dataBody.position}}</span>
                </p>
                <p class="context-p">
                    <Icon type="md-mail" style="margin-right: 8px"/>
                    <span class="p-ell">{{dataBody.email}}</span>
                </p>
                <p class="context-p">
                    <Icon type="ios-call" style="margin-right: 8px"/>
                    <span class="p-ell">{{dataBody.mobile}}</span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'bing-table-card',
        data () {
            return {
                dataTitle: {},
                dataBody: {}
            }
        },
        props: {
            data: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        watch: {
            data: {
                deep: true,
                handler: function (value) {
                    this.dataTitle = JSON.parse(JSON.stringify(value));
                    this.dataBody = JSON.parse(JSON.stringify(value));
                }
            },
        },
        created() {
            this.dataTitle = JSON.parse(JSON.stringify(this.data));
            this.dataBody = JSON.parse(JSON.stringify(this.data));
        },
        methods: {
        }
    }
</script>
<style lang="less">
    .table-card-body-wrapper {
        text-align: center;
        border: 1px solid rgba(51, 63, 72, 0.15);
        border-radius: 4px;
        .table-card-all {
            padding: 16px;
            display: flex;
            .photo {
                width: 110px;
                font-weight: bold;
                font-size: 20px;
                p:last-child {
                    font-size: 18px;
                    color: #ffc72c;
                }
                .photo-img {
                    height: 90px;
                    width: 90px;
                    margin-left: 8px;
                    margin-bottom: 8px;
                    img{
                        border-radius: 50%;
                    }
                }
            }
            .context {
                width: calc(~"100% - 120px");
                text-align: left;
                font-size: 16px;
                .context-p {
                    margin: 0 0 8px 10px;
                    position: relative;
                    i{
                        position: absolute;
                        left: -10px;
                        top: 2px;
                    }
                    .p-ell{
                        display: inline-block;
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        height: 24px;
                        white-space: nowrap;
                        padding-left: 8px;
                        width:100%;
                    }
                }
            }
        }
    }
</style>
