<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-px-lg q-pt-md">
        <q-field clearable v-model="queryTime"
        label="时间选择" 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>
            </q-popup-proxy>
        </q-field>
       </div>
        <div class="row justify-between useDetails-form">
            <div class="column col useDetails-left fz14">
                <div class="row items-center left-text text-grey-9">
                    <div>时间</div><div>描述</div>
                    <div>支出(收入)</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.id}}</div>
                        <div>{{item.teamSeries}}</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'
    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 data=reactive({
        dateRange: {} as any,
        queryTime: '',
        titleHead: '使用明细',
        dataList: [],
      })
      
      const methods = {
        dateRangeHandler(e: any) {
            methods.getList()
            if (qDateProxy.value) qDateProxy.value.hide()
        },
        getList(){
            passbookService.getBankbookUseDetail(data.queryTime)
            .then(r => {
                if (r.data.resultCode == ApiResult.SUCCESS) {
                    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:nth-child(2n){
        background: #E0E0E0;
    }

</style>