bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<template>
  <view @click="click" class="tree-item">
    <!-- 用户头像 -->
    <image
      v-if="item.type === 'user'"
      class="tree-item-avatar"
      :src="avatar"
      :style="{ borderRadius: roundAvatar ? '50%' : '3px' }"
      mode="aspectFill"
    ></image>

    <!-- 名称 -->
    <text class="tree-item-title">{{ item.name + (item.mobile ? '(' +item.mobile + ')' : "")  }}</text>

    <!-- 用户标签 -->
    <l-tag :line="tagColor" size="sm" class="margin-left-sm">{{ tagName }}</l-tag>
	
	<uni-view v-if="item.type === 'user' && item.mobile" class="margin-left-sm sm line-gray cu-tag" style="z-index: 1;" @tap="copy(item.mobile)">复制</uni-view>

    <!-- 如果开启选择按钮显示，并且级别符合，则显示按钮 -->
    <view v-if="button" class="tree-item-action">
	  <l-button v-if="!selectIds.includes(item.id)" @click="itemClick(item)" line="green" size="sm">选择</l-button>
	  <l-button v-else @click="itemClick(item)" line="blue" size="sm">取消选择</l-button>
    </view>
  </view>
</template>

<script>
import uniCopy from "@/common/js/uni-copy.js"
export default {
  name: 'l-organize-single-item',

  props: {
    item: {},
    button: {},
	value:{},
  },
  
  data(){
	  return{
		selectIds:[],
	  }
  },
  
  created() {
  	this.init()
  },

  methods: {
	init(){
		if(this.value){
			this.selectIds = this.value.split(",")
		}
	},
    // 点击事件
    click(e) {
      this.$emit('click', e)
    },
	itemClick(root){
		if(this.selectIds.indexOf(root.id) !== -1){
			this.selectIds.splice(this.selectIds.indexOf(root.id),1)
		}else{
			this.selectIds.push(root.id)
		}
		this.$emit('buttonClick', root)
	},
	
	copy(mobile){
		uniCopy({
			content:mobile,
			success:(res)=>{
				uni.showToast({
					title: "复制手机号成功~",
					icon: 'none',
					duration:3000,
				})
			},
			error:(e)=>{
				uni.showToast({
					title: e,
					icon: 'none',
					duration:3000,
				})
			}
		})
	}
  },

  computed: {
    // 获取用户头像
    avatar() {
      if (!Number.isNaN(this.item.img)) {
        return Number(this.item.img) === 1 ? '/static/img-avatar/chat-boy.jpg' : '/static/img-avatar/chat-girl.jpg'
      }

      return this.item.img
    },

    // 获取树形列表每一项后面 tag 的显示
    tagName() {
      return { user: '职员', department: '部门', company: '学校' }[this.item.type]
    },

    // 获取 tag 的颜色
    tagColor(item) {
      return { company: 'red', department: 'blue', user: 'green' }[this.item.type]
    },

    // 头像圆形/方形显示参数
    roundAvatar() {
      return this.CONFIG('pageConfig.roundAvatar')
    }
  }
}
</script>

<style lang="less" scoped>
.tree-item {
  background-color: #fff;
  display: flex;
  min-height: 65rpx;
  align-items: center;

  .tree-item-avatar {
    width: 60rpx;
    height: 60rpx;
    margin-top: 8rpx;
    margin-bottom: 8rpx;
    margin-left: 30rpx;
    margin-right: 16rpx;
  }

  .tree-item-action {
    position: absolute;
    right: 30rpx;
  }
}
</style>