<template>
  <div class="page-box">
    <div class="search-box">
      <!--            <el-input placeholder="任务Id"></el-input>&nbsp;&nbsp;-->
      <el-button type="primary" icon="el-icon-plus" @click="AddOrder"
        >ADD
      </el-button>
    </div>
    <div>
      <vxe-table
        show-overflow
        row-id="id"
        :loading="loading1"
        :data="tableData1"
      >
        <vxe-column field="id" title="订单ID" width="80"></vxe-column>
        <vxe-column field="name" title="name" sortable></vxe-column>
        <vxe-column field="create_time" title="create Time"></vxe-column>
        <vxe-column field="run_time" title="是否立即执行">
          <template #default="{ row }">
            {{ row.run_time ? "是" : "否" }}
          </template>
        </vxe-column>
        <vxe-column field="source" title="数据来源"></vxe-column>
        <vxe-column field="status" title="status">
          <template #default="{ row }">
            {{ orderStatus[row.status || 0] }}
          </template>
        </vxe-column>
        <vxe-column field="Details" title="操作" width="80">
          <template #default="{ row }">
            <div style="text-align: center">
              <i
                @click="showDetail(row)"
                class="el-icon-info"
                style="cursor: pointer"
              ></i>
              <i
                @click="delOrder(row)"
                class="el-icon-delete"
                style="cursor: pointer"
              ></i>
            </div>
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        :loading="loading1"
        :current-page="tablePage1.currentPage"
        :page-size="tablePage1.pageSize"
        :total="tablePage1.totalResult"
        :layouts="[
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'FullJump',
          'Sizes',
          'Total',
        ]"
        @page-change="handlePageChange1"
      >
      </vxe-pager>
    </div>
    <AddDom ref="AddDoms" :reload="findList1"></AddDom>
  </div>
</template>
<script>
import axios from "axios";
import { hotTags, getClicks, getBlogs, getOrder } from "@/api";
import { mapState } from "vuex";
import { orderStatus } from "@/utils";
import AddDom from "./add.vue";

export default {
  name: "task",
  components: { AddDom },
  data() {
    return {
      loading1: false,
      orderStatus,
      tableData1: [],
      tablePage1: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0,
      },
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
  },
  created() {
    this.findList1();
  },
  methods: {
    async findList1() {
      const token = localStorage.getItem("token");
      const res = await getOrder({
        token,
        page: this.tablePage1.currentPage,
        pageSize: this.tablePage1.pageSize,
      });
      console.log(8989, res.data);
      this.loading1 = true;
      this.tableData1 = res.data.list;
      this.tablePage1.totalResult = res.data.total_count;
      this.loading1 = false;
      // setTimeout(() => {
      //   const list = [
      //     {
      //       completeTime: "not completed",
      //       createTime: "not created",
      //       jobId: 795,
      //       key: 795,
      //       requestTime: "2023-04-04 21:09:27",
      //       deleteTime: "2023-04-04 21:09:27",
      //       status: "waiting",
      //     },
      //     {
      //       completeTime: "not completed",
      //       createTime: "not created",
      //       jobId: 795,
      //       key: 795,
      //       requestTime: "2023-04-04 21:09:27",
      //       deleteTime: "2023-04-04 21:09:27",
      //       status: "success",
      //     },
      //     {
      //       completeTime: "not completed",
      //       createTime: "not created",
      //       jobId: 795,
      //       key: 795,
      //       requestTime: "2023-04-04 21:09:27",
      //       deleteTime: "2023-04-04 21:09:27",
      //       status: "failed",
      //     },
      //   ];
      //   this.loading1 = false;
      //   this.tablePage1.totalResult = list.length;
      //   this.tableData1 = list.slice(
      //     (this.tablePage1.currentPage - 1) * this.tablePage1.pageSize,
      //     this.tablePage1.currentPage * this.tablePage1.pageSize
      //   );
      //   console.log(this.tableData1);
      // }, 300);
    },
    handlePageChange1({ currentPage, pageSize }) {
      this.tablePage1.currentPage = currentPage;
      this.tablePage1.pageSize = pageSize;
      this.findList1();
    },
    print(row) {
      console.log(row);
    },
    getTag(row) {
      if (row.status === "success") {
        return "success";
      }
      if (row.status === "waiting") {
        return "info";
      }
      return "danger";
    },
    delOrder(row) {
      console.log(row);
      this.$alert("删除当前订单将清理所有已生成数据！", "提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          console.log(123, action);
        },
      });
    },
    showDetail(row) {
      this.$router.push({
        path: "/result",
        query: {
          jobId: row.id,
        },
      });
    },
    AddOrder() {
      this.$refs.AddDoms.show();
    },
  },
};
</script>

<style lang="less" scoped>
.page-box {
  padding: 0 24px;
  margin-top: 67px;
  height: calc(100vh - 68px);

  .search-box {
    display: flex;
    margin-top: 24px;
    padding-top: 24px;
    margin-bottom: 24px;
  }

  .list-box {
    //margin-top: 24px;
    //  box-sizing: border-box;
    //  height: 300px;
    //  width: 100%;
  }
}
</style>
