<template>
  <div class="table-form">
    <Form v-if="step==1">
      <!-- <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
            :data="transferData"
            :target-keys="resList"
            :list-style="listStyle"
            :operations="['','']"
            filterable
            @on-change="handleChange"
          ></Transfer>
        </i-col>
      </Row> -->
      <server-selector ref ="resServer" :resSelectList="resList" @handleChange="handleResChange"></server-selector>
      <Row class="buttonDiv" style="margin-top:15px;">
        <Button @click="nextStep" type="primary">下&nbsp;一&nbsp;步</Button>
        <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
      </Row>
    </Form>
    <cmd-run @closeModal="cancel" ref="cmd" v-if="step==2" @back="back"></cmd-run>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import CmdRun from "./command-run.vue";
import ServerSelector from "../../index/cmdb/server-selector.vue";

@Component({
  components: {
    CmdRun,
    ServerSelector
  }
})
export default class CommandForm extends Vue {
  private step: number = 1;
  //存放的是transferData中的key
  private resList: Array<any> = [];

  nextStep() {
    if (this.resList.length == 0) {
      this.$tools.message("warning", "请至少选择一个资源");
    } else {
      this.step = 2;
      this.$nextTick(() => {
        (this.$refs.cmd as any).postCmdData(this.resList, true);
      });
    }
  }

  back() {
    this.step = 1;
  }

  @Emit("closeModal") close() {}
  cancel() {
    this.resList = [];
    this.close();
    this.step = 1;
    
    // this.$refs.resServer.refTransfer.$children[0].query = ''
    
    // console.log(this.$refs.resServer.$refs.refTransfer);
    (this.$refs.resServer as any).$refs.refTransfer.$children[0].query = '';
    (this.$refs.resServer as any).$refs.refTransfer.$children[2].query = '';
    // this.$refs.resServer.$children[0].$children[0].query = '';

    (this.$parent.$parent as any).getData();
  }

  handleResChange(res){
    this.resList=res;
  }
}
</script>
<style scoped>
::-webkit-scrollbar-thumb{
    background-color: #A6A6A6 !important;
}
</style>
