<style lang="less">
    @import url('../../../styles/common.less');
    #IntReportForms{
        background:#f6f5f9;
        height:100%;
        display:flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        .HEADER{
          flex-shrink: 0;
          padding:10px 10px 0 10px;
          .items{
            display: flex;
            align-items: center;
            .item{
              flex:1;
              display: flex;
              flex-wrap: wrap;
              overflow: hidden;
              >span{
                width:100%;
                color:#aaa;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
              }
              .odd{
                color: #708bf6;
                font-size:26px;
              }
              .even{
                color: #8470FF;
                font-size:26px;
              }
              .contain{
                display: flex;
                flex-wrap: wrap;
                margin-top:5px;
                width:100%;
                .TITLE{
                  color:#aaa;
                }
                >div{
                  width:100%;
                  display: flex;
                  >span{
                    flex:1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }
                }
              }
            }
          }
        }
        .TAB{
          padding:10px;
          flex-shrink: 0;
          .buttonTab {
            > a{
              color:#708bf6;
            }
            > a.vux-button-tab-item-first{
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
            }
            > a.vux-button-tab-item-last{
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
            }
            > a.vux-button-tab-item-first:after{
              border:1px solid #708bf6;
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
              color:#708bf6;
            }
            > a.vux-button-tab-item-middle:after{
              border:1px solid #708bf6;
              color:#708bf6;
            }
            > a.vux-button-tab-item-last:after{
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
              border:1px solid #708bf6;
            }
            > a.vux-button-group-current{
              background: #708bf6;
              color:white;
            }
          }
          
        }
        .content{
            flex-grow:1;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
    }
</style>
<template>
    <div id="IntReportForms">
        <div class="HEADER iCard">
            <swiper height="130px" dots-position="center" dots-class="custom-bottom">
                <swiper-item v-for="(v1,i1) in list" :key='i1'>
                    <div class="items">
                        <div class="item" v-for="(v2,i2) in v1.child" :key='i2'>
                            <span>{{v2.title}}</span>
                            <span :class="[i2 % 2 == 0 ? 'odd' : 'even']">{{v2.price}}</span>
                            <div class="contain">
                                <div class="TITLE">
                                <span>单位</span>
                                <span>同比率</span>
                                </div>
                                <div>
                                <span>元</span>
                                <span>{{v2.rate}}%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </swiper-item>
            </swiper>
        </div>
        <div class="TAB">
            <button-tab class="buttonTab" :value="activeBtn" >
                <button-tab-item @on-item-click="situation='salesStatistics'">销售统计</button-tab-item>
                <!-- <button-tab-item @on-item-click="situation='empAna'">员工排行</button-tab-item> -->
                <button-tab-item @on-item-click="situation='revenue'">收支分析</button-tab-item>
                <button-tab-item @on-item-click="situation='liabilities'">负债分析</button-tab-item>
                <button-tab-item @on-item-click="situation='repayment'">回款额</button-tab-item>
                <button-tab-item @on-item-click="situation='cost'">费用分析</button-tab-item>
            </button-tab>
        </div>
        <div class="content">
            <component :is="situation" />
        </div>
    </div>
</template>
<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import {Swiper,SwiperItem,ButtonTab, ButtonTabItem } from 'vux';
import salesStatistics from "./salesStatistics"
import empAna from "./empAna"
import revenue from "./revenue"
import repayment from "./repayment"
import cost from "./cost"
import liabilities from "./liabilities"
export default {
    name:"IntReportForms",
    components:{Swiper,SwiperItem,ButtonTab, ButtonTabItem,salesStatistics,empAna,revenue,repayment,cost,liabilities},
    data(){
        return{
            list:[],
            activeBtn:0,
            situation:"salesStatistics",
        }
    },
    created(){
        this.$store.dispatch('saveUserId',this.$route.params.userId);
    },
    computed:{
        
    },
    mounted(){
        this.$nextTick(()=>{
            this.init()
        })
    },
    methods:{
        async init(){
            var res=await this.request("getTiipTotalamount",{},"加载中",{})
            this.list=[
                {
                child:[
                    {
                        title:'本日销售额',
                        rate:(res.set1[0].nTodaySellAmountRate||0).toLocaleString(),
                        price:(res.set1[0].nTodaySellAmount||0).toLocaleString()
                    },
                    {
                        title:'本日实收',
                        rate:(res.set1[0].nTodaySellProfitRate||0).toLocaleString(),
                        price:(res.set1[0].nTodaySellProfit||0).toLocaleString()
                    }
                ]
                },
                {
                child:[
                    {
                        title:'本周销售额',
                        rate:(res.set1[0].nWeekSellAmountRate||0).toLocaleString(),
                        price:(res.set1[0].nWeekSellAmount||0).toLocaleString()
                    },
                    {
                        title:'本周实收',
                        rate:(res.set1[0].nWeekSellProfitRate||0).toLocaleString(),
                        price:(res.set1[0].nWeekSellProfit||0).toLocaleString()
                    }
                ]
                },
                {
                child:[
                    {
                        title:'本月销售额',
                        rate:(res.set1[0].nMonthSellAmountRate||0).toLocaleString(),
                        price:(res.set1[0].nMonthSellAmount||0).toLocaleString()
                    },
                    {
                        title:'本月实收',
                        rate:(res.set1[0].nMonthSellProfitRate||0).toLocaleString(),
                        price:(res.set1[0].nMonthSellProfit||0).toLocaleString()
                    }
                ]
                },
                {
                child:[
                    {
                        title:'本年销售额',
                        rate:(res.set1[0].nYearSellAmountRate||0).toLocaleString(),
                        price:(res.set1[0].nYearSellAmount||0).toLocaleString()
                    },
                    {
                        title:'本年实收',
                        rate:(res.set1[0].nYearSellProfitRate||0).toLocaleString(),
                        price:(res.set1[0].nYearSellProfit||0).toLocaleString()
                    }
                ]
                }
            ]
        },
    }
}
</script>