<template>
  <div class="table-form">
    <Row :gutter="10">
      <i-col span="4" style="overflow-y:scroll;height:40vh;">
        <Menu active-key="1-3" width="auto" @on-select="chooseGroup">
          <Menu-item v-for="group in resourceGroup" :name="group.id" :key="group.id">{{group.name}}</Menu-item>
        </Menu>
      </i-col>
      <i-col span="20">
        <Transfer
          ref = "refTransfer"
          :data="transferData"
          :target-keys="resList"
          :list-style="listStyle"
          :titles="transferTitle"
          :operations="['','']"
          filterable
          @on-change="handleChange"
        ></Transfer>
      </i-col>
    </Row>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";
@Component
export default class ServerSelector extends Vue {
  @Prop() resSelectList!: any;
  @Prop({required:false,default:false}) os!: any;
  @Prop({required:false,}) filterParam!: any;
  private resourceGroup: Array<any> = [];
  private transferData: Array<any> = [];
  private transferTitle: Array<any> = [];
  //存放的是transferData中的key
  private resList: Array<any> = this.resSelectList;
  //存放的是transferData中选中的整体对象
  private chosenList: Array<any> = [];
  private listStyle: any = { width: "300px", height: "300px" };

   init(){
    this.getApiData(
          "post",
          // this.$msPrefix.automation + "/api/v1/data/all/resGroup",
          this.$msPrefix.automation +
            "/api/v1/data/list/resGroup?filter=true&size=100&sort=id,ASC",
          {},
          res => {
            console.info(this.resSelectList);
            let data = res.data.content;
            data.forEach(element => {
              if (element.resSet != null && element.resSet.length > 0) {
                element.resSet.forEach(item => {
                  item.key = {
                    id: item.id,
                    host: item.host,
                    ip: item.ip,
                    osType: item.osType,
                    syncId: item.syncId
                  };
                  item.label = "【"+item.osName.substring(0,1)+"】"+item.host + "(" + item.ip + ")";
                  item.description = item.host;
                  item.disabled = item.status != "OK";
                });
                element.resSet=_.sortBy(element.resSet,function(o) { return o.host; })
                if(this.os&&"Windows"==this.os){
                  element.resSet=_.filter(element.resSet,function(o) { return o.osType.startsWith("Window"); })
                }
                if(this.os&&"Unix"==this.os){
                  element.resSet=_.filter(element.resSet,function(o) { return !o.osType.startsWith("Window"); })
                }
                if(this.filterParam){
                  element.resSet=_.filter(element.resSet,this.filterParam)
                }
              }
            });
            this.resourceGroup = data;
            if (this.resourceGroup.length > 0) {
              this.chooseGroup(this.resourceGroup[0].id, "");
            }
            this.setSelectedRes();
          },
          err => {}
        );
    }

  created() {
    this.init();
  }

  chooseGroup(selection, row) {
    this.transferData = [];
    var selected = { resSet: [], name: "" };
    var resSet: Array<any> = [];
    var selectGroupName = "";
    if (this.resourceGroup.find(group => group.id == selection)) {
      selected = this.resourceGroup.find(group => group.id == selection);
      resSet = selected.resSet;
      selectGroupName = selected.name;
    }
    this.transferTitle = [selectGroupName, "选中服务器列表"];
    this.transferData = _.cloneDeep(resSet);

    // debugger;
    for (let i = 0; i < this.chosenList.length; i++) {
      let flag = false;
      let index2 = -1;
      this.transferData.forEach((item, index) => {
        if (item.id == this.chosenList[i].id) {
          flag = true;
          index2 = index;
        }
      });
      if (!flag) {
        this.transferData.push(this.chosenList[i]);
      } else {
        //保证transferData中对象的key对象和resData中的对象指向同一个内存地址
        this.transferData[index2].key = this.chosenList[i].key;
      }
    }
  }

  handleChange(targetKeys) {
    console.log("s:", targetKeys);
    this.resList = targetKeys;
    //获取transferData中选中的整体对象
    this.setSelectedRes();
    this.$emit("handleChange", this.resList);
  }

  setSelectedRes() {
    let resListIds = this.resList.map(item => {
      if (item) {
        return item.id;
      }
    });
    this.chosenList = this.transferData.filter(item => {
      return resListIds.includes(item.id);
    });
    this.resList = [];
    this.transferData.forEach(item => {
      if (resListIds.includes(item.id)) {
        this.resList.push(item.key);
      }
    });
    // debugger;
  }

  @Watch("resSelectList")
  resSelectListChange(val) {
    this.resList = val;
    this.setSelectedRes();
  }

  @Watch("os")
  onlyWinChange(val) {
    this.init();
  }
   @Watch("filterParam")
  filterParamChange(val) {
    this.init();
  }
}
</script>
<style scoped>
::-webkit-scrollbar-thumb {
  background-color: #a6a6a6 !important;
}
.table-form /deep/ .ivu-transfer-list {
  /* width: 45% !important; */
  height: 375px !important;
  margin: 0 1%;
}
</style>
