<template>
    <div class="row justify-between q-py-sm q-pt-md"
    :class="[$q.platform.is.desktop?'q-px-lg':'q-px-md']">
        <span class="fz16 text-weight-bold dark"
        :class="[$q.platform.is.mobile?'q-pl-sm':'']"
        :style="{'border-left':$q.platform.is.mobile?'4px solid #EE4454 ':'',}">{{title}}</span>
        <span @click="title==$t('v104.passbook.details')?Return():''">
            <span class="fz12 cursor-pointer text-grey-6">
              {{title!=$t('v104.passbook.details')?'':$t('v104.passbook.return')}}
              <q-icon v-if="title==$t('v104.passbook.details')" name="chevron_right" size="22px" style="position: relative;top: -1px;"/></span>
            <!-- <q-popup-proxy v-if="title!=$t('v104.passbook.details')" class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 10]"
            :model-value="canHide">
                <div class="q-px-md q-py-sm" style="opacity: 0.5;">
                    <div>121212195959</div>
                    <div>1212121</div>
                    <div>1212121</div>
                    
                </div>
            </q-popup-proxy> -->
        </span>
    </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',
    components: {  },
    props: {
        title: {
        type: String,
        require: true
      }
    },
    setup(props) {
      const $router = useRouter();
      const data=reactive({
          isReturn: null,
          title: props.title,
          canHide: false
      })
      data.isReturn = inject(DirtionmaryHelper.PASSBOOK_DETAILS)
      const methods = {
        Return(){
            data.isReturn=false
        }
        
      }
      return {...toRefs(data),...methods}
    }
  })
  </script>
<style>

</style>