<template>
    <bread-pages>
        <div class="main" v-loading="loading">
            <div class="top">
                <div class="img">
                    <el-carousel height="360px">
                        <el-carousel-item>
                            <el-image
                                :src="getImg(info.avatar)"
                                fit="cover"
                                style="width: 100%; height: 100%; border-radius: 100%"
                            ></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <div class="info">
                    <div class="title">{{ info.name }}</div>
                    <div class="info-item">
                        <span class="text1">研究方向：</span>
                        <span class="text2" v-if="info.affiliationName">{{ info.affiliationName }}</span>
                    </div>
                    <!-- <div class="info-item" v-for="(item, index) in info.fieldName" :key="index">
                        <span class="text1">专业领域：</span>
                        <span class="text3" v-if="info.field">{{ item }}</span>
                    </div> -->
                    <div class="info-item">
                        <div class="top">
                            <span class="text1">专业领域：</span>
                            <!-- <span class="text3" v-if="info.field">{{ info.fieldName.join('') }}</span> -->
                            <div>
                                <div class="text3" v-for="(item, index) in info.fieldName" :key="index">{{ item }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="info-item" v-if="info.keyAchievement">
                        <span class="text1">主要成果：</span>
                        <span class="text2">{{ info.keyAchievement }}</span>
                    </div>
                    <div class="info-item">
                        <span class="text1">个人介绍：</span>
                        <span class="text2" v-html="info.selfIntroduction"></span>
                    </div>
                    <!-- <div class="info-item">
                        <span class="text1">电话：</span>
                        <span class="text2">{{ info.phone }}</span>
                    </div>
                    <div class="info-item">
                        <span class="text1">邮箱：</span>
                        <span class="text2">{{ info.email }}</span>
                    </div> -->

                    <div class="flex1"></div>

                    <!-- <div class="btn">
                        <el-button type="primary" class="icon-button" @click.prevent="connectKefu" size="small">
                            <i class="iconfont iconfont-nav_icon_xiaoxi1"></i>
                            咨询客服
                        </el-button>
                        <el-button @click.stop="postMessage" type="primary" class="icon-button" size="small">
                            <i class="iconfont iconfont-nav_icon_xiaoxi"></i>提交留言
                        </el-button>
                    </div> -->
                </div>
            </div>

            <!-- <div class="content">
               <div class="recommends">
                    <div class="recommends-title">为你推荐</div>
                    <router-link
                        :to="{
                            name: 'technicalManagerDetail',
                            query: {
                                id: item.id
                            }
                        }"
                        class="recomend-item"
                        v-for="item in recommends"
                        :key="item.id"
                    >
                        <el-image
                            :src="getImg(item.qualification)"
                            style="width: 180px; height: 180px; display: block"
                            fit="cover"
                        ></el-image>
                        <div class="info">
                            <span>{{ item.name }}</span>
                            <div class="tabs" v-if="item.fieldName">
                                <span class="tab" v-for="(name, index) in info.fieldName" :key="index">{{ name }}</span>
                            </div>
                        </div>
                    </router-link>
                </div> 
                <div class="detail">
                    <div class="detail-title">自我介绍</div>

                    <div class="detail-content" v-html="info.selfIntroduction"></div>
                </div>
            </div> -->
        </div>
    </bread-pages>
</template>

<script>
import BreadPage from '../../components/page/BreadPage.vue';
import { stageOptions, tradingMethodOptions, affiliationOptions } from '../../utils/variables';
import comEvent from '../../mixins/comEvent';
import BreadPages from '../../components/page/BreadPages.vue';
export default {
    components: { BreadPage, BreadPages },
    mixins: [comEvent],
    data() {
        return {
            loading: true,
            info: {},
            stageOptions,
            tradingMethodOptions,
            recommends: [],
            affiliationOptions
        };
    },
    computed: {
        // imgs() {
        // if (this.info.qualification && this.info.qualification.length > 0) {
        //     return this.info.qualification;
        // } else {
        //     return [this.getImg()];
        // }
        // }
    },
    watch: {
        $route() {
            this.getInfo();
        }
    },
    mounted() {
        this.getInfo();
    },
    methods: {
        getInfo() {
            this.loading = true;
            this.$http.get('/expert/get/' + this.$route.query.id).then(res => {
                this.info = res;
                setTimeout(() => {
                    this.loading = false;
                }, 500);
            });

            this.$EventBus.$emit('changePreTitle', {
                name: '专家',
                path: '/expert'
            });
            this.$EventBus.$emit('changeTitle', '专家详情');
            document.title = '专家详情';

            this.$http
                .get('/technicalManager/recommend', {
                    id: this.$route.query.id
                })
                .then(res => {
                    this.recommends = res.content;
                });
        }
    }
};
</script>

<style lang="less" scoped>
.main {
    background-color: #fff;
    padding: 22px 100px 150px;
}
.appContainer {
    background: #ffffff !important;
}
.img {
    width: 360px;
}

.top {
    .flex();
    align-items: stretch;

    .info {
        flex-grow: 1;
        margin-left: 70px;
        .flex-col();

        .title {
            font-size: 24px;
            color: #000000;
            line-height: 33px;
            padding: 20px 0;
        }

        .btn {
            .icon-button {
                line-height: 44px;
                min-width: 120px;
            }
            .icon-button + .icon-button {
                margin-left: 16px;
            }
        }
    }
    padding-bottom: 60px;
}

.info-item {
    box-sizing: border-box;
    line-height: 24px;
    margin-bottom: 12px;
    display: flex;

    .text1 {
        font-size: 14px;
        color: #999999;
        display: inline-block;
        min-width: 80px;
        flex-shrink: 0;
    }

    .text2 {
        font-size: 14px;
        color: @warn;
        margin-left: 6px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .text3 {
        font-size: 14px;
        // max-width: 98px;
        // flex-wrap: wrap;
        color: @warn;
        margin-left: 6px;
        // display: inline-block;
    }
}

.detail {
    .detail-title {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 22px;
        padding: 7px 0;
        border-bottom: 1px solid @bg;
    }

    .detail-content {
        font-size: 12px;
        color: #000000;
        line-height: 22px;
        padding: 20px 0;

        /deep/ img {
            display: block;
            margin: 10px auto;
        }

        /deep/ p {
            margin-top: 20px;
        }
    }
}

.content {
    .flex();
    align-items: flex-start;
    .detail {
        flex-grow: 1;
    }
    .recommends {
        min-width: 180px;
        margin-right: 30px;
        .recommends-title {
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            line-height: 22px;
            padding: 7px 0;
            // border-bottom: 1px solid @bg;
        }

        .recomend-item {
            margin-top: 16px;
            border: 1px solid #f5f7fa;
            width: 180px;
            overflow: hidden;
            cursor: pointer;
            display: block;
            &:hover {
                border-color: @prim;
            }
            .info > span {
                flex-shrink: 0;
            }
            .info {
                height: 44px;
                .flex();
                padding: 0 12px;
                width: 100%;
                box-sizing: border-box;
                vertical-align: middle;
                overflow: hidden;

                font-size: 14px;
                color: #000000;
                line-height: 44px;
                // align-items: flex-start;

                .tabs {
                    flex-grow: 1;
                    display: inline-flex;
                    flex-wrap: wrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 16px;
                }

                .tab {
                    background: rgba(255, 135, 0, 0.1);
                    border-radius: 1px;
                    line-height: 22px;
                    font-size: 13px;
                    color: #ff8700;
                    line-height: 16px;
                    padding: 0 5px;
                    margin-left: 5px;
                }
            }
        }
    }
}
</style>
