<template>
    <div class="section-member-node">
        <TreeNode
            height="auto"
            :showExpand="false"
            :showExpandIcon="false"
            :checked="checked"
            @handleChecked="handleChecked">
            <template slot="content">
                <div class="section-member-node-content" :class="{'only-member-name': !data.orgName && !deptAndDuty}">
                    <Avatar 
                        size="32px"
                        fontSize="12px"
                        :name="data.userName || data.name"
                        :memberId="data.memberId"
                        :path="data.avatar"/>
                    <div class="section-member-node-info">
                        <div class="section-member-node-name">
                            {{data.userName || data.name}}
                            <span 
                                v-if="data.security"
                                :class="`section-member-node-security ${data.security || 'COMMON'}`">
                                · {{security[data.security || 'COMMON'].text}}
                            </span>
                        </div>
                        <div class="section-member-node-dept" :title="data.orgName" v-if="root.showMemberOrg && data.orgName">{{data.orgName}}</div>
                        <div class="section-member-node-dept" :title="data.deptName" v-if="!root.showMemberOrg">{{data.deptName}}</div>
                        <div class="section-member-node-duty" :title="deptAndDuty" v-if="root.showMemberOrg && deptAndDuty">{{deptAndDuty}}</div>
                    </div>
                </div>
            </template>
        </TreeNode>
    </div>
</template>
<script>
    import Avatar from '../../../base/avatar/'
    import Node from '../mixins/node'
    export default {
        name: 'YYMemberNode',
        mixins: [Node],
        components: {
            Avatar
        },
        inject: ['root'],
        props: {
            data: {
                type: Object,
                default () {
                    return {}
                }
            },
            parent: {
                type: Object
            }
        },
        data() {
            return {
                security: {
					COMMON: {
						text: '一般'
					},
					CORE: {
						text: '核心'
					},
					IMPORTANT: {
						text: '重要'
					}
				}
            }
        },
        computed: {
            checked() {
                const data = this.root.selected.member['m' + (this.root.isUseYhtUserId ? this.data.yhtUserId : this.data.memberId)] || null
                this.data.checked = !!data // 重置当前选择状态
                return !!data
            },
            deptAndDuty() {
                const data = this.data
                if (data.deptName && data.duty) {
                    return `${data.deptName}（${data.duty}）`
                } else if (data.deptName) return data.deptName
                else if (data.duty) return data.duty
                return ''
            }
        }
    }
</script>


