<template>

  <li :class="[{open:item.open}, 'item-' + item.id]">
    <button v-if="!item.link" ref="btn" class="head" @click="clickListItem()" tabindex="0">
      <div class="txt">
        <h6 class="title" v-html="item.title"></h6>
        <span v-if="item.subTitle" class="descr" v-html="item.subTitle"></span>
      </div>
      <div class="action-icon" v-html="iconHtml"></div>
    </button>

    <a v-if="item.link" ref="btn" :target="item.link.is_external === 'on' ? '_blank' : ''" class="head" :href="item.link.url" tabindex="0">
      <div class="txt">
        <h6 class="title" v-html="item.title"></h6>
        <span v-if="item.subTitle" class="descr" v-html="item.subTitle"></span>
      </div>
      <div class="action-icon" v-html="iconHtml"></div>
    </a>




    <div class="body" >
      <div class="info">
        <div v-html="item.descr"></div>
      </div>
    </div>
  </li>
</template>

<script>


export default {
  props: [
    'item',
  ],
  data() {
    return {

    }
  },
  computed: {

    termId() {
      return this.item.terms.length ? this.item.terms[0].term_id : false;
    },
    iconHtml() {
      if (this.item.open) {
        return this.item.icons.active;
      } else {
        return this.item.icons.normal;
      }
    },
  },
  methods: {
    clickListItem() {
      this.$emit('itemclick', this.item);
    },
  },
  mounted: function () {

  },
  created: function () {

  },
  components: {},
}
</script>

<style scoped>
</style>