<template>
    <div>
        <navbar title="查融资"></navbar>
        <div class="wrapper">
            <div class="total-font-title">
                {{ detailsShowDatas.productName }}
            </div>
            <div class="basic-info-box">
                <div class="basic-info-title-h2">
                    <div class="basic-info-title-line"></div>
                    <div>基本信息</div>
                </div>
                <div class="basic-info-content">
                    <ul>
                        <li class="basic-info-content-item">
                            <span class="basic-info-content-item-title">公&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp司：</span>
                            <span>{{ detailsShowDatas.companyName }}</span>
                        </li>
                        <li class="basic-info-content-item">
                            <span class="basic-info-content-item-title">融资轮次：</span>
                            <span>{{ detailsShowDatas.round }}</span>
                        </li>
                        <li class="basic-info-content-item">
                            <span class="basic-info-content-item-title">所属地区：</span>
                            <span>{{ detailsShowDatas.city }},{{ detailsShowDatas.county }}</span>
                        </li>
                        <li class="basic-info-content-item">
                            <span class="basic-info-content-item-title">成立日期：</span>
                            <span>{{ detailsShowDatas.startDate }}</span>
                        </li>
                        <li class="basic-info-content-item">
                            <span class="basic-info-content-item-title">业务介绍：</span>
                            <span>{{ detailsShowDatas.industry }}</span>
                        </li>
                        <li class="basic-info-content-item">
                            <span class="basic-info-content-item-title">简&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp介：</span>
                            <span>{{ detailsShowDatas.smallCategory }}</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!--            <div class="step-box basic-info-box">-->
            <!--                <div class="basic-info-title-h2">-->
            <!--                    <div class="basic-info-title-line"></div>-->
            <!--                    <div>融资历程</div>-->
            <!--                </div>-->
            <!--                <div class="step-content-box" v-for=" (stepItem,stepIndex) in stepList " :key="stepItem.date">-->
            <!--                    <div class="step-box-left">-->
            <!--                        <div class="step-box-left-h5 mb-10">{{ stepItem.date }}</div>-->
            <!--                        <div class="step-box-left-h4">{{ stepItem.type }}</div>-->
            <!--                    </div>-->
            <!--                    <div class="step-circle">-->
            <!--                        <div class="step-circle-solid"></div>-->
            <!--                    </div>-->
            <!--                    <div class="step-box-right" :class="[stepIndex != stepList.length -1 ? 'border-left-2372eb' : '']">-->
            <!--                        <div class="step-box-left-h5 mb-10"><span class="step-box-left-h4">金额：</span>{{ stepItem.money }}</div>-->
            <!--                        <div class="step-box-left-h5"><span class="step-box-left-h4">投资方：</span>{{ stepItem.invest }}</div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->

            <!--            <div class="basic-info-box">-->
            <!--                <div class="basic-info-title-h2">-->
            <!--                    <div class="basic-info-title-line"></div>-->
            <!--                    <div>团队成员</div>-->
            <!--                </div>-->
            <!--                <div v-for="(teamItem,teamIndex) in teamList" :key="teamIndex" class="team-box basic-info-content">-->
            <!--                    <div class="team-box-logo">-->
            <!--                        <van-icon name="contact" />-->
            <!--                    </div>-->
            <!--                    <ul>-->
            <!--                        <li class="basic-info-content-item">-->
            <!--                            <span class="basic-info-content-item-title">{{ teamItem.name }}</span>-->
            <!--                        </li>-->
            <!--                        <li class="basic-info-content-item">-->
            <!--                            <span class="basic-info-content-item-title">职位：</span>-->
            <!--                            <span>{{ teamItem.zhiwei }}</span>-->
            <!--                        </li>-->
            <!--                        <li class="basic-info-content-item">-->
            <!--                            <span class="basic-info-content-item-title">简介：</span>-->
            <!--                            <span>{{ teamItem.jianjie }}</span>-->
            <!--                        </li>-->
            <!--                    </ul>-->
            <!--                </div>-->
            <!--            </div>-->


        </div>
    </div>
</template>

<script>
import { Icon, Search, Cell, CellGroup } from 'vant';//button组件
import navbar from '../../../components/navbar/navbar.vue';
export default {
    name: "Search",
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanSearch: Search,
        VanCell: Cell,
        VanCellGroup: CellGroup,
    },
    data() {
        return {
            detailsShowDatas: {},
            stepList: [
                {
                    date: '2022-03-04',
                    type: '兼并',
                    money: '1000万',
                    invest: 'XX科技'
                },
                {
                    date: '2022-03-05',
                    type: '兼并',
                    money: '1000万',
                    invest: 'XX科技'
                },
            ],

            teamList: [
                {
                    name: '章三',
                    zhiwei: '法人',
                    jainjei: '简介简介简介简介简介简介简介简介'
                },
                {
                    name: '章三',
                    zhiwei: '法人',
                    jainjei: '简介简介简介简介简介简介简介简介'
                },
            ],

        }
    },
    mounted() {
        if (sessionStorage.getItem('detailsShowDatas')) {
            this.detailsShowDatas = JSON.parse(sessionStorage.getItem('detailsShowDatas'));
        }
    },
    methods: {
        // 搜索关键字
        onSearch() {
            this.userIsSearch = true;
            console.log('搜索关键字', this.searchValue)
        },

        // 搜索取消
        onCancel() {
            history.back();
        },



    }
}
</script>

<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
}

.total-font-title {
    padding: 0 1rem;
    font-size: 0.9rem;
    font-weight: bold;
    color: #333333;
    height: 40px;
    line-height: 40px;
    background: #f2f2f2;
}

.basic-info-box {
    padding: 1rem;
    background: #ffffff;
    margin-bottom: 10px;
}

.basic-info-title-line {
    width: 3px;
    height: 16px;
    background: #2372eb;
    margin-right: 6px;
    position: relative;
    top: 2px;
}

.basic-info-title-h2 {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333333;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 10px;
}

.van-cell {
    padding: 10px 9px !important;
}

.basic-info-content {}

.basic-info-content-item {
    font-size: 0.8rem;
    margin-bottom: 12px;
    color: #666666;
    padding-left: 9px;
}

.basic-info-content-item-title {
    font-size: 0.8rem;
    font-weight: bold;
    color: #333333;
}

.step-box {
    width: 100%;
}

.step-content-box {
    display: flex;
    justify-content: start;
    align-items: start;
}

.step-box-left {
    text-align: right;
    padding-right: 4px;
}

.step-box-right {
    padding-left: 16px;
    border-left: solid 1px #ffffff;
}

.step-content-box:not(:last-child) .step-box-right {
    height: 80px;
}

.border-left-2372eb {
    border-left: solid 1px #2372eb;
}

.step-box-left-h4 {
    font-size: 0.9rem;
    color: #333333;
    font-weight: bold;
}

.step-box-left-h5 {
    font-size: 0.8rem;
    color: #666666;
}

.mb-10 {
    margin-bottom: 10px;
}

.step-circle {
    width: 16px;
    height: 16px;
    border: solid 1px #2372eb;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    position: relative;
    left: 8px;
}

.step-circle-solid {
    width: 10px;
    height: 10px;
    background: #2372eb;
    border-radius: 50%;
}

.team-box {
    display: flex;
    justify-content: start;
    align-items: start;
    margin-bottom: 10px;
}

.team-box:not(:last-child) {
    border-bottom: solid 1px #f2f2f2;
}

.team-box-logo {
    padding: 8px;
    background: #f2f2f2;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    position: relative;
    top: 4px;
    color: #999999;
    margin-right: 4px;
}
</style>
