<!-- to do 实验室后台模块未开发 2022/02/17 -->
<template>
    <div class="box">
        <div class="wrap">
            <div class="img">
                <!-- <img :src="data.image" alt /> -->
                <img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" />
            </div>
            <div class="content">
                <div class="tit" @click="handleDetail(data.id)">{{ data.title }}</div>
                <slot name="des" />

                <div v-if="data.industrys" class="line">
                    所属领域：
                    <span>{{ data.industrys[data.industrys.length - 1] }}</span>
                </div>
                <div class="line">
                    依托管理部门：
                    <span>{{ data.mode_title }}</span>
                </div>
                <div class="line">
                    合作模式：
                    <span>{{ data.mode_title }}</span>
                </div>
                <div class="line">
                    技术成熟度：
                    <span>{{ data.maturity_title }}</span>
                </div>
            </div>
            <div>
                <div class="keywords">
                    <wordcloud v-if="data.keywords" :data="createdData(data.customers)"></wordcloud>
                </div>
                <collectAndVisit :is_collect="data.is_collect" :collect_count="data.collect_count" :visit_count="data.visit_count" :object_id="data.id" :kind="1005"/>
            </div>
        </div>
    </div>
</template>

<script setup>
import wordcloud from './wordcloud.vue'
import collectAndVisit from './collectAndVisit.vue'
const router = useRouter();
const props = defineProps({
    data: {
        type: Object,
        required: true,
    },
});

function handleDetail (id) {
    let routeData = router.resolve({ path: `/searchList/1/detail/${id}` });
    window.open(routeData.href, '_blank');
}

function createdData (arr) {
    let l = [];
    let snap = JSON.parse(JSON.stringify(arr))
    snap.map(e => {
        l.push({ name: e, value: 30 })
        return { name: e, value: 30 }
    })
    return l;
}

</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 190px;
    background: #ffffff;
    padding: 20px;
    box-sizing: border-box;
    .wrap {
        display: flex;
        flex-direction: row;
        .img {
            width: 200px;
            height: 150px;
            margin-right: 10px;
            img {
                display: block;
                margin: 0;
                width: 100%;
                height: 100%;
            }
        }
        .keywords {
            width: 129px;
            height: 129px;
        }
        .content {
            flex: 1;
            overflow: hidden;

            .labelList {
                overflow: hidden;
                div {
                    padding: 2px 4px;
                    float: left;
                    background: #0054ff;
                    border-radius: 4px;
                    margin-right: 5px;
                    margin-bottom: 5px;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #ffffff;
                }
            }

            .line {
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #666666;
                margin: 10px 0;
                span {
                    font-size: 16px;
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    color: #333;
                }
            }
            .tit {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 100%;
                font-size: 20px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #333333;
                overflow: hidden;
                cursor: pointer;
            }
        }
    }
}
</style>