<script>
import {mapActions, useStore} from "vuex"
import { CopyToClipboard } from "@store/hooks/CopyToClipboard"

export default {
  name: 'ServicesServiceItem',
  props: {
    idx: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ""
    },
    service: {
      type: {
        title: String,
        serviceIp: String,
        serviceCode: String,
        dateStart: String,
        description: String,
        serviceLink: String,
        is_online: Boolean,
        init_params: Object

      },
      default: () => {}
    },
    copyed: {
      type: String,
      default: "copyed"
    },
  },
  setup () {
    const store = useStore()
    store.dispatch('logger/uploadData', {status: 'info', text: 'Сервис Info'})
  },
  data () {
    return {
      isCopyed: false
    }
  },
  methods: {
    ...mapActions('services', ['uploadServiceData']),
    isInitParams: function(service) {
      if (service?.init_params && typeof service?.init_params === 'object') {
        if (service?.init_params?.service && service?.init_params?.machine_addr) return true
      }
    },
    copyText: function (e) {
      const text = e.target.getAttribute('copyOnClickText')
      this.isCopyed = true
      return new CopyToClipboard('serviceList', text)
    }
  }
}

</script>


<template>
  <div
    :key="idx"
    style="min-width: 240px"
    class="h-full overflow-hidden shadow-lg rounded-lg w-80 my-2 md:w-80 p-4 bg-indigo-50 transition duration-200 ease-in-out transform hover:translate-y-1 hover:shadow-2xl"
  >
    <div class="w-full flex flex-col h-full justify-center">
      <div class="flex my-2 justify-between">
        <span class="font-bold"> {{ service?.title }} </span>
        <span
          v-if="service?.is_online || name === 'глобальное хранилище'"
          class="font-bold text-green-700"
        >доступен</span>
        <span
          v-else
          class="font-bold text-red-800"
        >отключен </span>
      </div>
      <hr>
      <div class="text-gray-700 my-3 flex items-center flex-grow">
        <div
          v-if="service?.serviceIp || service?.serviceCode"
          class="flex flex-col gap-4"
        >
          <div class="flex flex-col">
            <span class="italic text-xs font-bold">Детали</span>
            <span
              v-if="service?.serviceIp"
              class="italic text-xs"
            >{{ service?.serviceIp }}</span>
            <span
              v-if="service?.serviceCode"
              class="italic text-xs"
            >{{ service?.serviceCode }}</span>
          </div>
          <div class="flex flex-col">
            <span class="italic text-xs font-bold">Последний перезапуск(UTC):</span>
            <span class="italic text-xs">{{ service?.dateStart }}</span>
          </div>
          <div class="flex flex-col">
            <span class="italic text-xs font-bold">Описание сервиса:</span>
            <span class="italic text-xs">{{ service?.description || "... нет описания" }}</span>
          </div>
        </div>
        <div
          v-else
          class="flex flex-col"
        >
          <span class="italic text-xs font-bold">Описание сервиса:</span>
          <span class="italic text-xs">Сервис глобального хранилища применяется для условно постоянного хранения данных в кэше</span>
        </div>
      </div>
      <hr>
      <div class="mt-2">
        <span
          v-if="isInitParams(service)"
          class="flex justify-between"
        >
          <span
            :id="`service_${service?.init_params?.service}`"
            :copyOnClickText="`${service?.init_params?.service}:${service?.init_params?.machine_addr}`"
            :copyed="`${isCopyed ? copyed : ''}`"
            class="copyText italic text-xs flex cursor-pointer"
            @click="copyText"
          >
            <i class="ri-file-copy-2-line text-slate-600 mr-1" /> 
            {{ service?.serviceLink }}
          </span>
          <a
            id="selectService"
            :href="`/admin_panel/auth_service?show_service_cache=${name}`"
            class="flex italic text-xs cursor-pointer underline hover:text-gray-500 linear-loader"
            @click="uploadServiceData(service)"
          >
            открыть
          </a>
        </span>
        <div
          v-else
          class="italic text-xs"
        >
          нет доступа к глоб. хранилищу
        </div>
      </div>
    </div>
  </div>
</template>
