<template>
  <div class="wrapper-container">
    <el-card>
      <el-steps :active="active" align-center style="width: 60%" finish-status="success">
        <el-step title="地域和操作系统"></el-step>
        <el-step title="存储和网络"></el-step>
      </el-steps>
      <el-col :span="24" class="panel-body" v-if="active == 0">
        <AddPageOne :addData="addData" :vendor-id="vendorId" :platform-object="platformObject"></AddPageOne>
      </el-col>
      <el-col :span="24" class="panel-body" v-if="active == 1">
        <AddPageTwo :addData="addData" ref="header" :vendor-id="vendorId" :platform-object="platformObject"></AddPageTwo>
      </el-col>
      <el-col :span="24" class="panel-body" v-if="active == 2">
        <AddPageThree :addData="addData" :vendor-id="vendorId"></AddPageThree>
      </el-col>
      <el-col :span="24" class="m-b-lg">
        <el-col :span="6" :offset="5" v-if="active == 0">
          <el-button type="ghost" style="width: 100%" @click="goBack">取消</el-button>
        </el-col>
        <el-col :span="6" :offset="5" v-if="active != 0">
          <el-button type="primary" style="width: 100%" @click="LastStep()">上一步</el-button>
        </el-col>
        <el-col :span="6" :offset="1" v-if="active == 1">
          <el-button type="primary" style="width: 100%" :loading="addData.loading" @click="ok">确定</el-button>
        </el-col>
        <el-col :span="6" :offset="1" v-if="active == 0">
          <el-button type="primary" style="width: 100%" :disabled="addData.data.operatingSystem == ''" @click="next()">下一步</el-button>
        </el-col>
      </el-col>
    </el-card>
  </div>
</template>

<script>
import AddPageOne from './addPageOne.vue'
import AddPageTwo from './addPageTwo.vue'
import AddPageThree from './addPageThree.vue'
export default {
  props: {
    platformObject: {
      type: Object
    }
  },
  components: {
    AddPageOne,
    AddPageTwo,
    AddPageThree
  },
  data() {
    return {
      active: 0,
      vendorId: parseInt(this.$router.currentRoute.query.vendorId),
      addData: {
        loading: false,
        data: {
          placement: {
            Zone: 'yfm14az1'
          },
          flavorId: '',
          operatingSystemType: '',
          operatingSystem: '',
          virtualPrivateCloud: {
            vpcId: '',
            subnetId: '',
            privateIpAddresses: ''
          },
          loginSettings: {
            Password: '',
            Password_config: ''
          },
          raidType: '',
          internetAccessible: {
            internetMaxBandwidthOut: 0,
            publicIpAssigned: false,
            internetServiceProvider: ''
          },
          instanceName: '',
          instanceCount: 1,
          enhancedService: {
            SecurityService: {
              Enabled: 'false'
            },
            MonitorService: {
              Enabled: 'false'
            }
          }
        },
        selectComboData: {
          cpu: '',
          flavorId: '',
          flavorName: '',
          memory: '',
          systemDisk: ''
        }
      }
    }
  },
  computed: {},
  mounted() {},
  methods: {
    ok() {
      this.$refs.header.getData()
    },
    goBack() {
      this.$router.back(-1)
    },
    next() {
      this.active++
    },
    LastStep() {
      this.active--
    }
  }
}
</script>
<style lang="scss" scoped></style>
