 <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" class="form_block">
        <el-row>
          <el-col :span="11">
            <el-form-item class="form_item">
              <div class="form_item_title">申请部门：</div>
              <el-input v-model="form.department_name" :disabled="true" placeholder="请输入申请部门"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item class="form_item">
              <div class="form_item_title">部门联系人：</div>
              <el-input v-model="form.link_man" placeholder="请输入联系人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item class="form_item">
              <div class="form_item_title">联系电话：</div>
              <el-input v-model="form.phone" placeholder="请输入联系人电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </block-radius>
    <block-radius>
      <el-tabs v-model="activeName" class="cloud_form" @tab-click="tabClick">
        <el-tab-pane label="申请新的工作区域" name="0">
          <el-row>
            <el-col :span="12">
              <el-form ref="formNew" :model="formNew" :rules="ruleNew">
                <el-row>
                  <el-col :span="24">
                    <div class="form_title">基本信息</div>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item prop="namespace" class="form_item">
                      <div class="form_item_title">工作区域名称：</div>
                      <el-input v-model="formNew.namespace" placeholder="请输入工作区域英文名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item prop="workplace" class="form_item">
                      <div class="form_item_title">中文名称：</div>
                      <el-input v-model="formNew.workplace" placeholder="请输入工作区域中文名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item prop="workplacedesc" class="form_item">
                      <div class="form_item_title">描述信息：</div>
                      <el-input
                        type="textarea"
                        v-model="formNew.workplacedesc"
                        placeholder="请输入工作区域描述信息"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <div class="form_title">工作区域申请规格</div>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item prop="cpu" class="form_item input_has_right">
                      <div class="form_item_title">CPU：</div>
                      <el-select v-model="formNew.cpu" placeholder="请选择CPU使用量">
                        <el-option
                          v-for="item in optionsCPU"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                      <div class="input_right input_right_top">核</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item prop="memory" class="form_item input_has_right">
                      <div class="form_item_title">内存：</div>
                      <el-select v-model="formNew.memory" placeholder="请选择内存使用量">
                        <el-option
                          v-for="item in optionsRAM"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                      <div class="input_right input_right_top">GB</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item prop="containerGroup" class="form_item input_has_right">
                      <div class="form_item_title">容器组：</div>
                      <el-input-number
                        v-model="formNew.containerGroup"
                        controls-position="right"
                        :min="0"
                        :max="24"
                        placeholder="取值范围[0，24]"
                      ></el-input-number>
                      <div class="input_right">个</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item class="form_item">
                      <div class="form_item_title">数据盘（可选）：</div>
                      <el-select v-model="formNew.store_type" placeholder="请选择数据盘类型">
                        <el-option
                          v-for="item in options_store_type"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item class="form_item input_has_right">
                      <el-input-number
                        v-model="formNew.dataDisk"
                        controls-position="right"
                        :min="0"
                        placeholder="请选择增加数据盘的数量"
                      ></el-input-number>
                      <div class="input_right">块</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item class="form_item input_has_right">
                      <el-input-number
                        v-model="formNew.perDataDisk"
                        controls-position="right"
                        :min="0"
                        placeholder="请选择每块数据盘的容量"
                      ></el-input-number>
                      <div class="input_right">GB</div>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <div class="form_title">单个容器组规格</div>
                  </el-col>
                  <el-col :span="24">
                    <div class="form_item_title">CPU：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item prop="perCPUs" class="form_item input_has_left_right">
                      <div class="input_left">最高</div>
                      <el-input-number
                        v-model="formNew.perCPUs"
                        controls-position="right"
                        :min="0"
                        :max="10"
                        placeholder="请选择CPU最高使用量"
                      ></el-input-number>
                      <div class="input_right">核</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item prop="perCPU" class="form_item input_has_left_right">
                      <div class="input_left">默认</div>
                      <el-input-number
                        v-model="formNew.perCPU"
                        controls-position="right"
                        :min="0"
                        :max="10"
                        placeholder="请选择CPU默认使用量"
                      ></el-input-number>
                      <div class="input_right">核</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <div class="form_item_title">内存：</div>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item prop="perRAMs" class="form_item input_has_left_right">
                      <div class="input_left">最高</div>
                      <el-input-number
                        v-model="formNew.perRAMs"
                        controls-position="right"
                        :min="0"
                        :max="10"
                        placeholder="请选择内存最高使用量"
                      ></el-input-number>
                      <div class="input_right">核</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item prop="perRAM" class="form_item input_has_left_right">
                      <div class="input_left">默认</div>
                      <el-input-number
                        v-model="formNew.perRAM"
                        controls-position="right"
                        :min="0"
                        :max="10"
                        placeholder="请选择内存默认使用量"
                      ></el-input-number>
                      <div class="input_right">核</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <div class="form_title">其他信息</div>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item prop="appDuration" class="form_item input_has_right_select">
                      <div class="form_item_title">申请时长：</div>
                      <el-input-number
                        v-model="formNew.appDuration"
                        controls-position="right"
                        :min="0"
                      ></el-input-number>
                      <el-select
                        v-model="formNew.durType"
                        class="input_right_select"
                        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-col>
                  <el-col :span="22">
                    <el-form-item class="form_item">
                      <div class="form_item_title">申请文件：</div>
                      <info-list :list_arr="docTemplate" class="doc_template"></info-list>
                      <upload-file
                        :multiple="false"
                        :max="1"
                        type="zip"
                        :readOnly="false"
                        :drag="true"
                        @getNewList="getNewList"
                      ></upload-file>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="调整现有工作区域" name="1">
          <el-row>
            <el-col :span="11">
              <div class="select_title">选择要进行调整的工作区域：</div>
              <div class="form_item">
                <el-select v-model="workSpace" @change="getForm" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in workSpaceOptions"
                    :key="index"
                    :label="item.namespace"
                    :value="index"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <div v-show="formShow">
            <el-row>
              <el-col :span="12">
                <el-form ref="formOld" :model="formOld" :rules="ruleOld">
                  <el-row>
                    <el-col :span="24">
                      <div class="form_title">工作区域规格调整</div>
                    </el-col>
                    <el-col :span="24">
                      <div class="now_spec">当前规格：</div>
                      <div class="now_spec_cards">
                        <div
                          class="now_spec_card"
                          v-for="(item, index) in specArr"
                          :key="index + 'spec'"
                        >
                          <img
                            class="now_spec_card_img"
                            :src="require('@/assets/imgs/' + item.src + '.png')"
                          />
                          <span class="now_spec_card_title">{{ item.title }}</span>
                          <span
                            class="now_spec_card_val"
                          >{{ item.val + " " + (item.title == "CPU" ? "核" : item.title == "内存" ? "GB" : "个") }}</span>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="22">
                      <el-form-item prop="cpu" class="form_item input_has_right">
                        <div class="form_item_title">申请CPU调整为：</div>
                        <el-select v-model="formOld.cpu" placeholder="请选择CPU使用量">
                          <el-option
                            v-for="item in optionsCPU"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                        <div class="input_right input_right_top">核</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="22">
                      <el-form-item prop="memory" class="form_item input_has_right">
                        <div class="form_item_title">申请内存调整为：</div>
                        <el-select v-model="formOld.memory" placeholder="请选择内存使用量">
                          <el-option
                            v-for="item in optionsRAM"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                        <div class="input_right input_right_top">GB</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="22">
                      <el-form-item prop="containerGroup" class="form_item input_has_right">
                        <div class="form_item_title">申请容器组调整为：</div>
                        <el-input-number
                          v-model="formOld.containerGroup"
                          controls-position="right"
                          :min="0"
                          :max="24"
                          placeholder="取值范围[0，24]"
                        ></el-input-number>
                        <div class="input_right">个</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="22" v-if="dataDiskList.length != 0">
                      <el-form-item class="form_item input_has_right">
                        <div class="form_item_title">调整数据盘：</div>
                        <table-um
                          ref="apply_service_state_table"
                          :headers="dataDiskHeaders"
                          :stripe="true"
                          :datas="dataDiskList"
                          @primary-del="delItem"
                          height="260"
                        ></table-um>
                      </el-form-item>
                    </el-col>
                    <el-col :span="22">
                      <el-form-item class="form_item">
                        <div class="form_item_title">增加数据盘：</div>
                        <el-select v-model="formOld.store_type" placeholder="请选择数据盘类型">
                          <el-option
                            v-for="item in options_store_type"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item class="form_item input_has_right">
                        <el-input-number
                          v-model="formOld.dataDisk"
                          controls-position="right"
                          :min="0"
                          placeholder="请选择增加数据盘的数量"
                        ></el-input-number>
                        <div class="input_right">块</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item class="form_item input_has_right">
                        <el-input-number
                          v-model="formOld.perDataDisk"
                          controls-position="right"
                          :min="0"
                          placeholder="请选择每块数据盘的容量"
                        ></el-input-number>
                        <div class="input_right">GB</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <div class="form_title">单个容器组规格设定</div>
                    </el-col>
                    <el-col :span="24">
                      <div class="now_spec">当前规格：</div>
                      <div class="now_spec_cards">
                        <div
                          class="now_rqz_card"
                          v-for="(item, index) in rqzArr"
                          :key="index + 'rqz'"
                        >
                          <img
                            class="now_rqz_card_img"
                            :src="require('@/assets/imgs/' + item.src + '.png')"
                          />
                          <span class="now_rqz_card_title">{{ item.title }}</span>
                          <div class="now_rqz_card_val_div">
                            <span
                              class="now_rqz_card_val"
                            >最高&nbsp;{{ item.max }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
                            <br />
                            <span
                              class="now_rqz_card_val"
                            >默认&nbsp;{{ item.default }}&nbsp;{{ item.title == "CPU" ? "核" : "GB" }}</span>
                          </div>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="form_item_title">CPU：</div>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item prop="perCPUs" class="form_item input_has_left_right">
                        <div class="input_left">最高</div>
                        <el-input-number
                          v-model="formOld.perCPUs"
                          controls-position="right"
                          :min="0"
                          :max="10"
                          placeholder="请设置CPU最高使用量"
                        ></el-input-number>
                        <div class="input_right">核</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item prop="perCPU" class="form_item input_has_left_right">
                        <div class="input_left">默认</div>
                        <el-input-number
                          v-model="formOld.perCPU"
                          controls-position="right"
                          :min="0"
                          :max="10"
                          placeholder="请设置CPU默认使用量"
                        ></el-input-number>
                        <div class="input_right">核</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <div class="form_item_title">内存：</div>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item prop="perRAMs" class="form_item input_has_left_right">
                        <div class="input_left">最高</div>
                        <el-input-number
                          v-model="formOld.perRAMs"
                          controls-position="right"
                          :min="0"
                          :max="10"
                          placeholder="请设置内存最高使用量"
                        ></el-input-number>
                        <div class="input_right">核</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="11">
                      <el-form-item prop="perRAM" class="form_item input_has_left_right">
                        <div class="input_left">默认</div>
                        <el-input-number
                          v-model="formOld.perRAM"
                          controls-position="right"
                          :min="0"
                          :max="10"
                          placeholder="请设置内存默认使用量"
                        ></el-input-number>
                        <div class="input_right">核</div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <div class="form_title">其他信息</div>
                      <el-col :span="24">
                        <div class="now_spec">当前规格：</div>
                        <div class="now_spec_card_time">
                          <div>
                            <img
                              class="now_spec_card_time_img"
                              :src="require('@/assets/imgs/ic_shijian.png')"
                            />
                            <span class="now_spec_card_time_title">当前工作区域到期时间</span>
                            <span class="now_spec_card_time_val">2020-05-05 08:00:00</span>
                          </div>
                        </div>
                      </el-col>
                    </el-col>
                    <el-col :span="22">
                      <el-form-item prop="appDuration" class="form_item input_has_right_select">
                        <div class="form_item_title">申请续期：</div>
                        <el-input-number
                          v-model="formOld.appDuration"
                          controls-position="right"
                          :min="0"
                        ></el-input-number>
                        <el-select
                          v-model="formOld.durType"
                          class="input_right_select"
                          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-col>
                    <el-col :span="22">
                      <el-form-item class="form_item">
                        <div class="form_item_title">申请文件：</div>
                        <info-list :list_arr="docTemplate" class="doc_template"></info-list>
                        <upload-file
                          :multiple="false"
                          :max="1"
                          type="zip"
                          :readOnly="false"
                          :drag="true"
                          @getNewList="getNewListOld"
                        ></upload-file>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="btn_footer">
        <el-button class="submit" @click="submitApp">提交申请</el-button>
      </div>
    </block-radius>
    <el-dialog title="申请信息确认" :visible.sync="dialogVisible" width="580px" class="cloud_dia">
      <el-row>
        <el-col :span="24">
          <span class="dia_item_title">申请组织：</span>
          <span class="dia_item_val">{{ diaForm.department_name }}</span>
        </el-col>
        <el-col :span="10">
          <span class="dia_item_title">组织联系人：</span>
          <span class="dia_item_val">{{ diaForm.link_man }}</span>
        </el-col>
        <el-col :span="10">
          <span class="dia_item_title">联系电话：</span>
          <span class="dia_item_val">{{ diaForm.phone }}</span>
        </el-col>
        <el-col :span="10">
          <span class="dia_item_title">申请类型：</span>
          <span class="dia_item_val">{{ activeName == 0 ? "新资源申请" : "已有资源升级" }}</span>
        </el-col>
        <el-col :span="10" v-if="activeName == '1'">
          <span class="dia_item_title">工作区域名称：</span>
          <span class="dia_item_val">{{ diaForm.namespace }}</span>
        </el-col>
        <el-col :span="14" v-if="activeName == '0'">
          <span class="dia_item_title">上传申请文件：</span>
          <span class="dia_item_val">{{ diaForm.apply_file_name }}</span>
        </el-col>
        <el-col :span="24" v-else-if="activeName == '1'">
          <span class="dia_item_title">上传申请文件：</span>
          <span class="dia_item_val">{{ diaForm.apply_file_name }}</span>
        </el-col>
        <el-col :span="24">
          <div class="dia_block" v-if="activeName == 0">
            <span class="dia_item_all_title">基本信息：</span>
            <div class="dia_block_item">
              <div class="dia_block_item_in">
                <span class="dia_block_item_title">工作区域名称：</span>
                <span class="dia_block_item_val">{{ diaForm.namespace }}</span>
              </div>
              <div class="dia_block_item_in">
                <span class="dia_block_item_title">中文名称：</span>
                <span class="dia_block_item_val">{{ diaForm.workplace }}</span>
              </div>
              <div class="dia_block_item_in">
                <span class="dia_block_item_title">描述信息：</span>
                <span class="dia_block_item_val">{{ diaForm.workplacedesc }}</span>
              </div>
            </div>
            <span class="dia_item_all_title">工作区域申请规格：</span>
            <div class="dia_block_item">
              <div class="dia_block_item_in">
                <span class="dia_block_item_title">CPU：</span>
                <span class="dia_block_item_val">{{ diaForm.cpu }}</span>
              </div>
              <div class="dia_block_item_in">
                <span class="dia_block_item_title">内存：</span>
                <span class="dia_block_item_val">{{ diaForm.memory }}</span>
              </div>
              <div class="dia_block_item_in">
                <span class="dia_block_item_title">容器组：</span>
                <span class="dia_block_item_val">{{ diaForm.containerGroup }}个</span>
              </div>
              <div class="dia_block_item_in" v-if="diaForm.dataDisk != 0">
                <span class="dia_block_item_title">数据盘：</span>
                <span
                  class="dia_block_item_val"
                >{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
              </div>
              <div class="dia_block_item_in" v-if="diaForm.dataDisk != 0">
                <span class="dia_block_item_title">数据盘类型：</span>
                <span class="dia_block_item_val">{{ diaForm.store_type }}</span>
              </div>
            </div>
            <span class="dia_item_all_title">单个容器组规格：</span>
            <div class="dia_block_item">
              <div class="dia_block_item_in">
                <span class="dia_block_item_title">CPU：</span>
                <p class="dia_block_item_val">
                  <span class="val_has_2">最高&nbsp;{{ diaForm.perCPUs }}核</span>
                  <span class="val_has_2">默认&nbsp;{{ diaForm.perCPU }}核</span>
                </p>
              </div>
              <div class="dia_block_item_in">
                <span class="dia_block_item_title">内存：</span>
                <p class="dia_block_item_val">
                  <span class="val_has_2">最高&nbsp;{{ diaForm.perRAMs }}核</span>
                  <span class="val_has_2">默认&nbsp;{{ diaForm.perRAM }}核</span>
                </p>
              </div>
            </div>
            <span class="dia_item_all_title">申请时长：</span>
            <div class="dia_block_item">
              <div class="dia_block_item_in">
                <span class="dia_block_item_title">申请时长</span>
                <span
                  class="dia_block_item_val"
                >{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
              </div>
            </div>
          </div>
          <div v-else>
            <span class="dia_item_title margin_top_10">原规格：</span>
            <div class="dia_block">
              <span class="dia_item_all_title">工作区域：</span>
              <div class="dia_block_item">
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">CPU：</span>
                  <span class="dia_block_item_val">{{ paramsOld.cpu }}核</span>
                </div>
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">内存：</span>
                  <span class="dia_block_item_val">{{ paramsOld.memory }}核</span>
                </div>
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">容器组：</span>
                  <span class="dia_block_item_val">{{ paramsOld.containers }}个</span>
                </div>
              </div>
              <span class="dia_item_all_title">单个容器组规格：</span>
              <div class="dia_block_item">
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">CPU：</span>
                  <p class="dia_block_item_val">
                    <span class="val_has_2">最高&nbsp;{{ paramsOld.perCPUs }}核</span>
                    <span class="val_has_2">默认&nbsp;{{ paramsOld.perCPU }}核</span>
                  </p>
                </div>
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">内存：</span>
                  <p class="dia_block_item_val">
                    <span class="val_has_2">最高&nbsp;{{ paramsOld.perRAMs }}核</span>
                    <span class="val_has_2">默认&nbsp;{{ paramsOld.perRAM }}核</span>
                  </p>
                </div>
              </div>
              <span class="dia_item_all_title">申请时长：</span>
              <div class="dia_block_item">
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">到期时间：</span>
                  <span class="dia_block_item_val">2020-12-12 12:12:12</span>
                </div>
              </div>
            </div>
            <span class="dia_item_title margin_top_10">调整至：</span>
            <div class="dia_block">
              <span class="dia_item_all_title">工作区域：</span>
              <div class="dia_block_item">
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">CPU：</span>
                  <span class="dia_block_item_val">{{ diaForm.cpu }}核</span>
                </div>
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">内存：</span>
                  <span class="dia_block_item_val">{{ diaForm.memory }}核</span>
                </div>
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">容器组：</span>
                  <span class="dia_block_item_val">{{ diaForm.containerGroup }}个</span>
                </div>
                <div class="dia_block_item_in" v-if="diaForm.dataDisk != 0">
                  <span class="dia_block_item_title">新增数据盘：</span>
                  <span
                    class="dia_block_item_val"
                  >{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB</span>
                </div>
                <div class="dia_block_item_in" v-if="delDataDiskList.length != 0">
                  <span class="dia_block_item_title">删除数据盘：</span>
                  <span
                    class="dia_block_item_val"
                  >{{ delDataDiskList.map(item => {return item.app_name}).join("、") }}</span>
                </div>
              </div>
              <span class="dia_item_all_title">单个容器组规格：</span>
              <div class="dia_block_item">
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">CPU：</span>
                  <p class="dia_block_item_val">
                    <span class="val_has_2">最高&nbsp;{{ diaForm.perCPUs }}核</span>
                    <span class="val_has_2">默认&nbsp;{{ diaForm.perCPU }}核</span>
                  </p>
                </div>
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">内存：</span>
                  <p class="dia_block_item_val">
                    <span class="val_has_2">最高&nbsp;{{ diaForm.perRAMs }}核</span>
                    <span class="val_has_2">默认&nbsp;{{ diaForm.perRAM }}核</span>
                  </p>
                </div>
              </div>
              <span class="dia_item_all_title">申请续期：</span>
              <div class="dia_block_item">
                <div class="dia_block_item_in">
                  <span class="dia_block_item_title">是否续期：</span>
                  <span
                    class="dia_block_item_val"
                  >{{ diaForm.appDuration && diaForm.appDuration != 0 ? "是": "否" }}</span>
                </div>
                <div
                  class="dia_block_item_in"
                  v-if="diaForm.appDuration && diaForm.appDuration != 0"
                >
                  <span class="dia_block_item_title">续期时长：</span>
                  <span
                    class="dia_block_item_val"
                  >{{ diaForm.appDuration }}{{ diaForm.durType == 1 ? "个月" : "年" }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="btn_footer">
        <el-button class="cancel" @click="cancel">取消</el-button>
        <el-button class="submit" @click="determineSubmit">确定提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import UploadFile from "@/components/general/upload_file";
import TableUm from "@/components/table/table-um";
import InfoList from "@/components/infoList";
export default {
  components: {
    BlockRadius,
    UploadFile,
    TableUm,
    InfoList
  },
  props: {
    name: { type: String, default: "" }
  },
  data: () => ({
    form: {
      department_name: "",
      phone: "",
      link_man: ""
    },
    activeName: "0",
    formNew: {
      namespace: "",
      workplace: "",
      workplacedesc: "",
      cpu: "",
      memory: "",
      containerGroup: undefined,
      dataDisk: undefined,
      perDataDisk: undefined,
      perCPUs: undefined,
      perCPU: undefined,
      perRAMs: undefined,
      perRAM: undefined,
      appDuration: undefined,
      durType: 1,
      apply_file: "",
      apply_file_name: "",
      store_type: "nfs-client"
    },
    ruleNew: {
      namespace: [
        { required: true, message: "请输入工作区域名称", trigger: "blur" }
      ],
      workplace: [
        { required: true, message: "请输入中文名称", trigger: "blur" }
      ],
      workplacedesc: [
        { required: true, message: "请输入描述信息", trigger: "blur" }
      ],
      cpu: [{ required: true, message: "请选择CPU使用量", trigger: "blur" }],
      memory: [
        { required: true, message: "请选择内存使用量", trigger: "blur" }
      ],
      containerGroup: [
        { required: true, message: "请输入容器组规格", trigger: "blur" }
      ],
      perCPUs: [
        { required: true, message: "请输入CPU最大使用量", trigger: "blur" }
      ],
      perCPU: [
        { required: true, message: "请输入CPU默认使用量", trigger: "blur" }
      ],
      perRAMs: [
        { required: true, message: "请输入内存最大使用量", trigger: "blur" }
      ],
      perRAM: [
        { required: true, message: "请输入内存默认使用量", trigger: "blur" }
      ],
      appDuration: [
        { required: true, message: "请输入申请时长", trigger: "blur" }
      ]
    },
    durationOptions: [
      { value: 1, label: "月" },
      { value: 2, label: "年" }
    ],
    workSpace: "",
    workSpaceOptions: [],
    optionsCPU: [
      { value: "8", label: "8" },
      { value: "16", label: "16" }
    ],
    optionsRAM: [
      { value: "8", label: "8" },
      { value: "16", label: "16" },
      { value: "32", label: "32" }
    ],
    options_store_type: [
      { value: "nfs-client", label: "nfs-client" },
      { value: "rook-ceph-block", label: "rook-ceph-block" }
    ],
    formShow: false,
    specArr: [
      { title: "CPU", val: "4", src: "ic_CPU" },
      { title: "内存", val: "4", src: "ic_neicun" },
      { title: "容器", val: "4", src: "ic_rongqi" }
    ],
    rqzArr: [
      { title: "CPU", max: "4", default: "2", src: "ic_CPU" },
      { title: "内存", max: "4", default: "2", src: "ic_neicun" }
    ],
    docTemplate: [
      {
        title: "",
        info: "工作区域申请文件标准模板.PDF",
        url: "",
        type: "down"
      }
    ],
    formOld: {
      cpu: "",
      memory: "",
      containerGroup: undefined,
      dataDisk: undefined,
      perDataDisk: undefined,
      perCPUs: undefined,
      perCPU: undefined,
      perRAMs: undefined,
      perRAM: undefined,
      appDuration: undefined,
      durType: 1,
      apply_file: "",
      apply_file_name: "",
      store_type: "nfs-client"
    },
    paramsOld: {},
    ruleOld: {
      namespace: [
        { required: true, message: "请输入工作区域名称", trigger: "blur" }
      ],
      workplace: [
        { required: true, message: "请输入中文名称", trigger: "blur" }
      ],
      workplacedesc: [
        { required: true, message: "请输入描述信息", trigger: "blur" }
      ],
      cpu: [{ required: true, message: "请选择CPU使用量", trigger: "blur" }],
      memory: [
        { required: true, message: "请选择内存使用量", trigger: "blur" }
      ],
      containerGroup: [
        { required: true, message: "请输入容器组规格", trigger: "blur" }
      ],
      perCPUs: [
        { required: true, message: "请输入CPU最大使用量", trigger: "blur" }
      ],
      perCPU: [
        { required: true, message: "请输入CPU默认使用量", trigger: "blur" }
      ],
      perRAMs: [
        { required: true, message: "请输入内存最大使用量", trigger: "blur" }
      ],
      perRAM: [
        { required: true, message: "请输入内存默认使用量", trigger: "blur" }
      ],
      appDuration: [
        { required: true, message: "请输入申请时长", trigger: "blur" }
      ]
    },
    dialogVisible: false,
    diaForm: {},
    dataDiskHeaders: [
      {
        label: "数据盘容量",
        prop: "disk_cap",
        align: "center"
      },
      {
        label: "部署的应用",
        prop: "app_name",
        align: "center"
      },
      {
        label: "操作",
        type: "Button",
        align: "center",
        btnList: [
          {
            type: "primary-del",
            label: "删除"
          }
        ]
      }
    ],
    dataDiskList: [],
    delDataDiskList: []
  }),
  mounted() {
    this.getUser();
    this.getNameSpaceList();
  },
  methods: {
    tabClick() {},
    getNewList(val) {
      console.log(val);
      this.formNew.apply_file_name = val[0].name;
      this.formNew.apply_file = val[0].url;
    },
    getNewListOld(val) {
      this.formOld.apply_file_name = val[0].name;
      this.formOld.apply_file = val[0].url;
    },
    handleChange() {},
    getForm(val) {
      if (val !== "") {
        let paramsOld = this.workSpaceOptions[val];
        this.paramsOld = paramsOld;
        this.formOld.namespace = paramsOld.namespace;
        this.formOld.workplace = paramsOld.workplace;
        this.formOld.workplacedesc = paramsOld.workplacedesc;
        this.formOld.cpu = paramsOld.cpu;
        this.formOld.memory = paramsOld.memory;
        this.formOld.containerGroup = paramsOld.containers;
        this.formOld.dataDisk = "";
        this.formOld.perDataDisk = "";
        this.formOld.perCPUs = paramsOld.one_cpu_max;
        this.formOld.perCPU = paramsOld.one_cpu_min;
        this.formOld.perRAMs = paramsOld.one_memory_max;
        this.formOld.perRAM = paramsOld.one_memory_min;
        this.formOld.store_type = paramsOld.store_type;
        this.dataDiskList = paramsOld.disk_list || [];
        this.formShow = true;
      } else {
        this.formShow = false;
      }
    },
    submitApp() {
      let formParams = {};
      if (this.activeName == 0) {
        this.$refs["formNew"].validate(valid => {
          if (valid) {
            formParams = this.formNew;
            this.dialogVisible = true;
            this.diaForm = Object.assign(formParams, this.form);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else if (this.activeName == 1) {
        this.$refs["formOld"].validate(valid => {
          if (valid) {
            formParams = this.formOld;
            this.dialogVisible = true;
            this.diaForm = Object.assign(formParams, this.form);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
    determineSubmit() {
      if (this.activeName == 0) {
        let query = {
          resource_info: {
            namespace: this.formNew.namespace,
            workplace: this.formNew.workplace,
            workplacedesc: this.formNew.workplacedesc
          },
          resource_apply: {
            apply_file: this.formNew.apply_file,
            cpu: Number(this.formNew.cpu),
            duration: this.formNew.appDuration,
            duration_unit: Number(this.formNew.durType),
            apply_connect_username: this.form.link_man,
            apply_connect_mobile: this.form.phone,
            memory: Number(this.formNew.memory),
            containers: this.formNew.containerGroup,
            disk_num: this.formNew.dataDisk,
            disk_cap: this.formNew.perDataDisk,
            one_cpu_min: this.formNew.perCPU,
            one_cpu_max: this.formNew.perCPUs,
            one_memory_min: this.formNew.perRAM,
            one_memory_max: this.formNew.perRAMs
          },
          disks: [
            {
              disk_num: this.formNew.dataDisk,
              disk_cap: this.formNew.perDataDisk,
              store_type: this.formNew.store_type
            }
          ]
        };
        this.$api.serviceShop.applicationCloud(query).then(response => {
          if (response.data.success == 1) {
            this.$message({
              message: "申请成功",
              type: "success"
            });
            this.$router.push("/services_shop");
          } else {
            this.$message({
              message: "申请失败",
              type: "error"
            });
          }
        });
      } else {
        let query = {
          resource_id: this.paramsOld.id,
          resource_apply: {
            apply_file: this.formOld.apply_file,
            cpu: Number(this.formOld.cpu),
            duration: this.formOld.appDuration,
            duration_unit: Number(this.formOld.durType),
            apply_connect_username: this.form.link_man,
            apply_connect_mobile: this.form.phone,
            memory: Number(this.formOld.memory),
            containers: this.formOld.containerGroup,
            one_cpu_min: this.formOld.perCPU,
            one_cpu_max: this.formOld.perCPUs,
            one_memory_min: this.formOld.perRAM,
            one_memory_max: this.formOld.perRAMs
          },
          disks: [
            {
              disk_num: this.formOld.dataDisk,
              disk_cap: this.formOld.perDataDisk,
              store_type: this.formOld.store_type
            }
          ]
        };
        this.$api.serviceShop.updateCloud(query).then(response => {
          if (response.data.success == 1) {
            this.$message({
              message: "申请调整成功",
              type: "success"
            });
            this.$router.push("/services_shop");
          } else {
            this.$message({
              message: "申请调整失败",
              type: "error"
            });
          }
        });
      }
      console.log(this.form);
      this.dialogVisible = false;
    },
    cancel() {
      this.dialogVisible = false;
    },
    getUser() {
      this.form.department_name = this.$store.state.userInfo.department_name;
      this.form.phone = this.$store.state.userInfo.phone;
      this.form.link_man = this.$store.state.userInfo.link_man;
    },
    getNameSpaceList() {
      this.$api.serviceShop.getCloudList().then(response => {
        if (response.data.success == 1) {
          this.workSpaceOptions = response.data.data;
        }
      });
    },
    delItem(val) {
      let delIndex = this.dataDiskList.findIndex(v => v.id === val.id);
      this.dataDiskList.splice(delIndex, 1);
      this.delDataDiskList.push(val);
    }
  }
};
</script>

<style scoped>
.cloud_form {
}
.form_title {
  font-size: 18px;
  margin: 10px 0;
  padding: 0 0 0 15px;
  position: relative;
  color: #58617a;
}
.form_title::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 18px;
  background-color: #515fe7;
  border-radius: 2px;
  left: 0;
  top: 4px;
}
.form_item {
  width: calc(100% - 20px);
}
.form_item_title {
  padding: 0 15px;
  line-height: 40px;
}
.input_has_right {
  position: relative;
}
.input_right {
  display: inline-block;
  width: 60px;
  height: 40px;
  padding: 0 0 0 15px;
  background-color: #edeef4;
  border: 1px #e3e5ef solid;
  color: #8890a7;
  border-radius: 0 8px 8px 0;
  position: absolute;
  right: 0;
}
.input_has_left_right {
  position: relative;
}
.input_left {
  display: inline-block;
  width: 60px;
  height: 40px;
  padding: 0 0 0 15px;
  background-color: #edeef4;
  border: 1px #e3e5ef solid;
  color: #8890a7;
  border-radius: 8px 0 0 8px;
  position: absolute;
  left: 0;
}
.input_has_right_select {
  position: relative;
}
.input_right_select {
  position: absolute;
  right: 0;
}
.select_title {
  padding: 20px 15px;
  font-weight: 700;
}
.now_spec {
  padding: 10px 15px;
}
.now_spec_cards {
}
.now_spec_card {
  display: inline-block;
  width: 165px;
  height: 50px;
  background-color: #f7f8f9;
  border-radius: 8px;
  line-height: 50px;
  padding: 0 20px;
  position: relative;
  margin-right: 20px;
}
.now_spec_card_title {
  color: #6573ae;
  margin-left: 10px;
}
.now_spec_card_val {
  color: #0d1847;
  position: absolute;
  right: 20px;
  top: 0;
}
.now_spec_card_img {
  position: relative;
  top: 2px;
}
.now_rqz_card {
  display: inline-block;
  width: 193px;
  height: 78px;
  background-color: #f7f8f9;
  border-radius: 8px;
  line-height: 78px;
  padding: 0 20px;
  position: relative;
  margin-right: 20px;
}
.now_rqz_card_title {
  color: #6573ae;
  margin-left: 10px;
}
.now_rqz_card_val_div {
  color: #0d1847;
  position: absolute;
  line-height: 30px;
  right: 20px;
  top: 9px;
}
.now_rqz_card_val {
}
.now_rqz_card_img {
  position: relative;
  top: 2px;
}
.now_spec_card_time {
  width: 381px;
  height: 50px;
  background-color: #f7f8f9;
  border-radius: 8px;
  line-height: 50px;
  padding: 0 20px;
  position: relative;
}
.now_spec_card_time_img {
  position: relative;
  top: 2px;
}
.now_spec_card_time_title {
  color: #6573ae;
  margin-left: 10px;
}
.now_spec_card_time_val {
  color: #0d1847;
  position: absolute;
  right: 20px;
  top: 0;
}
.btn_footer {
  display: flex;
  justify-content: flex-end;
  margin: 40px 20px 10px;
}
.btn_footer .submit {
  width: 100px;
  background-color: #0f2683;
  color: #f8f9fd;
}
.cancel {
  width: 100px;
  background-color: #c3caf8;
  color: #0f2683;
}
.dia_item_title {
  display: block;
  color: #8890a7;
  line-height: 24px;
  padding: 0 20px;
}
.margin_top_10 {
  margin-top: 10px;
}
.dia_item_val {
  display: block;
  color: #242c43;
  line-height: 24px;
  margin-bottom: 10px;
  width: 90%;
  padding: 0 20px;
}
.dia_block {
  background-color: #f8f9fd;
  border-radius: 8px;
  margin: 10px 0;
  padding: 20px;
  font-size: 14px;
  line-height: 22px;
}
.dia_item_all_title {
  color: #242c43;
}
.dia_block_item {
  padding: 10px 0 0 20px;
}
.dia_block_item_in {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.dia_block_item_title {
  color: #8890a7;
  width: 120px;
  text-align: right;
}
.dia_block_item_val {
  color: #242c43;
  width: calc(100% - 130px);
}
.val_has_2 {
  margin-right: 20px;
}
.doc_template {
  margin: 0 0 10px 20px;
}
</style>
<style>
.form_block .el-input .el-input__inner {
  background-color: #f7f8f9;
  color: #242c43;
}
.cloud_form .el-input {
  width: 100%;
}
.cloud_form .input_has_right .el-input {
  width: calc(100% - 60px);
}
.cloud_form .input_has_left_right .el-input {
  width: calc(100% - 120px);
  margin-left: 60px;
}
.cloud_form .input_has_left_right .el-input__inner {
  border-radius: 0;
  color: #242c43;
}
.cloud_form .input_right_top {
  top: 40px;
}
.cloud_form .el-select {
  width: 100%;
}
.cloud_form .el-input .el-input__inner {
  background-color: #f7f8f9;
  color: #242c43;
}
.cloud_form .el-input-number {
  width: calc(100% - 60px);
}
.cloud_form .el-input-number .el-input {
  width: 100%;
}
.cloud_form .input_has_left_right .el-input-number .el-input {
  width: calc(100% - 60px);
  margin-left: 60px;
}
.cloud_form .el-input-number .el-input__inner {
  text-align: left;
  color: #242c43;
}
.cloud_form .el-textarea {
  width: 100%;
}
.cloud_form .el-textarea .el-textarea__inner {
  background-color: #f7f8f9;
  border-radius: 8px;
  color: #242c43;
}
.form_item .el-form-item__content {
  width: 100%;
}
.form_item.el-form-item {
  margin-bottom: 12px;
}
.input_has_right .el-input__inner {
  border-radius: 8px 0 0 8px;
  color: #242c43;
}
.cloud_form .input_has_right_select .el-input-number {
  width: calc(100% - 100px);
}
.input_has_right_select .el-select {
  width: 100px;
}
.input_has_right_select .el-select .el-input.is-focus .el-input__inner {
  border-color: #0f2683;
}
.input_has_right_select .el-select .el-input__inner:focus {
  border-color: #0f2683;
}
.input_has_right_select .el-input__inner {
  border-radius: 8px 0 0 8px;
  color: #242c43;
}
.input_has_right_select .input_right_select.el-select .el-input {
  width: 100px;
  background-color: #0f2683;
  color: #ffffff;
  border-radius: 0 8px 8px 0;
}
.input_has_right_select
  .input_right_select.el-select
  .el-input
  .el-input__inner {
  border-radius: 0 8px 8px 0;
  color: #ffffff;
}
.input_right_select .el-input .el-input__inner {
  background-color: #0f2683;
  color: #242c43;
}
.cloud_form .el-input-number .el-input-number__increase,
.cloud_form .el-input-number .el-input-number__decrease {
  border-bottom: 0;
  border-left: 0;
  width: 40px;
}
.cloud_dia .el-dialog__header {
  border-bottom: 1px solid #edf0ff;
}
.cloud_dia .el-dialog__title {
  font-weight: 700;
}
.cloud_dia .el-dialog__body {
  text-align: left;
  font-size: 14px;
}
.cloud_form .el-input__prefix,
.el-input__suffix {
  text-align: right;
}
</style>