<template>
  <div class="table-form">
    <div v-if="deployMode">
      <h3>部署概要信息</h3>
      <Alert>
        <template slot="desc">
          <Row>
            <Col>
              <span v-if="deployMode">
                <strong>部署方式：</strong>
                {{deployModeList[deployMode]}}
              </span>
              <Divider v-if="deployMode" type="vertical"/>
              <span v-if="deployMachine">
                <strong>厂商&型号&操作系统：</strong>
                【{{deployMachine.vendor}}】【{{deployMachine.model}}】【{{deployMachine.os}}】
              </span>
            </Col>
          </Row>
          <Row :gutter="150" v-if="step==5">
            <i-col span="24" >
              <Divider/>
            </i-col>
            <Col :span="12" v-if="deployMode=='pxe'">
              <div class="panelborder">
                <span class="title">DHCP配置</span>
              <CellGroup>
                <Cell title="DHCP子网或段" :extra="dhcpConfigModel.subIp"/>
                <Cell title="DHCP子网掩码" :extra="dhcpConfigModel.subMask"/>
                <Cell title="分配地址池起" :extra="dhcpConfigModel.poolStart"/>
                <Cell title="分配地址池止" :extra="dhcpConfigModel.poolEnd"/>
                <Cell title="客户机广播地址" :extra="dhcpConfigModel.broadcastIp"/>
                <Cell title="客户机网关地址" :extra="dhcpConfigModel.gateway"/>
                <Cell title="引导文件" :extra="dhcpConfigModel.bootFile"/>
              </CellGroup>
               </div>
            </Col>
            <Col :span="12">
              <div class="panelborder">
                <span class="title">主机信息</span>
                <CellGroup v-if="!partInfo.isBatch">
                  <Cell title="任务名称" :extra="hostInfo.taskName"/>
                  <Cell title="服务器序列号" :extra="hostInfo.hostSeries"/>
                  <Cell title="安装模式" :extra="hostInfo.deployMode"/>
                  <Cell title="管理口IP地址" :extra="hostInfo.manageIp"/>
                  <Cell title="管理账号" :extra="hostInfo.manageUser"/>
                  <Cell title="管理密码" :extra="hostInfo.managePsw"/>
                  <Cell title="业务IP地址" :extra="hostInfo.bussinessIp"/>
                  <Cell title="掩码" :extra="hostInfo.mask"/>
                  <Cell title="网关" :extra="hostInfo.gateway"/>
                  <Cell title="主机名称" :extra="hostInfo.hostName"/>
                  <Cell
                    v-if="partInfo.partType=='default'"
                    title="分区信息"
                    :extra="partInfo.partType=='default'?'默认':'自定义'"
                  />
                </CellGroup>
                <CellGroup v-if="partInfo.isBatch">
                  <Cell title="安装模式" :extra="batchHostInfo[0].deployMode"/>
                  <Cell title="安装数量" :extra="batchHostInfo.length"/>
                  <Cell
                    v-if="partInfo.partType=='default'"
                    title="分区信息"
                    :extra="partInfo.partType=='default'?'默认':'自定义'"
                  />
                  <Cell
                    v-for="p in partInfo.partArrayInfo"
                    :key="p.name"
                    :title="p.name"
                    :extra="p.size"
                  />
                </CellGroup>
              </div>
            </Col>
            <Col
              :span="deployMode=='pxe'&&!partInfo.isBatch?24:12"
              v-if="partInfo.partType!='default'&&!partInfo.isBatch"
            >
              <Divider>分区信息({{partInfo.partType=='default'?'默认':'自定义'}})</Divider>
              <CellGroup>
                <Cell
                  v-for="p in partInfo.partArrayInfo"
                  :key="p.name"
                  :title="p.name"
                  :extra="p.size"
                />
              </CellGroup>
            </Col>
          </Row>
        </template>
      </Alert>
    </div>
    <div>
      <Row :gutter="12">
        <Form v-if="step==1">
          <FormItem label="部署方式：" prop="deployMode">
            <Select v-model="deployMode" placeholder="请选择部署方式" clearable>
              <Option v-for="(value,key) in deployModeList" :value="key" :key="key">{{ value }}</Option>
            </Select>
          </FormItem>
        </Form>
        <select-machine
          ref="step2"
          v-if="step==2"
          :depolyMode="deployMode"
          :depolyMachine="deployMachine"
          @selectedEvent="handleSelectMachineEvent"
          :btnDisableState="btnDisableState"
        ></select-machine>
        <config-dhcp
          ref="step3"
          v-if="step==3"
          :model="dhcpConfigModel"
          :config="deployMachine"
          :btnDisableState="btnDisableState"
        ></config-dhcp>
        <deploy-host
          ref="step4"
          v-if="step==4"
          :model="hostInfo"
          :btnDisableState="btnDisableState"
          :partInfo="partInfo"
          :batchHostInfo="batchHostInfo"
          @on-batch-import="batchImportHostHandler"
        ></deploy-host>
      </Row>
      <Row class="buttonDiv" style="margin-top:15px">
        <Button
          v-if="step>1"
          @click="preStep"
          type="primary"
          :disabled="btnDisableState.pre"
        >上&nbsp;一&nbsp;步</Button>
        <Button
          @click="nextStep"
          v-if="step<5"
          type="primary"
          :disabled="btnDisableState.next"
        >下&nbsp;一&nbsp;步</Button>
        <Button @click="startDeploy" v-if="step==5" type="primary" :disabled="deployFlag">开始部署</Button>
        <Button @click="cancel" :disabled="btnDisableState.close">关&nbsp;&nbsp;闭</Button>
      </Row>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";
import SelectMachine from "@/views/daily-maintenance/bare-machine-deploy/select-machine.vue";
// import DeployHost from "./deploy-host.vue";
import ConfigDhcp from "@/views/customs/hisense/config-dhcp.vue";
import DeployHost from "@/views/customs/hisense/deploy-host.vue";

@Component({
  components: { SelectMachine, ConfigDhcp, DeployHost }
})
export default class SelectMode extends Vue {
  private step: number = 1;
  private deployMode: any = null;
  private deployModeList: any = { pxe: "PXE", 镜像: "镜像" };
  private deployMachine: any = null;
  private deployFlag: boolean = false;
  private dhcpConfigModel: any = {
    subIp: "",
    subMask: "",
    poolStart: "",
    poolEnd: "",
    broadcastIp: "",
    gateway: "",
    bootFile: ""
  };
  private hostInfo: any = {
    hostSeries: "",
    hostName: "",
    manageUser: "",
    managePsw: "",
    manageIp: "",
    mask: "",
    gateway: "",
    bussinessIp: "",
    deployMode: "UEFI"
  };
  private batchHostInfo: Array<any> = [];
  private partInfo: any = {
    isBatch: false,
    partType: "default",
    partArrayInfo: [{ name: "", size: "" }]
  };
  private btnDisableState: any = {
    pre: false,
    next: true,
    close: false
  };
  preStep() {
    if (this.step > 1) {
      this.step--;
      if (this.deployMode != "pxe" && this.step == 3) {
        this.step--;
      }
    }
    this.btnDisableState.next = false;
    let currElem = this.$refs["step" + this.step] as any;
    if (_.has(currElem, "onShow")) {
      currElem.onShow();
    }
  }
  nextStep() {
    let currElem = this.$refs["step" + this.step] as any;
    if (_.has(currElem, "onNext")) {
      currElem.onNext().then(
        () => {
          this.step++;
          if (this.deployMode != "pxe" && this.step == 3) {
            this.step++;
          }
        },
        () => {}
      );
    } else {
      this.step++;
      if (this.deployMode != "pxe" && this.step == 3) {
        this.step++;
      }
    }
  }

  handleSelectMachineEvent(item) {
    this.deployMachine = item;
    this.dhcpConfigModel.bootFile = this.deployMachine.bootFile;
  }

  dhcpChangeHandler(item) {
    this.dhcpConfigModel = item;
  }
  batchImportHostHandler(hosts) {
    this.batchHostInfo = hosts;
  }
  @Watch("deployMode")
  checkChange() {
    //部署模式改变，则之前选择的厂商列表需重新刷新，已选择的作废
    this.deployMachine = null;
    if (this.deployMode != null) {
      this.btnDisableState.next = false;
    }
  }

  startDeploy() {
    var assemble = "";
    if (this.partInfo.partType == "default") {
      assemble = "0";
    } else {
      for (var i = 0; i < this.partInfo.partArrayInfo.length - 1; i++) {
        var name = this.partInfo.partArrayInfo[i].name.replace(/\s*/g, "");
        var size = this.partInfo.partArrayInfo[i].size.replace(/\s*/g, "");
        assemble += name + "#" + size + ";";
      }
      var lastVar = this.partInfo.partArrayInfo[
        this.partInfo.partArrayInfo.length - 1
      ];
      var lastName = lastVar.name.replace(/\s*/g, "");
      var lastSize = lastVar.size.replace(/\s*/g, "");
      assemble += lastName + "#" + lastSize;
    }
    let param = {
      config: this.deployMachine,
      part: assemble,
      entities: [this.hostInfo]
    };
    let api = this.$msPrefix.automation + "/api/v1/res/bareMachineTask";
    if (this.partInfo.isBatch) {
      api = api + "/batchAddBareMachineTask";
      param.entities = this.batchHostInfo;
    } else {
      api = api + "/addBareMachineTask";
    }
    this.deployFlag = true;
    this.getApiData(
      "post",
      api,
      param,
      res => {
        this.cancel();
        this.$tools.message("success", "部署任务下发成功！");
      },
      err => {
        this.deployFlag = false;
        this.$tools.message("error", "部署任务下发失败，请重试或联系管理员！");
      }
    );
  }

  @Emit("closeModal") close() {}
  cancel() {
    this.close();
    this.initData();
    (this.$parent.$parent as any).getData();
  }
  initData() {
    this.step = 1;
    this.deployFlag = false;
    this.deployMachine = null;
    this.deployMode = null;
    this.batchHostInfo = [];
    this.dhcpConfigModel = {
      subIp: "",
      subMask: "",
      poolStart: "",
      poolEnd: "",
      broadcastIp: "",
      gateway: "",
      bootFile: ""
    };
    this.hostInfo = {
      hostSeries: "",
      hostName: "",
      manageUser: "",
      managePsw: "",
      manageIp: "",
      mask: "",
      gateway: "",
      bussinessIp: "",
      deployMode: "UEFI"
    };
    this.partInfo = {
      isBatch: false,
      partType: "default",
      partArrayInfo: [{ name: "", size: "" }]
    };
  }
}
</script>
<style scoped>
::-webkit-scrollbar-thumb {
  background-color: #a6a6a6 !important;
}

</style>
