<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="作者" align="left">
              <template slot-scope="scope">
                {{ scope.row.creator }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180" align="center">
              <template slot-scope="scope">
                {{ 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 :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 apassDialog from "./apass-dialog";
import imageBugs from "./image-bugs";

export default {
  components: {
    apassDialog,
    imageBugs,
  },
  props: {
    image: {
      type: Object,
      default: () => null,
    },
  },
  data: () => ({
    imageData: [
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 5,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 4,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 3,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 2,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 4,
          },
          severity: 1,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 2,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 2,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 2,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 2,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 2,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 2,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
      {
        address: "hub.wodcloud.com/apaas-images-test_02/mesh-status-api:1.0",
        scan_overview: {
          components: {
            summary: [
              { count: 2, severity: 2 },
              { count: 25, severity: 1 },
            ],
            total: 27,
            severity_count: 2,
          },
          severity: 2,
          creation_time: "2020-05-27T10:17:40.671664Z",
          update_time: "2020-07-02T22:39:27.97828Z",
        },
        size: 20950567,
        name: "1.0",
        creator: "RamHsu",
        created: "1994-03-26 11:10:00",
      },
    ],
    dialogInfo: {
      title: "",
      msg: "",
      submit: null,
    },
  }),
  computed: {
    title() {
      return "镜像：" + ((this.image && this.image.name) || "-");
    },
  },
  methods: {
    showDialog() {
      this.$refs.listdialog.show();
    },
    downloadAction(item) {
      console.log("download " + item.name);
    },
    deleteAction(item) {
      this.dialogInfo.title = "";
      this.dialogInfo.msg = "是否删除该镜像？";
      this.dialogInfo.submit = () => {
        console.log("delete " + item.name);

        /* this.$http
          .delete(`/apaas/hubApi/image/del/${item.name}`)
          .then((response) => {
            if (response.data.success == 1) {
              //
            } 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";
    },
  },
};
</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>
