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

export default {
  name: 'EditCard',
  components: {Input, Textarea, DoubleSwitch},
  props: {
    id: {
      default: -1,
      type: Number
    },
  },
  computed: {
    ...mapGetters('proxy', ["selectedSite"]),
  },
  mounted() {
  },
  methods: {
    ...mapActions('proxy', ["editSelectedSite", "breakSavingSite", "breakeAddingSite"]),
    editData (params) {
      this.editSelectedSite(params)
    },
    breakSavingSiteDate() {
      if (this.id == -1) {
        this.breakeAddingSite()
      } else {
        this.editable_name = this.name
        this.editable_port = this.port
        this.breakSavingSite()
      }
    }
  }
}
</script>

<template>
  <div class="flex justify-between items-center mb-2">
    <div class="w-fit mr-2">
      <DoubleSwitch
        name="isCbOn"
        firstColor="#8b5cf6"
        secondColor="#2563eb"
        firstTitle="Офлайн"
        secondTitle="Онлайн"
        :isCheck="selectedSite.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="selectedSite.name"
      inputClass="!w-[90%] py-2"
      placeholder="Указать путь"
      :onChange="editData"
    />
    <div>
      <i
        v-tippy="{ content: 'закрыть сервис' }" 
        class="ri-close-line ml-2 cursor-pointer"
        @click="breakSavingSiteDate"
      />
    </div>
  </div>
  <div class="flex items-center mb-2 w-full">
    <span class="mr-2 min-w-[80px]">Порт:</span>
    <Input
      name="port"
      :value="`${selectedSite.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="selectedSite.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="selectedSite.device_ip"
      inputClass="py-2"
      placeholder="IP устройства"
      :onChange="editData"
    />
  </div>
  <Textarea
    name="description"
    :value="selectedSite.description"
    textareaClass="py-2"
    placeholder="Описание..."
    :onChange="editData"
  />
</template>
