<template>
  <div class="app-container" v-loading="tableLoading">
    <div>
        <div :span="24">
          <el-form ref="seachForm" :inline="true" class="demo-form-inline">
            <el-form-item label="空间名称">
              <el-input
                v-model="query.taskTitle"
                placeholder="请输入"
                maxlength="32"
                clearable
              />
            </el-form-item>
            
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="queryTable"
              >
                查询
              </el-button>
              <el-button
                type="reset"
                icon="el-icon-refresh"
                @click="resetQueryTable"
              >
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

    <!-- 表格主体 -->
    <!-- <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        :data="tableData"
        class="w100p"
        @selection-change="handleSelectionChange"
        border
        @sort-change="sortChange"
        :default-sort="tableSort"
        header-cell-class-name="duojibiaotou"
      >
        <el-table-column type="selection" width="50" fixed />
        <el-table-column
          align="center"
          label="标签名称"
          show-overflow-tooltip
          min-width="160"
          prop="taskTitle"
        />
        <el-table-column label="备注" align="center" prop="taskType" sortable='custom'   min-width="100">
        </el-table-column>
        
        <el-table-column width="120px" align="center" label="操作" fixed="right">
          <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="toEdit(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="toDelete(scope.row)"
          >删除</el-button>
        </template>
        </el-table-column>
      </el-table> -->
      <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="toEdit"
        >新增
        </el-button>
      </el-col>
    </el-row>
      <el-card>
        <el-row :gutter="20">
          <el-col :span="8" :lg="6" v-for="i in 3" :key="i"><el-card>
            <div class="space" @click="goList">
              <el-progress type="circle" :percentage="10 * i" status="primary" :show-text="false"></el-progress>
              <div class="space-content">
                <div>{{ '备份空间' + i }}</div>
                <div class="space-use">{{ '使用' + i * 10 + '%' }}</div>
                <el-link class="space-tool" type="primary" @click.stop="toEdit">修改</el-link>
              </div>
              
            </div>
          </el-card></el-col>
        </el-row>
      </el-card>
      <!-- 表格页脚 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getTableList"
      />
      <el-dialog title="备份空间修改" :visible.sync="openLoad" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="空间名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入空间名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分配大小" prop="size">
              <el-input v-model="form.size" placeholder="请输入分配大小" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableMixin from "@/mixins/table-mixin";

export default {
  name: "Label",
  components: {
  },
  mixins: [TableMixin],
  pageInfo: {
    title: "",
    //exportUrl: "/task/info/export",
    pageListApi: null,
    // deleteApi: delOther,
    defaultQuery: {
    },
  },
  data() {
    return {
      openLoad: false,
      form: {},
      rules: {}
    };
  },
  methods: {
    goList() {
      this.$router.push({ path: "/gallery/list" });
    },
    toEdit() {
      this.openLoad = true;
    },
    submitForm() {
      this.openLoad = false;
    },
    cancel() {
      this.openLoad = false;
    }
  },
};
</script>
<style scoped>
.space {
  /* height: 100px; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  position: relative;
}
.space-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.space-use {
  font-size: 14px;
  color: #666666;
}

.space-tool {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
</style>
