<template>
    <div class="bg-white q-mt-lg"
    :style="{'margin':$q.platform.is.mobile?'20px 10px 0 10px':'',
    'border-radius':$q.platform.is.desktop?'':'10px'}">
       <rebatehead :title="titleHead"/> 
       <q-separator color="grey-3" class="q-my-sm" />
        <div
        style="padding: 15px 0 0 0;"
        :class="[$q.platform.is.desktop?'row justify-between':'column reverse']">   
        <!-- style="border: 1px dashed #E0E0E0;" -->
            <div class="col">
            <div v-if="$q.platform.is.mobile" class="text-center fz16 q-pb-md" @click="isShow=!isShow">
                {{$t('v104.passbook.viewdetails')}}<q-icon
                :name="isShow ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" class="q-ml-sm text-grey-6"
                size="25px"
            />
            </div>
            <transition
            v-if="isShow||$q.platform.is.desktop"
              appear
              enter-active-class="animated fadeInUp"
              leave-active-class="animated fadeInDown"
            >   
                
                <div class="column col rebate-left fz14"
                :style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
                    <div class="row items-center left-text text-grey-9"
                    :class="[$q.platform.is.desktop?'':'q-py-md active']"
                    :style="{'border-top':$q.platform.is.desktop?'':'1px solid #EEEEEE'}">
                        <div>{{$t('v104.passbook.col.title1')}}{{$q.platform.is.desktop?$t('v104.passbook.col.title01'):''}}</div><div>{{$t('v104.passbook.col.title2')}}</div>
                        <div>{{$t('v104.passbook.col.title3')}}</div><div>{{$t('v104.passbook.col.title4')}}</div>
                    </div>
                    <q-separator color="grey-3" />
                    <div class="column" v-if="dataList.length>0">
                        <div 
                        v-for="(item,index) in dataList"
                        class="row items-center left-text text-dark">
                            <div>{{item.id}}</div>
                            <div>{{item.teamSeries}}</div>
                            <div>{{item.peopleNum}}</div>
                            <div><span :class="{'text-red':item.money>0}"><template v-if="item.money>0">+</template> ¥{{item.money}}</span></div>
                        </div>
                    </div>
                    <div class="text-center q-pb-lg"
                    v-else :style="{'height': $q.platform.is.desktop?'300px':'','line-height': $q.platform.is.desktop?'200px':''}">
                        <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>
            </transition>
            </div>
            <div class="rebate-right column"
            :class="[$q.platform.is.desktop?'col-4 q-px-lg':'col']"
            :style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
                <div class="fz14 text-grey-7"
                :class="[$q.platform.is.desktop?'':'q-pl-md']">{{$t('v104.passbook.titles.text2')}}</div>
                <div :class="[$q.platform.is.desktop?'q-pl-lg':'']">
                <div ref="main" style="width: 100%;height: 300px;"></div> 
                </div>
            </div>
        </div>

    </div>
</template>
<script lang="ts">
    import { ref, toRefs, onMounted } from "vue";
    import { useRouter } from 'vue-router';
    import { useQuasar } from 'quasar'
    import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
    import { useI18n } from 'vue-i18n'
    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: {
      user: {
        type: Object,
        require: true
      }
    },
    setup(props) {
      const $q = useQuasar()
      const { t } = useI18n()
      const $router = useRouter();
      const main = ref();
      const data=reactive({
        isShow: false,
        titleHead: t('v104.passbook.titles.text1'),
        dataList: [] as Array<any>,
        zbList:[] as Array<any>,
      })
      
      const methods = {
        getZb(){
            passbookService.getLinePercentage()
            .then(r => {
                data.zbList = []
                if (r.data.resultCode == ApiResult.SUCCESS) {
                    let datainfo=r.data.data;  
                    let arr=[];
                    datainfo.forEach(item=>{
                        let obj={};
                        obj.name=item.LineName;
                        obj.value=item.num;
                        data.zbList.push(obj);
                    })
                    methods.getinit()
                } else {
                    message.errorMsg(r.data.message)
                }
            })
            .catch(r => {
              message.errorMsg(r.message)
            })
        },
        getList(){
            let CustomerId
            if (Store.state && Store.state.user?.userDetail) {
                CustomerId = Store.state.user?.userDetail?.customerId
            }
            passbookService.getDepositBankbookDetail(CustomerId)
            .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)
            })
        },
        getinit() {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(main.value);
            
            // 指定图表的配置项和数据
            const option = {
                    tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    calculable: true,
                    graphic: [
                        {
                            type: "text",
                            left: $q.platform.is.desktop?"35%":"40%",
                            top: $q.platform.is.desktop?"43%":"48%",
                            style: {
                                text: t('v104.passbook.titles.text3'),
                                textAlign: "center",
                                fill: "#2C3343", //文字的颜色
                                fontSize: 18,
                                fontFamily: "pingfangR"
                            }
                        }
                    ],
                    series: [
                        {
                            name: t('v104.passbook.titles.text4'),
                            type: "pie",
                            radius: ["50%", "70%"],
                            center: $q.platform.is.desktop?["50%", "45%"]:["50%", "50%"],
                            itemStyle: {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                borderWidth: 2,
                                borderColor: "#fff",
                                color: function(params) {
                                    //自定义颜色
                                    var colorList = [
                                        "#F8733A",
                                        "#53D277",
                                        "#36C7D9",
                                        "#F8733A",
                                        "#F9B89C"
                                    ];
                                    return colorList[params.dataIndex];
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontSize: "20",
                                        fontFamily: "pingfangR"
                                    }
                                }
                            }
                        },
                        data: data.zbList
                    }
                ]
            };
            
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
      }
      onMounted(() => {
        methods.getList()
        methods.getZb();
      });
      return {...toRefs(data),main,...methods}
    }
  })
  </script>
<style scoped>
    .rebate-form{
        padding: 15px 30px 0 30px;
    }
    .rebate-left {
        
    }
    .left-text div{
        display: inline-block;
        width: 25%;
        text-indent: 31px;
        word-spacing: wrap;
        overflow: hidden;
    }
    .left-text.active div{
        text-indent: 0;
        text-align: center;
    }
    .left-text:nth-child(2n){
        background: #E0E0E0;
    }
    .rebate-right{
       
    }

</style>