<template>
  <div>
    <!-- <div class="card content-box">
    </div> -->
    <div class="title">
      用户管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card">
      <div class="screen">
        <div class="screen_view">
          任务名称&ensp;<el-input v-model="jobName" style="width: 300px" size="large" placeholder="输入任务名称" />
        </div>
        <div class="screen_view">
          任务分组&ensp;<el-select v-model="grouping" placeholder="请选择任务分组" size="large" style="width: 300px">
            <el-option v-for="item in groupingdata" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="screen_view">
          任务状态&ensp;<el-select v-model="status" placeholder="请选择任务状态" size="large" style="width: 300px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="screen1">
          <div>
            <el-button type="primary" size="large" color="#0052d9" @click="query(0)">查询</el-button>
            <el-button size="large" @click="query(1)">重置</el-button>&ensp;&ensp;
          </div>
        </div>
      </div>
    </div>
    <div class="card cardbottom">
      <!-- <el-button v-if="BUTTONS.useradd" type="primary" size="large" color="#0052d9" @click="newaddition">新增</el-button> -->
      <el-button v-if="BUTTONS.jobadd" type="primary" size="large" color="#0052d9" @click="newaddition">新增</el-button>

      <div>&ensp;</div>
      <el-table :data="tableData.rows" style="width: 100%" border>
        <el-table-column prop="misfirePolicy" label="任务编码" show-overflow-tooltip />
        <el-table-column prop="jobName" label="任务名称" />
        <el-table-column prop="jobGroup" label="任务分组" />
        <el-table-column prop="invokeTarget" label="调用目标字符串" />
        <el-table-column prop="cronExpression" label="执行表达式" />
        <el-table-column prop="status" label="任务状态" align="center" width="140">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="onswitch(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" align="center" width="260">
          <template #default="scope">
            <el-button v-if="BUTTONS.jobedit" color="#0052d9" type="primary" @click="newition(scope.row)">编辑</el-button>
            <!-- <el-button @click="Newpassword(scope.row)">重置密码</el-button> -->
            <el-button v-if="BUTTONS.jobdelete" @click="onremove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination">
        <div></div>
        <slot name="pagination">
          <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
        </slot>
      </div>
    </div>
  </div>
</template>
<!--    -->
<script setup lang="ts">
import { useHandleData } from "@/hooks/useHandleData.js";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { joblistURL, jobremove, jobchangeStatus } from "../../api/home/Multisite.js";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
const { BUTTONS } = useAuthButtons();

const router = useRouter();

const groupingdata = ref([
  {
    value: "",
    label: "全部"
  },
  {
    value: "DEFAULT",
    label: "默认"
  },
  {
    value: "SYSTEM",
    label: "系统"
  }
]);
const options = ref([
  {
    value: "",
    label: "全部"
  },
  {
    value: "0",
    label: "正常"
  },
  {
    value: "1",
    label: "暂停"
  }
]);
const query = (val: any) => {
  if (val == 0) {
  } else {
    (createTime.value = []), (status.value = ""), (phonenumber.value = "");
    getplatformuserlist();
  }
};
const newaddition = () => {
  router.push({
    path: "/monitor/add",
    query: {
      type: "任务新增", // 传递的参数
      id: ""
    }
  });
};
const newition = (row: any) => {
  router.push({
    path: "/monitor/add",
    query: {
      type: "任务编辑", // 传递的参数
      id: row.id
    }
  });
};
// 查询

const tableData = ref();
const jobName = ref("");
const grouping = ref("");
const status = ref("");
const phonenumber = ref();
const createTime = ref();
createTime.value = [];

const pageable = ref({
  pn: 1,
  ps: 10,
  total: 0
});
const getplatformuserlist = async () => {
  let obj = {
    jobName: jobName.value,
    jobGroup: grouping.value,
    status: status.value,
    orderByColumn: "createTime",
    isAsc: "desc",
    pageNum: pageable.value.pn,
    pageSize: pageable.value.ps
  };
  const data = await joblistURL(obj);
  console.log(data);
  tableData.value = data;
  pageable.value.total = data.total;
};
// 表格操作 Hooks
const handleSizeChange = async (e: any) => {
  pageable.value.ps = e;
  getplatformuserlist();
};
const handleCurrentChange = async (e: any) => {
  pageable.value.pn = e;

  getplatformuserlist();
};

// 删除
const onremove = async (row: any) => {
  await useHandleData(jobremove, { ids: row.id }, "删除");
  await getplatformuserlist();
};

const currentDate = ref();
// 按钮
const onswitch = async (row: any) => {
  let obj = {
    id: row.id,
    jobGroup: row.jobGroup,
    status: row.status
  };
  await jobchangeStatus(obj);
  await getplatformuserlist();
};
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getplatformuserlist();
});
</script>
<style scoped lang="scss">
@import "./job.scss";
</style>
<!--  -->
