<template>
  <div>
    <div class="layout-padding card-examples row wrap items-start">
      <div v-for="(config, index) in configs">
        <s-card class="inline-block bigger" :style="formgroup(config)">
          <s-card-media>
            <!--<img src="~assets/parallax2.jpg">-->
            <img :src="imagePath(config)">
          </s-card-media>
          <s-card-title>
            <span slot="title" style="text-align:center">{{config.title}}</span>
            <span slot="subtitle">{{config.subtitle}}</span>
            <span slot="topright" style="text-align:center;float:right;min-width:30%;height:20px" class="bg-pink text-white">{{config.classify}}</span>
          </s-card-title>
          <s-list>
            <div v-for="(item, index2) in config.items">
              <s-item>
                <s-item-side>
                  <s-item-tile :color="item.iconColor" :icon="item.iconName" />
                </s-item-side>
                <s-item-main>
                  <s-item-tile label>
                    {{item.label}}
                    <router-link tag="a" :to="item.link" exact>
                      {{ item.count }}
                    </router-link> 
                    {{item.unit}}
                  </s-item-tile>
                  <!--<s-item-tile sublabel>{{item.sublabel}}.</s-item-tile>-->
                </s-item-main>
              </s-item>
            </div>
          </s-list>
          <s-card-separator />
          <s-card-actions>
            <div style="display: block;text-align: center;line-height: 150%;font-size: .85em;vertical-align:middle;">
              <div>
                {{getNowDate()}}
                  <!--<s-btn v-if="config.refresh" flat small style="float:right;" @click="refresh(config)">
                    <s-icon name="refresh"></s-icon>
                  </s-btn>-->
                  <button v-if="config.refresh" color="primary" style="float:right;height:30px" @click="refresh(config)">
                    <s-icon name="refresh"></s-icon>
                  </button>
              </div>

            </div>
          </s-card-actions>
        </s-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    configs: {
      type: Array,
      default () {
        return []
      }
    },
    background: {
      type: String,
      default () {
        return 'white'
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    imagePath: function (config) {
      return require('assets/' + config.image)
    },
    /* imgUrl: function (file) {
      return images('./' + file)
    }, */
    refresh (config) {
      this.$emit('refresh', config.id, () => {
      })
    },
    form () {
      var background = this.background

      return {
        background: background
      }
    },
    formgroup (config) {
      var width = ''
      var height = ''
      var background = ''

      if (config.background === undefined) {
        background = 'transparent'
      }
      else {
        background = config.background
      }

      if (config.width === undefined) {
        width = '300px'
      }
      else {
        width = config.width
      }

      if (config.height === undefined) {
        height = ''
      }
      else {
        height = config.height
      }
      return {
        width: width,
        height: height,
        background: background
      }
    },
    padLeft (str, lenght) {
      if (str.length >= lenght) {
        return str
      }
      else {
        return this.padLeft('0' + str, lenght)
      }
    },
    padRight (str, lenght) {
      if (str.length >= lenght) {
        return str
      }
      else {
        return this.padRight(str + '0', lenght)
      }
    },
    getNowDate () {
      var today = new Date()
      var currentDateTime =
      today.getFullYear() + '年' +
      this.padLeft((today.getMonth() + 1).toString(), 2) + '月' +
      this.padLeft(today.getDate().toString(), 2) + '日 ' +
      this.padLeft(today.getHours().toString(), 2) + ':' + this.padLeft(today.getMinutes().toString(), 2) + ':' + this.padLeft(today.getSeconds().toString(), 2)

      return currentDateTime
      // return new Date().Format('yyyy-MM-dd HH:mm:ss')
    }
  },
  computed: {
  }
}
</script>

<style lang="stylus">
.card-examples
  .s-card
    width 300px
  .bigger
    width 450px
  @media (max-width $breakpoint-xs-max)
    .s-card
      width 100%
</style>
