<template>
  <div class="dily-register-user" :data-language="language">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-select
          v-model="selectAreaCode"
          :placeholder="$t('pages.dashboard.shared.select')"
          style="margin-bottom: 10px;"
          size="mini"
          @change="changeAreaCode"
        >
          <el-option
            v-for="item in selecteOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col v-if="isAllowLatestTotal" :span="24" style="margin-bottom: 10px;">
        <line-graph-charts-general :key="'general-' + language" height="300px" :area-code="selectAreaCode" />
      </el-col>
      <el-col v-if="list && list.length > 0" :span="24">
        <div v-for="(item, index) in list" :key="index">
          <el-card v-if="sysOriginPlatforms.includes(item.sysOrigin)" class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ $t('pages.dashboard.dailyPurchase.title', { sysOriginName: item.sysOriginName }) }}</span>
            </div>
            <div v-loading="loading" style="padding: 10px 0">
              <el-row :gutter="10" class="daily-purchase">
                <el-col :span="24">
                  <div class="date">{{ (item.last ? item.last.statisticsTime : '') | dateFormat('yyyy-MM-dd') }}</div>
                </el-col>
                <el-col :md="6" :xs="24">
                  <div class="block-card">
                    <div class="block-card-title">Android</div>
                    <div class="block-card-content cite">{{ item.last ? item.last.androidQuantity || 0 : 0 }}</div>
                  </div>
                </el-col>
                <el-col :md="6" :xs="24">
                  <div class="block-card">
                    <div class="block-card-title">iOS</div>
                    <div class="block-card-content cite">{{ item.last ? item.last.iosQuantity || 0 : 0 }}</div>
                  </div>
                </el-col>
                <el-col :md="6" :xs="24">
                  <div class="block-card">
                    <div class="block-card-title">H5</div>
                    <div class="block-card-content cite">{{ item.last ? item.last.h5Quantity || 0 : 0 }}</div>
                  </div>
                </el-col>
                <el-col :md="6" :xs="24">
                  <div class="block-card">
                    <div class="block-card-title">{{ $t('pages.dashboard.dailyPurchase.validRefund') }}</div>
                    <div class="block-card-content cite">{{ item.last ? item.last.completeQuantity || 0 : 0 }} / {{ item.last ? item.last.reimburseQuantity || 0 : 0 }}</div>
                  </div>
                </el-col>
                <el-col class="card-col" :md="24" :xs="24">
                  <line-graph-charts :key="item.sysOrigin + '-' + language" ref="sysOriginCharts" :charts-data="item.lastMonths" height="300px" />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { latestPurchaseAmountPlatform } from '@/api/statistics'
import LineGraphChartsGeneral from './line-graph-charts-general'
import LineGraphCharts from './line-graph-charts'
import { mapGetters } from 'vuex'

export default {
  name: 'DailyPurchase',
  components: { LineGraphCharts, LineGraphChartsGeneral },
  data() {
    return {
      selectAreaCode: 'DAILY',
      loading: false,
      list: []
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatformAlls', 'language']),
    selecteOptions() {
      const language = this.language
      return [
        { label: this.$t('pages.dashboard.dailyPurchase.regionDaily'), value: 'DAILY' },
        { label: this.$t('pages.dashboard.dailyPurchase.regionSaudi'), value: 'ar' },
        { label: this.$t('pages.dashboard.dailyPurchase.regionTurkey'), value: 'tr' },
        { label: this.$t('pages.dashboard.dailyPurchase.regionOther'), value: 'OTHER' }
      ]
    },
    isAllowLatestTotal() {
      return this.permissionsSysOriginPlatformAlls && this.permissionsSysOriginPlatformAlls.length > 1
    },
    sysOriginPlatforms() {
      if (!this.permissionsSysOriginPlatformAlls || this.permissionsSysOriginPlatformAlls.length <= 0) {
        return []
      }
      return this.permissionsSysOriginPlatformAlls.map(item => item.value)
    }
  },
  created() {
    if (!this.permissionsSysOriginPlatformAlls || this.permissionsSysOriginPlatformAlls.length <= 0) {
      return
    }
    this.renderData()
  },
  methods: {
    renderData() {
      this.loading = true
      latestPurchaseAmountPlatform(this.selectAreaCode).then(res => {
        this.loading = false
        const { body } = res
        const list = body || []
        this.list = []
        this.$nextTick(() => {
          this.list = list.filter(item => !item.sysOrigin || this.permissionsSysOriginPlatformAlls.some(sys => sys.value === item.sysOrigin))
        })
      }).catch(() => {
        this.loading = false
      })
    },
    changeAreaCode() {
      this.renderData()
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 10px;
  padding: 10px;

  .card-col {
    margin-bottom: 10px;
  }
}

.daily-purchase {
  .date {
    font-weight: bold;
    line-height: 30px;
  }
}
</style>
