<template>
    <view>
        <view v-for="(item, index) in groups" :key="index" class="friend-flex u-border-bottom"
            @click="toGroup(item.targetId)">
            <u-avatar size="40" shape="square" :src="contact(item.targetId).portraitUrl" />
            <view class="info">
                <view class="name">{{ item.name }}</view>
            </view>
        </view>
        <u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
            @confirm="onCreateGroup">
            <view class="slot-content">
                <u--input placeholder="群名称" border="surround" focus v-model="groupName"></u--input>
            </view>
        </u-modal>
    </view>
</template>

<script>
    import {
        getMyGroups,
        createGroup
    } from '@/apis/interfaces/im.js'

    export default {
        data() {
            return {
                groups: [],
                createModal: false,
                groupName: ''
            }
        },
        computed: {
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        onNavigationBarButtonTap() {
            this.createModal = true
        },
        onLoad() {
            this.initData()
        },
        methods: {
            initData() {
                getMyGroups().then((res) => {
                    this.groups = res
                    res.map(item => {
                        this.$store.dispatch('updateContact', item)
                    })
                })
            },
            onHideModal() {
                this.createModal = false
                this.groupName = ''
            },
            onCreateGroup() {
                createGroup({
                    name: this.groupName
                }).then(res => {
                    uni.showToast({
                        title: '创建成功'
                    })
                    this.initData()
                    this.onHideModal()
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err
                    })
                })
            },
            toGroup(targetId) {
                uni.navigateTo({
                    url: '/pages/im/group/chat?targetId=' + targetId
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 好友列表
    .friend-flex {
        position: relative;
        padding: 20rpx $padding;
        display: flex;
        flex-direction: row;
        align-items: center;

        .info {
            flex: 1;
            margin-left: $padding;

            .name {
                font-size: $title-size + 2;
                font-size: $title-size + 2;
                color: #454545 !important;
            }

            .address {
                color: $text-gray-m;
                font-size: $title-size-m - 5;
            }
        }
    }
</style>
