<template>
  <div class="shop_cloud">
    <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 :borRadius="8" :paddingNum="24">
      <el-form
        ref="form"
        :inline="true"
        :rules="ruleBasis"
        :model="form"
        class="form_block"
      >
        <el-row :gutter="24">
          <el-col :span="24">
            <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="12">
            <el-form-item class="form_item nobottom" prop="link_man">
              <div class="form_item_title">部门联系人：</div>
              <el-input
                v-model="form.link_man"
                placeholder="请输入联系人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="form_item nobottom" prop="phone">
              <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 :borRadius="8" :paddingNum="24">
      <el-tabs v-model="activeName" class="cloud_form" @tab-click="tabClick">
        <el-tab-pane label="申请新的工作区域" name="0">
          <el-form ref="formNew" :model="formNew" :rules="ruleNew">
            <el-row :gutter="24">
              <el-col :span="24">
                <div class="form_title">基本信息</div>
              </el-col>
              <el-col :span="12">
                <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="12">
                <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="24">
                <el-form-item prop="workplacedesc" class="form_item nobottom">
                  <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="8">
                <el-form-item prop="cpu" class="form_item input_has_right">
                  <div class="form_item_title">CPU：</div>
                  <el-select
                    v-model="formNew.cpu"
                    @change="changeCPU"
                    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="8">
                <el-form-item prop="memory" class="form_item input_has_right">
                  <div class="form_item_title">内存：</div>
                  <el-select
                    v-model="formNew.memory"
                    placeholder="请选择内存使用量"
                    @change="setContainerGroup(0)"
                  >
                    <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="8">
                <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="1"
                    :max="24"
                    placeholder="取值范围[0，24]"
                  ></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="8">
                <el-form-item class="form_item input_has_right nobottom">
                  <el-input-number
                    v-model="formNew.dataDisk"
                    controls-position="right"
                    :min="0"
                    :max="1000"
                    placeholder="请选择增加数据盘的数量"
                  ></el-input-number>
                  <div class="input_right">块</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="form_item input_has_right nobottom">
                  <el-input-number
                    v-model="formNew.perDataDisk"
                    controls-position="right"
                    :min="0"
                    :max="1000"
                    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="8">
                <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="8">
                <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="8">
                <el-form-item
                  prop="perRAMs"
                  class="form_item input_has_left_right nobottom"
                >
                  <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">GB</div>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  prop="perRAM"
                  class="form_item input_has_left_right nobottom"
                >
                  <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">GB</div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div class="form_title">其他信息</div>
              </el-col>
              <el-col :span="16">
                <el-form-item
                  prop="appDuration"
                  class="form_item input_has_right"
                >
                  <div class="form_item_title">申请时长：</div>
                  <el-input-number
                    v-model="formNew.appDuration"
                    controls-position="right"
                    :min="1"
                    :max="1000"
                  ></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> -->
                  <div class="input_right">月</div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <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"
                    :unique="false"
                    :max="1"
                    type="zip"
                    :readOnly="false"
                    :drag="true"
                    @getNewList="getNewList"
                    class="up_f"
                  ></upload-file>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="调整现有工作区域" name="1">
          <el-row :gutter="24">
            <el-col :span="16">
              <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-form ref="formOld" :model="formOld" :rules="ruleOld">
              <el-row :gutter="24">
                <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="8">
                  <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使用量"
                      @change="changeCPU"
                    >
                      <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="8">
                  <el-form-item prop="memory" class="form_item input_has_right">
                    <div class="form_item_title">申请内存调整为：</div>
                    <el-select
                      v-model="formOld.memory"
                      placeholder="请选择内存使用量"
                      @change="setContainerGroup(1)"
                    >
                      <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="8">
                  <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="1"
                      :max="24"
                      placeholder="取值范围[0，24]"
                    ></el-input-number>
                    <div class="input_right">个</div>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="dataDiskList.length != 0">
                  <el-form-item class="form_item input_has_right">
                    <div class="form_item_title_1">调整数据盘：</div>
                    <table-um
                      ref="apply_service_state_table"
                      :headers="dataDiskHeaders"
                      :stripe="true"
                      :datas="dataDiskList"
                      @primary-del="delItem"
                      :maxheight="260"
                      size="small"
                      class="disk__table"
                    ></table-um>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="form_item nobottom">
                    <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="8">
                  <el-form-item class="form_item input_has_right nobottom">
                    <el-input-number
                      v-model="formOld.dataDisk"
                      controls-position="right"
                      :min="0"
                      :max="1000"
                      placeholder="请选择增加数据盘的数量"
                    ></el-input-number>
                    <div class="input_right">块</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item class="form_item input_has_right nobottom">
                    <el-input-number
                      v-model="formOld.perDataDisk"
                      controls-position="right"
                      :min="0"
                      :max="1000"
                      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"
                          }}
                          &nbsp;&nbsp;&nbsp;&nbsp;
                        </span>
                        <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="8">
                  <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="8">
                  <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="8">
                  <el-form-item
                    prop="perRAMs"
                    class="form_item input_has_left_right nobottom"
                  >
                    <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">GB</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    prop="perRAM"
                    class="form_item input_has_left_right nobottom"
                  >
                    <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">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_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">
                        {{
                          helper.dateStringTransform(paramsOld.cloud_end_time)
                        }}
                      </span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="16">
                  <el-form-item class="form_item input_has_right">
                    <div class="form_item_title">申请续期：</div>
                    <el-input-number
                      v-model="formOld.appDuration"
                      controls-position="right"
                      :min="1"
                      :max="1000"
                    ></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>
                    <info-list
                      :list_arr="docTemplate"
                      class="doc_template"
                    ></info-list>
                    <upload-file
                      :multiple="false"
                      :unique="false"
                      :max="1"
                      type="zip"
                      :readOnly="false"
                      :drag="true"
                      @getNewList="getNewListOld"
                      class="up_f"
                    ></upload-file>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </block-radius>
    <block-radius :borRadius="8" v-if="!(activeName == 1 && !formShow)">
      <div class="btn_footer fyzj_item">
        <div class="fyzj">
          <p class="fyzj_p">
            <span v-if="getSumCoin > user_info.account_balance" class="yebz">
              余额不足，请联系超级管理员进行充值
            </span>
            费用总计：<span class="fyzj_span">
              {{ getSumCoin }}
            </span>
            <span class="fyzj_qian">金币</span>
          </p>
          <p class="ckfymx">
            <span @click="dialogFymx = true" class="ckfymx_a">
              查看费用明细
            </span>
            <span class="ckfymx_qian"
              >账户余额：{{ user_info.account_balance }} 金币</span
            >
          </p>
        </div>
        <el-button
          :class="
            getSumCoin <= user_info.account_balance ? 'submit' : 'nosubmit'
          "
          :disabled="getSumCoin > user_info.account_balance"
          @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" v-if="diaForm.link_man">
          <span class="dia_item_title">组织联系人：</span>
          <span class="dia_item_val">{{ diaForm.link_man }}</span>
        </el-col>
        <el-col :span="10" v-if="diaForm.phone">
          <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' && diaForm.apply_file_name">
          <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' && diaForm.apply_file_name"
        >
          <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 &&
                  diaForm.perDataDisk &&
                  Number(diaForm.dataDisk) != 0 &&
                  Number(diaForm.perDataDisk) != 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 }}GB</span
                  >
                  <span class="val_has_2"
                    >默认&nbsp;{{ diaForm.perRAM }}GB</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 }}GB</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.one_cpu_max }}核</span
                    >
                    <span class="val_has_2"
                      >默认&nbsp;{{ paramsOld.one_cpu_min }}核</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.one_memory_max }}GB</span
                    >
                    <span class="val_has_2"
                      >默认&nbsp;{{ paramsOld.one_memory_min }}GB</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">
                    {{ helper.dateStringTransform(paramsOld.cloud_end_time) }}
                  </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 }}GB</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 &&
                    diaForm.perDataDisk &&
                    Number(diaForm.dataDisk) != 0 &&
                    Number(diaForm.perDataDisk) != 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.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 }}GB
                    </span>
                    <span class="val_has_2">
                      默认&nbsp;{{ diaForm.perRAM }}GB
                    </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="fyzj_dia">
        <div class="fyzj_dia_init">
          <p v-if="activeName == '1'" class="fyzj_2">
            升级费用：<span class="fyzj_2_num">{{ amounts_payable }} 金币</span>
          </p>
          <!-- <p v-if="activeName == '1'" class="fyzj_2">
            原规格抵扣费用：<span class="fyzj_2_num">2000 金币</span>
          </p> -->
          <div class="fyzj_1">
            费用总计：
            <p>
              <span class="fyzj_1_num"> {{ getSumCoin }} </span
              ><span class="fyzj_1_jb">金币</span>
            </p>
          </div>
          <p class="fyzj_2">
            账户余额：<span class="fyzj_2_num"
              >{{ user_info.account_balance }} 金币</span
            >
          </p>
        </div>
        <div class="clear_xxx"></div>
      </div>
      <div class="btn_footer acc">
        <el-button class="cancel" @click="cancel">取消</el-button>
        <el-button class="submit1" @click="determineSubmit">确定提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="费用明细"
      :visible.sync="dialogFymx"
      width="580px"
      class="cloud_dia"
    >
      <div class="fymx_ts">
        <i class="el-icon-warning-outline"></i>
        <p>
          计费说明：云资源服务依据用户选取的CPU、内存、数据盘个数及大小进行分级计费，具体计费规
          则请线下联系技术支持人员咨询。
        </p>
      </div>
      <div v-if="activeName == '1'" class="sjfy_title">升级费用</div>
      <table-um
        ref="apply_service_state_table"
        :headers="jifeiHeader"
        :stripe="true"
        :datas="jifeiList1"
        :maxheight="260"
      ></table-um>
      <!-- <div v-if="activeName == '1'" class="sjfy_title">
        原规格抵扣费用
        <el-tooltip
          class="tool_item"
          effect="dark"
          content="未用完的按剩余时间及原购买规格价格核算后优先抵扣本订单金额，超出部分退还至用户账户"
          placement="top"
          offset="5"
        >
          <img class="tool_img" src="@/assets/imgs/tool_ic_tips.png" />
        </el-tooltip>
      </div>
      <table-um
        v-if="activeName == '1'"
        ref="apply_service_state_table"
        :headers="jifeiHeader2"
        :stripe="true"
        :datas="jifeiList2"
        :maxheight="260"
      ></table-um> -->
    </el-dialog>
    <ApassDialog
      ref="dialog"
      msg="确认删除该数据盘吗？"
      :submit="dialogSubmit"
    ></ApassDialog>
  </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";
import ApassDialog from "@/components/apass-dialog";
import helper from "@/services/helper.js";

export default {
  components: {
    BlockRadius,
    UploadFile,
    TableUm,
    InfoList,
    ApassDialog,
  },
  props: {
    name: { type: String, default: "" },
  },
  computed: {
    getSumCoin() {
      let sumCM = 0;
      let sumDisk = 0;
      let a_deductions = 0;
      if (this.activeName == "0") {
        a_deductions = this.deductions;
        if (this.cpu_memory && this.cpu_memory.length != 0) {
          if (this.formNew.cpu == "8") {
            if (this.formNew.memory == "16") {
              let priceObj = this.cpu_memory.find((item) => {
                return item.cpu == 8 && item.memory == 16;
              });
              this.eci_single_money = Number(priceObj.price);
              sumCM += Number(priceObj.price);
            } else if (this.formNew.memory == "32") {
              let priceObj = this.cpu_memory.find((item) => {
                return item.cpu == 8 && item.memory == 32;
              });
              this.eci_single_money = Number(priceObj.price);
              sumCM += Number(priceObj.price);
            }
          } else if (this.formNew.cpu == "16") {
            if (this.formNew.memory == "32") {
              let priceObj = this.cpu_memory.find((item) => {
                return item.cpu == 16 && item.memory == 32;
              });
              this.eci_single_money = Number(priceObj.price);
              sumCM += Number(priceObj.price);
            } else if (this.formNew.memory == "64") {
              let priceObj = this.cpu_memory.find((item) => {
                return item.cpu == 16 && item.memory == 64;
              });
              this.eci_single_money = Number(priceObj.price);
              sumCM += Number(priceObj.price);
            }
          }
        }
        sumCM = sumCM * Number(this.formNew.appDuration);
        if (
          this.formNew.dataDisk >= 1 &&
          this.formNew.perDataDisk >= 1 &&
          this.formNew.appDuration >= 1
        ) {
          if (this.hard_disk && this.hard_disk.length != 0) {
            this.disk_single_money = Number(this.hard_disk[0].price);
            sumDisk +=
              Number(this.formNew.dataDisk) *
              Number(this.formNew.perDataDisk) *
              Number(this.formNew.appDuration) *
              Number(this.hard_disk[0].price);
          }
          this.jifeiList1[2] = {
            name: "数据盘",
            num: `${this.formNew.dataDisk}个数据盘，每个数据盘${this.formNew.perDataDisk}GB`,
            time: `${this.formNew.appDuration}个月`,
            sum: `${sumDisk}金币`,
          };
        } else {
          this.jifeiList1.splice(2);
        }
        this.jifeiList1[0].num = `${
          this.formNew.cpu >= 1 ? this.formNew.cpu : 0
        }核+${this.formNew.memory >= 1 ? this.formNew.memory : 0}G`;
        this.jifeiList1[0].time = `${
          this.formNew.appDuration >= 1 ? this.formNew.appDuration : 0
        }个月`;
        this.jifeiList1[0].sum = `${sumCM}金币`;
        this.jifeiList1[1].num = `${
          this.formNew.containerGroup >= 1 ? this.formNew.containerGroup : 0
        }个`;
        this.jifeiList1[1].time = `${
          this.formNew.appDuration >= 1 ? this.formNew.appDuration : 0
        }个月`;
      } else if (this.activeName == "1") {
        a_deductions = this.deductions;
        if (this.cpu_memory && this.cpu_memory.length != 0) {
          if (this.formOld.cpu == "8") {
            if (this.formOld.memory == "16") {
              let priceObj = this.cpu_memory.find((item) => {
                return item.cpu == 8 && item.memory == 16;
              });
              this.eci_single_money = Number(priceObj.price);
              sumCM += Number(priceObj.price);
            } else if (this.formOld.memory == "32") {
              let priceObj = this.cpu_memory.find((item) => {
                return item.cpu == 8 && item.memory == 32;
              });
              this.eci_single_money = Number(priceObj.price);
              sumCM += Number(priceObj.price);
            }
          } else if (this.formOld.cpu == "16") {
            if (this.formOld.memory == "32") {
              let priceObj = this.cpu_memory.find((item) => {
                return item.cpu == 16 && item.memory == 32;
              });
              this.eci_single_money = Number(priceObj.price);
              sumCM += Number(priceObj.price);
            } else if (this.formOld.memory == "64") {
              let priceObj = this.cpu_memory.find((item) => {
                return item.cpu == 16 && item.memory == 64;
              });
              this.eci_single_money = Number(priceObj.price);
              sumCM += Number(priceObj.price);
            }
          }
        }
        sumCM = sumCM * Number(this.formOld.appDuration);
        if (
          this.formOld.dataDisk >= 1 &&
          this.formOld.perDataDisk >= 1 &&
          this.formOld.appDuration >= 1
        ) {
          if (this.hard_disk && this.hard_disk.length != 0) {
            this.disk_single_money = Number(this.hard_disk[0].price);
            sumDisk +=
              Number(this.formOld.dataDisk) *
              Number(this.formOld.perDataDisk) *
              Number(this.formOld.appDuration) *
              Number(this.hard_disk[0].price);
          }
          this.jifeiList1[2] = {
            name: "数据盘",
            num: `${this.formOld.dataDisk}个数据盘，每个数据盘${this.formOld.perDataDisk}GB`,
            time: `${this.formOld.appDuration}个月`,
            sum: `${sumDisk}金币`,
          };
        } else {
          this.jifeiList1.splice(2);
        }
        this.jifeiList1[0].num = `${
          this.formOld.cpu >= 1 ? this.formOld.cpu : 0
        }核+${this.formOld.memory >= 1 ? this.formOld.memory : 0}G`;
        this.jifeiList1[0].time = `${
          this.formOld.appDuration >= 1 ? this.formOld.appDuration : 0
        }个月`;
        this.jifeiList1[0].sum = `${sumCM}金币`;
        this.jifeiList1[1].num = `${
          this.formOld.containerGroup >= 1 ? this.formOld.containerGroup : 0
        }个`;
        this.jifeiList1[1].time = `${
          this.formOld.appDuration >= 1 ? this.formOld.appDuration : 0
        }个月`;
      }
      // console.log(sumCM, sumDisk)
      this.amounts_payable = Number(
        (Number(sumCM) + Number(sumDisk)).toFixed(2)
      );
      // this.total_money = sumCM + sumDisk - a_deductions;
      return this.amounts_payable;
    },
  },
  watch: {
    formNew: {
      handler() {
        if (this.formNew.containerGroup % 1 != 0) {
          this.formNew.containerGroup = Math.floor(this.formNew.containerGroup);
        }
        if (this.formNew.dataDisk % 1 != 0) {
          this.formNew.dataDisk = Math.floor(this.formNew.dataDisk);
        }
        if (this.formNew.appDuration % 1 != 0) {
          this.formNew.appDuration = Math.floor(this.formNew.appDuration);
        }
      },
      deep: true,
    },
    formOld: {
      handler() {
        if (this.formOld.containerGroup % 1 != 0) {
          this.formOld.containerGroup = Math.floor(this.formOld.containerGroup);
        }
        if (this.formOld.dataDisk % 1 != 0) {
          this.formOld.dataDisk = Math.floor(this.formOld.dataDisk);
        }
        if (this.formOld.appDuration % 1 != 0) {
          this.formOld.appDuration = Math.floor(this.formOld.appDuration);
        }
      },
      deep: true,
    },
  },
  data() {
    var checkName = (rule, value, callback) => {
      let self = this;
      let reg = new RegExp(/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/);
      if (value.length > 63) {
        callback(new Error("命名空间最长不超过63位"));
      } else if (!reg.test(value)) {
        callback(new Error("小写字母或数字开头,可以由小写字母、数字、- 组成"));
      } else {
        self.$api.serviceShop
          .checkNameSpaceCouldUse({ id: value })
          .then(({ data }) => {
            if (data.success === 1) {
              if (data.data === 1) {
                callback();
              } else if (data.data === -1) {
                callback(new Error("命名空间名称已存在"));
              }
            }
          })
          .catch((error) => {
            console.log(error);
            callback(new Error("命名空间名称验证失败"));
          });
      }
    };
    return {
      total_money: 0,
      disk_single_money: 0,
      eci_single_money: 0,
      amounts_payable: 0,
      deductions: 0,
      helper,
      form: {
        department_name: "",
        phone: "",
        link_man: "",
      },
      ruleBasis: {
        link_man: [
          { required: true, message: "请输入部门联系人", trigger: "blur" },
          { max: 6, message: "长度应小于6个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: "请输入正确的手机号码",
          },
        ],
      },
      activeName: "0",
      formNew: {
        namespace: "",
        workplace: "",
        workplacedesc: "",
        cpu: "",
        memory: "",
        containerGroup: undefined,
        dataDisk: undefined,
        perDataDisk: undefined,
        perCPUs: undefined,
        perCPU: undefined,
        perRAMs: undefined,
        perRAM: undefined,
        appDuration: 1,
        durType: 1,
        apply_file: "",
        apply_file_name: "",
        store_type: "nfs-client",
      },
      ruleNew: {
        namespace: [
          { required: true, message: "请输入工作区域名称", trigger: "blur" },
          { max: 16, message: "长度应小于16个字符", trigger: "blur" },
          { validator: checkName, trigger: "blur" },
        ],
        workplace: [
          { required: true, message: "请输入中文名称", trigger: "blur" },
          { max: 16, message: "长度应小于16个字符", trigger: "blur" },
        ],
        workplacedesc: [
          { required: true, message: "请输入描述信息", trigger: "blur" },
          { max: 100, message: "长度应小于100个字符", trigger: "blur" },
        ],
        cpu: [
          { required: true, message: "请选择CPU使用量", trigger: "change" },
        ],
        memory: [
          { required: true, message: "请选择内存使用量", trigger: "change" },
        ],
        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: "",
      workSpaceId: "",
      workSpaceOptions: [],
      optionsCPU: [
        { value: "8", label: "8" },
        { value: "16", label: "16" },
      ],
      optionsRAM: [],
      options_store_type: [
        { value: "nfs-client", label: "nfs-client" },
        { value: "rook-ceph-block", label: "rook-ceph-block" },
      ],
      formShow: false,
      specArr: [
        { title: "CPU", val: "0", src: "ic_CPU" },
        { title: "内存", val: "0", src: "ic_neicun" },
        { title: "容器", val: "0", src: "ic_rongqi" },
      ],
      rqzArr: [
        { title: "CPU", max: "4", default: "2", src: "ic_CPU" },
        { title: "内存", max: "4", default: "2", src: "ic_neicun" },
      ],
      docTemplate: [
        {
          title: "",
          info: "工作区域申请文件标准模板.xlsx",
          url: "static/工作区域申请文件模板.xlsx",
          type: "down",
        },
      ],
      formOld: {
        cpu: "",
        memory: "",
        containerGroup: undefined,
        dataDisk: undefined,
        perDataDisk: undefined,
        perCPUs: undefined,
        perCPU: undefined,
        perRAMs: undefined,
        perRAM: undefined,
        appDuration: 1,
        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: "change" },
        ],
        memory: [
          { required: true, message: "请选择内存使用量", trigger: "change" },
        ],
        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" },
        ],
      },
      dialogVisible: false,
      diaForm: {},
      dataDiskHeaders: [
        {
          label: "磁盘名称",
          prop: "name",
          align: "center",
        },
        {
          label: "数据盘容量",
          prop: "disk_cap",
          align: "center",
        },
        {
          label: "部署的应用",
          prop: "app_name",
          align: "center",
        },
        {
          label: "操作",
          type: "Button",
          align: "center",
          btnList: [
            {
              type: "primary-del",
              label: "删除",
            },
          ],
        },
      ],
      dataDiskList: [],
      delDataDiskList: [],
      del_item: {},
      dialogFymx: false,
      jifeiHeader: [
        {
          label: "名称",
          prop: "name",
          align: "center",
        },
        {
          label: "数量规格",
          prop: "num",
          align: "center",
        },
        {
          label: "购买时长",
          prop: "time",
          align: "center",
        },
        {
          label: "小计",
          prop: "sum",
          align: "center",
        },
      ],
      jifeiHeader2: [
        {
          label: "名称",
          prop: "name",
          align: "center",
        },
        {
          label: "数量规格",
          prop: "num",
          align: "center",
        },
        {
          label: "购买时长",
          prop: "time",
          align: "center",
        },
        {
          label: "小计",
          prop: "sum",
          align: "center",
          type: "html",
          getHtml: (str) => {
            return `<span style="color: #e15260">-${str.sum}</span>`;
          },
        },
      ],
      jifeiList1: [
        { name: "CPU+内存", num: "0核+0G", time: "0个月", sum: "0金币" },
        { name: "容器组", num: "0个", time: "0个月", sum: "-" },
        // { name: "数据盘", num: "0个数据盘，每个数据盘0GB", time: "0个月", sum: "2000金币" },
      ],
      jifeiList2: [
        { name: "CPU+内存", num: "0核+0G", time: "0个月", sum: "0金币" },
        { name: "容器组", num: "0个", time: "0个月", sum: "-" },
        {
          name: "数据盘",
          num: "0个数据盘，每个数据盘0GB",
          time: "0个月",
          sum: "金币",
        },
      ],
      cpu_memory: [],
      hard_disk: [],
      user_info: {},
    };
  },
  mounted() {
    this.getUser();
    this.getNameSpaceList();
    this.getSpecifications();
    this.getUserCoins();
  },
  methods: {
    getUserCoins() {
      this.$api.user.getUserCoins().then((response) => {
        if (response.data.success == 1) {
          this.user_info = response.data.data;
        }
      });
    },
    getQueryId() {
      if (this.$route.query.namespace && this.$route.query.namespace != "") {
        this.activeName = "1";
        let index = this.workSpaceOptions.findIndex((item) => {
          return item.namespace == this.$route.query.namespace;
        });
        if (index != -1) {
          let paramsOld = this.workSpaceOptions[index];
          this.workSpace = index;
          this.workSpaceId = paramsOld.Id;
          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.specArr[0].val = paramsOld.cpu;
          this.specArr[1].val = paramsOld.memory;
          this.specArr[2].val = 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.rqzArr[0].max = paramsOld.one_cpu_max;
          this.rqzArr[0].default = paramsOld.one_cpu_min;
          this.rqzArr[1].max = paramsOld.one_memory_max;
          this.rqzArr[1].default = paramsOld.one_memory_min;
          this.formOld.store_type = paramsOld.store_type;
          this.dataDiskList = paramsOld.disk_list || [];
          this.dataDiskList.forEach((item, index) => {
            item.name = `磁盘${index + 1}`;
          });
          this.form.link_man = paramsOld.apply_connect_username;
          this.form.phone = paramsOld.apply_connect_mobile;
          this.formShow = true;
        }
      }
    },
    tabClick() {},
    getNewList(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() {},
    getSpecifications() {
      this.$api.serviceShop.getSpecifications().then((response) => {
        if (response.data.success == 1) {
          this.cpu_memory = response.data.data.cpu_memory;
          this.hard_disk = response.data.data.hard_disk;
        } else {
          this.$message({
            message: "获取资源规格失败，请刷新网页",
            type: "error",
          });
        }
      });
    },
    getForm(val) {
      if (val !== "") {
        let paramsOld = this.workSpaceOptions[val];
        this.workSpaceId = paramsOld.Id;
        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.specArr[0].val = paramsOld.cpu;
        this.specArr[1].val = paramsOld.memory;
        this.specArr[2].val = 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.rqzArr[0].max = paramsOld.one_cpu_max;
        this.rqzArr[0].default = paramsOld.one_cpu_min;
        this.rqzArr[1].max = paramsOld.one_memory_max;
        this.rqzArr[1].default = paramsOld.one_memory_min;
        this.formOld.store_type = paramsOld.store_type;
        this.dataDiskList = paramsOld.disk_list || [];
        this.dataDiskList.forEach((item, index) => {
          item.name = `磁盘${index + 1}`;
        });
        this.form.link_man = paramsOld.apply_connect_username;
        this.form.phone = paramsOld.apply_connect_mobile;
        this.formShow = true;
        this.jifeiList2 = [
          {
            name: "CPU+内存",
            num: `${this.formOld.cpu}核+${this.formOld.memory}G"`,
            time: "0个月",
            sum: "0金币",
          },
          {
            name: "容器组",
            num: `${this.formOld.containerGroup}个`,
            time: "0个月",
            sum: "",
          },
          {
            name: "数据盘",
            num: `${this.dataDiskList.length}个数据盘，共计${this.dataDiskList.length}GB"`,
            time: "0个月",
            sum: "2000金币",
          },
        ];
      } 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;
          }
        });
      }
    },
    checkNamespace(namespace, cb) {
      this.$api.serviceShop
        .checkNameSpaceCouldUse({ id: namespace })
        .then(({ data }) => {
          if (data.success === 1) {
            if (data.data === 1) {
              typeof cb === "function" && cb();
            } else if (data.data === -1) {
              this.$message({
                message: `命名空间名称已存在`,
                type: "error",
              });
            }
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            message: `命名空间名称验证失败`,
            type: "error",
          });
        });
    },
    determineSubmit() {
      if (this.activeName == 0) {
        this.checkNamespace(this.formNew.namespace, () => {
          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,
              one_cpu_min: this.formNew.perCPU ? this.formNew.perCPU : 0,
              one_cpu_max: this.formNew.perCPUs ? this.formNew.perCPUs : 0,
              one_memory_min: this.formNew.perRAM ? this.formNew.perRAM : 0,
              one_memory_max: this.formNew.perRAMs ? this.formNew.perRAMs : 0,
            },
            disks: [
              {
                disk_num: this.formNew.dataDisk ? this.formNew.dataDisk : 0,
                disk_cap: this.formNew.perDataDisk
                  ? this.formNew.perDataDisk
                  : 0,
                store_type: "nfs-client",
              },
            ],
            payment: {
              // total_money: this.total_money,
              disk_single_money: String(this.disk_single_money),
              eci_single_money: String(this.eci_single_money),
              total_money: String(this.amounts_payable),
            },
          };
          this.$api.serviceShop.applicationCloud(query).then((response) => {
            if (response.data.success == 1) {
              this.$message({
                message: "申请成功",
                type: "success",
              });
              this.$router.push("/user/order_list");
            } else {
              this.$message({
                message: `申请失败，${response.data.errMsg}`,
                type: "error",
              });
            }
          });
        });
      } else {
        let query = {
          resource_id: this.workSpaceId,
          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 ? this.formOld.perCPU : 0,
            one_cpu_max: this.formOld.perCPUs ? this.formOld.perCPUs : 0,
            one_memory_min: this.formOld.perRAM ? this.formOld.perRAM : 0,
            one_memory_max: this.formOld.perRAMs ? this.formOld.perRAMs : 0,
          },
          disks: [
            {
              disk_num: this.formOld.dataDisk ? this.formOld.dataDisk : 0,
              disk_cap: this.formOld.perDataDisk ? this.formOld.perDataDisk : 0,
              store_type: "nfs-client",
            },
          ],
          remove_disks: this.delDataDiskList.map((item) => item.id),
          payment: {
            // total_money: this.total_money,
            disk_single_money: String(this.disk_single_money),
            eci_single_money: String(this.eci_single_money),
            total_money: String(this.amounts_payable),
          },
        };
        this.$api.serviceShop.updateCloud(query).then((response) => {
          if (response.data.success == 1) {
            this.$message({
              message: "申请调整成功",
              type: "success",
            });
            this.$router.push("/user/order_list");
          } else {
            this.$message({
              message: `申请调整失败，${response.data.errMsg}`,
              type: "error",
            });
          }
        });
      }
      console.log(this.form);
      this.dialogVisible = false;
    },
    cancel() {
      this.dialogVisible = false;
    },
    getUser() {
      this.$api.user.getNowUser().then((response) => {
        this.form.department_name = response.data.data.department_name;
      });
    },
    getNameSpaceList() {
      this.$api.serviceShop.getCloudList().then((response) => {
        if (response.data.success == 1) {
          this.workSpaceOptions = response.data.data;
          this.getQueryId();
        }
      });
    },
    delItem(val) {
      this.$refs.dialog.show();
      this.del_item = val;
    },
    dialogSubmit() {
      let delIndex = this.dataDiskList.findIndex(
        (v) => v.id === this.del_item.id
      );
      this.dataDiskList.splice(delIndex, 1);
      this.delDataDiskList.push(this.del_item);
    },
    setContainerGroup(type) {
      if (type == 0) {
        if (this.formNew.containerGroup && this.formNew.containerGroup != 0) {
        } else {
          this.formNew.containerGroup = this.formNew.memory * 3;
        }
      } else if (type == 1) {
        if (this.formOld.containerGroup && this.formOld.containerGroup != 0) {
        } else {
          this.formOld.containerGroup = this.formOld.memory * 3;
        }
      }
    },
    changeCPU(val) {
      this.formOld.memory = "";
      this.formNew.memory = "";
      if (val == "8") {
        this.optionsRAM = [
          { value: "16", label: "16" },
          { value: "32", label: "32" },
        ];
      } else if (val == "16") {
        this.optionsRAM = [
          { value: "32", label: "32" },
          { value: "64", label: "64" },
        ];
      }
    },
  },
};
</script>

<style scoped>
.cloud_form {
}
.form_title {
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
  margin: 32px 0 24px;
  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: -1px;
}
.form_item {
  width: calc(100%);
}
.form_item_title {
  margin: 0 0 12px;
  line-height: 14px;
  font-size: 14px;
  color: #58617a;
}
.form_item_title_1 {
  margin: 0;
  line-height: 14px;
  font-size: 14px;
  color: #58617a;
}
.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 6px 6px 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: 6px 0 0 6px;
  position: absolute;
  left: 0;
}
.input_has_right_select {
  position: relative;
}
.input_right_select {
  position: absolute;
  right: 0;
}
.select_title {
  padding: 32px 0 12px;
  font-size: 16px;
  line-height: 16px;
  font-weight: bold;
  color: #58617a;
}
.now_spec {
  padding: 0 0 12px;
}
.now_spec_cards {
  margin-bottom: 24px;
}
.now_spec_card {
  display: inline-block;
  width: 194px;
  height: 40px;
  background-color: #f7f8f9;
  border-radius: 6px;
  line-height: 40px;
  padding: 0 20px;
  position: relative;
  margin-right: 24px;
}
.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: 1px;
}
.now_rqz_card {
  display: inline-block;
  width: 304px;
  height: 40px;
  background-color: #f7f8f9;
  border-radius: 6px;
  line-height: 40px;
  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: 40px;
  right: 20px;
  top: 0;
}
.now_rqz_card_val {
}
.now_rqz_card_img {
  position: relative;
  top: 1px;
}
.now_spec_card_time {
  width: 381px;
  height: 40px;
  background-color: #f7f8f9;
  border-radius: 6px;
  line-height: 40px;
  padding: 0 20px;
  position: relative;
  margin-bottom: 24px;
}
.now_spec_card_time_img {
  position: relative;
  top: 1px;
}
.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;
}
.acc {
  margin: 0 20px;
}
.btn_footer .submit {
  width: 220px;
  background-color: #e56600;
  color: #f8f9fd;
}
.btn_footer .submit:focus {
  border: #d93d00 1px solid;
}
.btn_footer .nosubmit {
  width: 220px;
  background-color: #a9aec0;
  color: #ffffff;
}
.btn_footer .submit1 {
  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 12px;
}
.up_f {
  width: calc(50% - 10px);
}
.fyzj_item {
  position: relative;
}
.fyzj {
  color: #242c43;
  font-size: 18px;
  margin-right: 10px;
  text-align: right;
  position: absolute;
  top: -10px;
  right: 230px;
}
.fyzj_p {
  margin-bottom: 6px;
}
.fyzj_span {
  color: #e56600;
  font-size: 24px;
  font-weight: bold;
}
.fyzj_qian {
  color: #e56600;
  font-size: 14px;
}
.ckfymx {
  color: #a9aec0;
  font-size: 14px;
}
.ckfymx_a {
  color: #515fe7;
  cursor: pointer;
}
.ckfymx_qian {
  display: inline-block;
  margin-left: 30px;
  position: relative;
}
.ckfymx_qian::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 16px;
  background: #bcc1d0;
  left: -16px;
  top: 2px;
}
.yebz {
  color: #e15260;
  font-size: 18px;
  margin-right: 20px;
}
.fymx_ts {
  background-color: #f4f7fc;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.fymx_ts i {
  position: relative;
  top: 4px;
  color: #8890a7;
}
.fymx_ts p {
  width: calc(100% - 22px);
  color: #58617a;
}
.sjfy_title {
  margin: 10px 20px;
  position: relative;
  color: #242c43;
  font-size: 16px;
}
.sjfy_title::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #515fe7;
  border-radius: 50%;
  left: -15px;
  top: 8px;
}
.tool_img {
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  left: 2px;
}
.fyzj_dia {
  height: 100%;
}
.fyzj_dia_init {
  float: right;
  text-align: right;
  padding: 10px;
}
.fyzj_1 {
  color: #242c43;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.fyzj_1_num {
  color: #e56600;
  font-size: 24px;
  font-weight: bold;
}
.fyzj_1_jb {
  color: #e56600;
  font-size: 14px;
}
.fyzj_2 {
  min-width: 140px;
  color: #8890a7;
  font-size: 14px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
.fyzj_2_num {
  color: #58617a;
}
.clear_xxx {
  clear: both;
}
.disk__table {
  margin-bottom: 0;
}
</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: 26px;
}
.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: 6px;
  color: #242c43;
  font-size: inherit;
  font-family: Microsoft YaHei, sans-serif;
}
.form_item .el-form-item__content {
  width: 100%;
}
.form_item.el-form-item {
  margin-bottom: 24px;
}
.form_item.el-form-item.nobottom {
  margin-bottom: 0;
}
.input_has_right .el-input__inner {
  border-radius: 6px 0 0 6px;
  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: 6px 0 0 6px;
  color: #242c43;
}
.input_has_right_select .input_right_select.el-select .el-input {
  width: 100px;
  background-color: #0f2683;
  color: #ffffff;
  border-radius: 0 6px 6px 0;
}
.input_has_right_select
  .input_right_select.el-select
  .el-input
  .el-input__inner {
  border-radius: 0 6px 6px 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: 29px;
}
.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;
  right: 2px;
}
.cloud_form .el-input-number.is-controls-right .el-input__inner {
  padding-left: 15px;
  padding-right: 32px;
}
.up_f .el-upload {
  width: 100%;
}
.up_f .el-upload-dragger {
  width: 100%;
}
.shop_cloud .el-tabs__header {
  margin: 0;
}
</style>
