<style lang="less" >
    @import url('../../../../styles/common.less');
    #Liabilities{
        background: #f6f5f9;
        height:100%;
        display: flex;
        flex-direction: column;
        .HEADER{
            display:flex;
            padding:10px;
            >span{
                flex-shrink: 0;
                &.number{
                    color:#3BA5EF;
                    margin-left:5px;
                    flex-grow:1;
                    text-align: right;
                }
            }
            >div{
                margin: 0 10px;
                background:#3BA5EF;
                border-radius: 5px;
            }
        }
        
        .Content{
            height:100%;
            height:1px;
            flex-grow: 1;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            margin-bottom:8px;
            >div{
                display:flex;
                align-items: center;
                &{
                    >div{
                        border-bottom:1px solid #ddd;
                    }
                }
                >div{
                    flex-grow:1;
                    padding:15px 0;
                }
                >span{
                    flex-shrink: 0;
                    padding: 0 13px;
                    &.num{
                        font-weight: bold;
                        color: #555;
                        font-size: 16px;
                        align-self: center;
                    }
                    
                }
                >a{
                    flex-shrink: 0;
                    padding: 18px 13px;
                    &.iconfont{
                        border-bottom: 1px solid #ddd;
                        display: flex;
                        align-items: center;
                        color: #FF7601;
                        font-size: 20px;
                    }
                }
            }
        }
        .img{
            width:100%;
            display: flex;
            justify-content: center;
            img{
                width:100%;
                height:300px;
            }
        }
    }
</style>

<template>
  <div id="Liabilities">
    <div class="tabs">
        <tab :animate="false" active-color="#708bf6">
            <tab-item :selected='Liabilities.activeTab == "0"' @on-item-click="changeLiabilitiesTab">客户欠款</tab-item>
            <tab-item :selected='Liabilities.activeTab == "1"' @on-item-click="changeLiabilitiesTab">欠供应商款</tab-item>
        </tab>
    </div>
    
    <div class="HEADER iCard">
        <span style="color:#777;margin-right:10rpx;">总负债额</span>
        <div :style="{'width':rate+'%','background':color}"></div>
        <span class="number">{{total}}万</span>
    </div>
    <div class="Content iCard">
        <div v-for="(item,index) in list" :key="index">
            <span class="num">{{index+1}}</span>
            <div @click="routerToDetail(item)">
                <div style="margin-bottom:10rpx;">{{item.sCustomerName}}</div>
                <div style="font-size:28rpx;color:#777;">欠款: {{item.nAmount}}元</div>
            </div>
            <a class="iconfont icon-dianhua" :href="'tel:' + item.sTelephone01" v-if='Liabilities.activeTab == "0"'></a>
        </div>
        <div class="img" v-if="list.length <= 0">
            <img src="@/assets/noData.jpg" class="_img" alt="">
        </div>
    </div>
  </div>
</template>

<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import { XProgress,Tab, TabItem } from 'vux'

export default {
  name: 'Liabilities',
  data () {
    return {
        list:[],
        total:0,
        rate:1110,
        color:'',
        Liabilities:{
            activeTab:'0'
        }
    }
  },
  components:{
      XProgress,Tab, TabItem
  },
  computed:{
    ...mapState({
      iProjectId:state => state.app.iProjectId,
    })
  },
  async mounted(){
    window.d = this;
    await this.getData();
  },
  async activated(){
  },
  methods:{
    async getData(){
        let value = await this.request('getCipLiabilities',{
            data:{
                sCustomerType:this.Liabilities.activeTab == 0 ? '客户' : '供应商'
            }
        },'加载中',{iProjectId:this.iProjectId});
        this.list = value;
        this.total=0;
        this.rate=0
        if(value&&value.length>0){
            this.value=value.map(v=>{
                this.total+=v.nAmount||0
                this.rate+=v.nPercent||0
                v.nAmount=(parseFloat(v.nAmount)||0).toLocaleString()
                return v
            })
            this.total=Math.round(this.total/100)/100
            this.rate=Math.round(this.rate*10000)/100
            this.rate>=30&&this.rate<60&&(this.color="yellow")
            this.rate>=90&&(this.color="red")
        }
    },
    changeLiabilitiesTab(index){
        if(this.Liabilities.activeTab == index) return false;
        this.Liabilities.activeTab = index;
        this.getData();
    },
    routerToDetail(item){
        this.$router.push({name:'LiabilitiesDetail',params:{iCustomerId:item.iIden,mode:this.Liabilities.activeTab}})
    }
  }
}
</script>