<template>
  <div class="quick-link" :data-language="language">
    <el-card>
      <div class="content">
        <el-row :gutter="12">
          <el-col v-for="(item, index) in links" :key="index" class="item-card" :sm="6" @click.native="clickCard(item)">
            <el-card shadow="hover">
              {{ item.title }}
            </el-card>
          </el-col>
        </el-row>
      </div>
      <el-divider />
      <div class="dashboard-text">{{ $t('pages.dashboard.quickLink.devUsage') }}</div>
      <div class="content">
        <el-row :gutter="12">
          <el-col v-for="(item, index) in devLinks" :key="index" class="item-card" :sm="6" @click.native="clickCard(item)">
            <el-card shadow="hover">
              {{ item.title }}
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'QuickLink',
  computed: {
    ...mapGetters(['language']),
    links() {
      const language = this.language
      return [
        { title: this.$t('pages.dashboard.quickLink.testAdmin'), link: 'http://test.back.sugartimeapp.com/' },
        { title: this.$t('pages.dashboard.quickLink.testBroker'), link: 'http://test.broker.sugartimeapp.com/' },
        { title: this.$t('pages.dashboard.quickLink.productionAdmin'), link: 'http://admin.sugartimeapp.com/' },
        { title: this.$t('pages.dashboard.quickLink.productionBroker'), link: 'http://broker.sugartimeapp.com/' },
        { title: this.$t('pages.dashboard.quickLink.productionIm'), link: 'http://im.sugartimeapp.com/' }
      ]
    },
    devLinks() {
      const language = this.language
      return [
        { title: this.$t('pages.dashboard.quickLink.devBroker'), link: 'http://dev.broker.sugartimeapp.com/' },
        { title: this.$t('pages.dashboard.quickLink.devJenkins'), link: 'http://dev.jenkins.sugartimeapp.com/' },
        { title: this.$t('pages.dashboard.quickLink.testJenkins'), link: 'http://test.jenkins.sugartimeapp.com/' },
        { title: this.$t('pages.dashboard.quickLink.devSupervisor'), link: 'http://119.23.230.191:9001/' },
        { title: this.$t('pages.dashboard.quickLink.testSupervisor'), link: 'http://47.254.89.114:9001/' },
        { title: this.$t('pages.dashboard.quickLink.productionSupervisor'), link: 'http://47.251.15.209:9001/' },
        { title: this.$t('pages.dashboard.quickLink.graphApiDocs'), link: 'http://cloud.doc.tuputech.com/' }
      ]
    }
  },
  methods: {
    clickCard(item) {
      location.href = item.link
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: 20px;

  .item-card {
    margin-bottom: 20px;
  }
}
</style>
