<template>
    <div class="column items-center">
        <div class="q-mt-sm q-mb-lg"
        :class="[$q.platform.is.desktop?'passbook-form':'']"
        :style="{'width':$q.platform.is.mobile?'100%':''}">
          <transition-group
              v-if="!isUseDetails"
              appear
              enter-active-class="animated fadeInRight"
              leave-active-class="animated fadeInLeft"
            >
              <template v-if="MonthObj&&datainfo">
                <passbookHead :dataNum="datainfo?datainfo.Client_Balance:0"/>
                <rebate/>
                <redEnvelope :Obj="MonthObj" :info="datainfo"/>
              </template>
          </transition-group>
          <transition
            v-else
            appear
            enter-active-class="animated fadeInLeft"
            leave-active-class="animated fadeInRight"
          >
            <useDetails/>
          </transition>
        </div>
    </div>
</template>
<script lang="ts">
    import useMetaModule from '../../module/meta/metaModule'
    import { useRouter } from 'vue-router';
    import { defineComponent, ref, reactive, toRefs, provide, inject } from 'vue'
    import { useQuasar } from 'quasar'
    import { ApiResult } from '../../@types/enumHelper'
    import message from '../../utils/message'
    import { useI18n } from 'vue-i18n'
    import Store from '../../store'
    import { DirtionmaryHelper } from '../../config/dictionary'
    import passbookHead from '../../components/passbook/passbookHead.vue'
    import rebate from '../../components/passbook/rebate.vue'
    import redEnvelope from '../../components/passbook/redEnvelope.vue'
    import useDetails from '../../components/passbook/useDetails.vue'
    import passbookService from '../../api/passbook'
    export default defineComponent({
    name: 'user-info',
    components: { passbookHead,rebate,redEnvelope,useDetails },
    props: {},
    setup() {
      
      const $router = useRouter();
      const $q = useQuasar()
      const data=reactive({
        datainfo:null as Object,
        xMonth:[] as Array<any>,
        yMoney1:[] as Array<any>,
        yMoney2:[] as Array<any>,
        MonthObj:null as Object
      })

      let { setTitle } = useMetaModule()
      const { locale, t } = useI18n()
      const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
      pageTitle.value = t('v104.passbook.pageTitle')
      setTitle(pageTitle.value)

      const isUseDetails = ref(false)
      provide(DirtionmaryHelper.PASSBOOK_DETAILS,isUseDetails)
      const methods = {
        GetBigRedEnvelope() {
          let CustomerId
          if (Store.state && Store.state.user?.userDetail) {
            CustomerId = Store.state.user?.userDetail?.customerId
          }
          $q.loading.show()
          passbookService.GetCustomerBigRedEnvelope(CustomerId)
            .then(r => {
              let arr1=['-', '-', '-','-'];
              let newarr=[];
              if (r.data.resultCode == ApiResult.SUCCESS) {
                data.datainfo=r.data.data;
                data.datainfo.JQLRList.forEach((item,index)=>{
                  data.xMonth.push(item.Date)
                    if(index<5){
                      data.yMoney1.push(item.Money)
                    }
                    if(index>3){
                        newarr.push(item.Money);
                        data.yMoney2=arr1.concat(newarr);
                    }
                })
                data.datainfo.RatioList.forEach(item=>{
                  item.percent=data.datainfo.Amount/item.Money;
                  item.width=(item.percent)*100;
                })
                data.yMoney1=data.yMoney1.concat(["-"]);
                data.MonthObj ={
                  xMonth: data.xMonth,
                  yMoney1: data.yMoney1,
                  yMoney2: data.yMoney2
                }
              } else {
                message.errorMsg(r.data.message)
              }
              $q.loading.hide()
            })
            .catch(r => {
              $q.loading.hide()
              message.errorMsg(r.message)
            })
        },
      }
      methods.GetBigRedEnvelope()
      return {...toRefs(data),isUseDetails,...methods}
    }
  })
  </script>
<style>
.passbook-form{
    width: 963px;
    /* min-width: 663px; */
}
</style>