<template>
  <div class="mainPage flex-v">
    <div class="top">
      <topCaseInfo :data="topCaseInfoData" :userName="userInfo.customer.RealName ? userInfo.customer.RealName : userInfo.customer.CustomerName" @selectCase="showVanPicker"></topCaseInfo>
    </div>
    <div class="flex-item flex-v body" v-if="data.allCard">
      <span>销售姓名：<em>{{data.RealName}}</em></span>
      <ul class="flex-h">
        <li class="flex-item" :class="{'active': activeIndex === 0}" @click="cutNav(0)">
          <span>饮品</span>
          <span>（已赠送{{drinkNumber}}杯）</span>  
        </li> 
        <li class="flex-item" :class="{'active': activeIndex === 1}" @click="cutNav(1)">
          <span>卡券</span>
          <span>（已发出{{data.CustomerCard.length + data.CustomerCoupon.length}}张）</span>  
        </li> 
      </ul>
      <div class="flex-item">
        <div>
          <ul>
            <li :hidden="activeIndex === 1">
              <ul class="list">
                <li class="flex-h" v-for="(item,index) in data.OrdersDetail" :key="index">
                  <div class="flex-item">
                    <div>
                      <span>{{item.GoodsName}}</span>
                    </div>
                  </div>
                  <div class="flex-item">
                    <div>
                      <span>￥{{item.Price}} * {{item.Number}}</span>
                    </div>
                  </div>
                  <span>{{toolClass.dateFormat(item.CreateDate, 'yyyy/MM/dd hh:mm')}}</span>
                </li>
              </ul>
            </li>
            <li :hidden="activeIndex === 0">
              <ul class="list">
                <li class="flex-h" v-for="(item,index) in data.allCard" :key="index" >
                  <div class="flex-item">
                    <div>
                      <span>{{item.CustomerCardName || item.CustomerCouponName}}</span>
                    </div>
                  </div>
                  <div class="flex-item">
                    <div>
                      <span>￥{{item.Price}} * 1</span>
                    </div>
                  </div>
                  <span>{{toolClass.dateFormat(item.ReceiveDate, 'yyyy/MM/dd hh:mm')}}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topCaseInfo from '../../../components/topCaseInfo/index'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapState: mapForbidState, mapActions: mapForbidActions } = createNamespacedHelpers('forbid')
const { mapActions: actions } = createNamespacedHelpers('app')

export default {
  name: '',
  data () {
    return {
      activeIndex: 0,
      topCaseInfoData: {
        caseName: '',
        caseId: '',
        showSelect: false
      },
      data: {},
      drinkNumber: 0
    }
  },
  computed: {
    ...mapState({
      userInfo: x => x.userCenter.userInfo,
      CaseList: x => x.app.CaseList,
    }),
    ...mapForbidState({
      salesCardList: x => x.salesCardList
    })
  },
  components: {
    topCaseInfo,
  },
  created () {
    this.getCaseList().then((res) => {
      this.topCaseInfoData.caseId = this.userInfo.customer.BelongCaseId
      for (let i = 0; i < this.CaseList.length; i++) {
        if (this.CaseList[i].CaseId === this.topCaseInfoData.caseId) {
          this.topCaseInfoData.caseName = this.CaseList[i].CaseName
        }
      }
    })
    this.getSalesCardList({ id: this.$route.query.id }).then(() => {
      this.data = this.salesCardList
      this.data.CustomerCard = this.data.CustomerCard ? this.data.CustomerCard : []
      this.data.CustomerCoupon = this.data.CustomerCoupon ? this.data.CustomerCoupon : []
      this.data.OrdersDetail = this.data.OrdersDetail ? this.data.OrdersDetail : []
      this.data.allCard = this.data.CustomerCard.concat(this.data.CustomerCoupon)
      let num = 0
      for (let i = 0; i < this.data.OrdersDetail.length; i++) {
        num += this.data.OrdersDetail[i].Number
      }
      this.drinkNumber = num
    })
  },
  methods: {
    ...actions([
      'getCaseList',
    ]),
    ...mapForbidActions(['getSalesCardList']),
    cutNav (index) {
      this.activeIndex = index
    },
    showVanPicker () {
      this.showSelect = true
    },
    selectCase (val) { // 选择案场
      this.topCaseInfoData.caseName = val.CaseName
      this.topCaseInfoData.caseId = val.CaseId
      this.getCaseTableList({
        caseid: this.topCaseInfoData.caseId
      })
      this.showSelect = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import 'page.scss';
</style>
