<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 ratioListBase = ref([
      {
        Money: 5,
        Ratio: 100000
      },
      {
        Money: 11,
        Ratio: 150000
      },
      {
        Money: 16,
        Ratio: 200000
      },
      {
        Money: 21,
        Ratio: 250000
      }
    ])
    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 = ratioListBase.value
              data.datainfo.GuestNum = data.datainfo.GuestNum ? data.datainfo.GuestNum : 0
              data.datainfo.RatioList.forEach(item => {
                item.percent = data.datainfo.GuestNum / 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>
