<template>
  <div>
    <div>
      <ul class="linkcrumb">
        <li v-for="action in actions">
          <div v-if="action.field !== ''">
            <a @click="action(action)">
              {{ action.field }}
            </a>
          </div>
        </li>
      </ul>
    </div>

    <div>
      <q-search class="auto" v-model="search" @input="dosearch()"></q-search>
    </div>
    <div style="overflow-y:auto;position:absolute" class="fill-available">
      <table style="border:5px #cccccc solid;width:240px;border-style:inset;" cellpadding="10" border='5px'>
        <tr v-for="m in loops(fields.length)">
          <td v-if="(m-1)*rowCount < fields.length">
            <a>
              <router-link tag="button" :to="fields[(m-1)*rowCount].link" exact>
                <i>{{ fields[(m-1)*rowCount].img }}</i><br>
                {{ fields[(m-1)*rowCount].title }}
              </router-link>
            </a>
          </td>
          <td v-else>
          </td>

          <td v-if="(m-1)*rowCount + 1 < fields.length">
            <a>
              <router-link tag="button" :to="fields[(m-1)*rowCount + 1].link" exact>
                <i>{{ fields[(m-1)*rowCount + 1].img }}</i><br>
                {{ fields[(m-1)*rowCount + 1].title }}
              </router-link>
            </a>
          </td>
          <td v-else>
          </td>

          <td v-if="(m-1)*rowCount + 2 < fields.length">
            <a>
              <router-link tag="button" :to="fields[(m-1)*rowCount + 2].link" exact>
                <i>{{ fields[(m-1)*rowCount + 2].img }}</i><br>
                {{ fields[(m-1)*rowCount + 2].title }}
              </router-link>
            </a>
          </td>
          <td v-else>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      search: ''
    }
  },
  props: {
    config: {
      type: Object,
      default: {}
    },
    actions: {
      type: Array,
      default: []
    },
    fields: {
      type: Array,
      default: []
    },
    rowCount: {
      type: Number,
      default: 3
    }
  },
  created () {
    // console.log(this.fields[0].link)
  },
  methods: {
    inputcontrol () {
      return {
        'background-color': this.config.background
      }
    },
    dosearch () {
      this.$emit('dosearch', this.search, () => {
      })
    },
    action (action) {
      // console.log('action:' + action)
    },
    loops (counts) {
      if (counts < 24) {
        return 8
      }
      else {
        return Math.ceil(counts / 3)
      }
    },
    goUrl (url) {

    }
  }
}
</script>

<style type="text/css" scoped>
a {
  color: white
}
td {
  width:70px;
  height: 70px;
  border-width:5px;
  border-style:inset;
}
li {
  display: inline;
  width: 50px;
  float: left;
}
.linkcrumb {
  display: inline-flex;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  border-radius: 0.25rem;
}

.linkcrumb::after {
  display: block;
  content: "";
  clear: both;
}

.linkcrumb-item {
  float: left;
}

.linkcrumb-item + .linkcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  color: #636c72;
  content: "/";
}

.linkcrumb-item + .linkcrumb-item:hover::before {
  text-decoration: underline;
}

.linkcrumb-item + .linkcrumb-item:hover::before {
  text-decoration: none;
}

.linkcrumb-item.active {
  color: #636c72;
}

.fill-available {
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: -moz-available;  
  width: fill-available;
  height: -webkit-fill-available;
  height: -moz-fill-available;
  height: -moz-available;  
  height: fill-available;
}
</style>
