 <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" class="cloud_form" @tab-click="tabClick">
        <el-tab-pane label="申请新的工作区域" name="0">
          <el-form ref="formNew" :model="formNew" label-width="120px">
            <div class="form_title">基本信息</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 class="form_title">工作区域申请规格</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" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>块，每块
              <el-input-number
                v-model="formNew.perDataDisk"
                 controls-position="right"
                @change="handleChange"
                :min="1"
                :max="10"
              ></el-input-number>GB
            </el-form-item>
            <div class="form_title">单个容器组规格</div>
            <div>CPU</div>
            <el-form-item label="最高">
              <el-input v-model="formNew.perCPUs"></el-input>核
            </el-form-item>
            <el-form-item label="默认">
              <el-input v-model="formNew.perCPU"></el-input>核
            </el-form-item>
            <div>内存</div>
            <el-form-item label="最高">
              <el-input v-model="formNew.perRAMs"></el-input>GB
            </el-form-item>
            <el-form-item label="默认">
              <el-input v-model="formNew.perRAM"></el-input>GB
            </el-form-item>
            <div class="form_title">其他信息</div>
            <el-form-item label="申请时长">
              <el-input v-model="formNew.appDuration"></el-input>
              <el-select v-model="formNew.durType" placeholder="请选择">
                <el-option
                  v-for="item in durationOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申请文件">
              <upload-file
                :multiple="false"
                :max="1"
                type="zip"
                :readOnly="false"
                :drag="true"
                @getNewList="getNewList"
              ></upload-file>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="升级现有工作区域" name="1">
          选择要进行升级的工作区域
          <el-select v-model="workSpace" @change="getForm" placeholder="请选择">
            <el-option
              v-for="item in workSpaceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <div v-if="formShow">
            <el-form ref="formNew" :model="formNew" label-width="120px">
              <div class="form_title">基本信息</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 class="form_title">工作区域申请规格</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"
                   controls-position="right"
                  :min="1"
                  :max="10"
                ></el-input-number>块，每块
                <el-input-number
                  v-model="formNew.perDataDisk"
                  @change="handleChange"
                   controls-position="right"
                  :min="1"
                  :max="10"
                ></el-input-number>GB
              </el-form-item>
              <div class="form_title">单个容器组规格</div>
              <div>CPU</div>
              <el-form-item label="最高">
                <el-input v-model="formNew.perCPUs"></el-input>核
              </el-form-item>
              <el-form-item label="默认">
                <el-input v-model="formNew.perCPU"></el-input>核
              </el-form-item>
              <div>内存</div>
              <el-form-item label="最高">
                <el-input v-model="formNew.perRAMs"></el-input>GB
              </el-form-item>
              <el-form-item label="默认">
                <el-input v-model="formNew.perRAM"></el-input>GB
              </el-form-item>
              <div class="form_title">其他信息</div>
              <el-form-item label="申请时长">
                <el-input v-model="formNew.appDuration"></el-input>
                <el-select v-model="formNew.durType" placeholder="请选择">
                  <el-option
                    v-for="item in durationOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="申请文件">
                <upload-file
                  :multiple="false"
                  :max="1"
                  type="zip"
                  :readOnly="false"
                  :drag="true"
                  @getNewList="getNewList"
                ></upload-file>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </block-radius>
  </div>
</template>

<script>
import BlockRadius from "@/components/block-radius";
import uploadFile from "@/components/upload_file";
export default {
  components: {
    BlockRadius,
    uploadFile
  },
  props: {
    name: { type: String, default: "" }
  },
  data: () => ({
    form: {
      department: "",
      name: "",
      tel: ""
    },
    activeName: "0",
    formNew: {
      workAreaName: "",
      cnName: "",
      description: "",
      CPUs: "",
      RAMs: "",
      containerGroup: "",
      dataDisk: "",
      perDataDisk: "",
      perCPUs: "",
      perCPU: "",
      perRAMs: "",
      perRAM: "",
      appDuration: "",
      durType: ""
    },
    durationOptions: [
      { value: "月", label: "月" },
      { value: "年", label: "年" }
    ],
    workSpace: "",
    workSpaceOptions: [
      { value: "aaaaaaaaaa工作空间", label: "aaaaaaaaaa工作空间" },
      { value: "wwwwwwwwww工作空间", label: "wwwwwwwwww工作空间" }
    ],
    formShow: false
  }),
  methods: {
    tabClick() {},
    getNewList() {},
    handleChange() {},
    getForm(val) {
      if (val != "") {
        this.formShow = true;
      } else {
        this.formShow = false;
      }
    }
  }
};
</script>

<style scoped>
.cloud_form {
}
.form_title {
  font-size: 18px;
  margin: 10px 0;
  padding: 0 0 0 20px;
  position: relative;
}
.form_title::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 16px;
  background-color: blue;
  left: 0;
  top: 4px;
}
</style>
<style>
.cloud_form .el-input {
  width: 400px;
}
.cloud_form .el-input-number .el-input {
  width: 180px;
}
.cloud_form .el-textarea {
  width: 400px;
}
</style>