<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>
            <div class="content">
                <van-collapse v-model="activeCollapse">
                    <van-collapse-item name="1" class="mb-10">
                        <template #title>
                            <div class="title-box">
                                <div class="title-logo"></div>流水趋势
                            </div>
                        </template>
                        <van-row gutter="10">
                            <van-col span="12" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4">流水总额</div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#1989fa;font-size:25px">2504.13</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4">流出总额</div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#ee8c15;font-size:25px">-511.73</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12" class="">
                                <div class="card-box">
                                    <div class="mb-4">净现金流净额</div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#000;font-size:25px">-7.60</span>
                                        <span>%</span>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4">期末账户余额</div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#000;font-size:25px">1500.55</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                        <van-row>
                            <van-col span="24" class="mb-10">
                                <div id="firstOne" style="width: 350px;height: 300px;margin-bottom: 20px"></div>
                            </van-col>
                        </van-row>
                    </van-collapse-item>
                    <van-collapse-item name="2" class="mb-10">
                        <template #title>
                            <div class="title-box">
                                <div class="title-logo"></div>借贷分析
                            </div>
                        </template>
                        <van-row gutter="10">
                            <van-col span="12" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4">贷款、借贷流入</div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#1989fa;font-size:25px">5.13</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="12" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4">偿还贷款、借款</div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#ee8c15;font-size:25px">-511.73</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="24" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4">月均偿贷/月均经营性流入</div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#1989fa;font-size:25px">12.64</span>
                                        <span>%</span>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="24" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4">来往借贷方：<span>4</span></div>
                                </div>
                            </van-col>
                            <van-col span="24" class="mb-10">
                                <div class="jdf_box">
                                    <div>
                                        浙江网商银行股份有限公司
                                        <van-tag :plain='false' type='success' class="list_tag">银行</van-tag>
                                    </div>
                                    <div>
                                        <span class="lan_ft">2.40</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="24" class="mb-10">
                                <div class="jdf_box">
                                    <div>
                                        深圳市中融小额贷款有限公司
                                        <van-tag :plain='false' type='success' class="list_tag">非银</van-tag>
                                    </div>
                                    <div>
                                        <span class="y_ft">2.40</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="24" class="mb-10">
                                <div class="jdf_box">
                                    <div>
                                        中融小贷
                                        <van-tag :plain='false' type='success' class="list_tag">个人</van-tag>
                                    </div>
                                    <div>
                                        <span class="y_ft">2.40</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                            <van-col span="24" class="mb-10">
                                <div class="jdf_box">
                                    <div>
                                        支付宝-消费还款
                                        <van-tag :plain='false' type='success' class="list_tag">其他</van-tag>
                                    </div>
                                    <div>
                                        <span class="y_ft">2.40</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                    </van-collapse-item>
                    <van-collapse-item name="3" class="mb-10">
                        <template #title>
                            <div class="title-box">
                                <div class="title-logo"></div>流水构成
                            </div>
                        </template>
                        <div class="ls_title">流入</div>
                        <div class="lr_main">
                            <div class="gr_title">个人流入</div>
                            <div class="lr_pross">
                                <div class="pross_title">
                                    <div><span>1478.3652</span>万元</div>
                                    <div>50%</div>
                                </div>
                                <van-progress :percentage="30" :show-pivot=false stroke-width="25"
                                    color="rgba(35,114,235)"></van-progress>
                            </div>
                        </div>
                        <div class="lr_main">
                            <div class="gr_title">内部转账</div>
                            <div class="lr_pross">
                                <div class="pross_title">
                                    <div><span>1478.3652</span>万元</div>
                                    <div>50%</div>
                                </div>
                                <van-progress :percentage="30" :show-pivot=false stroke-width="25"
                                    color="rgba(35,114,235)"></van-progress>
                            </div>
                        </div>
                        <div class="lr_main">
                            <div class="gr_title">异常流入</div>
                            <div class="lr_pross">
                                <div class="pross_title">
                                    <div><span>1478.3652</span>万元</div>
                                    <div>50%</div>
                                </div>
                                <van-progress :percentage="30" :show-pivot=false stroke-width="25"
                                    color="rgba(35,114,235)"></van-progress>
                            </div>
                        </div>
                        <div class="lr_main">
                            <div class="gr_title">销售流入</div>
                            <div class="lr_pross">
                                <div class="pross_title">
                                    <div><span>1478.3652</span>万元</div>
                                    <div>50%</div>
                                </div>
                                <van-progress :percentage="30" :show-pivot=false stroke-width="25"
                                    color="rgba(35,114,235)"></van-progress>
                            </div>
                        </div>
                        <div class="lr_main">
                            <div class="gr_title">销售收入</div>
                            <div class="lr_pross">
                                <div class="pross_title">
                                    <div><span>1478.3652</span>万元</div>
                                    <div>50%</div>
                                </div>
                                <van-progress :percentage="30" :show-pivot=false stroke-width="25"
                                    color="rgba(35,114,235)"></van-progress>
                            </div>
                        </div>
                        <div class="lr_main">
                            <div class="gr_title">现金存入</div>
                            <div class="lr_pross">
                                <div class="pross_title">
                                    <div><span>1478.3652</span>万元</div>
                                    <div>50%</div>
                                </div>
                                <van-progress :percentage="30" :show-pivot=false stroke-width="25"
                                    color="rgba(35,114,235)"></van-progress>
                            </div>
                        </div>
                        <div class="lr_main">
                            <div class="gr_title">其他流入</div>
                            <div class="lr_pross">
                                <div class="pross_title">
                                    <div><span>1478.3652</span>万元</div>
                                    <div>50%</div>
                                </div>
                                <van-progress :percentage="30" :show-pivot=false stroke-width="25"
                                    color="rgba(35,114,235)"></van-progress>
                            </div>
                        </div>
                        <div class="lr_main">
                            <div class="gr_title">活期利息</div>
                            <div class="lr_pross">
                                <div class="pross_title">
                                    <div><span>1478.3652</span>万元</div>
                                    <div>50%</div>
                                </div>
                                <van-progress :percentage="30" :show-pivot=false stroke-width="25"
                                    color="rgba(35,114,235)"></van-progress>
                            </div>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item name="4" class="mb-10">
                        <template #title>
                            <div class="title-box">
                                <div class="title-logo"></div>五大交易对手
                            </div>
                        </template>
                        <div class="ls_title">流入</div>
                        <div class="list_box">
                            <van-row gutter="24" class="">
                                <van-col class="ce_list" span="6">交易对手</van-col>
                                <van-col class="ce_list" span="9">流入金额(万元)</van-col>
                                <van-col class="ce_list" span="9">交易占比</van-col>
                            </van-row>
                        </div>
                        <div class="list_main">
                            <van-row gutter="24" class="">
                                <van-col class="ce_list" span="6">张三</van-col>
                                <van-col class="ce_list lan_ft" span="9">233，200</van-col>
                                <van-col class="ce_list" span="9">15%</van-col>
                            </van-row>
                        </div>
                        <div class="ls_title">流出</div>
                        <div class="list_box">
                            <van-row gutter="24" class="">
                                <van-col class="ce_list" span="6">交易对手</van-col>
                                <van-col class="ce_list" span="9">流出金额(万元)</van-col>
                                <van-col class="ce_list" span="9">交易占比</van-col>
                            </van-row>
                        </div>
                        <div class="list_main">
                            <van-row gutter="24" class="">
                                <van-col class="ce_list" span="6">张三</van-col>
                                <van-col class="ce_list y_ft" span="9">233，200</van-col>
                                <van-col class="ce_list" span="9">15%</van-col>
                            </van-row>
                        </div>
                    </van-collapse-item>
                    <van-collapse-item name="5" class="mb-10">
                        <template #title>
                            <div class="title-box">
                                <div class="title-logo"></div>个人敏感支出
                            </div>
                        </template>
                        <van-row gutter="10">
                            <van-col span="24" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4 jdf_box">
                                        <div>敏感场所</div>
                                        <div class="font-weight-bold">5次</div>
                                    </div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#ee8c15;font-size:25px">-156.64</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                        <van-row>
                            <van-col span="24" class="mb-10">
                                <div id="SecondOne" style="width: 350px;height: 300px;margin-bottom: 20px"></div>
                            </van-col>
                        </van-row>
                        <van-row gutter="10">
                            <van-col span="24" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4 jdf_box">
                                        <div>特殊金额</div>
                                        <div class="font-weight-bold">2次</div>
                                    </div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#ee8c15;font-size:25px">-156.64</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                        <van-row>
                            <van-col span="24" class="mb-10">
                                <div id="thirdOne" style="width: 350px;height: 300px;margin-bottom: 20px"></div>
                            </van-col>
                        </van-row>
                        <van-row gutter="10">
                            <van-col span="24" class="mb-10">
                                <div class="card-box">
                                    <div class="mb-4 jdf_box">
                                        <div>游戏直播</div>
                                        <div class="font-weight-bold">2次</div>
                                    </div>
                                    <div class="font-size-20 font-weight-bold">
                                        <span style="color:#ee8c15;font-size:25px">-156.64</span>
                                        <span>万元</span>
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue';
import navbar from '../../../components/navbar/navbar.vue';
import * as echarts from 'echarts'
import {
    Icon,
    Search,
    Button,
    Col,
    Row,
    Tag,
    Checkbox,
    Empty,
    Collapse,
    CollapseItem,
    Progress,
} from 'vant';
export default {
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanSearch: Search,
        VanButton: Button,
        VanCol: Col,
        VanRow: Row,
        VanTag: Tag,
        VanEmpty: Empty,
        VanCheckbox: Checkbox,
        VanCollapse: Collapse,
        VanCollapseItem: CollapseItem,
        VanProgress: Progress,
    },
    data() {
        return {
            baseInfo: {
                colorNum: '1',
                companyName: '觉得撒啊等我发多少',
                creditCode: '2023-04-21~~2024-09-06',
                custIsn: '2,000笔',
            },
            activeCollapse: ['1', '2', '3', '4', '5'],
        }
    },
    mounted() {
        this.drawChartFirstOne()
        this.drawChartSecondOne()
        this.drawChartThirdOne()
    },
    methods: {
        drawChartFirstOne() {
            let myChart = echarts.init(document.getElementById('firstOne'));
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '10%',
                    bottom: '12%',
                    containLabel: true
                },
                legend: {
                    top: 'bottom',
                    data: ['流入', '流出',]
                },
                xAxis: [
                    { type: 'category', data: ['2023.05', '2023.07', '2023.10', '2023.12', '2024.02'] }
                ],
                yAxis: [{ type: 'value', }, { type: 'value', }],
                series: [
                    { name: '流入', type: 'line', smooth: true, data: [1500, 3600, 5800, 2500, 6500, 8000, 1300], color: '#5087ec' },
                    { name: '流出', type: 'line', smooth: true, data: [1500, 500, 5800, 2500, 4111, 8000, 3555], color: '#ee8c15' },
                ]
            };
            myChart.setOption(option);
        },
        drawChartSecondOne() {
            let myChart = echarts.init(document.getElementById('SecondOne'));

            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '10%',
                    bottom: '12%',
                    containLabel: true
                },

                xAxis: [
                    { type: 'value', }, { type: 'value', }
                ],
                yAxis: [{ type: 'category', data: ['场所1', '场所2', '场所3', '场所4', '场所5'] }],
                series: [
                    { type: 'bar', data: ['10', '30', '50', '20', '100'], barWidth: 20, color: '#ee8c15' },

                ]
            };
            myChart.setOption(option);
        },
        drawChartThirdOne() {
            let myChart = echarts.init(document.getElementById('thirdOne'));

            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '10%',
                    bottom: '12%',
                    containLabel: true
                },

                xAxis: [
                    { type: 'value', }, { type: 'value', }
                ],
                yAxis: [{ type: 'category', data: ['场所1', '场所2', '场所3', '场所4', '场所5'] }],
                series: [
                    { type: 'bar', data: ['10', '30', '50', '20', '100'], barWidth: 20, color: '#ee8c15' },

                ]
            };
            myChart.setOption(option);
        },
    }
}
</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;
    z-index: 9;
    position: sticky;
    top: 46px;
    width: 100%;
}

.title-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
}

.title-box-small {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
}

.title-logo {
    width: 3px;
    height: 14px;
    background: #1989fa;
    margin-right: 6px;
}

.card-box {
    padding: 8px;
    background: #f2f3f5;
    border-radius: 6px;
    font-size: 14px;
    color: #333333;
}

.jdf_box {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex: 1;
    color: #000000
}

.lan_ft {
    color: rgba(35, 114, 235);
    font-weight: 600
}

.y_ft {
    color: rgba(238, 140, 21);
    font-weight: 600
}

.ls_title {
    margin-top: 15px;
    font-weight: 600;
    color: #000000
}

.lr_main {
    display: flex;
    margin-top: 15px
}

.lr_pross {
    flex: 1;
    margin-left: 5px
}

.pross_title {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.gr_title {
    padding-top: 25px
}

.list_box {
    background-color: rgba(242, 243, 245);
    padding: 5px 20px
}

.list_main {
    padding: 5px 20px
}

.ce_list {
    text-align: center
}
</style>