<template>
  <div>
    <div class="nav-title">执行器管理</div>
    <div class="search">
      <el-form
        class="search-form"
        :model="form"
        ref="form"
        :inline="true"
        size="mini"
      >
        <el-form-item label="APPName：">
          <el-input
            v-model="form.appname"
            placeholder="请输入APPName"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称：">
          <el-input v-model="form.title" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="toSearch">查询</el-button>
          <el-button type="primary" @click="handleEdit()">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#EAF1FE', color: '#666666' }"
      >
        <el-table-column label="AppName" prop="appname" align="center" />
        <el-table-column prop="title" label="名称" align="center" />
        <el-table-column prop="addressType" label="注册方式" align="center">
          <template slot-scope="scope">
            {{ scope.row.addressType === 0 ? "自动录入" : "手动录入" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="registryList"
          label="OnLine 机器地址"
          align="center"
        />
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              style="color: red"
              @click="handleDle(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :limit="params.size"
        :page="params.current"
        :total="total"
        class="pagination"
        @pagination="handlePageChange"
      />
    </div>
    <el-dialog
      :title="manageFrom && manageFrom.id ? '编辑执行器' : '新增执行器'"
      :visible.sync="centerDialogVisible"
      width="600px"
      @close="handleClose"
      center
    >
      <el-form :model="manageFrom" ref="form" size="mini">
        <el-form-item label="APPName：">
          <el-input
            v-model="manageFrom.appname"
            placeholder="请输入APPName"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称：">
          <el-input
            v-model="manageFrom.title"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="注册方式：">
          <el-radio-group v-model="manageFrom.addressType">
            <el-radio-button label="1">手动录入</el-radio-button>
            <el-radio-button label="0">自动录入</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="机器地址：">
          <el-input
            :disabled="manageFrom.addressType == 0"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入执行器地址列表，多地址逗号分隔"
            v-model="manageFrom.addressList"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAddJobgroup">确定</el-button>
          <el-button @click="handleClose()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  jobgroupList,
  addJobgroup,
  updateJobgroup,
  removeJobgroup,
} from "@/api/job.js";
import { successAlert, warningAlert } from "@/utils/alert";
export default {
  data() {
    return {
      form: {
        title: "",
        appname: "",
      },
      tableData: [],
      params: {
        current: 1,
        size: 10,
      },
      total: 0,
      centerDialogVisible: false,
      manageFrom: {
        appname: "",
        title: "",
        addressList: "",
        addressType: "1",
      },
    };
  },
  mounted() {
    this.handleJobGroupList();
  },
  methods: {
    async handleRemoveJobgroup(row) {
      const queryParams = new URLSearchParams({ id: row.id }).toString();
      let res = await removeJobgroup(queryParams);
      if (res.code == 200) {
        this.handleJobGroupList();
        successAlert("删除成功");
      }
    },
    handleClose() {
      this.manageFrom = {
        appname: "",
        title: "",
        addressList: "",
        addressType: "1",
      };
      this.centerDialogVisible = false;
    },
    handleEdit(e) {
      if (e && e.id) {
        this.manageFrom = e;
      }
      this.centerDialogVisible = true;
    },
    async handleAddJobgroup() {
      let res;
      delete this.manageFrom.updateTime;
      delete this.manageFrom.registryList;
      const queryParams = new URLSearchParams(this.manageFrom).toString();
      if (!this.manageFrom.id) {
        res = await addJobgroup(queryParams);
      } else {
        res = await updateJobgroup(queryParams);
      }
      if (res.code == 200) {
        successAlert("操作成功");
        this.handleClose();
        this.handleJobGroupList();
      }
      console.log(res);
    },
    handlePageChange(pageData) {
      this.params.size = pageData.size;
      this.params.current = pageData.page;
      this.handleJobGroupList();
    },
    handleDle(row) {
      this.$confirm("继续操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleRemoveJobgroup(row);
        })
        .catch(() => {});
    },
    toSearch() {
      this.handleJobGroupList();
    },
    async handleJobGroupList() {
      let data = {
        start: (this.params.current - 1) * this.params.size,
        length: this.params.size,
        title: this.form.title,
        appname: this.form.appname,
      };
      const queryParams = new URLSearchParams(data).toString();
      const res = await jobgroupList(queryParams);
      console.log(res);
      this.tableData = res.data;
      this.total = res.recordsTotal;
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-title {
  color: #02a7f0;
  font-size: 20px;
  position: relative;
  padding-left: 16px;
  font-weight: bold;
  line-height: 28px;
}
.nav-title::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 1px;
  width: 5px;
  height: 100%;
  background-color: #02a7f0;
  border-radius: 4px;
}
.search {
  margin: 16px 0;
  .search-form {
    padding: 10px;
    background-color: #eaf1fe;
    margin-bottom: 20px;
    border-radius: 8px;
    .el-form-item--mini.el-form-item,
    .el-form-item--small.el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>