<style lang="less" >
    @import url('../../../styles/common.less');
    #shopVersionFormIndex{
        background: #f6f5f9;
        height:100%;
        display: flex;
        flex-direction: column;
        .HEADER{
          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;
          .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{
          height:1px;
          flex-grow: 1;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
        }
    }
</style>

<template>
  <div id="shopVersionFormIndex">
    <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='liabilities'">负债分析</button-tab-item>
        <button-tab-item @on-item-click="situation='custom'">账单分析</button-tab-item>
        <button-tab-item @on-item-click="situation='income'">收支分析</button-tab-item>
      </button-tab>
    </div>
    <div class="CONTENT">
      <component :is="situation"/>
    </div>
  </div>
</template>

<script>
import Util from '@/libs/util.js';
import {Swiper,SwiperItem,ButtonTab, ButtonTabItem } from 'vux';
import {mapState} from 'vuex';
import salesStatistics from '@/view/chart/sales/statistics.vue'
import custom from '@/view/chart/custom/index.vue'
import income from '@/view/chart/income/index.vue'
import empAna from './empAna/index.vue'
import liabilities from './liabilities/index.vue'

export default {
  name: 'shopVersionFormIndex',
  data () {
    return {
        list:[],
        activeBtn:0,
        situation:'salesStatistics'
    }
  },
  components:{
      Swiper,SwiperItem,ButtonTab,ButtonTabItem,custom,income,salesStatistics,empAna,liabilities
  },
  computed:{
    ...mapState({
      iProjectId:state => state.app.iProjectId,
    })
  },
  async mounted(){

  },
  async activated(){
    window.d = this;
    await this.getData();
  },
  methods:{
    async getData(){
      let res = await this.request('getCipTotalamount',{
        data:{}
      },'加载中',{iProjectId:this.iProjectId});
      this.list = [
        {
          child:[
            {
              title:'本日销售额',
              rate:res.set1[0].nTodaySellAmountRate,
              price:res.set1[0].nTodaySellAmount
            },
            {
              title:'本日实收',
              rate:res.set1[0].nTodaySellProfitRate,
              price:res.set1[0].nTodaySellProfit
            }
          ]
        },
        {
          child:[
            {
              title:'本周销售额',
              rate:res.set1[0].nWeekSellAmountRate,
              price:res.set1[0].nWeekSellAmount
            },
            {
              title:'本周实收',
              rate:res.set1[0].nWeekSellProfitRate,
              price:res.set1[0].nWeekSellProfit
            }
          ]
        },
        {
          child:[
            {
              title:'本月销售额',
              rate:res.set1[0].nMonthSellAmountRate,
              price:res.set1[0].nMonthSellAmount
            },
            {
              title:'本月实收',
              rate:res.set1[0].nMonthSellProfitRate,
              price:res.set1[0].nMonthSellProfit
            }
          ]
        },
        {
          child:[
            {
              title:'本年销售额',
              rate:res.set1[0].nYearSellAmountRate,
              price:res.set1[0].nYearSellAmount
            },
            {
              title:'本年实收',
              rate:res.set1[0].nYearSellProfitRate,
              price:res.set1[0].nYearSellProfit
            }
          ]
        }
      ]
    }
  }
}
</script>