<template>
  <div class="deviceUpgrade">
    <div class="upgradeBox">
      <div class="upBtnGroup">
        <h4>装置升级</h4>
        <el-button type="primary" icon="el-icon-plus" @click="handleApk"
          >上传</el-button
        >
      </div>
      <div class="upgradeTable">
        <el-table
          ref="multipleTable"
          :data="updateTableData"
          stripe
          tooltip-effect="dark"
          style="width: 100%"
          height="calc(100% - 40px)"
          v-loading="loading"
        >
          <el-table-column label="版本名称" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="路径" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.path }}</template>
          </el-table-column>
          <el-table-column label="版本号" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.version }}</template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text">升级</el-button>
              <!-- <el-button type="text" class="deleteText">删除</el-button>
              <el-button type="text">设置</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <upgradeDialog ref="upgradeDialogref"></upgradeDialog>
  </div>
</template>
<script>
import { listApk, uploadApk, issueApk } from "@/utils/api/index";
import upgradeDialog from "./components/upgradeDialog";
export default {
  components: { upgradeDialog },
  data() {
    return {
      updateTableData: [],
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: true,
    };
  },
  created() {
    this.updateList();
  },
  methods: {
    //升级列表页面
    updateList() {
      this.loading = true;
      listApk({
        pageindex: this.page,
        pagesize: this.pageSize,
      })
        .then((res) => {
          this.updateTableData = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    // 上传apk
    handleApk() {
      this.$refs.upgradeDialogref.display();
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      //this.deviceList();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      //this.deviceList();
    },
  },
};
</script>
<style lang="less">
.deviceUpgrade {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  padding: 16px 16px;
  background: #ffffff;
  .upgradeBox {
    border: 1px solid #dddddd;
    height: calc(100% - 32px);
    padding: 16px;
    border-radius: 4px;
    .upBtnGroup {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .upgradeTable {
      margin-top: 16px;
      height: calc(100% - 48px);
      //background: #fcc;
    }
  }
}
</style>
