<template>
  <div class="app-container" v-loading="loading">
    <el-button
      type="primary"
      icon="plus"
      style="margin-bottom: 10px"
      @click="addData"
    >
      新增服务镜像</el-button
    >

    <el-table :data="tableData" border stripe>
      <el-table-column
        v-for="(item, i) in labelList"
        :key="i"
        :label="item.label"
        :prop="item.prop"
        align="center"
      />
      <el-table-column label="操作" align="center" width="255" fixed="right">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="imageVersion(scope.row.id)"
            >服务镜像版本
          </el-button>
          <el-divider direction="vertical" />
          <el-button
            link
            type="primary"
            size="small"
            @click="editData(scope.row)"
            >编辑
          </el-button>
          <el-divider direction="vertical" />
          <el-button
            link
            type="danger"
            size="small"
            @click="deleteData(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :page-data="listQuery"
      :total="listQuery.total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
  <image-service-form
    ref="imageServiceFormRef"
    v-model:image-service-dialog="imageServiceDialog"
    @image-service-data="getImageServiceData"
  />
  <image-service-table
    ref="imageVersionRef"
    v-model:image-version-table-dialog="imageVersionTableDialog"
  />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ruleProps } from "./interface/index";
import {
  getImageService,
  addImageService,
  updateImageService,
  deleteImageService,
} from "@/services/api/imageService/index";
import { ElMessage, ElMessageBox } from "element-plus";
import imageServiceForm from "./components/imageServiceForm.vue";
import imageServiceTable from "./components/imageServiceTable.vue";
import pagination from "@/components/pagination/index.vue";

const labelList = [
  { label: "镜像名", prop: "name" },
  { label: "服务路径", prop: "contextPath" },
  { label: "描述", prop: "describe" },
];
const imageServiceDialog = ref(false);
const imageVersionTableDialog = ref(false);
const loading = ref(true);
const imageServiceFormRef = ref();
const imageVersionRef = ref();

const tableData = ref<ruleProps[]>();
const listQuery = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

// 每页新条数
const sizeChange = (val: number) => {
  listQuery.pageSize = val;
  init();
};

// 新页数
const currentChange = (val: number) => {
  listQuery.pageNo = val;
  init();
};

const imageVersion = (id: number) => {
  imageVersionRef.value.imageVersionId = id;
  imageVersionRef.value.initVersion(id);
  imageVersionTableDialog.value = true;
};

const addData = () => {
  imageServiceFormRef.value.title = "新增服务镜像";
  imageServiceDialog.value = true;
};

const editData = (row: any) => {
  imageServiceFormRef.value.formData = row;
  imageServiceFormRef.value.title = "编辑服务镜像";
  imageServiceDialog.value = true;
};
const deleteData = (id: number) => {
  ElMessageBox.confirm("确定删除吗？", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res: any = await deleteImageService(id);
    if (res.code === 200) {
      ElMessage.success("删除成功");
      init();
    }
  });
};

const getImageServiceData = async (formData: ruleProps) => {
  if (!formData.id) {
    const res: any = await addImageService(formData);
    if (res.code === 200) {
      ElMessage.success("添加成功");
      init();
      imageServiceDialog.value = false;
    }
  } else {
    const res: any = await updateImageService(formData);
    if (res.code === 200) {
      ElMessage.success("修改成功");
      imageServiceDialog.value = false;
      init();
    }
  }
};

const init = async () => {
  loading.value = true;
  const res: any = await getImageService(listQuery);
  if (res.code === 200) {
    loading.value = false;
    tableData.value = res.data.records;
    listQuery.total = res.data.total;
  }
};

init();
</script>
