<template>
    <div class="bg-white q-mt-lg" :style="{'margin':$q.platform.is.mobile?'0 10px':''}">
       <rebatehead :title="titleHead"/> 
       <q-separator color="grey-3" class="q-my-sm" />
       <div class=" q-pt-md"
       :class="[$q.platform.is.desktop?'q-px-lg':'q-px-md']">
        <q-field clearable @clear="activeMonths=0,getList()" v-model="queryTime"
        :label="$t('v104.passbook.titles.text7')" standout class="col-2" style="width: 190px" dense>
            <div class="self-center full-width no-outline" tabindex="0">{{ queryTime }}</div>
            <q-separator color="grey-3" class="q-my-sm" />
            <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
                <!-- <q-date v-model="queryTime" 
                mask="YYYY/MM"
                default-view="Months"
                @update:model-value="dateRangeHandler"></q-date> -->
                <div class="column bg-white" style="width: 300px;">
                    <div class="bg-blue text-white q-px-lg q-py-md fz18">{{$t('v104.passbook.titles.text8')}}</div>
                    <div class="row">
                        <div v-for="(item,index) in chineseMonth"
                        class="col-4 text-center q-py-lg">
                            <span class="cursor-pointer q-py-sm q-px-md rounded-borders useDetails-hover" :class="[activeMonths==index+1?'bg-blue  text-white':'']"
                            @click="activeMonths=index+1,dateRangeHandler()">{{item}}</span>
                        </div>
                    </div>
                    
                </div>
            </q-popup-proxy>
        </q-field>
       </div>
        <div class="row justify-between"
        :class="[$q.platform.is.desktop?'useDetails-form':'q-py-lg q-px-md']">
            <div class="column col useDetails-left fz14">
                <div class="row items-center left-text text-grey-9"
                :class="[$q.platform.is.desktop?'':'active']">
                    <div>{{$t('v104.passbook.col.title5')}}</div><div>{{$t('v104.passbook.col.title6')}}</div>
                    <div>{{$t('v104.passbook.col.title7')}}({{$t('v104.passbook.col.title8')}})</div>
                </div>
                <q-separator color="grey-3" />
                <div class="column">
                    <div 
                    v-for="(item,index) in dataList"
                    class="row items-center left-text text-dark">
                        <div>{{item.updateTime}}</div>
                        <div>{{item.description}}</div>
                        <div><span :class="{'text-red':item.money>0}"><template v-if="item.money>0">+</template> ¥{{item.money}}</span></div>
                    </div>
                    <div class="text-center q-pb-lg">
                        <svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
                        <div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import { ref, toRefs, onMounted } from "vue";
    import { useRouter } from 'vue-router';
    import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
    import { useI18n } from 'vue-i18n'
    import { date, useQuasar } from 'quasar'
    import * as echarts from "echarts"
    import { ApiResult } from '../../@types/enumHelper'
    import message from '../../utils/message'
    import Store from '../../store'
    import rebatehead from '../../components/passbook/rebate/rebatehead.vue'
    import passbookService from '../../api/passbook'
    import { useHotel } from '../../utils/hotelRate'
    export default defineComponent({
    name: 'user-info',
    components: { rebatehead },
    props: {},
    setup(props) {
      const $router = useRouter();
      const qDateProxy = ref(null) as any
      const { t } = useI18n()
      const main = ref();
      const timeStamp = Date.now()
      const formattedString = date.formatDate(timeStamp, 'MM')
    
      const data=reactive({
        dateRange: {} as any,
        queryTime: '',
        titleHead: t('v104.passbook.details'),
        dataList: [] as Array<any>,
        chineseMonth:[] as Array<String>,
        activeMonths: 0 as Number,
      })
      data.activeMonths = formattedString>10?formattedString:formattedString.slice(1)
      data.chineseMonth = useHotel.getMonthType()
      const methods = {
        dateRangeHandler() {
            if(qDateProxy.value) qDateProxy.value.hide()
            data.queryTime = `${date.formatDate(timeStamp, 'YYYY')}/${data.activeMonths>10?data.activeMonths:'0'+data.activeMonths}`
            methods.getList()
            
        },
        getList(){
            passbookService.getBankbookUseDetail(data.queryTime)
            .then(r => {
                if (r.data.resultCode == ApiResult.SUCCESS) {
                    let list = r.data.data.pageData.forEach(item=>{
                        item.updateTime = date.formatDate(item.updateTime, 'YYYY/MM/DD')
                    })
                    data.dataList= list;  
                } else {
                    message.errorMsg(r.data.message)
                }
            })
            .catch(r => {
              message.errorMsg(r.message)
            })
        },
      }
      onMounted(() => {
        methods.getList()
      });
      return {...toRefs(data),
        qDateProxy,
        ...methods}
    }
  })
  </script>
<style scoped>
    .useDetails-form{
        padding: 15px 30px 0 30px;
    }
    .left-text div{
        display: inline-block;
        width: 33.33%;
        text-indent: 31px;
    }
    .left-text.active div{
        text-indent: 0;
        text-align: center;
    }
    .left-text:nth-child(2n){
        background: #E0E0E0;
    }
    .useDetails-hover:hover{
        background: #F2F2F2;
    }

</style>