<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 mobile']">
            <div class="column col redEnvelope-left fz14"
            :class="[$q.platform.is.desktop?'q-pl-sm':'']"
            :style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
                <p class="fz14 text-grey-7"
                :class="[$q.platform.is.desktop?'':'q-pl-md']">{{$t('v104.passbook.titles.text6')}}</p>
                <div ref="main" :class="[$q.platform.is.desktop?'q-pt-lg':'']" style="height: 280px;position: relative;top: -30px;"
                :style="{'width': $q.platform.is.desktop?'100%':'95%', 'left': $q.platform.is.desktop?'-20px':'10px','top': $q.platform.is.desktop?'-30px':'0'}"></div> 
            </div>
            <div v-if="$q.platform.is.desktop" class="row justify-center">
                <q-separator vertical inset style="height: 50%;position: relative;top: 9%;"/>
            </div>
            <div class="redEnvelope-right"
            :class="[$q.platform.is.desktop?'col-4 column q-px-lg':'col row q-px-sm']"
            :style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}"
            >
                <div :class="[$q.platform.is.desktop?'':'col-6 text-center']">
                    <div class="fz14 text-grey-7" :class="[$q.platform.is.desktop?'q-pb-xs':'']">{{$t('v104.passbook.titles.text9')}}</div>
                    <div class="row items-end"
                    :class="[$q.platform.is.desktop?'q-pb-lg':'justify-center']">
                        <span class="fz12">¥</span> <div class="fz32 q-pl-sm"><span style="position: relative;top: 9px;">{{datainfo.Amount}}</span></div>
                    </div> 
                </div>
                <q-separator v-if="$q.platform.is.desktop" color="grey-3"/>
                <div :class="[$q.platform.is.desktop?'':'col-6 text-center']">
                    <div class="fz14 text-grey-7" :class="[$q.platform.is.desktop?'q-pt-lg':'']">{{$t('v104.passbook.titles.text10')}}</div>
                    <div class="row items-end"
                    :class="[$q.platform.is.desktop?'q-pb-lg':'justify-center']">
                        <span class="fz12">¥</span> <div class="fz32 q-pl-sm"><span style="position: relative;top: 9px;">{{datainfo.TotalMoney}}</span></div>
                    </div>
                </div>
                <q-separator v-if="$q.platform.is.desktop" color="grey-3"/>
            </div>
            <q-separator v-if="$q.platform.is.mobile" color="grey-3"/>
        </div>
        <div :class="[$q.platform.is.desktop?'q-pb-lg q-px-lg':'q-py-md q-px-md']"><span>{{$t('v104.passbook.titles.text11')}}：</span><span class="q-pl-lg">¥</span><span class="fz32 q-pl-sm">{{datainfo.Amount.toFixed(2)}}</span> </div>
        <div class="q-pt-sm" :class="[$q.platform.is.desktop?'q-px-lg':'q-px-md']">
            <div class="q-pb-lg" v-for="(item,index) in datainfo.RatioList" :key="index" 
            :class="[$q.platform.is.desktop?'row items-center no-wrap':'column']">
                <div class="col">
                    <template v-if="$q.platform.is.desktop">
                        <q-linear-progress style="border-radius: 15px;" v-if="item.percent>1" stripe rounded size="20px" :value="item.width/1000" color="orange-9"/>
                        <q-linear-progress style="border-radius: 15px;"  v-else-if="item.percent<1" stripe rounded size="20px" :value="item.width/1000" color="red-5"/>
                        <q-linear-progress style="border-radius: 15px;"  v-else stripe rounded size="20px" :value="item.width/1000" color="cyan-4"/>
                    </template>
                    <template v-else>
                        <q-linear-progress style="border-radius: 15px;"  v-if="item.percent>1" stripe rounded size="10px" :value="item.width/1000" color="orange-9"/>
                        <q-linear-progress style="border-radius: 15px;"  v-else-if="item.percent<1" stripe rounded size="10px" :value="item.width/1000" color="red-5"/>
                        <q-linear-progress style="border-radius: 15px;"  v-else stripe rounded size="10px" :value="item.width/1000" color="cyan-4"/>
                    </template>
                    
                </div>
                <div class="row items-center no-wrap"
                :class="[$q.platform.is.desktop?'col-4 q-ml-lg':'col']">
                    <div :class="[$q.platform.is.desktop?'':'q-mr-sm']">
                        <template v-if="$q.platform.is.desktop">
                            <q-img v-if="item.percent>1" src="../../assets/images/personal/gou.png"
                            width="20px"
                            height="20px" style="position: relative;"/> 
                            <q-img v-else src="../../assets/images/personal/x1.png"
                            width="26px"
                            height="26px" style="position: relative;"/>
                        </template>
                        <template v-else>
                            <q-img v-if="item.percent>1" src="../../assets/images/personal/gou.png"
                            width="15px"
                            height="15px" style="position: relative;"/> 
                            <q-img v-else src="../../assets/images/personal/x1.png"
                            width="16px"
                            height="16px" style="position: relative;"/>
                        </template>
                    </div>
                    
                    <div
                    :class="[$q.platform.is.desktop?'column q-ml-md':'row no-wrap items-center justify-between q-pt-xs']">
                            <span class="row"
                            :class="[item.percent>1?'text-light-green-6':item.percent<1?'text-red-5':'text-dark',$q.platform.is.desktop?'wrap fz16 text-weight-bold':'fz12 col-6']">
                                <template v-if="item.percent>1">{{$t('v104.passbook.titles.text12')}} ¥{{(item.Money*item.Ratio)/1000}}</template>
                                <template v-if="item.percent<1">{{$t('v104.passbook.titles.text13')}}¥{{item.Money-datainfo.Amount}},{{$t('v104.passbook.titles.text14')}} ¥{{(item.Money*item.Ratio)/1000}}</template>
                            </span>
                        
                        <span class="fz12 text-grey-6 q-pt-xs" 
                        :class="[$q.platform.is.desktop?'':'col-6']">{{$t('v104.passbook.titles.text15')}} ¥ {{item.Money}} {{$t('v104.passbook.titles.text16')}}{{item.Ratio}}‰</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import { ref, toRefs, onMounted, onBeforeUnmount } from "vue";
    import { useRouter } from 'vue-router';
    import { useQuasar } from 'quasar'
    import { defineComponent, ref, reactive, toRefs } from 'vue'
    import { useI18n } from 'vue-i18n'
    import * as echarts from "echarts"
    import rebatehead from '../../components/passbook/rebate/rebatehead.vue'
    export default defineComponent({
    name: 'user-info',
    components: { rebatehead },
    props: {
        Obj: {
            type: Object,
            require: true
        },
        info: {
            type: Object,
            require: true
        }
    },
    setup(props) {
        const $q = useQuasar()
        const { t } = useI18n()
      const $router = useRouter();
      const main = ref();
      const data=reactive({
        titleHead: t('v104.passbook.titles.text5'),
        xMonth:[] as Array<any>,
        yMoney1:[] as Array<any>,
        yMoney2:[] as Array<any>,
        datainfo: null as any
      })
      if(props.Obj&&props.info){
        data.xMonth = props.Obj.xMonth
        data.yMoney1 = props.Obj.yMoney1
        data.yMoney2 = props.Obj.yMoney2
        data.datainfo = props.info
      }
      let chart = null
      const methods = {
        getinit() {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(main.value);
            const option = {
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 30,
                        }
                    },
                    axisTick: false, 
                    data: data.xMonth,
                },
                
                yAxis: {
                    type: "value", 
                    min: '10',
                    axisTick: true,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                },
                grid: {
                    top: $q.platform.is.desktop?"30px":"20px",
                    left: $q.platform.is.desktop?"60px":"45px",
                    right: $q.platform.is.desktop?"60px":"45px",
                    bottom: $q.platform.is.desktop?"50px":"60px",
                },
                series: [
                    {
                        type: "line",
                        smooth: 2,
                        symbol: 'none',
                        data: data.yMoney1, 
                        lineStyle: {
                            width: 3,
                            color: "#36C7D9",
                        },
                        itemStyle: {
                            borderWidth: 5,
                            color: "#FFFFFF",
                        },
                        areaStyle: {
                            color: "#A4E6EE"
                        }
                    },
                    {
                        type: "line",
                        smooth: 2, 
                        data: data.yMoney2, 
                        lineStyle: {
                            width: 3,
                            color: "#ED6A6B",
                            type: 'dashed'
                        },
                        itemStyle: {
                            borderWidth: 5, 
                        },
                        
                        areaStyle: {
                            color: "#FAD2D2"
                        }
                    }
                ]
      
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
      }
      onBeforeUnmount(()=>{
        
      })
      onMounted(() => {
        methods.getinit();
      });
      return {...toRefs(data),main,...methods}
    }
  })
  </script>
<style scoped>
    .redEnvelope-form{
        padding: 15px 30px 0 30px;
    }
    .redEnvelope-form.mobile{
        padding: 15px 10px 0 20px;
    }
    .redEnvelope-left {
        
    }
    .redEnvelope-right{
        
    }

</style>