<template>
    <page-layout :avatar="currUser.avatar">
        <div slot="headerContent">
            <div class="title">{{ welcome.timeFix }}，{{ currUser.name }}，{{ welcome.message }}</div>
            <div>{{ currUser.position }}</div>
        </div>
        <template slot="extra">
            <head-info class="split-right" :title="$t('project')" content="56" />
            <head-info class="split-right" :title="$t('ranking')" content="8/24" />
            <head-info class="split-right" :title="$t('visit')" content="2,223" />
        </template>
        <template>
            <a-row style="margin: 0 -12px">
                <a-col style="padding: 0 12px" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card class="project-list" :loading="loading" style="margin-bottom: 24px" :bordered="false" :title="$t('progress')" :body-style="{ padding: 0 }">
                        <a slot="extra">{{ $t('all') }}</a>
                        <div>
                            <a-card-grid :key="i" v-for="(item, i) in projects">
                                <a-card :bordered="false" :body-style="{ padding: 0 }">
                                    <a-card-meta :description="item.desc">
                                        <div slot="title" class="card-title">
                                            <a-avatar size="small" :src="item.logo" />
                                            <span>Alipay</span>
                                        </div>
                                    </a-card-meta>
                                    <div class="project-item">
                                        <a class="group" href="/#/">科学搬砖组</a>
                                        <span class="datetime">9小时前</span>
                                    </div>
                                </a-card>
                            </a-card-grid>
                        </div>
                    </a-card>
                    <a-card :loading="loading" :title="$t('dynamic')" :bordered="false">
                        <a-list>
                            <a-list-item :key="index" v-for="(item, index) in activities">
                                <a-list-item-meta>
                                    <a-avatar slot="avatar" :src="item.user.avatar" />
                                    <div slot="title" v-html="item.template" />
                                    <div slot="description">9小时前</div>
                                </a-list-item-meta>
                            </a-list-item>
                        </a-list>
                    </a-card>
                </a-col>
                <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card :title="$t('access')" style="margin-bottom: 24px" :bordered="false" :body-style="{ padding: 0 }">
                        <div class="item-group">
                            <a>操作一</a>
                            <a>操作二</a>
                            <a>操作三</a>
                            <a>操作四</a>
                            <a>操作五</a>
                            <a>操作六</a>
                            <a-button size="small" type="primary" ghost icon="plus">{{ $t('add') }}</a-button>
                        </div>
                    </a-card>
                    <a-card :loading="loading" :title="`XX ${$t('degree')}`" style="margin-bottom: 24px" :bordered="false" :body-style="{ padding: 0 }">
                        <div style="min-height: 400px">
                            <radar />
                        </div>
                    </a-card>
                    <a-card :loading="loading" :title="$t('team')" :bordered="false">
                        <div class="members">
                            <a-row>
                                <a-col :span="12" v-for="(item, index) in teams" :key="index">
                                    <a>
                                        <a-avatar size="small" :src="item.avatar" />
                                        <span class="member">{{ item.name }}</span>
                                    </a>
                                </a-col>
                            </a-row>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
        </template>
    </page-layout>
</template>

<script>
import PageLayout from '@/pages/frame/layouts/PageLayout';
import HeadInfo from '@/components/tool/HeadInfo';
import Radar from '@/components/chart/Radar';
import { mapState } from 'vuex';
import { activities, templates } from '@/mock/data/activityData';
import { teams } from '@/mock/data';
import workbenchI18n from './i18n';

export default {
    name: 'Workbench',
    components: { Radar, HeadInfo, PageLayout },
    i18n: workbenchI18n,
    data() {
        return {
            projects: [],
            loading: true,
            activities: [],
            teams: [],
            welcome: {
                timeFix: '',
                message: '',
            },
        };
    },
    computed: {
        ...mapState('accountModule', { currUser: 'user' }),
    },
    created() {
        activities.forEach((item) => {
            item.template = templates[item.activity.type](item.user, item.activity);
        });

        this.activities = activities;

        this.teams = teams;

        this.welcome = {
            timeFix: '中午好',
            message: '要不要打一把 DOTA',
        };

        this.projects = [
            {
                logo: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
                desc: '那是一种内在的东西，他们到达不了，也无法触及的',
            },
            {
                logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
                desc: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
            },
            {
                logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
                desc: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
            },
            {
                logo: 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png',
                desc: '那时候我只会想自己想要什么，从不想自己拥有什么',
            },
            {
                logo: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
                desc: '那是一种内在的东西，他们到达不了，也无法触及的',
            },
            {
                logo: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
                desc: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
            },
        ];

        this.loading = false;
    },
};
</script>

<style lang="less">
.project-list {
    .card-title {
        span {
            vertical-align: middle;
            &:last-child {
                margin-left: 12px;
            }
        }
    }
    .project-item {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        overflow: hidden;
        font-size: 12px;
        color: inherit;
        .group {
            color: @text-color;
            flex: 1 1 0;
            &:hover {
                color: @primary-color;
            }
        }
        .datetime {
            color: @text-color-second;
            flex: 0 0 auto;
        }
    }
    .ant-card-meta-description {
        height: 44px;
        line-height: 22px;
        overflow: hidden;
    }
}
.item-group {
    padding: 20px 0 8px 24px;
    font-size: 0;
    a {
        color: inherit;
        display: inline-block;
        font-size: 14px;
        margin-bottom: 13px;
        width: 25%;
    }
}
.members {
    a {
        display: block;
        margin: 12px 0;
        color: @text-color;
        &:hover {
            color: @primary-color;
        }
        .member {
            vertical-align: middle;
            margin-left: 12px;
        }
    }
}
</style>
