<template>
  <a-list item-layout="horizontal" :data-source="showDataList">
    <template #renderItem="{ item }">
      <a-list-item style="padding: 3px 0">
        <div class="user-select-user-info" @click="(e) => onClickUser(e, item)">
          <div>
            <a-checkbox v-model:checked="checkStatus[item.id]" />
          </div>
          <div>
            <a-avatar v-if="item.avatar" :src="getFileAccessHttpUrl(item.avatar)"></a-avatar>
            <a-avatar v-else>
              <template #icon><UserOutlined /></template>
            </a-avatar>
          </div>
          <div :style="nameStyle">
            {{ item.realname }}
          </div>
          <div :style="departStyle">
            {{ item.orgCodeTxt }}
          </div>
        </div>
      </a-list-item>
    </template>
  </a-list>
</template>

<script lang="ts">
  import { UserOutlined } from '@ant-design/icons-vue';
  import { computed, toRaw, reactive, watchEffect, ref } from 'vue';
  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
  
  export default {
    name: 'UserList',
    props: {
      dataList: {
        type: Array,
        default: () => [],
      },
      // 是否显示部门文本
      depart: {
        type: Boolean,
        default: false,
      },
      selectedIdList: {
        type: Array,
        default: () => [],
      },
      excludeUserIdList:{
        type: Array,
        default: () => [],
      }
    },
    components: {
      UserOutlined,
    },
    emits: ['selected', 'unSelect'],
    setup(props, { emit }) {
      function onClickUser(e, user) {
        e && prevent(e);
        let status = checkStatus[user.id];
        if (status === true) {
          emit('unSelect', user.id);
        } else {
          emit('selected', toRaw(user));
        }
      }

      function getTwoText(text) {
        if (!text) {
          return '';
        } else {
          return text.substr(0, 2);
        }
      }

      const departStyle = computed(() => {
        if (props.depart === true) {
          // 如果显示部门信息
          return {
            flex: 1,
          };
        } else {
          return {
            display: 'none',
          };
        }
      });

      const nameStyle = computed(() => {
        if (props.depart === true) {
          // 如果显示部门信息
          return {
            width: '200px',
          };
        } else {
          return {
            flex: 1,
          };
        }
      });

      function onChangeChecked(e) {
        console.error('onChangeChecked', e);
      }

     // const showDataList = ref<any[]>([])
      const checkStatus = reactive<any>({});
      watchEffect(() => {
        let arr1 = props.dataList;
        if (!arr1 || arr1.length === 0) {
          return;
        }
        let idList = props.selectedIdList;
        for (let item of arr1) {
          if (idList.indexOf(item.id) >= 0) {
            checkStatus[item.id] = true;
          } else {
            checkStatus[item.id] = false;
          }
        }
        
      
      });

      function prevent(e) {
        e.preventDefault();
        e.stopPropagation();
      }

      function records2DataList() {
        let arr:any[] = [];
        let excludeList = props.excludeUserIdList;
        let records = props.dataList;
        if(records && records.length>0){
          for(let item of records){
            if(excludeList.indexOf(item.id)<0){
              arr.push({...item})
            }
          }
        }
        return arr;
      }
      
      const showDataList = computed(()=>{
        let excludeList = props.excludeUserIdList;
        if(excludeList && excludeList.length>0){
          return records2DataList();
        }
        return props.dataList;
      });

      return {
        onClickUser,
        getTwoText,
        departStyle,
        nameStyle,
        onChangeChecked,
        checkStatus,
        showDataList,
        getFileAccessHttpUrl
      };
    },
  };
</script>

<style lang="less">
  .user-select-user-info {
    display: flex;
    > div {
      height: 36px;
      line-height: 36px;
      margin-right: 10px;
    }
  }
</style>
