<template>
  <div v-loading="loading" class="dily-register-user" :data-language="language">
    <el-date-picker
      v-model="dateNumber"
      style="margin-bottom: 10px;"
      type="date"
      :placeholder="$t('pages.dashboard.goldOriginTop.datePlaceholder')"
      value-format="yyyyMMdd"
      size="mini"
      :picker-options="pickerOptions"
      :clearable="false"
      @change="changeDateNumber"
    />
    <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.goldOriginTop.title', { sysOriginName: item.sysOriginName }) }}</span>
        </div>
        <div style="padding: 10px 0">
          <el-row>
            <el-col class="card-col" :md="24" :xs="24">
              <bar-graph-charts
                ref="lineGraphCharts"
                :key="item.sysOrigin + '-' + language"
                :charts-data="item.list"
                :height="(item.list.length * 20) + 'px'"
              />
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { latestStatisticsGoldOriginDetailsAll } from '@/api/statistics'
import BarGraphCharts from './bar-graph-charts'
import { currencyOrigins } from '@/constant/type'
import { mapGetters } from 'vuex'
import { formatDate, beforeDateObject } from '@/utils'

export default {
  name: 'DilyRegisterUser',
  components: { BarGraphCharts },
  data() {
    return {
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > beforeDateObject(1).getTime()
        }
      },
      dateNumber: formatDate(beforeDateObject(new Date().getHours() >= 8 ? 1 : 2), 'yyyyMMdd'),
      loading: false,
      list: [],
      selectOrigin: currencyOrigins[0].value,
      selectOriginName: currencyOrigins[0].name
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatformAlls', 'language']),
    sysOriginPlatforms() {
      if (!this.permissionsSysOriginPlatformAlls || this.permissionsSysOriginPlatformAlls.length <= 0) {
        return []
      }
      return this.permissionsSysOriginPlatformAlls.map(item => item.value)
    }
  },
  created() {
    this.loadOrigin()
  },
  methods: {
    loadOrigin() {
      this.loading = true
      latestStatisticsGoldOriginDetailsAll(this.dateNumber).then(res => {
        this.loading = false
        const { body } = res
        const list = body || []
        this.list = list.filter(item => !item.sysOrigin || this.permissionsSysOriginPlatformAlls.some(sys => sys.value === item.sysOrigin))
      }).catch(() => {
        this.loading = false
      })
    },
    querySearch(queryString, cb) {
      const restaurants = currencyOrigins
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0 ||
          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
      }
    },
    handleSelect(item) {
      const selectedItem = item || currencyOrigins[0]
      this.selectOrigin = selectedItem.value
      this.selectOriginName = selectedItem.name
      this.loadOrigin()
    },
    clickAnalyze() {
      this.$router.push('/system/manager/tools/manager/gold-analyze')
    },
    changeDateNumber() {
      this.loadOrigin()
    }
  }
}
</script>

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

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

.register-logout-count {
  .date {
    font-weight: bold;
    line-height: 30px;
  }
}
</style>
