<template>
  <div class="oo-page">
    <div class="oo-server">
      <Spin size="large" v-if="spinShow">
        正在进行通信检测...
        <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      </Spin>
      <cs-dynamic-table ref="child" :prop="csTable" :parent="this"></cs-dynamic-table>
    </div>
  </div>
</template>


<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class PingTest extends Vue {
  private servers: Array<any> = [];
  private spinShow: boolean = true;
  csTable: any = {
    paginationByFront: true,
    dataPropFront: "data",
    dataProp: "data.content",
    postMethod: true,
    dataFun: this.mockTableFun,

    formWidth: 35,
    parentVm: this,
    dataSrc: this.$msPrefix.automation + "/api/v1/res/server/commTest",
    delSrc: this.$msPrefix.automation + "/api/v1/data/delete/resGroup/",
    batchDelUri: this.$msPrefix.automation + "/api/v1/data/batch/resGroup",
    pageableProp: {
      pageSize: "data.size",
      total: "data.totalElements",
      currentPage: "data.number"
    },
    showIndex: true,
    emptyModel: {
      name: ""
    },
    actions: {
      //表头操作按钮
      replace: true,
      def: []
    },
    search: {
      show: false
    },
    columns: [
      {
        key: "host",
        title: "主机名称",
        align: "center",
        ellipsis: true,
        tooltip: true
      },
      {
        key: "ip",
        title: "ip地址",
        align: "center",
        ellipsis: true,
        tooltip: true
      },
      {
        key: "result",
        title: "执行结果",
        align: "center",
        ellipsis: true,
        tooltip: true,
        render: (h, params) => {
          var msg = "未知";
          if ("0" == params.row.result) {
            msg = "成功";
          } else {
            if (params.row.errorMsg) {
              msg = params.row.errorMsg;
            }
          }
          return h("span", msg);
        }
      }
    ]
  };

  mockTableFun() {
    return { data: this.servers };
  }

  postTableData(data) {
    this.spinShow = true;

    let table = this.$refs.child as any;
    let vm = this;
    let postData = data.map(item => item.id);
    this.csTable.paginationByFront = true;
    this.csTable.dataFun = this.mockTableFun;
    this.servers = data;
    table.afterGetData({ data: this.servers });
    this.getApiData(
      "post",
      this.$msPrefix.automation + "/api/v1/res/server/commTest",
      postData,
      res => {
        //    this.loading=!1;
        if (res.rtnCode == 0) {
          // this.tableVm.getData();
          // this.cancel();
          // this.$emit('group',res.data);
          this.servers = res.data;
          this.csTable.paginationByFront = true;
          (this.$refs.child as any).afterGetData({ data: this.servers });

          this.$tools.message("success", "通信检测成功");
        } else {
          this.$tools.message("error", "通信检测失败");
        }
        this.spinShow = false;
      },
      err => {
        this.spinShow = false;
      }
    );

    // this.csTable.postData = data.map(item => item.id);
    // this.csTable.paginationByFront = true;
    // (this.$refs.child as any).getData();
  }
}
</script>
<style scoped>
.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
</style>