<template>
  <div class="chosed-person">
    <div class="chosed-title">
      <ta-row type="flex" justify="space-between">
        <ta-col :span="12">
          已选择{{ keyToValueData.length }}项
        </ta-col>
        <ta-col :span="12">
          <ta-row type="flex" justify="end">
            <div class="chosed-btn" @click="deleteAll">
              <ta-icon type="delete" class="mg-r6" />删除全部
            </div>
          </ta-row>
        </ta-col>
      </ta-row>
    </div>
    <div class="chosed-box">
      <ta-row>
        <div v-for="(item,index) in keyToValueData" :key="index" class="self-col-5">
          <div v-show="index < 9 || showMore" class="user-box">
            <div class="user-head" title="删除" :class="{'woman': item.sex == '0', 'man': item.sex == '1' }" @click="deleteOneUser(getUserListById[index])">
              {{ 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>
          <div v-show="index == 9 && !showMore" class="user-box" @click="showMore= !showMore">
            <ta-button icon="plus-circle-o">
              显示全部
            </ta-button>
          </div>
        </div>
      </ta-row>
    </div>
  </div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
let _defaultProps = {
  listKey: 'listKey', // 每条用户信息的唯一标识
  listTitle: 'listTitle', // 用户信息第一行显示内容
  listSubTitle: 'listSubTitle', // 用户信息第二行显示内容
  listDescription: 'listDescription', // 用户信息鼠标移上去显示描述信息
}
export default {
  name: 'SelectUserList',
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
    /* 配置选项 */
    props: {
      type: Object,
      default: function () {
        return _defaultProps
      },
    },
  },
  data () {
    return {
      showMore: 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.getUserListById.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']),
  },
  watch: {
    getUserListById () {
      this.showMore = false
    },

  },
  methods: {
    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
    },
    deleteAll () {
      this.deleteAllUser(this.id)
      this.$emit('clearSelectOption')
    },
    ...mapActions('taUserSelect', ['deleteAllUser', 'deleteOneUser']),
  },
}
</script>
