<template>
  <v-card
    class="border-neutrals-dark2 border-radius-20 elevation-0 mx-5 my-sm-2 text-size-12"
    width="388px"
    height="165px"
  >
    <v-row>
      <v-col cols="3">
        <unicon
          class="mt-5 ml-6"
          width="14"
          height="20"
          name="bookmark"
          fill="#F5CDA8"
        />
        <v-img
          class="mt-n2 ml-4"
          :src="item.logo"
          width="90px"
          height="65px"
        ></v-img>
      </v-col>
      <v-col cols="9">
        <span
          v-if="item.isRecommend == false"
          width="auto"
          class="my-1 px-2 neutrals--text primary recommend-tag no-text-transform text-size-8 text-space-1 rounded-xl d-inline-block border-primary-light"
        >
          <unicon fill="#FEFEFE" name="award" width="8px" height="8px"></unicon>
          {{ $t("recommend") }}
        </span>
        <span
          v-if="Object.keys(item.status).length != 0"
          class="my-1 px-2 neutrals primary--text recommend-tag no-text-transform text-size-8 text-space-1 elevation-0 rounded-xl d-inline-block border-primary-light"
        >
          {{ item.status ? item.status.name : "" }}
        </span>
        <div class="my-1">
          <b>{{ item.name }}</b>
        </div>
        <div class="my-1text-size-10 neutrals--text text--darken-3">
          {{ item.region ? item.region.name : "" }}．{{
            item.city ? item.city.name : ""
          }}．{{ item.country ? item.country.name : "" }}
        </div>
        <div>
          <div>
            <span
              class="my-1 px-2 primary--text no-text-transform text-space-1 text-size-10 elevation-0 d-inline-block rounded-xl border-primary-nude"
              v-for="(category, index) in item.categories"
              :key="index"
            >
              {{ category.name ? category.name : "" }}
            </span>
          </div>
        </div>
        <div class="my-1">
          <!-- {{ item.startdate ? item.startdate.replaceAll("-", ".") : "" }} -
          {{ item.enddate ? item.enddate.replaceAll("-", ".") : "" }} -->
        </div>
        <div
          class="my-1 neutrals--text text--darken-3"
          v-html="
            $t('Coming Soon in day', {
              days:
                '<b style=\'color: #ef5a5a\'>' +
                dateCountDown(item.startdate) +
                '</b>',
            })
          "
        ></div>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
  import { dateCountDown } from "~/utils/assist";
  export default {
    name: "ExhibitionYouMightLike",
    methods: {
      dateCountDown,
    },
    props: {
      item: {
        type: Object,
        default: () => ({
          name: "",
          logo: "",
          category: {},
          status: [],
          isRecommend: false,
          startdate: "",
          enddate: "",
          region: {},
          city: {},
          country: {},
        }),
      },
    },
  };
</script>

<style lang="scss" scoped>
  .border-primary-light {
    border: 1px solid #f5cda8 !important;
  }
  .border-primary-nude {
    border: 1px solid #f7ede4 !important;
  }
  .border-neutrals-dark2 {
    border: 1px solid #e5e5e5 !important;
  }
</style>