 <template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
      <el-breadcrumb-item :to="{ path: '/shop' }">服务超市</el-breadcrumb-item>
      <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <block-radius>
      <el-form ref="form" :inline="true" :model="form" label-width="100px">
        <el-form-item label="申请部门">
          <el-input v-model="form.department"></el-input>
        </el-form-item>
        <el-form-item label="部门联系人">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
      </el-form>
    </block-radius>
    <block-radius>
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="申请新的工作区域" name="0">
          <el-form ref="formNew" :model="formNew" label-width="100px">
            <div>基本信息</div>
            <el-form-item label="工作区域名称">
              <el-input v-model="formNew.workAreaName"></el-input>
            </el-form-item>
            <el-form-item label="中文名称">
              <el-input v-model="formNew.cnName"></el-input>
            </el-form-item>
            <el-form-item label="描述信息">
              <el-input type="textarea" v-model="formNew.description"></el-input>
            </el-form-item>
            <div>工作区域申请规格</div>
            <el-form-item label="CPU">
              <el-input v-model="formNew.CPUs"></el-input>
            </el-form-item>
            <el-form-item label="内存">
              <el-input v-model="formNew.RAMs"></el-input>
            </el-form-item>
            <el-form-item label="容器组">
              <el-input type="textarea" v-model="formNew.containerGroup"></el-input>
            </el-form-item>
            <el-form-item label="数据盘（可选）">
              <el-input-number v-model="formNew.dataDisk" @change="handleChange" :min="1" :max="10"></el-input-number>块，每块
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="升级现有工作区域" name="1">升级现有工作区域</el-tab-pane>
      </el-tabs>
    </block-radius>
  </div>
</template>

<script>
import BlockRadius from "@/components/block-radius";
export default {
  components: {
    BlockRadius
  },
  props: {
    name: { type: String, default: "" }
  },
  data: () => ({
    form: {
      department: "",
      name: "",
      tel: ""
    },
    activeName: "0",
    formNew: {
      workAreaName: "",
      cnName: "",
      description: "",
      CPUs: "",
      RAMs: "",
      containerGroup: "",
      dataDisk: ""
    }
  }),
  methods: {
    tabClick() {}
  }
};
</script>

<style scoped>
</style>
