<template>
    <div>
        <navbar title="查流水"></navbar>
        <div class="wrapper">
            <div class='wapper_top'>查询客户（企业/法人/配偶）近1年行内流水</div>
            <div v-if="pageLoading == true">
                <ul class="company-box" v-if="searchResultList.length > 0">
                    <div class="search-btn-box">
                        <div>共检索 <span class="color-2372eb"> {{ totalDatas > 999 ? '999+' : totalDatas }} </span>条数据</div>
                    </div>
                    <li class="company-item" v-for="(resultItem, resultIndex) in searchResultList"
                        :key="resultItem.companyName">

                        <div class='title-top'>
                            <div class="company-middle-item mb-10">
                                <div class="company-item-left bg-2372eb" v-if="resultItem.colorNum == 1">
                                    <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                </div>
                                <div class="company-item-left bg-ee8c15" v-else-if="resultItem.colorNum == 2">
                                    <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                </div>
                                <div class="company-item-left bg-11c95f" v-else-if="resultItem.colorNum == 3">
                                    <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                </div>
                                <div class="company-item-left bg-e21183" v-else-if="resultItem.colorNum == 4">
                                    <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                </div>
                                <div class="company-item-left bg-fde809" v-else-if="resultItem.colorNum == 5">
                                    <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                </div>
                                <div class="company-item-left bg-17b9d7" v-else-if="resultItem.colorNum == 6">
                                    <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                </div>
                                <div class="company-item-left bg-db2c2c" v-else-if="resultItem.colorNum == 7">
                                    <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                </div>
                                <div class="company-item-left bg-9232db" v-else-if="resultItem.colorNum == 8">
                                    <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                </div>
                                <div class="company-item-left bg-8c8c8c" v-else>
                                    <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                                </div>
                                <div class="company-item-right">
                                    <div class="company-item-right-title">{{ resultItem.companyName }}</div>
                                </div>
                            </div>
                            <div class="mb-10 detail" @click='goDetails'>
                                详情
                            </div>
                        </div>
                        <div class="mb-10" style="font-size: 14px;color: #666666"><span
                                style="font-weight: bold;color: #333333">社会信用代码：</span><span>{{ resultItem.creditCode
                                }}</span></div>
                        <div class="mb-10" style="font-size: 14px;color: #666666"><span
                                style="font-weight: bold;color: #333333">客户内码：</span><span>{{ resultItem.custIsn }}</span>
                        </div>
                        <div class="mb-10" style="font-size: 14px;color: #666666"><span
                                style="font-weight: bold;color: #333333">企业法人：</span><span>{{
                                    resultItem.creditLastSearchTime }}</span></div>
                        <div class="mb-10" style="font-size: 14px;color: #666666"><span
                                style="font-weight: bold;color: #333333">法人配偶：</span><span>{{
                                    resultItem.creditLastSearchTime }}</span></div>
                    </li>
                </ul>
                <div style="margin-top: 10px" v-else>
                    <div class="search-btn-box" style="padding: 0 10px">
                        <div>共检索 <span class="color-2372eb">0</span>条数据</div>
                    </div>
                    <van-empty />
                </div>
            </div>
            <van-loading style="text-align: center;margin-top: 50%" v-if="pageLoading == false" />
        </div>
    </div>
</template>
<script>
import { ref } from 'vue';
import navbar from '../../../components/navbar/navbar.vue';
import {
    Icon,
    Search,
    Button,
    Col,
    Row,
    Tag,
    Empty,
} from 'vant';
export default {
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanSearch: Search,
        VanButton: Button,
        VanCol: Col,
        VanRow: Row,
        VanTag: Tag,
        VanEmpty: Empty,
    },
    data() {
        return {
            isGetResult: false,
            searchKey: '',
            pageLoading: true,
            totalDatas: 0,
            loading: false,
            searchResultList: [
                {
                    colorNum: '1',
                    companyName: '进化大厦有限公司',
                    creditCode: '15364896413.2123',
                    custIsn: '424545',
                    creditLastSearchTime: '张三'
                }
            ],
        }
    },
    methods: {
        goDetails() {
            this.$router.push('/DetailsOne');
        }
    }
}
</script>
<style scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    background: #f7f7f7;
}

.wapper_top {
    color: rgba(238, 140, 21);
    background-color: rgba(254, 244, 234);
    font-size: 12px;
    text-align: center;
    line-height: 30px;
    height: 30px
}

.company-box {
    background: #ffffff;
    width: 100%;
    min-height: 100vh;
    padding: 10px 1rem 1rem;

}

.company-item {
    border: solid 1px #f2f2f2;
    border-radius: 10px;
    padding: 0.6rem;
    margin-bottom: 16px;
}

.company-middle-item {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex: 1
}

.company-item-left {
    width: 26px;
    height: 26px;
    background: #2372eb;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.company-item-left img {
    width: 16px;
}

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

.mr-6 {
    margin-right: 6px;
}

.company-item-right {
    width: calc(100% - 36px);
    font-size: 0.8rem;
}

.company-item-right-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.company-item-right-small-title {
    font-size: 0.8rem;
    margin-left: 6px;
    color: #666666;
}

.company-item-tag-box {
    margin-bottom: 12px;
}

.title-top {
    display: flex;
    justify-content: space-between
}

.detail {
    border: 1px solid rgba(68, 118, 204);
    color: rgba(68, 118, 204);
    border-radius: 25px;
    padding: 5px 15px
}</style>
