<!--
 * @Author: Jason Liu
 * @Date: 2022-06-20 10:50:07
 * @Desc: 
-->
<template>
  <div class="clustermanagement_container body_container">
    <a-spin :spinning="loading">
      <a-row>
        <a-col :span="16">
          <span class="search_label"> 集群名称：</span>
          <a-input-search
            placeholder="请输入集群名称"
            allowClear
            v-model.lazy="pager.queryParams.F_name_like"
            @search="search"
          />
        </a-col>
        <a-col :span="8" class="api_tool">
          <a-button icon="search" type="primary" @click="search"> 查询 </a-button>
          &nbsp;
          <a-button
            icon="plus"
            type="primary"
            @click="
              editInfo({
                clusterId: undefined,
                description: undefined,
                name: undefined,
                restAddress: undefined,
                restPort: 80,
              })
            "
          >
            新增
          </a-button>
        </a-col>
      </a-row>
      <div class="table_list">
        <vxe-table
          show-overflow
          show-header-overflow
          border
          resizable
          :loading="loading"
          :row-config="{ isHover: true }"
          :data="lists"
          height="auto"
        >
          <vxe-column type="seq" title="序号" width="50" align="center">
          </vxe-column>
          <vxe-column field="name" title="集群名称"> </vxe-column>
          <vxe-column field="description" title="集群描述"> </vxe-column>
          <vxe-column field="restAddress" title="服务地址"> </vxe-column>
          <vxe-column field="restPort" title="服务端口"> </vxe-column>
          <vxe-column field="clusterTypeName" title="集群类别"> </vxe-column>
          <vxe-column field="orgName" title="所属机构"> </vxe-column>
          <vxe-column field="createBy" title="创建人"> </vxe-column>
          <vxe-column field="updateTime" title="更新时间"> </vxe-column>
          <vxe-column field="title" title="操作" width="210" align="center">
            <template #default="{ row }">
              <a-button type="link" @click="editInfo(row)">编辑</a-button>
              <a-popconfirm
                :title="`确认要删除[${row.name}]吗?`"
                ok-text="是"
                cancel-text="否"
                @confirm="deleteInfo(row)"
              >
                <a-button type="link" class="a_danger">删除</a-button>
              </a-popconfirm>
            </template>
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description"> 暂无数据 </span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
      <vxe-pager
        background
        :current-page.sync="pager.pageNum"
        :page-size.sync="pager.pageSize"
        :total="total"
        @page-change="getList"
        :layouts="['Total', 'PrevJump', 'JumpNumber', 'NextJump', 'FullJump']"
      >
      </vxe-pager>
    </a-spin>
    <a-modal
      title="设置集群信息"
      :visible="viewModel.show"
      :confirm-loading="viewModel.loading"
      @ok="save"
      @cancel="viewModel.show = false"
      cancelText="取消"
      okText="保存"
    >
      <a-form-model
        :model="viewModel.info"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        :rules="rules"
        ref="form"
      >
        <a-form-model-item label="集群名称" prop="name">
          <a-input v-model="viewModel.info.name" placeholder="请输入集群名称" />
        </a-form-model-item>
        <a-form-model-item label="服务地址" prop="restAddress">
          <a-input
            v-model="viewModel.info.restAddress"
            placeholder="请输入服务地址"
          />
        </a-form-model-item>
        <a-form-model-item label="端口号" prop="restPort">
          <a-input
            v-model="viewModel.info.restPort"
            placeholder="请输入端口号"
          />
        </a-form-model-item>
        <a-form-model-item label="集群类型" prop="label">
          <a-select v-model="viewModel.info.label" placeholder="请选择集群类型">
            <a-select-option value="1">采集集群</a-select-option>
            <a-select-option value="2">计算集群</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="集群类别" prop="clusterType">
          <a-select
            v-model="viewModel.info.clusterType"
            placeholder="请选择集群类别"
          >
            <a-select-option :value="1">中心端</a-select-option>
            <a-select-option :value="2">前置机</a-select-option>
            <a-select-option :value="3">院端</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="所属机构" prop="orgId">
          <a-select
            v-model="viewModel.info.orgId"
            placeholder="请选择所属机构"
            :options="orgList"
          >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="集群描述">
          <a-textarea
            v-model="viewModel.info.description"
            placeholder="请输入集群描述"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const $dataIntegration = require("@/api/dataIntegration");
const $dispatchcenter = require("@/api/dispatchcenter");
const $appService = require("w-vue-middle/api/appService");

export default {
  name: "clustermanagement",
  data() {
    return {
      total: 0,
      pager: {
        pageNum: 1,
        pageSize: 15,
        queryParams: {
          F_isDel_eq: 0,
          F_name_like: undefined,
        },
      },
      loading: false,
      lists: [],
      orgList: [],
      viewModel: {
        show: false,
        loading: false,
        info: {
          clusterId: undefined,
          name: undefined,
          restAddress: undefined,
          restPort: 80,
          clusterType: undefined,
          orgId: undefined,
          description: undefined,
          label: undefined
        },
      },
      rules: {
        name: [{ required: true, message: "请输入集群名称", trigger: "blur" }],
        restAddress: [{ required: true, message: "请输入服务地址", trigger: "blur" }],
        restPort: [{ required: true, message: "请输入端口号", trigger: "blur" }],
        label: [{ required: true, message: "请选择集群类型", trigger: "change" }]
      },
    };
  },
  created() {
    this.search();
  },
  methods: {
    editInfo(row) {
      this.viewModel.show = true;
      this.viewModel.info = row;
      this.getOrgList();
    },
    /**
     * @Author: Jason Liu
     * @description: 查询
     */
    search() {
      this.pager.pageNum = 1;
      this.getList();
    },
    /**
     * @Author: Jason Liu
     * @description: 获取流程设计列表
     */
    getList() {
      this.loading = true;
      $dataIntegration
        .getClusterManager(this.pager)
        .then((req) => {
          this.lists = req.data;
          this.total = Number(req.count);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /**
     * @Author: y_zp
     * @description: 获取机构列表
     */
    getOrgList() {
      $appService
        .getSysOrg({
          pageNum: 1,
          pageSize: 1000000,
        })
        .then((req) => {
          this.orgList = req.data.map(item => {
            return {
              label: item.orgName,
              value: item.orgId
            }
          })
        })
    },
    /**
     * @Author: Jason Liu
     * @description: 保存集群信息
     */
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.viewModel.loading = true;
          this.viewModel.info._X_ROW_KEY = undefined;
          $dataIntegration
            .saveClusterManager(this.viewModel.info)
            .then((req) => {
              this.$message.success("保存成功！");
              this.getList();
              this.viewModel.show = false;
            })
            .finally(() => {
              this.viewModel.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    /**
     * @Author: Jason Liu
     * @description: 预删除集群
     */
    deleteInfo(row) {
      $dispatchcenter
        .preDeleteClusterManager(row)
        .then((req) => {
          this.delHandler(row)
        })
        .finally(() => {
          this.getList();
        });
    },
    /**
     * @Author: Jason Liu
     * @description: 删除集群
     */
    delHandler(row) {
      $dataIntegration
        .deleteClusterManager(row)
        .then((req) => {
          this.$message.success("删除成功！");
        })
        .finally(() => {
          this.getList();
        });
    }

  },
};
</script>

<style lang="less">
.clustermanagement_container {
  .table_list {
    width: 100%;
    height: calc(100vh - 230px);
    display: inline-block;
    margin-top: 16px;
  }
}
</style>
