<template>
  <div class="app-container">
    <addModal
      ref="addModel"
      @success="modalSuccess"
      :snList="snList"
      :installationPackageList="installationPackageList"
    />
    <div style="margin-bottom: 20px">
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        添加安装任务
      </el-button>
      <!-- <el-select
        filterable
        clearable
        v-model="form.sn"
        placeholder="设备sn"
        class="filter-item wid"
      >
        <el-option
          v-for="item in snList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select> -->
      <el-input
        v-model="form.company"
        placeholder="公司名称"
        class="filter-item wid"
        clearable
      />
      <el-input
        clearable
        v-model="form.sn"
        placeholder="设备sn"
        class="filter-item wid"
      />
      <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-select
        filterable
        clearable
        v-model="form.status"
        placeholder="安装状态"
        class="filter-item wid"
      >
        <el-option
          v-for="item in installSearch"
          :key="item.code"
          :label="item.desc"
          :value="item.code"
        >
        </el-option>
      </el-select>
      <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: 20px"
        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="设备sn">
        <template slot-scope="scope">
          {{ scope.row.sn }}
        </template>
      </el-table-column>
      <el-table-column label="公司名称">
        <template slot-scope="scope">
          {{ scope.row.company }}
        </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="安装状态"
        align="center"
        class-name="status-col"
        width="100"
      >
        <template slot-scope="{ row }">
          <el-tag :type="row.status | statusFilter">
            {{ row.status | statusFilterStr }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="安装完成时间">
        <template slot-scope="scope">
          {{ scope.row.installTime }}
        </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="120"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }">
          <el-button
            :disabled="row.status == 2 || row.status == 3"
            size="mini"
            type="warning"
            @click="cancelHandle(row, $index)"
          >
            取消
          </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 { taskPage, taskStatus, taskCancel,apkList } from "@/api/install_task";
import { snList } from "@/api/device";
import Pagination from "@/components/Pagination";

export default {
  components: { Pagination, AddModal },
  filters: {
    statusFilter(status) {
      return status == 0
        ? "info"
        : status == 1
        ? "primary"
        : status == 2
        ? "success"
        : "info";
    },
    statusFilterStr(status) {
      return status == 0
        ? "等待中"
        : status == 1
        ? "下载中"
        : status == 2
        ? "完成"
        : "取消";
    },
  },
  mixins: [tableMixins],
  data() {
    return {
      form: {
        pageNumber: 1,
        pageSize: 10000,
      },
      installSearch: [],
      snList: [],
      installationPackageList: [],
    };
  },
  methods: {
    initData() {
      this.getTableList();
      this.taskStatus();
      this.apkList();
      this.snListFun();
    },
    // 获取表格数据
    async getTableList() {
      this.tableLoading = true;
      try {
        const result = await taskPage(this.getFilterParams());
        this.setDataList(result.data);
      } catch (e) {
        console.log(e);
      } finally {
        this.tableLoading = false;
      }
    },
    // 增加筛选条件
    transformFilterForm() {
      return {
        sn: this.form.sn || null,
        company: this.form.company || null,
        apkTitle: this.form.apkTitle || null,
        apkVersion: this.form.apkVersion || null,
        startTime: this.form.startTime || null,
        endTime: this.form.endTime || null,
        status: this.form.status === "" ? null : this.form.status,
      };
    },
    taskStatus() {
      taskStatus().then((res) => {
        this.installSearch = res.data;
      });
    },
    snListFun() {
      snList().then((res) => {
        this.snList = res.data;
      });
    },
    apkList() {
      apkList().then((res) => {
        this.installationPackageList = res.data;
      });
    },
    // 获取筛选信息
    query() {
      this.clearPageParams();
      this.getTableList();
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        this.clearPageParams();
      }
      this.getTableList();
    },
    handleCreate() {
      this.$refs.addModel.open();
    },
    // 取消
    cancelHandle(row) {
      this.$confirm("确定要取消吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        console.log(row);
        taskCancel(row.id).then((res) => {
          this.getTableList();
          this.$message({
            type: "success",
            message: "取消成功!",
          });
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.wid {
  width: 200px;
  margin-left: 20px;
}
</style>
