<template>
    <div class="absolute q-pb-sm text-center row justify-center" style="width: 100%; bottom: 0;" 
        :style="{'background-image':upIcon?'linear-gradient(-180deg,rgba(255,255,255,0) 70%,#fff 70%)':'linear-gradient(-180deg,rgba(255,255,255,0) 0%,#fff 70%)','height':upIcon?'25px':'25px'}">
            <span class="text-red-8 cursor-pointer" style="width: 100px;" @click="viewMore">
                 <span class="row items-center" v-if="!upIcon">{{$t('expends.on')}}<span class="q-ml-sm q-mt-xs">﹀</span></span>
                 <span class="row items-center" v-else>{{$t('expends.off')}}<span class="q-ml-sm q-pb-xs">︿</span></span>
             </span> 
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive,toRefs, PropType, computed, ref, toRef, Ref,watch } from 'vue'
import { copyToClipboard, useQuasar } from 'quasar'
import { useI18n } from 'vue-i18n'
export default defineComponent({
	name: '',
	props: ['upIcon'],
	setup(props,context) {
    const { t } = useI18n()
    const data = reactive({
        upIcon: false
    })
    watch(()=>props.upIcon,(n,o)=>{
        data.upIcon = n
    },{immediate:true})
    const methods = {
        viewMore() {
            context.emit('change')
        },
    }
		return { 
      ...toRefs(data),
      ...methods, }
	}
})
</script>
