<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 25px 0 25px' : '' }">
        <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: 11%" />
      </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 ? 'q-pb-sm' : '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-pt-sm q-pb-lg' : 'justify-center']">
            <span class="fz12"></span>
            <div class="fz32 q-pl-sm">
              <span style="position: relative; top: 9px">{{ datainfo.GuestNum?datainfo.GuestNum:datainfo.Amount }}</span>
            </div>
          </div>
        </div>
        <q-separator v-if="$q.platform.is.desktop" color="grey-3" />
        <div :class="[$q.platform.is.desktop ? 'q-pb-sm' : 'col-6 text-center']">
          <div class="fz14 text-grey-7" :class="[$q.platform.is.desktop ? 'q-pb-xs q-pt-lg' : '']">{{ $t('v104.passbook.titles.text10') }}</div>
          <div class="row items-end" :class="[$q.platform.is.desktop ? 'q-pt-sm q-pb-lg' : 'justify-center']">
            <span class="fz12">Rp</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.CurGuestNum?datainfo.CurGuestNum:datainfo.Amount.toFixed(0) }}</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 / 100" color="orange-9" />
            <q-linear-progress style="border-radius: 15px" v-else-if="item.percent < 1" stripe rounded size="20px" :value="item.width / 100" 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 / 100" color="orange-9" />
            <q-linear-progress style="border-radius: 15px" v-else-if="item.percent < 1" stripe rounded size="10px" :value="item.width / 100" color="red-5" />
            <q-linear-progress style="border-radius: 15px" v-else stripe rounded size="10px" :value="item.width / 100" 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') }}
              </template>

              <template v-if="item.percent < 1">
                {{ $t('v104.passbook.titles.text13') }}
                {{ item.Money - datainfo.CurGuestNum }}/{{ $t('travel.people') }},
                {{ $t('v104.passbook.titles.text14') }}
                Rp{{ item.Ratio.toLocaleString() }} / {{ $t('travel.people') }}
              </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 }}
              <span v-if="index<datainfo.RatioList.length-1">
              -{{ datainfo.RatioList[index+1].Money-1 }}
              </span>
              <span v-else>
                {{ $t('v104.passbook.titles.text17') }}
              </span>
              {{ $t('v104.passbook.titles.text16') }}
              {{ item.Ratio.toLocaleString() }}/{{ $t('travel.people') }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, toRefs, onMounted, onBeforeUnmount,defineComponent,reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
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 ? '45px' : '45px',
            right: $q.platform.is.desktop ? '30px' : '20px',
            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>
