<style lang="less">
    .Finance{
        >div{
            >.title_{
                display: inline-block;
                background: #5E9AFE;
                color: #fff;
                border-bottom-right-radius: 50px;
                border-top-right-radius: 50px;
                padding: 6px 15px;
                font-size: 16px;
            }
            >.card{
                background: #fff;
                border-radius: 7px;
                box-shadow: 1px 1px 3px #aaa;
                padding: 10px;
                margin: 10px;
                >div{
                    border-left: 3px solid #5E9AFE;
                    padding-left: 8px;
                    display: flex;
                    >div.num{
                        flex-grow:1;
                        >div{
                            font-size:15px;
                            &:not(:last-child){padding-bottom:4px;}
                            >span:first-child{
                                color:#777;
                                padding-right:10px;
                            }
                        }
                    }

                }
            }
        }
    }
</style>
<template>
    <div class="Finance" :style="list.length==0&&'background:#fff;height:100%;'">
        <div v-for="(v,k) in list" :key='k' v-if="list.length>0">
            <!-- <div class="title_">{{v.sName}}</div> -->
            <div class="card">
                <span style="font-size:15px;">{{v.sName}}</span>
                <div>
                    <div class="num">
                        <div><span>数量</span><span>{{Number(v.nQty||0)}}</span></div>
                        <div><span>金额</span><span style="color:#5E9AFE;">{{Number(v.nAmount||0).toLocaleString()}}</span></div>
                        <div><span>余额</span><span style="color:#901AF7;">{{Number(v.nCloseAmount||0).toLocaleString()}}</span></div>
                    </div>
                    <XCircle 
                        style="width: 70px;height: 70px;margin-right:15px;"
                        :percent="Number(v.nPercent)||0"
                        :stroke-width="10"
                        :id="`perent${k}`"
                        :stroke-color="color[k%4]"
                        :trail-width="5"
                        trail-color="#ececec">
                        <span style="color:#36D1DC;">{{Number(v.nPercent)||0}}%</span>
                    </XCircle>
                </div>
            </div>
        </div>
        <img src="@/assets/noData.jpg" style="width:100%;" v-if="list.length==0"/>
    </div>
</template>
<script>
import { XCircle } from 'vux'
import util from "@/libs/util.js"
export default {
    name:"Finance",
    components:{XCircle},
    props:{
        start:Date,
        end:Date,
    },
    data(){
        return{
            list:[],
            color:[['#21AEE4','#74D3F7'],['#5E9AFE',"#A0C1FC"],['#9966CC',"#C190F7"],['#3EC9DE',"#A0F0FA"]],
        }
    },
    watch:{
        start(n){
            this.search()
        },
        end(n){
            this.search()
        },
    },
    created(){
        this.$nextTick(()=>{
            this.search()
        })
    },
    methods:{
        async search(){
            var value=await this.request("getBoss",{
                data:[
                    {key:"url",value:"Financial Summary"},
                    {key:"begin_date",value:util.dateFormat(this.start,"yyyy-MM-dd")},
                    {key:"end_date",value:(this.end?util.dateFormat(this.end,"yyyy-MM-dd"):util.dateFormat(new Date,"yyyy-MM-dd"))+' 23:59'},
                ]
            },"加载中",{})
            if(typeof value=='object'&&value.length>0){
                this.list=value.map(v=>{
                    if(!v.nAmount){
                        v.nPercent=0
                    }else if(!v.nPercent){
                        v.nPercent=v.nAmount>0?100:-100
                    }else{
                        v.nPercent=Math.round((v.nAmount-v.nAmounted)/v.nAmounted*100)
                    }
                    return v;
                })
            }else{
                this.$vux.confirm.show({
                    title:"提示",
                    content:"未获取到数据",
                    showConfirmButton:false,
                })
            }
        }
    },
}
</script>
