<template>
  <div class="oo-page">
    <div class="oo-server">
      <h3 class="page-name" v-show="$customs.flag">{{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"
      >
        <server-manage
          @closeModal="closeModal"
          ref="manage"
          :group="activeModel"
          @getData="searchTable"
        ></server-manage>
        <div slot="footer"></div>
      </Modal>
      <Modal
        v-model="roleFlag"
        title="分组权限管理"
        width="30"
        :mask-closable="false"
        @on-cancel="closeRole"
      >
        <group-role-form @closeModal="closeRole" ref="role" @getData="searchTable"></group-role-form>
        <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="modelFlag1" title="服务器管理" width="80" :mask-closable="false" @on-cancel="closeModal" >
            <server-manage @closeModal="closeModal" ref="manage" :group="activeModel" @getData="searchTable"></server-manage>
            <div slot="footer"></div>
        </Modal>
         <Modal v-model="roleFlag1" title="分组权限管理" width="30" :mask-closable="false" @on-cancel="closeRole" >
            <group-role-form  @closeModal="closeRole" ref="role"   @getData="searchTable"></group-role-form>
            <div slot="footer"></div>
        </Modal>
     </div>-->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State } from "vuex-class";
import GroupRoleForm from "./group-role-form.vue";
import ModelForm from "./group-form.vue";
import ServerManage from "./server-manage.vue";

@Component({
  components: {
    ModelForm,
    ServerManage,
    GroupRoleForm
  }
})
export default class Group 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;
  modelFlag1: boolean = false;
  roleFlag1: boolean = false;
  title: any = "";
  @State isAdministrator!: boolean;
  private csTable: any = {
    formWidth: 35,
    parentVm: this,
    dataSrc:
      this.$msPrefix.automation + "/api/v1/data/list/resGroup?filter=true",
    // delSrc: this.$msPrefix.automation+"/api/v1/data/delete/resGroup/",
    delSrc: this.$msPrefix.automation + "/api/v1/res/serverGroup/delete/",
    batchDelUri: this.$msPrefix.automation + "/api/v1/res/serverGroup/batchDel",
    dataProp: "data.content",
    postMethod: true,
    postParams: true,
    pageableProp: {
      pageSize: "data.size",
      total: "data.totalElements",
      currentPage: "data.number"
    },
    order: "id,asc",
    showIndex: true,
    emptyModel: {
      name: ""
    },
    search: {
      show: true,
      prop: "nameLike",
      value: "",
      placeholder: "输入分组名称搜索"
    },
    columns: [
      {
        type: "selection",
        width: 60,
        align: "center"
      },
      {
        key: "name",
        title: "分组名称",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom"
      },
      {
        key: "desc",
        title: "分组描述",
        align: "center",
        ellipsis: true,
        tooltip: true,
        sortable: "custom"
      },
      {
        title: "操作",
        key: "action",
        minWidth: 200,
        align: "center",
        render: (h, params) => {
          let menus = [
            {
              icon: "ios-eye",
              action: "manage",
              label: "服务器管理",
              type: "primary"
            },
            {
              icon: "ios-create-outline",
              action: "role",
              label: "权限分配",
              type: "primary",
              isAdmin: true
            },
            {
              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 if (name == "manage") {
      this.activeModel = _.cloneDeep(obj);
      this.modelFlag = !0;
     (this.$globalFun() as any).getMethod('show')
      this.$nextTick(() => {
        (this.$refs.manage as any).csDestinationTable.paginationByFront = true;
        (this.$refs.manage as any).renderDestinationTableData(obj.resSet);
        (this.$refs.manage as any).getSourceTableData();
      });
    } else if (name == "role") {
      this.roleModel = _.cloneDeep(obj);
      var multiValueMap = {
        objType: ["R"],
        dataId: [obj.id],
        dataType: ["resGroup"]
      };
      this.getApiData(
        "post",
        this.$msPrefix.base + "/api/v1/data/list/dataPermission?size=1000",
        multiValueMap,
        res => {
          if (res.data.content.length > 0) {
            console.log("___", res.data.content);
            var arr: Array<any> = [];
            res.data.content.forEach(e => {
              arr.push(e.objId);
            });
            this.roleModel.roleIds = arr;
          }
          console.log("&&&", this.roleModel);
          (this.$refs.role as any).setModel(this.roleModel);
      			this.roleFlag = !0;
          (this.$globalFun() as any).getMethod('show');
        },
        err => {
      			this.roleFlag = !0;
          (this.$globalFun() as any).getMethod('show');
        }
      );
    } 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.$refs.manage as any).resetSearch();
    (this.$refs.manage as any).csSourceTable.postData = {};
     this.modelFlag = !1;
    (this.$globalFun() as any).getMethod('close');
  }
  mounted() {
   this.title = (this.$globalFun() as any).getMethod('title')
  }
}
</script>

