<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-bscatalogue__bscatalogue">
      <el-form :inline="true">
        <el-form-item label="项目名称:">
          <el-input
            v-model="queryData.projectName"
            placeholder="请输入项目名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="应用名称:">
          <el-input
            v-model="queryData.applyName"
            placeholder="请输入应用名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchTableData">查询</el-button>
          <el-button @click="resetTableData">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table row-key="id" :data="dataList" border style="width: 100%">
        <el-table-column
          prop="projectName"
          label="项目名称"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="applyName"
          label="应用名称"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="useAbilityName"
          label="使用能力名称"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="capabilityType"
          label="能力类型"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="viewsNumber"
          label="浏览次数"
          header-align="center"
          align="center"
        ></el-table-column>
        <!--  <el-table-column label="操作" header-align="center" align="center">
        </el-table-column> -->
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
// import AddOrUpdate from './order-add-or-update'
import { addDynamicRoute } from "@/router";
export default {
  //  mixins: [mixinViewModule],
  data() {
    return {
      queryData: {
        projectName: "",
        applyName: "",
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      dataList: [
        {
          projectName: "人员聚集算法任务",
          applyName: "已创建",
          useAbilityName: "人员聚集",
          capabilityType: "视频类",
          viewsNumber: "100",
        },
      ],
    };
  },
  components: {
    // AddOrUpdate
  },
  mounted() {
    //this.getTableData();
  },
  methods: {
    getTableData() {
      //修改查询接口
      this.$http
        .get("/taskList/tasklistcontroller/selectTaskList", {
          params: {
            page: this.queryData.pageIndex,
            pageSize: this.queryData.pageSize,
            projectName: this.queryData.projectName,
            applyName: this.queryData.applyName,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            this.dataList = res.data.taskEntityList;
            this.queryData.total = parseInt(res.data.num);
          }
        })
        .catch(() => {});
    },
    getStatusCnName(val) {
      const arr = this.statusOptions.filter((i) => {
        return i.value === val;
      });

      if (arr.length >= 0) {
        return arr[0].label;
      }

      return "未知状态";
    },

    // 重置
    resetTableData() {
      this.queryData.projectName = "";
      this.queryData.applyName = "";
      this.getTableData();
    },

    searchTableData() {
      this.queryData.pageIndex = 1;
      this.getTableData();
    },
    // 分页大小更改
    handleSizeChange(value) {
      this.queryData.pageSize = value;
      this.getTableData();
    },
    // 当前索引更改
    handleCurrentChange(val) {
      this.queryData.pageIndex = val;
      this.getTableData();
    },
  },
};
</script>
<style lang="scss" scoped>
.monitoring-top {
  margin: 10px 0;
}
</style>