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

// const store = commonStore();

const experimentInfo = ref({
  modelName: "ImageClassifier",
  projectName: "배터리 상태 예측 모델 프로젝트",
  experimentName: "Baseline Model Training",
  executionName: "run-batch32-lr0.001",
  deployDate: "2025-02-06",
  createdId: "ADMIN_001",
  description: "기본 모델 구조로 학습 성능 측정",
});

const otaInfo = ref({
  packageName: "자율주행 타차량 예측",
  os: "Linux",
  packageFileName: "4_EdgeInfra_Perception.sh",
  packageFilePath: "/home/etri/TeslaSystem/EdgeInfraVision/RUN",
  softwareName: "4_EdgeInfra_Perception.sh",
  softwareVersion: "v2.0",
  execute: "Not Executed",
});

const data = ref({
  params: {
    pageNum: 1,
    pageSize: 10,
    searchType: "",
    searchText: "",
  },
  results: [],
  totalDataLength: 0,
  pageLength: 0,
  modalMode: "",
  selectedData: null,
  allSelected: false,
  selected: [],
  isModalVisible: false,
  isConfirmDialogVisible: false,
  userOption: [],
});

const getCodeList = () => {
  // UserService.search(data.value.params).then((d) => {
  //   if (d.status === 200) {
  //     data.value.userOption = d.data.userList;
  //   }
  // });
};

const getData = () => {
  const params = { ...data.value.params };
  if (params.searchType === "" || params.searchText === "") {
    delete params.searchType;
    delete params.searchText;
  }
  data.value.results = [
    {
      name: "run-batch32-lr0.001",
      status: "Succeeded",
      Duration: "0:00:21",
      configProgress: "0/2",
      Pipeline: "baseline_train_pipeline",
      registDt: "2025-06-10T00:00:00Z",
    },
    {
      name: "run-batch64-lr0.001",
      status: "Failed",
      Duration: "0:00:21",
      configProgress: "1/3",
      Pipeline: "baseline_train_pipeline",
      registDt: "2025-06-09T00:00:00Z",
    },
    {
      name: "run-batch32-lr0.0005",
      status: "Succeeded",
      Duration: "0:00:21",
      configProgress: "0/3",
      Pipeline: "baseline_train_pipeline",
      registDt: "2025-06-01T00:00:00Z",
    },
    {
      name: "run-batch64-lr0.0005",
      status: "Running",
      Duration: "0:00:21",
      configProgress: "1/3",
      Pipeline: "baseline_train_pipeline",
      registDt: "2025-05-29T00:00:00Z",
    },
    {
      name: "run-augmented-data",
      status: "Succeeded",
      Duration: "0:00:21",
      configProgress: "0/3",
      Pipeline: "baseline_train_pipeline",
      registDt: "2025-05-31T00:00:00Z",
    },
  ];
  data.value.totalDataLength = 5;
  setPaginationLength();
  // DeviceService.search(params).then((d) => {
  //   if (d.status === 200) {
  //     data.value.results = d.data.deviceList;
  //     data.value.totalDataLength = d.data.totalCount;
  //     setTimeout(() => {
  //       setPaginationLength();
  //     }, 200);
  //   } else {
  //     store.setSnackbarMsg({
  //       text: "디바이스 조회 실패",
  //       color: "error",
  //     });
  //   }
  // });
  // DeviceService.search().then((d) => {
  //   data.value.totalDataLength = d.data.totalCount;
  //   setTimeout(() => {
  //     setPaginationLength();
  //   }, 200);
  // });
};

const setPaginationLength = () => {
  if (data.value.totalDataLength % data.value.params.pageSize === 0) {
    data.value.pageLength =
      data.value.totalDataLength / data.value.params.pageSize;
  } else {
    data.value.pageLength = Math.ceil(
      data.value.totalDataLength / data.value.params.pageSize,
    );
  }
};

const saveData = (formData) => {
  if (data.value.modalMode === "create") {
    // DeviceService.add(formData).then((d) => {
    //   if (d.status === 200) {
    //     data.value.isModalVisible = false;
    //     store.setSnackbarMsg({
    //       text: "등록 되었습니다.",
    //       result: 200,
    //     });
    //     changePageNum(1);
    //   } else {
    //     store.setSnackbarMsg({
    //       text: d,
    //       result: 500,
    //     });
    //   }
    // });
  } else {
    // DeviceService.update(formData.deviceKey, formData).then((d) => {
    //   if (d.status === 200) {
    //     data.value.isModalVisible = false;
    //     store.setSnackbarMsg({
    //       text: "수정 되었습니다.",
    //       result: 200,
    //     });
    //     changePageNum();
    //   } else {
    //     store.setSnackbarMsg({
    //       text: d,
    //       result: 500,
    //     });
    //   }
    // });
  }
};

const removeData = (value) => {
  let removeList = value ? value : data.value.selected;
  const remove = (code) => {
    // return DeviceService.delete(code).then((d) => {
    //   if (d.status !== 200) {
    //     store.setSnackbarMsg({
    //       text: d,
    //       result: 500,
    //     });
    //   }
    // });
  };

  if (removeList.length === 1) {
    remove(removeList[0].deviceKey).then(() => {
      // store.setSnackbarMsg({
      //   text: "삭제되었습니다.",
      //   result: 200,
      // });
      changePageNum();
      data.value.isConfirmDialogVisible = false;
      data.value.selected = [];
      data.value.allSelected = false;
    });
  } else {
    Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
      () => {
        // store.setSnackbarMsg({
        //   text: "모두 삭제되었습니다.",
        //   result: 200,
        // });
        changePageNum();
        data.value.isConfirmDialogVisible = false;
        data.value.selected = [];
        data.value.allSelected = false;
      },
    );
  }
};

const changePageNum = (page) => {
  data.value.params.pageNum = page;
  getData();
};

const emit = defineEmits<{
  (e: "close"): void;
}>();

onMounted(() => {
  getData();
  getCodeList();
});
</script>

<template>
  <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
    <v-card
      flat
      class="bg-shades-transparent d-flex flex-column justify-center w-100"
    >
      <v-card flat class="bg-shades-transparent w-100">
        <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
          <div class="d-flex flex-row justify-start align-center">
            <div>View Details</div>
          </div>
        </v-card-item>
      </v-card>

      <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
        <v-card-title class="grey lighten-4 py-2 px-4">
          <span class="font-weight-bold">Deploy Model Information </span>
        </v-card-title>

        <v-card-text class="px-6 pb-6 pt-4">
          <!-- Experiment Name -->
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold">Model Name </v-col>
            <v-col cols="9" class="pa-2">{{ experimentInfo.modelName }}</v-col>
          </v-row>
          <VDivider class="my-2" />

          <!-- Project Name -->
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Project Name</v-col
            >
            <v-col cols="9" class="pa-2">{{
              experimentInfo.projectName
            }}</v-col>
          </v-row>
          <VDivider class="my-2" />
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Experiment Name
            </v-col>
            <v-col cols="9" class="pa-2">{{
              experimentInfo.experimentName
            }}</v-col>
          </v-row>
          <VDivider class="my-2" />
          <!-- Created Date / ID -->
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Execution Name</v-col
            >
            <v-col cols="9" class="pa-2">{{
              experimentInfo.executionName
            }}</v-col>
          </v-row>
          <VDivider class="my-2" />
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Deploy Date
            </v-col>
            <v-col cols="3" class="pa-2">{{ experimentInfo.deployDate }}</v-col>
            <v-col cols="3" class="text-h6 font-weight-bold">Created ID</v-col>
            <v-col cols="3" class="pa-2">{{ experimentInfo.createdId }}</v-col>
          </v-row>
          <VDivider class="my-2" />

          <!-- Description -->
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold">Description</v-col>
            <v-col cols="9" class="pa-2">{{
              experimentInfo.description
            }}</v-col>
          </v-row>
          <VDivider class="my-2" />
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Deploy Status
            </v-col>
            <v-col cols="3" class="pa-2">-</v-col>
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Download Status
            </v-col>
            <v-col cols="3" class="pa-2">-</v-col>
          </v-row>
        </v-card-text>
      </v-card>
      <v-card flat class="bordered-box mb-6 w-100 rounded-lg pa-8">
        <v-card-title class="grey lighten-4 py-2 px-4">
          <span class="font-weight-bold">Deploy OTA Information</span>
        </v-card-title>
        <v-card-text class="px-6 pb-6 pt-4">
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Package Name</v-col
            >
            <v-col cols="9">{{ otaInfo.packageName }}</v-col>
          </v-row>
          <VDivider class="my-2" />
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold">OS</v-col>
            <v-col cols="9">{{ otaInfo.os }}</v-col>
          </v-row>
          <VDivider class="my-2" />
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Package File Name</v-col
            >
            <v-col cols="9">{{ otaInfo.packageFileName }}</v-col>
          </v-row>
          <VDivider class="my-2" />
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Package File Path</v-col
            >
            <v-col cols="9">{{ otaInfo.packageFilePath }}</v-col>
          </v-row>
          <VDivider class="my-2" />
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Software Name</v-col
            >
            <v-col cols="3">{{ otaInfo.softwareName }}</v-col>
            <v-col cols="3" class="text-h6 font-weight-bold"
              >Software Version</v-col
            >
            <v-col cols="3">{{ otaInfo.softwareVersion }}</v-col>
          </v-row>
          <VDivider class="my-2" />
          <v-row align="center" class="py-2">
            <v-col cols="3" class="text-h6 font-weight-bold">Execute</v-col>
            <v-col cols="9">{{ otaInfo.execute }}</v-col>
          </v-row>
        </v-card-text>
        <v-sheet class="d-flex justify-end mb-2">
          <v-btn color="primary" @click="emit('close')"> Back to List </v-btn>
        </v-sheet>
      </v-card>
    </v-card>
  </v-container>
</template>

<style scoped>
.v-card-text {
  width: 100% !important;
  border-collapse: collapse;
  /* 전체 테이블 1px 테두리 */
}

.v-card-text th {
  font-size: 20px;
  min-width: 400px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.v-card-text td {
  font-size: 16px;
  min-width: 600px;
  padding: 12px 16px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.v-card-text tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}
</style>
