<template>
  <div class="app-container">
    <addModal ref="addModel" @success="modalSuccess" />
    <div style="margin-bottom: 20px">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        上传安装包
      </el-button>
      <el-input
        clearable
        v-model="form.apkTitle"
        placeholder="安装包名称"
        class="filter-item wid"
      />
      <el-input
        clearable
        v-model="form.apkVersion"
        placeholder="版本号"
        class="filter-item wid"
      />
      <el-date-picker
        v-model="form.startTime"
        type="datetime"
        placeholder="起始时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        class="filter-item wid"
      >
      </el-date-picker>
      <el-date-picker
        v-model="form.endTime"
        type="datetime"
        placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
        class="filter-item wid"
      >
      </el-date-picker>
      <el-button
        class="filter-item"
        type="primary"
        style="margin-left: 10px"
        icon="el-icon-search"
        @click="query"
      >
        搜索
      </el-button>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{
            (pagination.current - 1) * pagination.pageSize + (scope.$index + 1)
          }}
        </template>
      </el-table-column>
      <el-table-column label="安装包名称">
        <template slot-scope="scope">
          {{ scope.row.apkTitle }}
        </template>
      </el-table-column>
      <el-table-column label="版本号">
        <template slot-scope="scope">
          {{ scope.row.apkVersion }}
        </template>
      </el-table-column>
      <el-table-column label="安装包地址">
        <template slot-scope="scope">
          {{ scope.row.apkPath }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="180"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(row, $index)"
          >
            删除
          </el-button>
          <!-- <el-button
            size="mini"
            type="warning"
            @click="cancelHandle(row, false)"
            >取消</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pagination.total"
      :page.sync="pagination.current"
      :limit.sync="pagination.pageSize"
      :page-sizes="pagination.pageSizeOptions"
      :layout="pagination.layout"
      @pagination="handleSizeChange"
    />
  </div>
</template>

<script>
import AddModal from "./modal/AddModal.vue";
import tableMixins from "@/mixins/tableMixins";
import { apkpage, apkDeleted } from "@/api/install_task";
import Pagination from "@/components/Pagination";

export default {
  components: { Pagination, AddModal },
  filters: {
    statusFilter(status) {
      return status ? "success" : "info";
    },
    statusFilterStr(status) {
      return status ? "已启用" : "已停用";
    },
  },
  mixins: [tableMixins],
  data() {
    return {
      form: {},
    };
  },
  methods: {
    initData() {
      this.getTableList();
    },
    // 获取表格数据
    async getTableList() {
      this.tableLoading = true;
      try {
        const result = await apkpage(this.getFilterParams());
        this.setDataList(result.data);
      } catch (e) {
        console.log(e);
      } finally {
        this.tableLoading = false;
      }
    },
    // 获取筛选信息
    query() {
      this.clearPageParams();
      this.getTableList();
    },
    // 增加筛选条件
    transformFilterForm() {
      return {
        apkTitle: this.form.apkTitle || null,
        apkVersion: this.form.apkVersion || null,
        startTime: this.form.startTime || null,
        endTime: this.form.endTime || null,
      };
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        this.clearPageParams();
      }
      this.getTableList();
    },
    handleCreate() {
      this.$refs.addModel.open();
    },
    handleUpdate(row) {
      this.$refs.addModel.open(Object.assign({}, row));
    },
    handleDelete(row, index) {
      const that = this;
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        type: "warning",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.cancelButtonLoading = true;
            instance.confirmButtonText = "提交中...";
            try {
              await apkDeleted(row.id);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              that.getTableList();
            } catch (e) {
            } finally {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
                instance.cancelButtonLoading = false;
              }, 300);
            }
          } else {
            done();
          }
        },
      })
        .then(() => {})
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="scss">
.wid {
  width: 200px;
  margin-left: 10px;
}
</style>
