<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']">
    <div class="q-pt-md" style="max-width: 300px" :class="[$q.platform.is.desktop?'q-px-lg':'q-px-md']">
    <q-field stack-label label="日期" outlined style="min-width: 190px" dense clearable  v-model="queryTime"
    @update:model-value="dateRangeHandler" class="col-2">
        <div class="self-center full-width no-outline" tabindex="0">{{ queryTime }}</div>
        <q-popup-proxy cover transition-show="scale"
        :offset="[0, 7]" transition-hide="scale" ref="qDateProxy" >
            <q-date v-model="queryTime" mask="YYYY-MM" 
            reason="month"
            default-view="Months"
            default-year-month="2024-01"
            @navigation="dateRangeHandler($event)"
            @update:model-value="dateRangeHandler" clearable></q-date>
          </q-popup-proxy>
          <template v-slot:append>
          <q-icon name="event" color="orange" />
        </template>
    </q-field>
    <!-- <q-input filled v-model="queryTime" label="Label">
      <template v-slot:prepend>
        <q-icon name="event" class="cursor-pointer"></q-icon>
          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
            <q-date v-model="queryTime" mask="YYYY-MM" @update:model-value="dateRangeHandler" clearable>
              <div class="row items-center justify-end">
                <q-btn v-close-popup label="Close" color="primary" flat />
              </div>
            </q-date>
          </q-popup-proxy>
      </template>
      <template v-slot:append>
          <q-icon name="event" color="orange" />
        </template>
    </q-input> -->
  </div>
       </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">
                   <template v-if="dataList&&dataList.length>0">
                    <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.type==1">+</template>
                            <template v-else-if="item.type==2">-</template>
                            ¥{{item.money}}</span></div>
                    </div>
                   </template>
                   <template v-else>
                    <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>
                   </template>
                </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(event) {
            if(event&&event.year&&event.month){
                data.queryTime = event.year+'-'+(event.month>10?event.month:'0'+event.month)  
            }
            else data.queryTime = ''
           if(qDateProxy.value) qDateProxy.value.hide()
            methods.getList()
            
        },
        getList(){
            let CustomerId
            if (Store.state && Store.state.user?.userDetail) {
                CustomerId = Store.state.user?.userDetail?.customerId
            }
            passbookService.getBankbookUseDetail_V2(CustomerId,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= r.data.data.pageData;  
                } 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>