<template>
    <div class="banner q-pa-sm q-mt-lg" style="position: relative;"
    :style="{'margin':$q.platform.is.mobile?'20px 10px 0 10px':''}"
    :class="{'mobile':$q.platform.is.mobile}">
        <q-img v-if="$q.platform.is.desktop" src="../../assets/images/personal/bg1.png"
        width="156px"
        height="162px" style="position: absolute; bottom: 0px;"/> 
        <div class="text-center passbookHead-title"
        :class="[$q.platform.is.desktop?'desktop':'mobile']">
                <q-img src="../../assets/images/personal/title.png"
            width="199px"
            height="59px"/>
        </div>
        <div
        class="passbookHead-form"
        :class="{'row justify-between':$q.platform.is.desktop,
    'column mobile':$q.platform.is.mobile}">
            <div class="col"
            :class="{'column':$q.platform.is.desktop,'row justify-between':$q.platform.is.mobile}"
            :style="{'position':$q.platform.is.mobile?'reactive':''}">
                <div class="column"
                :style="{'padding':$q.platform.is.mobile?'20px 0 15px 0':''}">
                    <div class="text-white" style="opacity: .5;">{{$t('v104.passbook.available')}}</div>
                    <div class="row items-end text-white" style="position: relative;">
                        <div class="fz22">
                            ¥
                        </div>
                        <div class="fz40 q-pl-md ">
                            <span style="position: relative; top: 11px;">{{Client_Balance.toFixed(2)}}</span>
                        </div>
                    </div>
                </div>
                <q-img v-if="$q.platform.is.mobile" src="../../assets/images/personal/bg1.png"
                style="position: absolute;right: 20px;top: 40px;"
                    width="117px"
                    height="auto"/> 
            </div>
            <q-separator v-if="$q.platform.is.mobile" dark class="q-mt-md" />
            <div class="row  justify-between col-8"
            :class="{'items-end':$q.platform.is.desktop,'items-center':$q.platform.is.mobile}">
                <div
                :class="{'q-pl-lg fz12 text-white':$q.platform.is.desktop,'fz14 text-amber-1 col text-center':$q.platform.is.mobile}">
                    <span>{{$t('v104.passbook.rules')}}</span>
                </div>
                <q-separator v-if="$q.platform.is.mobile" dark  vertical inset />
                <div class="row items-center" style="height: 100%;"
                :class="{'q-pt-lg':$q.platform.is.desktop,'col-6 text-center':$q.platform.is.mobile}">
                    <div class="rounded-borders cursor-pointer" @click="seeDetails"
                    :class="{'q-pa-xs q-px-sm bg-amber-3 passbookHeadButtom text-orange-14 q-mt-md':$q.platform.is.desktop,'text-amber-1':$q.platform.is.mobile}"
                    :style="{'width':$q.platform.is.mobile?'100%':''}">
                        <q-img v-if="$q.platform.is.desktop" src="../../assets/images/personal/ck.png"
                        width="12px"
                        height="12px" style="position: relative; top: 0px;"/> 
                        <span class="fz14 q-pl-xs">{{$t('v104.passbook.details')}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import { useRouter } from 'vue-router';
    import { defineComponent, ref, reactive, toRefs, inject } from 'vue'
    import { useI18n } from 'vue-i18n'
    import { DirtionmaryHelper } from '../../config/dictionary'
    export default defineComponent({
    name: 'user-info',
    props: {
        dataNum: {
            type: Number,
            require: true
        }
    },
    setup(props,context) {
      const $router = useRouter();
      const { t } = useI18n()
      const data=reactive({
        isUseDetails: false,
        Client_Balance: 0
      })
      data.Client_Balance = props.dataNum
      data.isUseDetails = inject(DirtionmaryHelper.PASSBOOK_DETAILS)
      const methods = {
        seeDetails(){
            data.isUseDetails = true
        }
      }
      return {...toRefs(data),...methods}
    }
  })
  </script>
<style>
.banner {
    /* width: 963px; */
    /* height: 162px; */
    background: -webkit-linear-gradient(left, #F0886B , #ED6A6B);
    background:    -moz-linear-gradient(right, #F0886B, #ED6A6B);
    background:      -o-linear-gradient(right, #F0886B, #ED6A6B);
    background:         linear-gradient(to right, #F0886B , #ED6A6B); 
    border-radius: 24px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 6px solid #EEA376;
    padding: 0 57px;
}
.banner.mobile{
    border-radius: 10px;
    padding: 0 15px;
    border: 4px solid #EEA376;
}
.passbookHead-form{
    padding: 36px 0 37px 246px;
}
.passbookHead-form.mobile{
    padding: 36px 0 5px 0px;
}
.passbookHeadButtom{
    border: 2px solid #F6CA58;
}
.passbookHead-title{
    position: absolute;
    width: 100%;;
    left: 0;
    top: -27px;
}
</style>