<!-- eslint-disable vue/prop-name-casing -->
<script>
import {mapGetters} from 'vuex'
import Input from '@atoms/VInput.vue'
import Textarea from '@atoms/VTextarea.vue'
import VDoubleSwitch from '@atoms/VDoubleSwitch.vue'

export default {
  name: 'EditServiceCard',
  components: {Input, Textarea, VDoubleSwitch},
  props: {
    id: {
      default: -1,
      type: Number
    },
    serviceOfServices: {
      default: () => ({}),
      type: Object
    },
  },
  computed: {
    ...mapGetters('services', ["selectedService"]),
  },
  mounted() {
  },
  methods: {
    editData (params) {
      this.serviceOfServices.editSelectedService(params)
    },
    cancelEditService() {
      this.serviceOfServices.cancelSelectedService(this.id)
    }
  }
}
</script>

<template>
  <div class="flex justify-between items-center mb-2">
    <div class="w-fit mr-2">
      <VDoubleSwitch
        name="isCbOn"
        firstColor="#8b5cf6"
        secondColor="#2563eb"
        firstTitle="Офлайн"
        secondTitle="Онлайн"
        :isCheck="selectedService.is_online"
        position="col"
        labelClass="items-start pb-2"
        switchClass="mt-1"
        @switched="(e) => editData({key: 'is_online', value: e})"
      />
    </div>
    <Input
      name="name"
      :value="selectedService.name"
      inputClass="!w-[90%] py-2"
      placeholder="Указать путь"
      :onChange="editData"
    />
    <div>
      <i
        v-tippy="{ content: 'закрыть сервис' }" 
        class="ri-close-line cursor-pointer"
        @click="cancelEditService"
      />
    </div>
  </div>
  <div class="flex items-center mb-2 w-full">
    <span class="mr-2 min-w-[80px]">Порт:</span>
    <Input
      name="port"
      :value="`${selectedService.port}`"
      inputClass="py-2"
      placeholder="Порт"
      :onChange="editData"
    />
  </div>
  <div class="flex items-center mb-2 w-full">
    <span class="mr-2 min-w-[80px]">IP proxy:</span>
    <Input
      name="proxy_ip"
      :value="selectedService.proxy_ip"
      inputClass="py-2"
      placeholder="IP proxy"
      :onChange="editData"
    />
  </div>
  <div class="flex items-center w-full mb-2">
    <span class="mr-2 min-w-[80px]">IP устр-ва:</span>
    <Input
      name="device_ip"
      :value="selectedService.device_ip"
      inputClass="py-2"
      placeholder="IP устройства"
      :onChange="editData"
    />
  </div>
  <Textarea
    name="description"
    :value="selectedService.description"
    textareaClass="py-2"
    placeholder="Описание..."
    :onChange="editData"
  />
</template>
