<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>虚拟机硬件配置管理</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Element UI -->
  <link rel="stylesheet" href="/webjars/element-ui/lib/theme-chalk/index.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="/webjars/ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
  <!-- Navbar -->
  <div th:replace="fragments/navbar :: navbar"></div>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <div th:replace="fragments/sidebar :: sidebar"></div>

  <!-- Content Wrapper. Contains page content -->
  <div id="content" th:fragment="content" class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>虚拟机硬件配置管理</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">主页</a></li>
              <li class="breadcrumb-item active">虚拟机硬件配置管理</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- Default box -->
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">虚拟机硬件配置列表</h3>

          <div class="card-tools">
            <button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="最小化">
              <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="关闭">
              <i class="fa fa-times"></i></button>
          </div>
        </div>
        <div class="card-body">
        	<el-input @keyup.enter.native="getVirtualMachineFlavorList" style="width: 200px;" class="filter-item" placeholder="配置名称" v-model="query_flavors.name"></el-input>
        	<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getVirtualMachineFlavorList">查询</el-button>
        	<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">新增</el-button>
        	<el-button class="filter-item" style="margin-left: 10px;" @click="handleUpdate" type="primary" icon="el-icon-refresh">更新</el-button>
        	<el-alert :title="title" :type="type" v-if="showMessage"></el-alert>
          	<el-table :data="flavors" style="width: 100%">
      			<el-table-column prop="name" label="配置名称" width="180"></el-table-column>
      			<el-table-column prop="cores" label="CPU核数" width="180"></el-table-column>
      			<el-table-column prop="memory" label="内存大小(MB)" width="180"></el-table-column>
      			<el-table-column prop="disk" label="磁盘大小(GB)" width="180"></el-table-column>
      			<el-table-column prop="updateTime" label="更新时间" :formatter="dateFormat"></el-table-column>
      			<el-table-column fixed="right" label="操作" width="180">
			      <template slot-scope="scope">
			        <el-button @click="handleQuery(scope.row)" type="text" size="small">查看</el-button>
			        <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
			      </template>
			    </el-table-column>
    		</el-table>
        </div>
        <!-- /.card-body -->
        <div class="card-footer">
          <el-pagination layout="prev, pager, next" :total="total" :size="query_flavors.size" @current-change="handleCurrentChange"></el-pagination>
        </div>
        <!-- /.card-footer-->
      </div>
      <!-- /.card -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
  		<el-form :model="flavor" :disabled="disabled">
  			<el-form-item label="配置名称" label-width="120px">
      			<el-input v-model="flavor.name" auto-complete="off"></el-input>
    		</el-form-item>
    		<el-form-item label="CPU核数" label-width="120px">
      			<el-input-number v-model="flavor.cores" :min="1" :max="16" label="CPU核数"></el-input-number>
    		</el-form-item>
    		<el-form-item label="内存大小(MB)" label-width="120px">
      			<el-input-number v-model="flavor.memory" :min="1" :max="32768" label="内存大小"></el-input-number>
    		</el-form-item>
    		<el-form-item label="磁盘大小(GB)" label-width="120px">
      			<el-input-number v-model="flavor.disk" :min="1" :max="1024" label="磁盘大小"></el-input-number>
    		</el-form-item>
    		<el-form-item label="临时磁盘大小(GB)" label-width="120px">
      			<el-input-number v-model="flavor.ephemeral" :min="0" :max="1024" label="临时磁盘大小"></el-input-number>
    		</el-form-item>
    		<el-form-item label="交换分区大小(MB)" label-width="120px">
      			<el-input-number v-model="flavor.swap" :min="0" :max="32768" label="交换分区大小"></el-input-number>
    		</el-form-item>
    		<el-form-item label="是否公有" label-width="120px">
      			<el-switch v-model="flavor.shared" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    		</el-form-item>
    		<el-form-item label="云平台" label-width="120px">
      			<el-select v-model="flavor.openStackId" placeholder="请选择" :disabled="disabled">
				    <el-option v-for="item in openstacks" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
    		</el-form-item>
  		</el-form>
  		<div slot="footer" class="dialog-footer">
    		<el-button @click="dialogFormVisible = false">取 消</el-button>
    		<el-button type="primary" @click="handleDialog">确 定</el-button>
  		</div>
	 </el-dialog>
      

    </section>
    <!-- /.content -->
</div>
  <!-- /.content-wrapper -->

  <div th:replace="fragments/footer :: footer"></div>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
</body>
<!-- jQuery -->
<script type="text/javascript" src="/webjars/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script type="text/javascript" src="/webjars/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- VUE 2 -->
<script type="text/javascript" src="/webjars/vue/vue.js"></script>
<script type="text/javascript" src="/webjars/vue-resource/dist/vue-resource.js"></script>
<!-- Element UI -->
<script type="text/javascript" src="/webjars/element-ui/lib/index.js"></script>
<!-- FastClick -->
<script type="text/javascript" src="/webjars/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/js/demo.js"></script>
<script src="/js/flavors/index.js"></script>
</html>