<!-- eslint-disable vue/prop-name-casing -->
<script>
import {mapActions, mapGetters} from 'vuex'
import EditCard from './EditServiceCard.vue'

export default {
  name: 'ServiceCard',
  components: {EditCard},
  props: {
    serviceOfServices: {
      default: () => ({}),
      type: Object
    },
    id: {
      default: -1,
      type: Number
    },
    name: {
      default: "",
      type: String
    },
    port: {
      default: "",
      type: String
    },
    device_ip: {
      default: "",
      type: String
    },
    proxy_ip: {
      default: "",
      type: String
    },
    isOnline: {
      default: false,
      type: Boolean
    },
    description: {
      default: "disable",
      type: String
    },
    service: {
      default: () => ({}),
      type: Object
    },
  },
  data () {
    const status = this.setStatus(this.isOnline)
    return {
      isDelete: false,
      status
    }
  },
  computed: {
    ...mapGetters('services', ["selectedService", "routes", 'isSaveData']),
    __btnClass__() {
      if (this.forcedBtnClass) return this.forcedBtnClass
      return `${this.btnClass} cursor-pointer w-full bg-transparent hover:bg-primary text-primary font-semibold hover:text-white py-1 text-ssm px-4 border border-primary hover:border-transparent rounded-lg text-center transition_up`
    }
  },
  watch: {
    isSaveData: function (newVal) {
      console.log('newVal', newVal)
      if (newVal) {
        this.saveServiceData()
      }
    },
    isOnline: function (newVal) {
      console.log('newVal', newVal)
      this.status = this.setStatus(newVal)
    }
  },
  mounted() {
  },
  methods: {
    ...mapActions('services', ["saveservice", "createNewservice", 'removeservice', 'updateRoutesWithApi', 'closeRoutesList']),
    ...mapActions('users', ["fetchUsersList"]),
    toggle () {
      this.open = !this.open
      this.onToggle({isOpen: this.open})
    },
    setStatus (isOnline) {
      return isOnline ? {title: 'enable', color: 'bg-green-700'} : {title: 'disable', color: 'bg-red-700'}
    },
    editService (service) {
      this.serviceOfServices.selectService(service)
      // this.serviceOfServices.openRoutesList()
    },
    saveServiceData () {
      if (this.selectedService.id == -1) {
        const data = {
          name: this.selectedService.name,
          port: this.selectedService.port,
          device_ip: this.selectedService.device_ip,
          proxy_ip: this.selectedService.proxy_ip,
          description: this.selectedService.description
        }
        this.serviceOfServices.createNewService(data)
      } else {
        // this.updateRoutesWithApi(this.selectedService)
        this.serviceOfServices.saveService(this.selectedService)
      }
    },
    deleteService (e) {
      this.isDelete = e
    }
  }
}
</script>

<template>
  <div
    v-if="!selectedService || selectedService.id !== id"
    class="block w-full p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
  >
    <div class="flex justify-between items-center mb-1">
      <h5 
        v-tippy="{ content: name }" 
        class="max-w-[200px] text-xl font-bold tracking-tight text-slate-600 dark:text-white truncate"
      >
        {{ name }}
      </h5>
      <div class="relative">
        <i
          v-tippy="{ content: 'редактировать сервис' }" 
          class="ri-pencil-line cursor-pointer"
          @click="editService(service)"
        />
        <i
          v-tippy="{ content: 'удалить сервис' }" 
          class="ri-close-line cursor-pointer ml-2"
          @click="deleteService(true)"
        />
        <div 
          v-if="isDelete"
          class="absolute flex flex-row top-0 right-0 p-3 bg-white rounded-lg shadow-lg z-10"
        >
          <button 
            class="flex items-center text-xs text-white bg-blue-700 p-1 mr-2 rounded-lg shadow"
            @click="deleteService(false)"
          >
            Отменить
          </button>
          <button 
            class="flex items-center p-1 text-xs text-white bg-slate-700 rounded-lg shadow"
            @click="serviceOfServices.removeService(id)"
          >
            Удалить
          </button>
        </div>
      </div>
    </div>
    <div class="w-full h-[1px] bg-slate-200 mb-4" />
    <div class="font-normal text-sm text-gray-700 dark:text-gray-400 mb-4 flex -translate-x-2">
      <span class="flex border-slate-300 mr-4 bg-slate-100 rounded-full py-1 px-2 items-center w-full max-w-[50%]">
        <span class="inline-block flex mr-2 font-w-700"> статус:</span>  <span class="mr-2">{{ status.title }}</span>
        <div
          class="min-h-2 min-w-2 bg-green-700 rounded-full"
          :class="status.color"
        />
      </span>
      <span class="flex border-slate-300 bg-slate-100 rounded-full py-1 px-2 grow">
        <span class="inline-block flex mr-2 font-w-700"> Порт:</span> <span>{{ port }}</span>
      </span>
    </div>
    <p class=" font-normal text-sm text-gray-700 dark:text-gray-400 mb-2 flex">
      <span class="min-w-[80px] font-w-700 inline-block flex"> IP proxy:</span> {{ proxy_ip }}
    </p>
    <p class=" font-normal text-sm text-gray-700 dark:text-gray-400 mb-2 flex">
      <span class="min-w-[80px] font-w-700 inline-block flex"> IP устр-ва:</span> {{ device_ip }}
    </p>
    <p class=" font-normal text-sm text-gray-700 dark:text-gray-400 mb-2 flex ">
      <span class="min-w-[80px] font-w-700 inline-block flex"> Описание:</span> <span
        v-tippy="{ content: description }"
        class="truncate"
      >{{ description }}</span>
    </p>
  </div>
  <div
    v-if="selectedService && selectedService.id === id"
    href="#"
    class="block w-full p-6 bg-white border-4 border-blue-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
  >
    <EditCard
      :id="id"
      :serviceOfServices="serviceOfServices"
    />
  </div>
</template>
