<template>
  <div v-loading="loading" class="dily-register-user" :data-language="language">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-autocomplete
          v-model="selectOriginName"
          popper-class="my-autocomplete"
          :fetch-suggestions="querySearch"
          :placeholder="$t('pages.dashboard.dailyCurrencyGold.originTypePlaceholder')"
          clearable
          style="width: 100%; padding-bottom: 10px;"
          @select="handleSelect"
          @clear="handleSelect"
        >
          <i slot="suffix" class="el-icon-edit el-input__icon" />
          <template slot-scope="{ item }">
            <span class="name">{{ item.name }}</span>
            <div class="value font-info" style="font-size:12px;line-height: 12px; padding-bottom: 10px;">{{ item.value }}</div>
          </template>
        </el-autocomplete>
      </el-col>
      <el-col :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.dailyCurrencyGold.title', { sysOriginName: item.sysOriginName }) }}&nbsp;
                <a class="font-blue" @click="clickAnalyze">{{ $t('pages.dashboard.dailyCurrencyGold.realTimeAnalysis') }}</a>
              </span>
            </div>
            <div style="padding: 10px 0">
              <el-row>
                <el-col class="card-col" :md="24" :xs="24">
                  <line-graph-charts
                    ref="lineGraphCharts"
                    :key="item.sysOrigin + '-' + language"
                    :charts-data="item.list"
                    height="300px"
                  />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { latestStatisticsGoldOriginDetails } from '@/api/statistics'
import LineGraphCharts from './line-graph-charts'
import { currencyOrigins } from '@/constant/type'
import { mapGetters } from 'vuex'

export default {
  name: 'DilyRegisterUser',
  components: { LineGraphCharts },
  data() {
    return {
      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
      latestStatisticsGoldOriginDetails(this.selectOrigin).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')
    }
  }
}
</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>
