<template>
  <h1>磁盘管理</h1>
  <hr>
  <button v-if="!loading" class="d-block my-3 btn btn-secondary" @click="scan_disks">
    刷新
  </button>
  <div v-if="loading" class="loading">
    <div>
      <CSpinner />
      正在加载
    </div>
  </div>
  <div v-else class="fade-in mb-4">
    <div class="my-2">
      <h2>数据盘</h2>
      <div v-for="d, i in visible_disks" :key="i" class="alert alert-info">
        <h4>
          磁盘 {{ i + 1 }}
        </h4>
        <hr>
        <div class="row">
          <div class="icon col">
            <img class="licon" src="@/assets/hd.png" alt=""/>
          </div>
          <div class="col">
            <div>
              设备名称： {{ d.devname }}
            </div>
            <div>
              UUID: {{ d.uuid }}
            </div>
            <div>
              型号：
              {{ d.model }}
            </div>
            <div>
              序列号：
              {{ d.serial }}
            </div>
            <div>
              容量：
              {{ show_size(d.size) }}
            </div>
            <div>
              接口：
              {{ d.interface }}
            </div>
            <div>
              状态：
              {{ d.status }}
            </div>
          </div>
        </div>
        <button v-if="d.status == 'Unknown'"
                class="btn btn-primary"
                @click="activate(d.devname)">
          初始化
        </button>
      </div>
    </div>
    <hr>
    <div>
      <h2>数据空间</h2>
      <button class="btn btn-success my-2" @click="fsck">数据检查</button>
      <div class="alert alert-warning" v-if="chunkstores.length == 0">
        无
      </div>
      <div v-for="d, i in chunkstores" :key="i" class="alert alert-success">
        序号： {{ d.id }}
        <hr>
        <div class="row">
          <div class="icon col">
            <img class="licon" src="@/assets/storage.png" alt=""/>
          </div>
          <div class="col">
            <div>
              所属设备：
              {{ d.devname }}
            </div>
            <div>
              总容量：
              {{ d.total }}
            </div>
            <div>
              已使用：
              {{ d.used }}
            </div>
            <div>
              数据块：
              {{ d.num_chunks }}
            </div>
            <button class="btn btn-danger"
                    @click="retire(d)">
              卸载
            </button>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div>
      <h2>USB存储</h2>
      <div v-for="d, i in ext_disks" :key="i" class="alert alert-info">
        <span class="badge bg-info">
          <font-awesome-icon :icon="['fab', 'usb']" />
          {{ show_size(d.size) }}
        </span>
        {{ d.model }}
        {{ d.serial }}
        {{ d.uuid }}
        ({{ d.devname }})
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DisksView',
  props: [],
  components: {
  },
  data: function () {
    return {
      loading: false,
      chunkstores: [],
      disks: [],
      ext_disks: [],
    };
  },
  computed: {
    visible_disks() {
      return this.disks.filter(d => d.devname.startsWith("sd") || d.devname.startsWith("vd"));
    },
  },
  methods: {
    async fsck() {
      var r = await this.$root.estor_call("CreateJob", {
        name: "数据检查",
        spec: {
          type: "Fsck",
          args: {
          },
        },
      });
      console.log(r);
      this.$router.push("/estor/jobs");
    },
    async scan_disks() {
      this.loading = true;
      await this.$root.estor_call("ScanDisks");
      this.reload();
    },
    async activate(devname) {
      var r = await this.$root.estor_call("ActivateDisk", {
        devname,
      });
      console.log(r.data);
      this.reload();
    },
    retire(d) {
      this.sms_verified_action(
        "卸载数据存储",
        "确定要卸载数据空间吗？设备名称：" + d.devname,
        () => this.do_retire(d)
      );
    },
    async do_retire(d) {
      var r = await this.$root.estor_call("CreateJob", {
        name: "卸载数据盘-" + d.devname,
        spec: {
          type: "RetireChunkStore",
          args: {
            csid: d.id,
          },
        },
      });
      console.log(r);
    },
    async reload() {
      this.loading = true;
      var r = await this.$root.estor_call("ListDisks");
      this.disks = r.data.data;
      r = await this.$root.estor_call("ListExtDisks");
      this.ext_disks = r.data.data;
      r = await this.$root.estor_call("ListChunkStores");
      this.chunkstores = r.data.data;
      this.loading = false;
    },
  },
  mounted() {
    this.reload();
  },
}
</script>

<style scoped>
img.licon {
  width: 64px;
}
div.icon.col {
  max-width: 100px;
}
</style>
