<template>
  <div class="machine-panel">
    <div>
      <Dropdown @on-click="filterVendor">
        <a href="javascript:void(0)">
          选择厂商
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem name="all">所有厂商</DropdownItem>
          <DropdownItem v-for="(value,key) in fullMachineList" :key="key+'_dm'" :name="key">{{key}}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <div>
      <List border size="large" style="max-height: 60vh;overflow: auto;">
        <ListItem v-for="(value,key) in machineList" :key="key">
          <div style="min-width:100px" :id="key">{{key}}</div>
          <div class="mode-panel">
            <div
              v-for="(value,key) in groupByProp(value,'model')"
              :key="key"
              style="margin-right:5px"
            >
              <Alert :type="alertType">
                {{key}}
                <template slot="desc">
                  <a v-for="item in value" :key="item.id" @click="selectedMachine(item)">
                    {{item.os}}
                    <hr />
                  </a>
                </template>
              </Alert>
            </div>
          </div>
        </ListItem>
      </List>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";

@Component
export default class SelectMachine extends Vue {
  @Prop() private depolyMode!: any;
   @Prop() private depolyMachine!: any;
  @Prop() private btnDisableState!: any;
  private machineList: any = {};
  private fullMachineList: any = {};
  alertType: any=""
  getData() {
    let param = { type: [this.depolyMode] };
    this.getApiData(
      "post",
      this.$msPrefix.automation +
        "/api/v1/data/list/bareMachineConfigEntity?size=2000",
      param,
      res => {
        let lst = res.data.content;
        this.machineList = _.groupBy(lst, item => {
          return item.vendor;
        });
        this.fullMachineList = this.machineList;
      }
    );
  }

  groupByProp(arr, key) {
    return _.groupBy(arr, item => {
      return item[key];
    });
  }

  selectedMachine(item) {
    this.btnDisableState.next=false;
    this.$emit("selectedEvent", item);
  }

  filterVendor(vendor) {
    this.machineList = {};
    if (vendor == "all") {
      this.machineList = this.fullMachineList;
    } else {
      this.machineList[vendor] = this.fullMachineList[vendor];
    }
  }

  created() {
    if(this.depolyMachine == null){
      this.btnDisableState.next=true;
    }
    this.getData();
    this.alertType=(this.$globalFun() as any).getMethod('alertType','warning')
  }

  @Watch("depolyMode")
  depolyModeChangeHandler(val) {
    if (val != "") {
      this.getData();
    }
  }

  @Emit("closeModal") close() {}
}
</script>
<style scoped>
.machine-panel {
  padding: 10px;
}
.ivu-list-items {
  max-height: 60vh;
  overflow: auto;
}
.ivu-list-item {
  align-items: flex-start;
}
.mode-panel {
  display: grid;
  max-width: 750px;
  grid-template-columns: repeat(auto-fill, 250px);
}

</style>
