<template>
    <div class="ht-base-drawer-info-demo">
        <ht-base-list>
            <ht-base-list-item v-for="(item,index) of data" :key="index">
                <ht-base-list-item-meta :avatar="item.avatar" :title="item.title" :description="item.content"/>
                <a class="details" @click="showDrawer">查看详情</a>
            </ht-base-list-item>
        </ht-base-list>
        <ht-base-drawer
                class="drawer-content"
                title="用户配置文件"
                placement="right"
                :closable="false"
                @on-close="onClose"
                v-model="visible"
                width=640>

            <p :style="pStyle">个人信息</p>
            <div class="demo-drawer-profile">
                <ht-base-row>
                    <ht-base-col span="12">姓名:  张丽丽</ht-base-col>
                    <ht-base-col span="12">账户:  12345678@.com</ht-base-col>
                </ht-base-row>
                <ht-base-row>
                    <ht-base-col span="12">地区: 北京</ht-base-col>
                    <ht-base-col span="12">国籍:  中国</ht-base-col>
                </ht-base-row>
                <ht-base-row>
                    <ht-base-col span="12">生日:  2009-12-04</ht-base-col>
                    <ht-base-col span="12">网址: <a href="#" target="_blank">-</a></ht-base-col>
                </ht-base-row>
                <ht-base-row>
                    信息: 使事情尽可能简单，但不能简单。
                </ht-base-row>
            </div>
            <Divider/>
            <p :style="pStyle">公司信息</p>
            <div class="demo-drawer-profile">
                <ht-base-row>
                    <ht-base-col span="12">职位: 程序员</ht-base-col>
                    <ht-base-col span="12">职责: 编码</ht-base-col>
                </ht-base-row>
                <ht-base-row>
                    <ht-base-col span="12">部门: 技术部</ht-base-col>
                    <ht-base-col span="12">主管人: 李双</ht-base-col>
                </ht-base-row>
                <ht-base-row>
                    技能: C / C + +, 数据结构、软件工程、操作系统、计算机网络、数据库、编译原理、计算机体系结构、微机原理与接口技术、计算机英语、Java、ASP等。
                </ht-base-row>
            </div>
            <Divider/>
            <p :style="pStyle">联系方式</p>
            <div class="demo-drawer-profile">
                <ht-base-row>
                    <ht-base-col span="12">Email: admin@aresn.com</ht-base-col>
                    <ht-base-col span="12">手机号码:  +86 18888888888</ht-base-col>
                </ht-base-row>
                <ht-base-row>
                    <ht-base-col span="12">
                        网址: <a href="http://ued.tydicdev.com:8081" target="_blank">http://ued.tydicdev.com:8081</a>
                    </ht-base-col>
                </ht-base-row>
            </div>
        </ht-base-drawer>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseDrawerInfoDemo',
        data() {
            return {
                visible: false,
                pStyle: {
                    fontSize: '16px',
                    color: '#262626',
                    lineHeight: '24px',
                    display: 'block',
                    marginBottom: '16px',
                    fontWeight:'500',
                },
                data: [
                    {
                        content: '这里显示简介内容',
                        title:"Lily",
                        avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                    },
                    {
                        content: '这里显示简介内容',
                        title:"Lily",
                        avatar: 'http://39.106.250.14:8082/base-components/static/SuCo_user.svg',
                    },
                ],
            }
        },
        methods: {
            showDrawer() {
                this.visible = true
            },
            onClose() {
                this.visible = false
            },
        },
    }
</script>
<style lang="less">
    .ht-base-drawer-info-demo {
        .ivu-list-items{
            border: 1px solid #D7D7D7;
            width: 390px;
            .ht-base-list-item{
                padding: 12px;
                .details:active{
                    color: #04509b;
                }
            }
        }
    }
    .drawer-content{
        .ivu-drawer-header{
            border-bottom: none;
            height: 70px;
            line-height: 70px;
            padding: 0 24px;
            .ivu-drawer-header-inner{
                font-size: 16px;
            }
        }
        .demo-drawer-profile{
            .ht-base-row{
                height: 30px;
                font-size: 14px;
            }
        }
    }
</style>
