<template>
  <div class="oo-page">
    <div class="oo-server" v-show="$customs.flag">
      <h3 class="page-name">{{title}}</h3>
      <cs-dynamic-table ref="child" :prop="csTable" :parent="this">
        <template slot="form" scope="props">
          <model-form
            :model="props.obj"
            :action="props.action"
            :tableVm="props.tableVm"
            @closeModal="props.closeModal"
            :tableInfo="props.tableInfo"
            ref="form"
          ></model-form>
        </template>
      </cs-dynamic-table>
      <Modal
        v-model="modelFlag"
        title="服务器管理"
        width="80"
        :mask-closable="false"
        @on-cancel="closeModal"
      >
        <div slot="footer"></div>
      </Modal>
      <Modal
        v-model="roleFlag"
        title="分组权限管理"
        width="30"
        :mask-closable="false"
        @on-cancel="closeRole"
      >
        <div slot="footer"></div>
      </Modal>
    </div>
    
     <div class="oo-server" v-show="!$customs.flag">
        <cs-dynamic-table ref="child" :prop="csTable" :parent="this">
            <template slot="form" scope="props">
                <model-form :model="props.obj" :action="props.action" :tableVm="props.tableVm" @closeModal="props.closeModal" :tableInfo="props.tableInfo" ref="form"></model-form>
            </template>
        </cs-dynamic-table>
         <Modal v-model="modelFlag" title="服务器管理" width="80" :mask-closable="false" @on-cancel="closeModal" >
            <div slot="footer"></div>
        </Modal>
         <Modal v-model="roleFlag" title="分组权限管理" width="30" :mask-closable="false" @on-cancel="closeRole" >
            <div slot="footer"></div>
        </Modal>
     </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import ModelForm from "./script-server-form.vue";
@Component({
  components: {
    ModelForm
  }
})
export default class Server extends Vue {
  private model: any = {
    hostLike: "",
    ipLike: "",
    osTypeLike: ""
  };
  private activeModel: any = {
    id: "",
    name: "",
    resSet: []
  };
  private roleModel: any = {
    id: "",
    name: "",
    resSet: [],
    roleIds: []
  };

  private assignRole: any = {
    name: "",
    roles: []
  };
  modelFlag: boolean = false;
  roleFlag: boolean = false;
  title: any = "";
  private csTable: any = {
    formWidth: 35,
    parentVm: this,
    dataSrc: this.$msPrefix.automation + "/api/v1/data/list/scriptServerEntity",
    delSrc:
      this.$msPrefix.automation + "/api/v1/data/delete/scriptServerEntity/",
    batchDelUri:
      this.$msPrefix.automation + "/api/v1/data/batch/scriptServerEntity",
    dataProp: "data.content",
    postMethod: true,
    pageableProp: {
      pageSize: "data.size",
      total: "data.totalElements",
      currentPage: "data.number"
    },
    showIndex: true,
    emptyModel: {
      ip: "",
      user: "",
      psw: ""
    },
    search: {
      show: true,
      prop: "ipLike",
      value: "",
      placeholder: "输入服务器IP搜索"
    },
    columns: [
      {
        type: "selection",
        width: 60,
        align: "center"
      },
      {
        key: "ip",
        title: "服务器IP",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom"
      },
      {
        key: "user",
        title: "用户名",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom"
      },
      {
        key: "psw",
        title: "服务器密码",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom",
        render: (h, params) => {
          return h("span", {
            domProps: {
              innerHTML: "******"
            }
          });
        }
      },
      {
        key: "action",
        title: "操作",
        minWidth: 200,
        align: "center",
        render: (h, params) => {
          let menus = [
            {
              icon: "ios-create-outline",
              action: "update",
              label: "编辑",
              type: "primary"
            },
            {
              icon: "ios-eye",
              action: "detail",
              label: "查看",
              type: "primary"
            },
            {
              icon: "md-trash",
              action: "delete",
              label: "删除",
              type: "error"
            }
          ];
          let clickEvent = this.clickEvent;
          return h("div", [
            h("CsButton", {
              props: {
                actions: menus,
                click: clickEvent,
                data: params.row,
                size: "small",
                styleCss: "marginRight:5px",
                disabled: params.row._disabled
              }
            })
          ]);
        }
      }
    ]
  };

  addToGroup() {}

  sync(item) {
    item.loading = true;
    this.getApiData(
      "get",
      this.$msPrefix.automation + "/api/v1/res/server/sync",
      {},
      res => {
        item.loading = false;
        this.$tools.message("success", "同步成功");
      },
      err => {}
    );
  }

  clickEvent(name: string, obj: any) {
    if (name == "delete") {
      (this.$refs.child as any).handleDelete(obj.id);
    } else {
      (this.$refs.child as any).formInfo.title =
        name == "update" ? "编辑" : "详情";
      (this.$refs.child as any).formInfo.action =
        name == "update" ? "update" : "detail";
      (this.$refs.child as any).formInfo.model = _.cloneDeep(obj);
      (this.$refs.child as any).dialogVisible = true;
      (this.$globalFun() as any).getMethod('show')
    }
  }

  getPostData() {
    var data = _.cloneDeep(this.model);
    var postData = {};
    this.filterData(postData, data);
    this.csTable.postData = postData;
  }
  filterData(postData, data) {
    var keys = Object.keys(data);
    keys.forEach(item => {
      if ([0, false].includes(data[item]) || (data[item] && data[item])) {
        postData[item] = ["" + data[item]];
      }
    });
  }

  searchTable() {
    this.getPostData();
    (this.$refs.child as any).getData();
  }
  closeRole() {
    this.roleFlag = !1;
    (this.$globalFun() as any).getMethod('close')
  }
  closeModal() {
    this.modelFlag = !1;
    (this.$globalFun() as any).getMethod('close')
  }
  mounted() {
    this.title = (this.$globalFun() as any).getMethod('title')
  }
}
</script>

