<template>
  <div class="app-container">
    <!-- 请求条件表单 -->
    <el-form :inline="true">
      <el-form-item label="App名称">
        <el-select v-model="condition.pkg" @change="getTaskList" filterable>
          <el-option
            v-for="(item, index) in pkgList"
            :key="index"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="查询日期">
        <el-date-picker
          v-model="queryDate"
          type="daterange"
          align="center"
          unlink-panels
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="$store.state.pickerOptions"
        />
      </el-form-item>
      <!-- 查询 -->
      <el-button type="primary" @click="getTaskList">
        查询
      </el-button>
    </el-form>
    <!-- 数据查看表格 -->
    <task-table
      :table-list="tableData"
      :header="head"
      @openTaskDetail="openTaskDetail"
    ></task-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!-- 弹窗详细任务列表组件 -->
    <task-detail ref="taskDetail" :pkg-list="pkgList"></task-detail>
  </div>
</template>

<script>
import TaskTable from "./compomemts/TaskTable";
import TaskDetail from "./compomemts/TaskDetail";
import { menuSelectApps, getTaskList } from "@/api/report.js";

const moment = require("moment");

export default {
  components: {
    TaskTable,
    TaskDetail
  },
  data() {
    return {
      pkgList: [], //包的类行 包（app）列表
      queryDate: [], //选择的日期
      condition: {
        pkg: "", //平台选择
        startDate: "", //开始日期
        endDate: "" //截止日期
      }, //请求参数
      pageInfo: {
        page: 1,
        size: 10,
        total: 0
      }, //分页信息
      tableData: [], //表格数据
      head: [
        { prop: "id", label: "taskId", width: "80" },
        { prop: "taskName", label: "名称", width: "180", tooltip: true },
        {
          prop: "appName",
          label: "应用",
          width: "180",
          tooltip: true
        },
        { label: "任务状态", tag: "allTaskProgress" },
        { prop: "datadate", label: "操作时间", width: "120" },
        { prop: "operatorName", label: "操作人", width: "100" },
        { prop: "operator", label: "操作人ID", width: "80" },
        { label: "操作", tag: "onpenTask", width: "100" }
      ] //表格表头
    };
  },
  created() {
    //获取当天的时间
    this.queryDate[0] = moment()
      .subtract(0, "days")
      .format("YYYY-MM-DD");
    this.queryDate[1] = moment().format("YYYY-MM-DD");

    this.menuSelectApps(); // 获取App名称配置列表
  },
  methods: {
    /**
     * 获取包名
     */
    menuSelectApps() {
      menuSelectApps({
        platformId: 4,
        menuCode: "putin.apps"
      }).then(res => {
        this.pkgList = res.result.data;
        this.pkgList.unshift({ label: "全部", value: "" });
        this.getTaskList();
      });
    },
    /**
     * 获取任务列表方法
     */
    getTaskList() {
      this.condition.startDate = this.queryDate[0];
      this.condition.endDate = this.queryDate[1];
      getTaskList({
        ...this.condition,
        page: this.pageInfo.page,
        size: this.pageInfo.size
      }).then(res => {
        if (res.status == 200) {
          if (res.result.data.content.length < 1) {
            this.$message.info("未查询到数据");
          }
          this.tableData = res.result.data.content; //任务列表内容
          this.pageInfo.total = res.result.data.total; //数据总条数
        } else {
          this.$message.error(`请求出错，错误代码:${res.status}`);
          console.log(res);
        }
      });
    },
    /**
     * 选择每页显示条数
     */
    handleSizeChange(size) {
      this.pageInfo.size = size;
      this.getTaskList();
    },
    /**
     * 选择页数
     */
    handleCurrentChange(page) {
      this.pageInfo.page = page;
      this.getTaskList();
    },
    /**
     * 打开任务详情列表
     */
    openTaskDetail(row) {
      this.$refs.taskDetail.getTaskList(row);
    }
  }
};
</script>
