<template>
  <div class="show-user-list">
    <div v-if="keyToValueData.length">
      <div class="user-list" :class="{'no-child': !isShowHead}">
        <ta-row>
          <ta-col v-for="(item,index) in keyToValueData" :key="index" :span="8">
            <div class="user-box" @click="fnAddUser(index)">
              <div class="user-head" :class="{'user-active': getUserChecked(item.listKey), 'woman': item.sex == '0', 'man': item.sex == '1' }">
                {{ firstName(item.listTitle) }}
              </div>
              <div class="user-info">
                <ta-tooltip placement="bottomLeft">
                  <template slot="title">
                    <div class="user-tooltip">
                      {{ item.listDescription }}
                    </div>
                  </template>
                  <div class="user-p">
                    {{ item.listTitle }}
                  </div>
                  <div class="user-p">
                    {{ item.listSubTitle }}
                  </div>
                </ta-tooltip>
              </div>
            </div>
          </ta-col>
          <ta-col v-if="pagination" :span="8">
            <div class="more-box">
              <ta-button icon="plus-circle-o" @click="$emit('more')">
                更多
              </ta-button>
            </div>
          </ta-col>
        </ta-row>
      </div>
    </div>
    <div v-else class="no-data">
      <ta-icon type="file-text" class="no-data-icon" />暂无数据
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
let _defaultProps = {
  listKey: 'listKey', // 每条用户信息的唯一标识
  listTitle: 'listTitle', // 用户信息第一行显示内容
  listSubTitle: 'listSubTitle', // 用户信息第二行显示内容
  listDescription: 'listDescription', // 用户信息鼠标移上去显示描述信息
}
export default {
  name: 'ShowUserList',
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
    /* 配置选项 */
    props: {
      type: Object,
      default: function () {
        return _defaultProps
      },
    },
    showUserListData: {
      type: Array,
      default: () => [],
    },
    /* 是否多选 */
    isMulti: {
      type: Boolean,
      default: true,
    },
    isShowHead: {
      type: Boolean,
      default: false,
    },
    /* 右侧用户加载更多 */
    pagination: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      checked: false,
    }
  },
  computed: {
    defaultProps () {
      return {
        listKey: this.props.listKey || _defaultProps.listKey,
        listTitle: this.props.listTitle || _defaultProps.listTitle,
        listSubTitle: this.props.listSubTitle || _defaultProps.listSubTitle,
        listDescription: this.props.listDescription || _defaultProps.listDescription,
      }
    },
    getUserListById () {
      return this.getUserList[this.id] || []
    },
    keyToValueData () {
      let result = []
      const {listKey, listTitle, listSubTitle, listDescription} = this.defaultProps
      this.showUserListData.forEach((item) => {
        let info = {}
        info.listKey = listKey.indexOf('.') == -1 ? item[listKey] : this.getKeyToValue(item, listKey)
        info.listTitle = listTitle.indexOf('.') == -1 ? item[listTitle] : this.getKeyToValue(item, listTitle)
        info.listSubTitle = listSubTitle.indexOf('.') == -1 ? item[listSubTitle] : this.getKeyToValue(item, listSubTitle)
        info.listDescription = listDescription.indexOf('.') == -1 ? item[listDescription] : this.getKeyToValue(item, listDescription)
        info.sex = item.sex
        result.push(info)
      })
      return result
    },
    ...mapGetters('taUserSelect', ['getUserList']),
  },
  methods: {
    getUserChecked (key) {
      const {listKey} = this.defaultProps
      for (let i = 0; i < this.getUserListById.length; i++) {
        if (this.getUserListById[i][listKey] == key) {
          return true
        }
      }
    },
    firstName (listTitle) {
      return listTitle && listTitle.length ? listTitle.substr(0, 1) : ''
    },
    getKeyToValue (item, key) {
      let arr = key.split('.'), result = {...item}
      for (let i = 0; i < arr.length; i++) {
        if (result[arr[i]]) {
          result = result[arr[i]]
        } else {
          return ''
        }
      }
      return result
    },
    fnAddUser (index) {
      let user = this.showUserListData[index]
      user._userSelectId = this.id
      user._listKey = this.defaultProps.listKey
      if (this.isMulti) {
        this.addOneUser(user)
      } else {
        this.deleteAllUser(this.id)
        this.addOneUser(user)
        this.$emit('clearSelectOption')
      }
    },
    fnAddAllUser () {
      for (let user of this.showUserListData) {
        user._userSelectId = this.id
        user._listKey = this.defaultProps.listKey
      }
      if (this.isMulti) {
        this.addAllUser(this.showUserListData)
      }
    },
    ...mapActions('taUserSelect', ['addOneUser', 'addAllUser', 'deleteAllUser']),
  },
}
</script>
