<script setup lang="ts">
import IconArrowDown from "@/components/atoms/button/IconArrowDown.vue";
import IconArrowUp from "@/components/atoms/button/IconArrowUp.vue";
import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
import { ref, watch } from "vue";

const steps = ref([
  { order: 1, stepName: "Data Load", type: "DataPrep", status: "Configured" },
  {
    order: 2,
    stepName: "Preprocessing",
    type: "Preprocess",
    status: "Not Configured",
  },
  {
    order: 3,
    stepName: "Train Model",
    type: "Train",
    status: "Not Configured",
  },
]);

const props = defineProps({
  editData: Object,
  mode: String,
  userOption: Array,
});

const emit = defineEmits(["handle-data", "close-modal"]);

const visible = ref(true);

const form = ref({
  name: "",
  description: "",
});

const submit = () => {
  emit("handle-data", form.value);
};
</script>

<template>
  <v-card class="rounded-lg overflow-hidden">
    <!-- 타이틀 영역 -->
    <v-card-title
      class="text-white font-weight-bold text-h6"
      style="background-color: #1976d2"
    >
      Deploy Model
    </v-card-title>

    <v-card-text class="pa-6">
      <div class="text-subtitle-1 font-weight-medium mb-4">
        Select Model : ImageClassifier
      </div>
      <VDivider class="my-2" />
      <v-form @submit.prevent="submit">
        <div class="mb-5">
          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
            >OTA
          </label>
          <v-row dense class="mb-6">
            <v-col cols="12">
              <v-subheader class="font-weight-medium white--text mb-2">
                Select Package
              </v-subheader>
              <v-select
                dense
                hide-details
                outlined
                style="background: #1e1e1e; color: #fff"
              />
            </v-col>
          </v-row>
        </div>
      </v-form>
    </v-card-text>

    <v-card-text class="pt-6 pb-4 px-6">
      <v-subheader class="font-weight-medium mb-2">
        Package Preview
      </v-subheader>
      <v-sheet class="pa-4 mb-6" elevation="1" rounded>
        <v-row dense>
          <!-- Linux -->
          <v-col cols="12" md="6">
            <div class="font-weight-medium mb-2">Linux</div>
            <v-text-field
              label="File Name"
              placeholder="4_EdgeInfra_Perception.sh"
              dense
              outlined
              hide-details
            />
            <v-text-field
              label="File Path"
              placeholder="/home/etri/TeslaSystem/EdgeInfraVision/RUN"
              dense
              outlined
              hide-details
            />
          </v-col>

          <!-- Windows -->
          <v-col cols="12" md="6">
            <div class="font-weight-medium mb-2">Windows</div>
            <v-text-field
              label="File Name"
              placeholder="4_EdgeInfra_Perception.exe"
              dense
              outlined
              hide-details
            />
            <v-text-field
              label="File Path"
              placeholder="C:/etri/TeslaSystem/EdgeInfraVision/RUN"
              dense
              outlined
              hide-details
            />
          </v-col>
        </v-row>
      </v-sheet>
      <!-- Package Preview 끝 -->

      <!-- Software Name / Version -->
      <v-row dense class="mb-4">
        <v-col cols="12">
          <v-text-field
            label="Software Name"
            placeholder="Enter software Name"
            dense
            outlined
            hide-details
          />
        </v-col>
        <v-col cols="12">
          <v-text-field
            label="Software Version"
            placeholder="Enter software Version"
            dense
            outlined
            hide-details
          />
        </v-col>
      </v-row>

      <!-- Executed 여부 -->
      <v-row dense class="mb-6">
        <v-col cols="12">
          <v-radio-group row>
            <v-radio label="Executed" value="executed" />
            <v-radio label="Not Executed" value="not_executed" />
          </v-radio-group>
        </v-col>
      </v-row>
    </v-card-text>

    <v-card-actions class="justify-end" style="padding: 16px 24px">
      <v-btn color="success" @click="submit">Save</v-btn>
      <v-btn text class="white--text" @click="$emit('close-modal')"
        >Close</v-btn
      >
    </v-card-actions>
  </v-card>
</template>
