<template>
  <div class="image_detail">
    <apass-dialog ref="listdialog" :title="title" width="985px">
      <template slot="content">
        <div class="apass_table">
          <el-table :data="imageData">
            <el-table-column width="20"></el-table-column>
            <el-table-column label="版本号" align="left">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column label="作者" width="200" align="left">
              <template slot-scope="scope">
                {{ scope.row.author }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180" align="center">
              <template slot-scope="scope">
                {{ dateTransform(scope.row.created) }}
              </template>
            </el-table-column>
            <el-table-column label="大小" align="center">
              <template slot-scope="scope">
                {{ getSize(scope.row.size) }}
              </template>
            </el-table-column>
            <el-table-column label="漏洞" width="160" align="center">
              <template slot-scope="scope">
                <image-bugs
                  v-if="scope.row.scan_overview"
                  :data="scope.row.scan_overview"
                ></image-bugs>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160" align="center">
              <template slot-scope="scope">
                <div class="row_action">
                  <a class="btn" @click="downloadAction(scope.row)">下载</a>
                  <span class="interval_line">|</span>
                  <a class="btn warn" @click="deleteAction(scope.row)">删除</a>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </apass-dialog>

    <apass-dialog
      ref="actiondialog"
      :title="dialogInfo.title"
      :msg="dialogInfo.msg"
      :submit="dialogInfo.submit"
    ></apass-dialog>
  </div>
</template>

<script>
import helper from "@/services/helper";
import apassDialog from "./apass-dialog";
import imageBugs from "./image-bugs";

export default {
  components: {
    apassDialog,
    imageBugs,
  },
  data: () => ({
    imageData: [],
    dialogInfo: {
      title: "",
      msg: "",
      submit: null,
    },
    image: null,
  }),
  computed: {
    title() {
      return "镜像：" + ((this.image && this.image.name) || "-");
    },
  },
  methods: {
    showDialog(image) {
      this.image = image;
      this.imageData = [];
      this.getImageDetail();
      this.$refs.listdialog.show();
    },
    downloadAction(item) {
      let evtUuid = Math.random()
        .toString(16)
        .substr(3);
      let evtSource = new EventSource(
        `/apaas/hubApi/image/subscribe/${evtUuid}`
      );

      evtSource.addEventListener("message", (event) => {
        console.log(event);
      });

      const a = document.createElement("a");
      a.setAttribute("download", "");
      a.setAttribute(
        "href",
        `/apaas/hubApi/image/download/publish/${evtUuid}?image=${this.image.name}&tag=${item.name}&packageType=tar`
      );
      a.click();
    },
    deleteAction(item) {
      this.dialogInfo.title = "";
      this.dialogInfo.msg = "是否删除该镜像？";
      this.dialogInfo.submit = () => {
        this.$http
          .delete(
            `/apaas/hubApi/image/image/${this.image.name}/tags/${item.name}`
          )
          .then((response) => {
            if (response.data.success == 1) {
              this.$message({
                message: `删除成功`,
                type: "success",
              });
              this.getImageDetail();
            } else {
              this.$message({
                message: `删除失败`,
                type: "warning",
              });
            }
          })
          .catch((error) => {
            console.log(error);
            this.$message({
              message: `删除失败`,
              type: "warning",
            });
          });
      };
      this.$refs.actiondialog.show();
    },
    getSize(value = 0) {
      return (value / 1024 / 1024).toFixed(2) + "MB";
    },
    dateTransform(datestr) {
      return helper.dateStringTransform(datestr);
    },
    getImageDetail() {
      this.$http
        .get(`/apaas/hubApi/image/imageDetails/${this.image.name}`)
        .then(({ data }) => {
          this.imageData = data.data || [];
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
.apass_table {
  max-height: 433px;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>

<style>
.apass_dialog .image_detail .el-dialog__body {
  padding: 0 20px 20px;
}
.apass_dialog .image_detail .el-dialog__footer {
  display: none;
}
</style>
