<template>
    <div>
        <navbar title="流水详情"></navbar>
        <div class="wrapper">
            <div class='title-top'>
                <div class="company-middle-item mb-10">
                    <div class="company-item-left bg-2372eb" v-if=" baseInfo.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=" baseInfo.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=" baseInfo.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=" baseInfo.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=" baseInfo.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=" baseInfo.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=" baseInfo.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=" baseInfo.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">{{ baseInfo.companyName }}</div>
                </div>
            </div>
            <div class="mb-10" style="font-size: 14px;color: #666666"><span style="font-weight: bold;color: #333333">社会信用代码：</span><span>{{ baseInfo.creditCode }}</span></div>
                <div class="mb-10" style="font-size: 14px;color: #666666"><span style="font-weight: bold;color: #333333">客户内码：</span><span>{{ baseInfo.custIsn }}</span></div>
                <div class="mb-10" style="font-size: 14px;color: #666666"><span style="font-weight: bold;color: #333333">企业法人：</span><span>{{ baseInfo.creditLastSearchTime }}</span></div>
                <div class="mb-10" style="font-size: 14px;color: #666666"><span style="font-weight: bold;color: #333333">法人配偶：</span><span>{{ baseInfo.creditLastSearchTime }}</span></div>
            </div>
            <div class='content'>
                <div class="content_top company-middle-item">
                    <div>请选择查询流水的账号</div>
                    <div>
                        <van-checkbox v-model='allChecked' shape="square">全选</van-checkbox>
                    </div>
                </div>
                <div class="content_main">
                    <div class="main_top">
                        <van-checkbox v-model='firmChecked' shape="square" icon-size="14px"></van-checkbox>
                        <span class="co_ff">所有企业账户</span>
                    </div>
                    <div class="main_list">
                        <div class="main_list_top">
                            <van-checkbox v-model='listChecked' shape="square" icon-size="14px"></van-checkbox>
                            <div class="list_top_right">
                                <div class="ft_wt">2156468541563165</div>
                                <van-tag :plain='false' type='success' class="list_tag" >正常</van-tag>
                            </div>
                        </div>
                        <div class="main_list_two">
                            <div>开户时间:2014.5</div>
                            <div class="mg_left">币种:人民币</div>
                        </div>
                        <div class="main_list_two">
                            <div>开户机构:农村商业银行</div>
                        </div>
                        <div class=" list_bottom">
                            <div class="list_bottom_left">
                                <div>近一年流入(万元)</div>
                                <div class="col_lv">2540.13</div>
                            </div>
                            <div class="mg_left">
                                <div>近一年流出(万元)</div>
                                <div class="col_red">2540.13</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom" @click="goDetailUrl">查询流水</div>
            </div>
        </div>
        
    </div>
</template>
<script>
import { ref } from 'vue';
import navbar from '../../../components/navbar/navbar.vue';
import {
  Icon,
  Search,
  Button,
  Col,
  Row,
  Tag,
  Checkbox,
  Empty,
} from 'vant';
export default {
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanSearch: Search,
        VanButton: Button,
        VanCol: Col,
        VanRow: Row,
        VanTag: Tag,
        VanEmpty: Empty,
        VanCheckbox:Checkbox,
    },
    data(){
        return {
            baseInfo:{
                colorNum:'1',
                companyName:'觉得撒啊等我发多少',
                creditCode:'45646565621231',
                custIsn:'5645646',
                creditLastSearchTime:'张三'
            },
            allChecked:false,
            firmChecked:false,
            legalChecked:false,
            mateChecked:false,
            listChecked:false,
        }
    },
    methods:{
        goDetailUrl(){
            this.$router.push('/DetailsTwo');
        }
    }
}
</script>
<style scoped>
.wrapper {
  padding-top: 46px ;
  min-height: 100vh;
  background: #f7f7f7;
}
.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;
}
.title-top{
    background-color:#fff;
    padding:30px 15px 10px 15px
}
.content{
    padding:15px 15px 10px 15px
}
.main_top{
    margin-top:10px;
    background-color:RGB(35,114,235);
    padding:5px;
    display:flex
}
.main_list{
    background:#ffffff;
    padding:10px
}
.co_ff{
    color:#fff;
    margin-left:10px
}
.main_list_top{
    display:flex;
    padding-left:15px
}
.list_top_right{
    display:flex;
    flex:1;
    justify-content: space-between;
    padding:10px
}
.main_list_two{
    display:flex;
    padding-left:38px;
    padding-bottom:10px;
    font-size:14px
}
.mg_left{
    margin-left:3rem
}
.ft_wt{
    font-weight:700
}
.list_bottom{
    background-color:RGB(247,248,250);
    margin:0 10px 10px 38px;
    display:flex;
    font-size:14px;
    padding:10px
}
.col_lv{
    color:rgba(17,201,95)
}
.col_red{
    color:rgba(219,44,44)
}
.bottom{
    margin-top:20px;
    background:rgba(35,114,235);
    color:#fff;
    text-align:center;
    padding:10px 0;
}
</style>