<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;}
    ._rrcl_left ._date{background-color: #2AAEF2;line-height: 60px;padding: 0 30px;color: #FFFFFF;}
    ._d_num{padding: 13px 0;margin-right:3%}
    ._d_{display: inline-block;border: solid 1px #B5B5B5;border-radius: 4px;background-color: #EEEEEE;width: 85px;padding: 5px 10px;text-align: center;}
    ._d_r{border: dashed 1px #B5B5B5;}
    ._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 p span:nth-child(1){width: 40%;text-align: right;display: inline-block}
    ._rrcl_cen p span:nth-child(2){width:60%;text-align: left;display: inline-block}
    ._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%;margin-right: 10px}
    ._rrc_list li:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
    .icon-zhuanhuan{color: #BBBBBB;display: inline-block;padding: 0 10px;}
    ._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}
    .fc_red.font-16,.fc_green.font-16{font-size: 16px;display: inline-block;padding-left: 10px}
</style>
<template>
    <div class="page_RemittanceRecord">
        <div class="_return_btn flearfix">
            <span>{{name}}汇兑损益</span>
            <button class="hollowFixedBtn fr" type="button" @click="goUrl()">返回</button> 
        </div>
        <div class="_rr_content" v-if="dataList.length>0">
            <p>累计收益（{{num>0?'收益':'亏损'}}）：<span :class="num>0?'fc_green':'fc_red'">{{nums}}</span></p>
            <ul class="_rrc_list">
                <li v-for="(item,index) in dataList">
                    <div class="_rrcl_left clearfix">
                        <div class="_date fl">{{item.TremNum}}</div>
                        <div class="fr _d_num">
                            <span class="_d_ _d_l">{{item.StartRate}}</span>
                            <i class="iconfont icon-zhuanhuan"></i>
                            <span class="_d_ _d_r" :class="item.EndRate>item.StartRate?'fc_green':'fc_red'">{{item.EndRate}}</span>
                        </div>
                    </div>
                    <div class="_rrcl_cen">
                        <p  v-if="item.Money>0"><span>盈利</span><span class="fc_green font-16"> {{item.MoneyTo}}</span></p>
                        <p  v-else><span>亏损</span><span class="fc_red font-16"> {{item.MoneyTo}}</span></p>
                        <!-- <p>盈利 <span class="fc_green">3500.00</span></p> -->
                    </div>
                    <div class="_rrcl_right">
                        <div>
                            <img :src="item.EmPhoto?item.EmPhoto:'../../assets/img/litheader.png'" alt="">
                            <span>{{item.EmName}}</span>
                        </div>
                        <div>
                            {{item.UpdateDate}}
                        </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:'',
            source:0,
            url:'',
            dataList:[],
            num:0,
            nums:0,
            total:0,
            currentPage: 1,
            loading:true,
            tipsMsg:'该账户当前还没有损益记录',
            msg:{
                pageIndex:1,
                pageSize:7,
                AccountID:0,
                Source:0,
                CurrencyId:0,
            }
        }
    },
    methods:{
        getDateList(){
            this.loading = true
            this.apipost('FinanceInfo_post_GetProfitLossPageList',this.msg,res=>{
                if(res.data.resultCode==1){
                    this.dataList = res.data.data.pageData
                    let num = 0
                    this.dataList.forEach(x=>{
                        num = num+x.Money
                        x.MoneyTo = this.$commonUtils.addCommas(x.Money.toFixed(2))
                    })
                    this.num = num.toFixed(2)
                    this.nums = this.$commonUtils.addCommas(num.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.AccountID = this.$route.query.id;
        this.source =this.msg.Source= this.$route.query.source;
        this.msg.CurrencyId= this.$route.query.CurrencyId;
        this.name=this.$route.query.name;
        this.getDateList()
    }
}
</script>