<template>
  <div class="dhcp-panel">
    <Spin size="large" fix v-if="spinShow">正在重启DHCP服务，大约需要1分钟左右，请稍等一下......</Spin>
    <Tabs v-model="partInfo.isBatch">
      <TabPane label="单机部署" :name="false">
        <Col :span="16">
          <FormItem label="任务名称：" prop="taskName" v-validate:taskName.required="rules">
            <Input v-model="model.taskName" maxlength="25"/>
          </FormItem>
          <FormItem label="服务器序列号：" prop="hostSeries" v-validate:hostSeries.required="rules">
            <Input v-model="model.hostSeries" maxlength="28"/>
          </FormItem>
          <FormItem label="安装模式：" prop="deployMode" v-validate:deployMode.required.@change="rules">
            <Select v-model="model.deployMode">
              <Option v-for="item in deployModeList" :value="item" :key="item">{{ item }}</Option>
            </Select>
          </FormItem>
          <FormItem label="管理口IP地址：" prop="manageIp" v-validate:manageIp.required.ip="rules">
            <Input v-model="model.manageIp" maxlength="32"/>
          </FormItem>
          <FormItem label="管理账号：" prop="manageUser" v-validate:manageUser.required="rules">
            <Input v-model="model.manageUser" maxlength="32"/>
          </FormItem>
          <FormItem
            label="管理密码："
            type="password"
            prop="managePsw"
            v-validate:managePsw.required="rules"
          >
            <Input v-model="model.managePsw" maxlength="32"/>
          </FormItem>
          <FormItem label="业务IP地址：" prop="bussinessIp" v-validate:bussinessIp.required.ip="rules">
            <Input v-model="model.bussinessIp" maxlength="32"/>
          </FormItem>
          <FormItem label="掩码：" prop="mask" v-validate:mask.required.ip="rules">
            <Input v-model="model.mask" maxlength="32"/>
          </FormItem>
          <FormItem label="网关：" prop="gateway" v-validate:gateway.required.ip="rules">
            <Input v-model="model.gateway" maxlength="32"/>
          </FormItem>
          <FormItem label="主机名称：" prop="hostName" v-validate:hostName.required="rules">
            <Input v-model="model.hostName" maxlength="25"/>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem label="磁盘分区" prop="hostName" v-validate:hostName.required="rules">
            <RadioGroup v-model="partInfo.partType">
              <Radio label="default">默认</Radio>
              <Radio label="diy">自定义</Radio>
            </RadioGroup>
          </FormItem>
          <div v-if="partInfo.partType=='diy'">
            <div class="part-input" v-for="(part,index) in partInfo.partArrayInfo" :key="index">
              <!-- {{index+1}}: -->
              <Input v-model="part.name" placeholder="分区名:/boot"/>-
              <Input v-model="part.size" placeholder="分区大小:200M"/>
              <Icon type="ios-add-circle-outline" @click="addPart" size="20"/>
              <Icon
                type="ios-close-circle-outline"
                v-if="partInfo.partArrayInfo.length>1"
                @click="removePart(index)"
                size="20"
              />
            </div>
          </div>
        </Col>
      </TabPane>
      <TabPane label="批量部署" :name="true">
        <div style="display:flex">
          <Upload
            :action="uploadUrl"
            :headers="uploadHeader"
            :on-success="importSuccess"
            :on-error="importError"
            accept=".xlsx"
            :show-upload-list="false"
          >
            <Button type="primary" icon="ios-cloud-upload-outline">导入批量部署数据文件</Button>
          </Upload>
          <Button
            style="margin-left:10px"
            type="primary"
            icon="ios-cloud-download-outline"
            @click="downloadTemplate"
          >下载模板</Button>
        </div>
        <div>
          <cs-dynamic-table ref="deployHostTable" :prop="csTable" :parent="this"></cs-dynamic-table>
        </div>
        <div>
          <div>
            <label>磁盘分区：</label>
            <RadioGroup v-model="partInfo.partType">
              <Radio label="default">默认</Radio>
              <Radio label="diy">自定义</Radio>
            </RadioGroup>
          </div>
          <div v-if="partInfo.partType=='diy'">
            <div class="part-input" v-for="(part,index) in partInfo.partArrayInfo" :key="index">
              <!-- {{index+1}}: -->
              <Input v-model="part.name" placeholder="分区名:/boot" />-
              <Input v-model="part.size" placeholder="分区大小:200M" />
              <Icon type="ios-add-circle-outline" @click="addPart" size="20" />
              <Icon
                type="ios-close-circle-outline"
                v-if="partInfo.partArrayInfo.length>1"
                @click="removePart(index)"
                size="20"
              />
            </div>
          </div>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit, Watch } from "vue-property-decorator";
@Component
export default class DeployHost extends Vue {
  @Prop() private model!: any;
  @Prop() private btnDisableState!: any;
  @Prop() private partInfo!: any;
  @Prop() private batchHostInfo!: any;
  private uploadHeader = {
    "X-ACCESS-TOKEN": this.$cookie.get("X-ACCESS-TOKEN")
  };
  private deployModeList: Array<any> = ["UEFI"];
  private uploadUrl: any =
    this.$apiPrifixUri +
    this.$msPrefix.automation +
    "/api/v1/res/bareMachineTask/importExcel";
  rules: any = {};
  spinShow: boolean = false;

  private csTable: any = {
    formWidth: 35,
    parentVm: this,
    dataSrc: this.$msPrefix.automation + "/api/v1/data/list/job",
    delSrc: this.$msPrefix.automation + "/api/v1/data/delete/job/",
    batchDelUri:
      this.$msPrefix.automation +
      this.$msPrefix.automation +
      "/api/v1/data/batch/job",
    paginationByFront: true,
    dataPropFront: "data",
    dataProp: "data.content",
    postMethod: true,
    dataFun: this.mockTableFun,
    pageableProp: {
      pageSize: "data.size",
      total: "data.totalElements",
      currentPage: "data.number"
    },
    showIndex: true,
    emptyModel: {},
    actions: {
      //表头操作按钮
      replace: true,
      def: []
    },
    columns: [
      {
        key: "taskName",
        title: "任务名称",
        align: "left",
        tooltip: true
      },
      {
        key: "hostSeries",
        title: "序列号",
        align: "left",
        tooltip: true
      },
      {
        key: "deployMode",
        title: "安装模式",
        align: "left",
        tooltip: true
      },
      {
        key: "manageIp",
        title: "管理IP",
        align: "left",
        tooltip: true
      },
      {
        key: "manageUser",
        title: "管理用户名",
        align: "left",
        tooltip: true
      },
      {
        key: "managePsw",
        title: "管理密码",
        align: "left",
        tooltip: true
      },
      {
        key: "bussinessIp",
        title: "业务IP",
        align: "left",
        tooltip: true
      },
      {
        key: "mask",
        title: "掩码",
        align: "left",
        tooltip: true
      },
      {
        key: "gateway",
        title: "网关",
        align: "left",
        tooltip: true
      }
    ]
  };

  mockTableFun() {
    return { data: this.batchHostInfo };
  }

  downloadTemplate() {
    this.download(
      this.$msPrefix.automation + "/api/v1/res/bareMachineTask/download",
      {},
      "批量部署模板.xlsx",
      "get"
    );
  }

  created() {
    //this.btnDisableState.next = true;
  }

  onShow() {
    let table = this.$refs.deployHostTable as any;
    this.csTable.paginationByFront = true;
    this.csTable.dataFun = this.mockTableFun;
    table.afterGetData({ data: this.batchHostInfo });
  }
  onNext() {
    if (this.partInfo.isBatch) {
      return new Promise((resolve, rejecte) => {
        let table = this.$refs.deployHostTable as any;
        if (table.tableData.length <= 0) {
          this.$tools.message("warning", "请先导入部署数据!");
          rejecte(false);
        }
        resolve(true);
      });
    } else {
      let form = this.$refs.hostInfoForm as any;
      return new Promise((resolve, rejecte) => {
        form.validate(v => {
          if (v) {
            resolve(true);
          } else {
            rejecte(false);
          }
        });
      });
    }
  }

  destroyed() {
    this.btnDisableState.next = false;
  }

  addPart() {
    this.partInfo.partArrayInfo.push({ name: "", size: "" });
  }
  removePart(index) {
    if (this.partInfo.partArrayInfo.length == 1) {
      return;
    }
    let tempSrc = _.cloneDeep(this.partInfo.partArrayInfo);
    _.remove(tempSrc, function(n, i) {
      return i === index;
    });
    this.partInfo.partArrayInfo = tempSrc;
  }

  setWaitState(state, spin = true) {
    if (spin) {
      this.spinShow = state;
    }
    this.btnDisableState.pre = state;
    this.btnDisableState.next = state;
  }

  importSuccess(res, file, fileList) {
    if (res.rtnCode == 0) {
      let table = this.$refs.deployHostTable as any;
      this.csTable.paginationByFront = true;
      this.csTable.dataFun = this.mockTableFun;
      table.afterGetData({ data: res.data });
      this.$emit("on-batch-import", res.data);
    } else {
      this.$tools.message("error", "上传失败：" + res.msg);
    }
  }

  importError(error, file, fileList) {
    let msg = "上传失败，服务器出错！";
    if (error.message) {
      msg = "上传或解析失败，" + error.message + "!";
    }
    this.$tools.message("error", msg);
  }

  mounted() {
    this.$nextTick(() => {
      let table = this.$refs.deployHostTable as any;
      this.csTable.paginationByFront = true;
      this.csTable.dataFun = this.mockTableFun;
      table.afterGetData({ data: this.batchHostInfo });
    });
  }
}
</script>
<style scoped>
.part-input {
  display: flex;
  padding: 0 20px 5px 20px;
  align-items: center;
}

</style>
