<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">近半年收益</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: 10%;"/>
            </div>
            <div class="redEnvelope-right q-px-lg"
            :class="[$q.platform.is.desktop?'col-4 column':'col row']"
            :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':'']">本年累计交易总额</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':'']">累计收益</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-px-lg " :class="[$q.platform.is.desktop?'q-pb-lg':'q-py-md']"><span>当前交易额：</span><span class="q-pl-lg">¥</span><span class="fz32 q-pl-sm">{{datainfo.Amount.toFixed(2)}}</span> </div>
        <div class="q-px-lg q-pt-sm">
            <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 v-if="item.percent>1" stripe rounded size="20px" :value="item.width/100" color="orange-9"/>
                        <q-linear-progress v-else-if="item.percent<1" stripe rounded size="20px" :value="item.width/100" color="red-5"/>
                        <q-linear-progress v-else stripe rounded size="20px" :value="item.width/100" color="cyan-4"/>
                    </template>
                    <template v-else>
                        <q-linear-progress v-if="item.percent>1" stripe rounded size="10px" :value="item.width/100" color="orange-9"/>
                        <q-linear-progress v-else-if="item.percent<1" stripe rounded size="10px" :value="item.width/100" color="red-5"/>
                        <q-linear-progress v-else stripe rounded size="10px" :value="item.width/100" color="cyan-4"/>
                    </template>
                    
                </div>
                <div class="row items-center"
                :class="[$q.platform.is.desktop?'col-4 q-ml-lg':'col no-wrap']">
                    <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']">
                            <span>

                            
                                <template v-if="item.percent>1">已激活，预计收益 ¥{{(item.Money*item.Ratio)/1000}}</template>
                                <template v-if="item.percent<1">还差¥{{item.Money-datainfo.Amount}},预计收益 ¥{{(item.Money*item.Ratio)/1000}}</template>
                            </span>
                            </span>
                        
                        <span class="fz12 text-grey-6 q-pt-xs">月交易额已达 ¥ {{item.Money}} 返{{item.Ratio}}‰</span>
                    </div>
                </div>
            </div>
            <!-- <div class="row items-center no-wrap q-py-lg">
                <q-linear-progress class="col q-mr-lg" stripe rounded size="20px" :value="progress2" color="red-5"/>
                <div class="col-4 row items-center q-ml-lg">
                        <q-img src="../../assets/images/personal/gou.png"
                        width="20px"
                        height="20px" style="position: relative;"/> 
                    <div class="column q-pl-md">
                        <span class="fz16 text-red-5 text-weight-bold">还差 ¥360，预计收益 ¥600</span>
                        <span class="fz12 text-grey-6 q-pt-xs">月交易额已达 ¥ 1000 可返5%</span>
                    </div>
                </div>
            </div>
            <div class="row items-center no-wrap q-py-lg">
                <q-linear-progress class="col q-mr-lg" stripe rounded size="20px" :value="progress2" color="cyan-4"/>
                <div class="col-4 row items-center q-ml-lg">
                        <q-img src="../../assets/images/personal/gou.png"
                        width="20px"
                        height="20px" style="position: relative;"/> 
                    <div class="column q-pl-md">
                        <span class="fz16 text-dark text-weight-bold">期待你的爆发</span>
                        <span class="fz12 text-grey-6 q-pt-xs"> 月交易额达 ¥300,000.00 可返 6%</span>
                    </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 } 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 $router = useRouter();
      const main = ref();
      const data=reactive({
        titleHead: '大红包',
        title: '线路数据占比',
        DetailList: [],
        progress2: 0.5,
        xMonth:[],
        yMoney1:[],
        yMoney2:[],
        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
      }
      const methods = {
        getinit() {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(main.value);
            const option = {
                title:{
                    text:'近半年收益',
                    left:'left',
                    textStyle: {
                        fontSize: '14px',
                        color: '#757575',
                        fontWeight: '100',
                        fontFamily: '"microsoft yahei", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "MicrosoftJhengHeiBoldFix", "Microsoft JhengHei" !important',
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 30,
                        }
                    },
                    axisTick: true, 
                    data: data.xMonth,
                },
                
                yAxis: {
                    type: "value", 
                    min: '3000',
                    axisTick: true,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                },
                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);
        }
      }
      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>