<style scoped>
    .page_RemittanceRecord ._return_btn{padding: 20px 0}
    .page_RemittanceRecord ._return_btn span{display: inline-block;padding: 5px 10px;border-radius: 4px;background-color: #E3E3E3;font-size: 14px;color: #333333;font-weight: bold}
    .fc_green{color: #47BF8C !important;font-family: 'PingFangSC-fine';font-weight: bold}
    .fc_red{color: #E95252 !important;font-family: 'PingFangSC-fine';font-weight: bold}
    ._rr_content p{color: #333333;font-size:14px;padding: 15px 0}
    ._rrc_list li{background-color: white;margin-bottom: 10px;border: 1px solid #ebebeb;height: 60px;display: flex;border-radius: 4px; overflow: hidden;min-width: 1100px;}
    ._rrc_list li>div{flex: 1;}
    ._rrc_list li>div:nth-child(2){flex: 3;padding: 0 20px;}
    ._rrcl_left ._date{background-color: #2AAEF2;line-height: 60px;padding: 0 30px;color: #FFFFFF;min-width: 240px;}
    ._d_num{padding: 13px 0;margin-right:20px}
    ._d_{display: inline-block;border: solid 1px #B5B5B5;border-radius: 4px;background-color: #EEEEEE;width: 100px;padding: 5px 10px;text-align: center;font-size: 14px}
    ._d_l{margin-right: 10px;}
    ._d_r{margin-left: 10px;}
    ._rrcl_cen,._rrcl_right{display: flex;align-items: center;border-left: 1px dashed #DCDFE6;border-right: 1px dashed #DCDFE6;}
    ._rrcl_cen p{flex: 1;text-align: center;font-size: 14px;color: #333333;}
    ._rrcl_cen{justify-content: center;flex: 2;}
    ._rrcl_right{border: none ;display: flex;align-items: center}
    ._rrcl_right div{flex: 1;text-align: center;color: #333333;font-size: 12px}
    ._rrcl_right div:nth-child(1){display: flex;align-items: center;justify-content: center;}
    ._rrcl_right img{width: 26px;height: 26px;border-radius: 50%;}
    ._rrc_list li:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
    .icon-zhuanhuan{color: #BBBBBB}
    ._no_content{margin-top: 10%;text-align: center;font-size: 14px}
    ._no_content span{ width: 26px;height: 26px;border-radius: 50%;line-height: 26px;background-color: #BBBBBB;display: inline-block;color: white}
    ._d_bl{ font-size: 14px;color: #333333;width: 250px;text-align: left;padding-left: 40px;}
    .font-16{font-size: 16px;}
    .fc_green.font-16{display: inline-block;padding-left: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 140px;vertical-align: top;}
    .pad_l80{padding-left: 80px}
</style>
<template>
    <div class="page_RemittanceRecord">
        <div class="_return_btn flearfix">
            <span>{{name}}{{$t('tips.yuemingxi')}}</span>
            <button class="hollowFixedBtn fr" type="button" @click="goUrl('currencyManagement')">{{$t('pub.returnBack')}}</button> 
        </div>
        <div class="_rr_content" v-if="dataList.length>0">
            <p>{{$t('fnc.ybljjine')}}<span :class="num>0?'fc_green':'fc_red'">{{nums}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{$t('fnc.bwbljjine')}}<span :class="Bnum>0?'fc_green':'fc_red'">{{Bnums}}</span></span></p>
            <ul class="_rrc_list" v-if="">
                <li v-for="(item,index) in dataList">
                    <div class="_rrcl_left clearfix">
                        <el-tooltip class="item" effect="dark" :content="!item.backNo?item.Alias:item.backNo" placement="top-start">
                            <div class="_date fl">{{!item.backNo?item.Alias:item.backNo}}</div>
                        </el-tooltip>
                    </div>
                    <div class="_rrcl_cen">
                        <span class="_d_ _d_l over_ellipsis">
                            <el-tooltip class="item" effect="dark" :content="item.Name" placement="top-start">
                                <span >{{item.Name}}</span>
                            </el-tooltip></span> 
                        <span class="_d_ _d_r over_ellipsis" >
                            <el-tooltip class="item" effect="dark" :content="item.TypeName" placement="top-start">
                                <span >{{item.TypeName}}</span>
                            </el-tooltip></span>
                        <span class="_d_bl over_ellipsis pad_l80"><span class="_d_bl_name">{{$t('fnc.yuanbiyue')}}</span>
                            <el-tooltip class="item" effect="dark" :content="item.Initialbalance" placement="top-start">
                                <span class="font-16" :class="num>0?'fc_green':'fc_red'">{{item.Initialbalance}}</span>
                            </el-tooltip>
                        </span>
                        <span class="_d_bl over_ellipsis"><span class="_d_bl_name">{{$t('fnc.benbiyue')}}</span>
                            <el-tooltip class="item" effect="dark" :content="item.Balance" placement="top-start">
                                <span class="font-16" :class="num>0?'fc_green':'fc_red'">{{item.Balance}}</span>
                            </el-tooltip>
                        </span>
                    </div>
                    <div class="_rrcl_right">
                        <div>
                            <button style="height: 24px;" class="hollowFixedBtn fr" type="button" @click="goUrl('currencyManagement')">{{$t('fnc.chakanmingxi')}}</button> 
                        </div>
                    </div>
                </li>
            </ul>
            <el-pagination 
                    background
                    @current-change="handleCurrentChange" 
                    :current-page.sync="currentPage"
                    layout="total,prev, pager, next, jumper"
                    :page-size=msg.pageSize 
                    :total=total>
                </el-pagination>
        </div>
        <div v-else class="_no_content">
            <span>!</span> {{tipsMsg}}
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            id:0,
            name:'',
            dataList:[],
            num:0,
            nums:0,
            Bnum:0,
            Bnums:0,
            total:0,
            currentPage: 1,
            loading:true,
            tipsMsg:'该币种当前还没有损益记录',
            msg:{
                pageIndex:1,
                pageSize:7,
                ID:0
            }
        }
    },
    methods:{
        getDateList(){
            this.loading = true
            this.apipost('financeinfo_post_GetMoneyPageList',this.msg,res=>{
                if(res.data.resultCode==1){
                    this.dataList = res.data.data.pageData
                    let num = 0
                    let Bnum =0
                    this.dataList.forEach(x=>{
                        num = num+x.Initialbalance
                        Bnum = Bnum+Number(x.Balance)
                        x.Initialbalance    = this.$commonUtils.addCommas(x.Initialbalance.toFixed(2))
                        x.Balance = this.$commonUtils.addCommas(Number(x.Balance).toFixed(2))
                    })
                    this.num = num.toFixed(2)
                    this.nums = this.$commonUtils.addCommas(num.toFixed(2))
                    this.Bnum = Bnum.toFixed(2)
                    this.Bnums = this.$commonUtils.addCommas(Bnum.toFixed(2))
                }else if(res.data.resultCode==0&&res.data.message=='本位币不会产生汇兑损益哦！'){
                    this.tipsMsg = res.data.message
                }else{
                    this.$message.error(res.data.message)
                }
                this.loading = false
            },err=>{})
        },
        goUrl(path) {
            this.$router.go(-1)
        },
        handleCurrentChange(val) {
            this.msg.pageIndex = val;
            this.initTableInfo();
        },
        resetPageIndex(){
            this.msg.pageIndex=1;
            this.currentPage = 1
        },
    },
    mounted(){
        this.id = this.msg.ID = this.$route.query.id
        this.name = this.$route.query.name
        this.getDateList()
    }
}
</script>