<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/font/icon/iconfont.css">

  <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/lib/element/index.css">

  <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/css/global.css">

  <link rel="stylesheet/less" type="text/css"
    href="modules/servers/zjmfcloud/templates/server_innerpage/css/index.less" />

  <link rel="stylesheet" href="modules/servers/zjmfcloud/templates/server_innerpage/lib/sweetalert/sweetalert2.min.css">

  <link rel="stylesheet/less" type="text/css"
    href="modules/servers/zjmfcloud/templates/server_innerpage/css/used.less" />

  <link rel="stylesheet/less" type="text/css"
    href="modules/servers/zjmfcloud/templates/server_innerpage/css/chart.less" />
  <style>
    [v-cloak] {
      display: none
    }
  </style>
  <script>
    window.onload = function () {
      if (document.body.clientWidth < 1000) {
        setTimeout(() => {
          document.getElementsByClassName('server_right_box')[0].style.minHeight = 'auto'
          if (parent.document.getElementsByTagName("iframe")[0] && document.body.clientWidth > 600) {
            parent.document.getElementsByTagName("iframe")[0].style.height = document.body.scrollHeight + 416 *
              3 + 'px';
          }
          if (document.body.clientWidth < 400 && parent.document.getElementsByTagName("iframe")[0]) {
            parent.document.getElementsByTagName("iframe")[0].style.height = document.body.scrollHeight + 550 *
              3 + 'px';

          }


        })
      }
    }

    {$js}
  </script>
</head>

<body>
 
  <div id="app" v-cloak>
    <div class="box">

      <el-row :gutter="20">

        <!-- start: 头部区域 -->

        <el-col :span="24">

          <el-row class="server_header_box mb-20">

            <div class="h-100 flexc-v fl header_box_left product-head">

              <!-- 产品名称 状态等 -->

              <div class="h-100 flexc-v domain ">
                <el-tooltip effect="light" placement="top" :content="powerStatus.des"
                  v-if="moduleData.control_view.module_power_status">

                  <div class="box_left_img flexc cursor-pointer" @click="handlePowerStatus">

                    <span class="el-icon-loading" v-if="powerStatus.status === 'process' || powerLoading"
                      style="font-size:20px;color: #4a7ffc;"></span>

                    <span class="sprite start" v-else-if="powerStatus.status === 'on'"></span>

                    <span class="sprite close" v-else-if="powerStatus.status === 'off'"></span>

                    <span class="sprite waitOn" v-else-if="powerStatus.status === 'waiting'"></span>

                    <span class="sprite pause" v-else-if="powerStatus.status === 'suspend'"></span>

                    <span class="sprite waiting"
                      v-else-if="powerStatus.status === 'wait_reboot' || powerStatus.status === 'wait'"></span>

                    <span class="sprite unknown" v-else-if="powerStatus.status === 'unknown'"></span>

                    <span class="sprite-paused" v-else-if="powerStatus.status === 'paused'"></span>

                    <span v-else-if="powerStatus.status === 'hot_migrate'" class="hot-migrate">
                      <i class="iconfont icon-shujuqianyi"></i>
                    </span>
                    <span v-else-if="powerStatus.status === 'cold_migrate'" class="hot-migrate cold-migrate">
                      <i class="iconfont icon-shujuqianyi"></i>
                    </span>
                  </div>

                </el-tooltip>

                <!-- module_power_status:false 时, 显示产品状态图标 -->

                <el-tooltip effect="light" placement="top" :content="baseData.host_data.domainstatus_desc" v-else>

                  <div class="box_left_img flexc">

                    <span v-if="baseData.host_data.domainstatus === 'Fraud'" class="sprite2 Fraud"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Pending'" class="sprite2 Pending"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Deleted'" class="sprite2 Deleted"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Cancelled'" class="sprite2 Cancelled"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Active'" class="sprite2 Active"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Suspended'" class="sprite2 Suspended"></span>

                  </div>

                </el-tooltip>

                <div class="box_left_host ml-20">

                  <div class="left_host_name mb-10 flexc-v">

                    <label>{{baseData.host_data.productname}}</label>

                    <span class="ml-10"
                      :class="baseData.host_data.domainstatus">{{baseData.host_data.domainstatus_desc}}</span>

                  </div>

                  <div class="left_host_domain">{{baseData.host_data.domain}}</div>

                </div>

              </div>



              <!-- 配置项: 5:操作系统 6:CPU  8:内存 -->

              <div class="box_left_wrap" v-for="(item, index) in baseData.config_options" :key="'headerconfig' + index"
                v-show="[5, 6, 8].includes(item.option_type)">

                <div class="mb-10 main_name"><img v-if="item.option_type === 5"
                    :src=" 'modules/servers/zjmfcloud/templates/server_innerpage/image/icon/' +item.sub_img_name + '.svg'"
                    alt="" style="height: 20px;margin-right: 5px;">{{item.sub_name}}</div>

                <div class="sub_name">

                  <i class="el-icon-s-tools" v-if="item.option_type === 5"></i>

                  <i class="el-icon-cpu" v-if="item.option_type === 6"></i>

                  <i class="iconfont icon-Rectanglex fz-12" v-if="item.option_type === 8"></i>
                  {{item.name}}
                </div>

              </div>



              <!-- IP -->

              <div class="box_left_wrap">

                <el-popover class="mb-10" placement="right" trigger="hover"
                  :disabled="(baseData.host_data.assignedips.length !== 0 && baseData.host_data.dedicatedip) ? false : true">

                  <ul style="list-style: none;padding: 0;color: #333333;">

                    <li v-for="(ipitem, ipindex) in baseData.host_data.assignedips" :key="'ip' + ipindex"
                      @mouseover="ipitem.color = '#2f54ea'" :style="{color: ipitem.color}">

                      <span style="margin-right: 5px">{{ipitem.ip}}</span>

                      <i class="iconfont icon-fuzhiyemian cursor-pointer" :ref="ipitem.guid"
                        @click="clickCopy(ipitem.guid)" @mouseenter="clickCopy(ipitem.guid)"
                        :data-clipboard-text="ipitem.ip"></i>

                    </li>

                  </ul>

                  <span class="main_name" slot="reference" style="cursor: pointer;marginRight:5px;">

                    {{baseData.host_data.dedicatedip ? (baseData.host_data.dedicatedip + (baseData.host_data.assignedips.length ? '(' + baseData.host_data.assignedips.length + ')' :'')) : '-'}}

                    <i class="iconfont icon-fuzhiyemian cursor-pointer" :ref="baseData.host_data.dedicatedip"
                      @click="clickCopy(baseData.host_data.dedicatedip)"
                      @mouseenter="clickCopy(baseData.host_data.dedicatedip)"
                      :data-clipboard-text="baseData.host_data.dedicatedip" style="font-weight: normal"></i>

                  </span>

                </el-popover>

                <div class="sub_name mt-10">

                  {{lang.zjmf_client_ipaddressNum}}

                </div>

              </div>

              <!-- 配置项: 5:操作系统 6:CPU  8:内存 -->

              <div class="box_left_wrap" v-for="(item, index) in baseData.config_options" :key="'headerconfig' + index"
                v-show="[9,10].includes(item.option_type)&&((item.option_type==9&&baseData.nat.nat_acl!=-1)||(item.option_type==10&&baseData.nat.nat_web!=-1))">

                <div class="mb-10 main_name">{{item.sub_name}}</div>

                <div class="sub_name">
                  {{item.name}}
                </div>

              </div>

              <div class="box_left_wrap">
                <el-button class="mr-10 custom-button"
                  v-if="moduleData.module_button.console.length === 1 &&powerStatus.status !== 'paused'"
                  @click="consoleHandleCommand(moduleData.module_button.console[0].name + '-' + moduleData.module_button.console[0].func + '-' + moduleData.module_button.console[0].type)"
                  style="margin-right: 10px;">{{moduleData.module_button.console[0].name}}</el-button>
              </div>


            </div>

            <div class="h-100 flexc-v fl header_box_left product-head-small">

              <!-- 产品名称 状态等 -->

              <div class="h-100 flexc-v domain ">

                <el-tooltip effect="light" placement="top" :content="powerStatus.des"
                  v-if="moduleData.control_view.module_power_status">

                  <div class="box_left_img flexc cursor-pointer" @click="handlePowerStatus">

                    <span class="el-icon-loading" v-if="powerStatus.status === 'process' || powerLoading"
                      style="font-size:20px;color: #4a7ffc;"></span>

                    <span class="sprite start" v-else-if="powerStatus.status === 'on'"></span>

                    <span class="sprite close" v-else-if="powerStatus.status === 'off'"></span>

                    <span class="sprite waitOn" v-else-if="powerStatus.status === 'waiting'"></span>

                    <span class="sprite pause" v-else-if="powerStatus.status === 'suspend'"></span>

                    <span class="sprite waiting"
                      v-else-if="powerStatus.status === 'wait_reboot' || powerStatus.status === 'wait'"></span>

                    <span class="sprite unknown" v-else-if="powerStatus.status === 'unknown'"></span>
                    <span class="sprite-paused" v-else-if="powerStatus.status === 'paused'"></span>
                    <span v-else-if="powerStatus.status === 'hot_migrate'" class="hot-migrate">
                      <i class="iconfont icon-shujuqianyi"></i>
                    </span>
                    <span v-else-if="powerStatus.status === 'cold_migrate'" class="hot-migrate cold-migrate">
                      <i class="iconfont icon-shujuqianyi"></i>
                    </span>
                  </div>

                </el-tooltip>

                <!-- module_power_status:false 时, 显示产品状态图标 -->

                <el-tooltip effect="light" placement="top" :content="baseData.host_data.domainstatus_desc" v-else>

                  <div class="box_left_img flexc">

                    <span v-if="baseData.host_data.domainstatus === 'Fraud'" class="sprite2 Fraud"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Pending'" class="sprite2 Pending"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Deleted'" class="sprite2 Deleted"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Cancelled'" class="sprite2 Cancelled"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Active'" class="sprite2 Active"></span>

                    <span v-else-if="baseData.host_data.domainstatus === 'Suspended'" class="sprite2 Suspended"></span>

                  </div>

                </el-tooltip>

                <div class="box_left_host ml-20 " style="min-width: 235px;">

                  <div class="left_host_name mb-10 flexc-v">

                    <label>{{baseData.host_data.productname}}</label>

                    <span class="ml-10"
                      :class="baseData.host_data.domainstatus">{{baseData.host_data.domainstatus_desc}}</span>

                  </div>

                  <div class="left_host_domain">{{baseData.host_data.domain}}</div>

                </div>

              </div>

              <!-- IP -->

              <div class="box_left_wrap">

                <el-popover class="mb-10" placement="right" trigger="hover"
                  :disabled="(baseData.host_data.assignedips.length !== 0 && baseData.host_data.dedicatedip) ? false : true">

                  <ul style="list-style: none;padding: 0;color: #333333;">

                    <li v-for="(ipitem, ipindex) in baseData.host_data.assignedips" :key="'ip' + ipindex"
                      @mouseover="ipitem.color = '#2f54ea'" :style="{color: ipitem.color}">

                      <span style="margin-right: 5px">{{ipitem.ip}}</span>

                      <i class="iconfont icon-fuzhiyemian cursor-pointer" :ref="ipitem.guid"
                        @click="clickCopy(ipitem.guid)" @mouseenter="clickCopy(ipitem.guid)"
                        :data-clipboard-text="ipitem.ip"></i>

                    </li>

                  </ul>

                  <span class="main_name" slot="reference" style="cursor: pointer;marginRight:5px;">

                    {{baseData.host_data.dedicatedip ? (baseData.host_data.dedicatedip + (baseData.host_data.assignedips.length ? '(' + baseData.host_data.assignedips.length + ')' :'')) : '-'}}

                    <i class="iconfont icon-fuzhiyemian cursor-pointer" :ref="baseData.host_data.dedicatedip"
                      @click="clickCopy(baseData.host_data.dedicatedip)"
                      @mouseenter="clickCopy(baseData.host_data.dedicatedip)"
                      :data-clipboard-text="baseData.host_data.dedicatedip" style="font-weight: normal"></i>

                  </span>

                </el-popover>

                <div class="sub_name mt-10">

                  {{lang.zjmf_client_ipaddressNum}}

                </div>

              </div>

              <!-- 配置项: 5:操作系统 6:CPU  8:内存 -->

              <div class="box_left_wrap" v-for="(item, index) in baseData.config_options" :key="'headerconfig' + index"
                v-show="[ 6,8].includes(item.option_type)">

                <div class="mb-10 main_name">{{item.sub_name}}</div>

                <div class="sub_name">

                  <i class="el-icon-s-tools" v-if="item.option_type === 5"></i>

                  <i class="el-icon-cpu" v-if="item.option_type === 6"></i>

                  <i class="iconfont icon-Rectanglex fz-12" v-if="item.option_type === 8"></i>
                  {{item.name}}
                </div>

              </div>

              <!-- 配置项: 5:操作系统 6:CPU  8:内存 -->

              <div style="margin-left: 69px;min-width: 235px;" class="box_left_wrap"
                v-for="(item, index) in baseData.config_options" :key="'headerconfig' + index"
                v-show="[ 9].includes(item.option_type)&&(item.option_type==9&&baseData.nat.nat_acl!=-1)">

                <div class="mb-10 main_name">{{item.sub_name}}</div>
                <div class="sub_name">
                  {{item.name}}
                </div>

              </div>
              <div class="box_left_wrap" v-for="(item, index) in baseData.config_options" :key="'headerconfig' + index"
                v-show="[10].includes(item.option_type)&&(item.option_type==10&&baseData.nat.nat_web!=-1)">

                <div class="mb-10 main_name">{{item.sub_name}}</div>

                <div class="sub_name">
                  {{item.name}}
                </div>

              </div>

              <!-- 配置项: 5:操作系统 6:CPU  8:内存 -->

              <div class="box_left_wrap os-system" style="margin-left: 69px;min-width: 235px;"
                v-for="(item, index) in baseData.config_options" :key="'headerconfig' + index"
                v-show="[5].includes(item.option_type)">

                <div class="mb-10 main_name"><img
                    :src=" 'modules/servers/zjmfcloud/templates/server_innerpage/image/icon/' +item.sub_img_name + '.svg'"
                    alt="" style="height: 20px;margin-right: 5px;">{{item.sub_name}}</div>

                <div class="sub_name">

                  <i class="el-icon-s-tools" v-if="item.option_type === 5"></i>
                  {{item.name}}
                </div>

              </div>



              <div class="box_left_wrap">
                <el-button class="mr-10 custom-button"
                  v-if="moduleData.module_button.console.length === 1&&powerStatus.status !== 'paused'"
                  @click="consoleHandleCommand(moduleData.module_button.console[0].name + '-' + moduleData.module_button.console[0].func + '-' + moduleData.module_button.console[0].type)"
                  style="margin-right: 10px;">{{moduleData.module_button.console[0].name}}</el-button>
              </div>


            </div>

          </el-row>

        </el-col>

        <!-- end: 头部区域 -->



        <div class="server-content">

          <!-- start: 左边内容 -->

          <div class="server_left">

            <div class="server_left_box">

              <!-- 登录信息 订购流量 -->

              <div class="left_box_row1 mb-10 ">

                <div>

                  <label class="box_row1_label"
                    style="font-size: 12px;color: #999;display: inline-block;width: 60px;text-align-last: justify;">{{lang.zjmf_client_username}}:</label>

                  <span class="ml-10" style="font-size: 12px;color: #333;">{{baseData.host_data.username}}</span>

                </div>

                <div class="flexc-v">

                  <label
                    style="font-size: 12px;color: #999;display: inline-block;width: 60px;text-align-last: justify;">{{lang.zjmf_layer_content_password}}:</label>

                  <div class="flexc-v">

                    <span class="ml-10" v-if="showpassword" style="font-size: 12px;color: #333;">*********</span>
                    <span class="ml-10" v-else
                      style="font-size: 12px;color: #333;">{{baseData.host_data.password}}</span>
                    <i class="el-icon-view ml-10" @click="showpassword = !showpassword"
                      style="color: #506cfe;cursor: pointer;"></i>
                    <i class="iconfont icon-fuzhiyemian ml-10 cursor-pointer" :ref="baseData.host_data.password"
                      :data-clipboard-text="baseData.host_data.password" @click="clickCopy(baseData.host_data.password)"
                      style="color: #506cfe"></i>
                    <span class="ml-10 el-icon-edit btn-opera-password-small" v-if="powerStatus.status !== 'paused'"
                      style="color: #506cfe;cursor: pointer;"
                      @click="controlHandleCommand(lang.zjmf_api_crackpass+'-crack_pass-default')"></span>
                  </div>

                </div>
                <div class="flexc-v" v-if="baseData.host_data.panel_pass">

                  <label
                    style="font-size: 12px;color: #999;display: inline-block;width: 60px;text-align-last: justify;">{{lang.zjmf_layer_panel_pass}}:</label>

                  <div class="flexc-v">

                    <span class="ml-10" v-if="showpanelpassword" style="font-size: 12px;color: #333;">*********</span>
                    <span class="ml-10" v-else
                      style="font-size: 12px;color: #333;">{{baseData.host_data.panel_pass}}</span>
                    <i class="el-icon-view ml-10" @click="showpanelpassword = !showpanelpassword"
                      style="color: #506cfe;cursor: pointer;"></i>
                    <i class="iconfont icon-fuzhiyemian ml-10 cursor-pointer" :ref="baseData.host_data.panel_pass"
                      :data-clipboard-text="baseData.host_data.panel_pass"
                      @click="clickCopy(baseData.host_data.panel_pass)" style="color: #506cfe"></i>
                  </div>

                </div>
                <div>

                  <label
                    style="font-size: 12px;color: #999;display: inline-block;width: 60px;text-align-last: justify;">{{lang.zjmf_client_port}}:</label>

                  <span class="ml-10"
                    style="font-size: 12px;color: #333;">{{baseData.host_data.port || lang.zjmf_client_default}}</span>

                </div>
                <!-- 流量重置信息 -->

                <div v-if="baseData.host_data.bwlimit">
                  <div>
                    <label style="font-size: 12px;color: #999;display: inline-block;width: 70px;text-align-last:
                   justify;">{{lang.zjmf_traffic_reset_day}}:</label>

                    <span class="ml-10"
                      style="font-size: 12px;color:
                   #333;">{{lang.zjmf_traffic_reset_day_month}}{{baseData.host_data.reset_flow_day}}{{lang.zjmf_traffic_reset_day_day}}</span>
                  </div>

                  <div>
                    <label style="font-size: 12px;color: #999;display: inline-block;width: 60px;text-align-last:
                   justify;">{{lang.zjmf_used_traffic}}:</label>

                    <span class="ml-10"
                      style="font-size: 12px;color: #333;">{{(baseData.host_data.bwusage/1024).toFixed(2)}}GB
                    </span>


                  </div>
                  <div>
                    <label style="font-size: 12px;color: #999;display: inline-block;width: 60px;text-align-last:
                   justify;">{{lang.zjmf_surplus}}:</label>

                    <span class="ml-10" style="font-size: 12px;color:
                    #333;">{{((baseData.host_data.bwlimit - baseData.host_data.bwusage)/1024).toFixed(2)}}GB
                    </span>
                  </div>
                  <div>
                    <el-progress :percentage="baseData.host_data.progress"></el-progress>
                  </div>
                </div>
                <!-- 操作按钮 -->

                <div class="btn-opera mt-20 btn-opera-password" v-if="powerStatus.status !== 'paused'"
                  @click="controlHandleCommand(lang.zjmf_api_crackpass+'-crack_pass-default')">
                  {{lang.zjmf_api_crackpass}}</div>

              </div>

              <!-- 操作按钮 -->

              <div class="btn-group-opera">
                <template v-for="(item, index) in operaButton" :key="'controlbtn'">
                  <div class="btn-opera mt-10" v-if="
                (powerStatus.status !== 'paused'&&item.func!=='unpaused')||
                (powerStatus.status === 'paused'&&['unpaused','hard_off'].includes(item.func))
                " @click="controlHandleCommand(item.name + '-' + item.func + '-' + item.type)">{{item.name}}</div>
                </template>
                <div class="btn-opera mt-10" @click="rescue" v-if="baseData.host_data.rescue === 0">
                    {{lang.zjmf_api_rescue}}
                </div>
                <div class="btn-opera mt-10" @click="exit_rescue" v-if="baseData.host_data.rescue === 1">
                    {{lang.zjmf_api_rescue_exit}}
                </div>

              </div>

            </div>

          </div>

          <!-- end: 左边内容 -->



          <!-- start: 右边内容 -->

          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">

            <div class="server_right_box">
              <el-tabs v-model="tabActiveName" @tab-click="getCustom">

                <!-- v-if 导致无法调用子组件方法 v-show 部分产品无法隐藏tab页   -->

                <el-tab-pane :label="lang.zjmf_client_chart" name="1" v-if="isShowTab">

                  <el-row class="mt-10" :gutter="40" style="height: 600px">

                    <el-col :xs="24" :sm="24" :md="24" :lg="12" v-for="(chartItem, chartIndex) in module_chart"
                      :key="'chart' + chartIndex">

                      <div class="chart_title_box">

                        <div class="title">{{chartItem.title}}</div>

                        <div>

                          <el-date-picker :picker-options="pickerOptions" style="width: 175px;" size="mini"
                            v-model="chartItem.start" @change="dateChange(chartItem)" type="datetime"
                            value-format="timestamp" :placeholder="lang.zjmf_client_changedate"></el-date-picker>

                          ~

                          <el-date-picker :picker-options="pickerOptions" style="width: 175px;" size="mini"
                            v-model="chartItem.end" @change="dateChange(chartItem)" type="datetime"
                            value-format="timestamp" :placeholder="lang.zjmf_client_changedate"></el-date-picker>

                        </div>

                      </div>

                      <div style="display: flex;margin-top:10px">

                        <el-select size="mini" v-if="chartItem.disk" v-model="chartItem.value" filterable
                          @change="getChartData(chartItem)">

                          <el-option v-for="disk in chartItem.disk" :label="disk.name" :key="disk.disk_id"
                            :value="disk.disk_id"></el-option>

                        </el-select>

                        <el-select size="mini" v-if="chartItem.flow" v-model="chartItem.value" filterable
                          @change="getChartData(chartItem)">

                          <el-option v-for="flow in chartItem.flow" :label="flow.name" :key="flow.network_id"
                            :value="flow.network_id"></el-option>

                        </el-select>

                      </div>

                      <div class="chart_content_box flexc" :id="chartItem.type + 'ChartBox'">

                        <span v-if="chartItem.loading">

                          <i class="el-icon-loading"></i>{{lang.zjmf_client_loading}}

                        </span>

                      </div>

                    </el-col>

                  </el-row>

                </el-tab-pane>

                <el-tab-pane :label="lang.zjmf_client_usage" name="4" v-if="isShowTab">

                  <el-row>

                    <el-col :span="24">

                      <div class="chart_title_box">

                        <div class="title mr-20">{{lang.zjmf_client_usage_chart}}</div>

                        <div>

                          <!-- value-format="timestamp" -->

                          <el-date-picker :picker-options="pickerOptions" size="mini" type="date"
                            value-format="yyyy-MM-dd" v-model="usedStartTime" @change="dateChangeFlow"
                            :placeholder="lang.zjmf_client_changedate"></el-date-picker>

                          ~

                          <el-date-picker :picker-options="pickerOptions" size="mini" type="date"
                            value-format="yyyy-MM-dd" v-model="usedEndTime" @change="dateChangeFlow"
                            :placeholder="lang.zjmf_client_changedate"></el-date-picker>

                        </div>

                      </div>

                      <div class="chart_content_box" id="usedChartBox"></div>

                    </el-col>

                  </el-row>

                </el-tab-pane>

                <el-tab-pane :label="lang.zjmf_client_snap_backup" name="5"
                  v-if="baseData.nat&&(baseData.nat.backup_num!=-1||baseData.nat.snap_num!=-1)">
                  <div>

                    <embed style="width:100%" height="800" src="clientarea.php?action=productdetails&id={$id}&tpl=snap"
                      type="">

                  </div>

                </el-tab-pane>

                <el-tab-pane :label="lang.zjmf_client_security" name="6">

                  <div>

                    <embed style="width:100%" height="800" src="clientarea.php?action=productdetails&id={$id}&tpl=safe"
                      type="">

                  </div>

                </el-tab-pane>

                <el-tab-pane :label="lang.zjmf_client_setting" name="7">

                  <div>

                    <embed style="width:100%" height="800"
                      src="clientarea.php?action=productdetails&id={$id}&tpl=setting" type="">

                  </div>

                </el-tab-pane>
                
                <!-- ssh -->
                <el-tab-pane :label="lang.zjmf_client_ssh" name="ssh">
                    <div>

                     <embed style="width:100%" height="800" src="clientarea.php?action=productdetails&id={$id}&tpl=ssh"
                      type="">

                   </div>
                </el-tab-pane>
                
                <el-tab-pane :label="lang.zjmf_client_nat_acl" name="nat"
                  v-if="false||baseData.nat&&baseData.nat.nat_acl!=-1">

                  <div>

                    <embed style="width:100%" height="800" src="clientarea.php?action=productdetails&id={$id}&tpl=nat"
                      type="">

                  </div>

                </el-tab-pane>
                <el-tab-pane :label="lang.zjmf_client_nat_web" name="build"
                  v-if="baseData.nat&&baseData.nat.nat_web!=-1">

                  <div>

                    <embed style="width:100%" height="800" src="clientarea.php?action=productdetails&id={$id}&tpl=build"
                      type="">

                  </div>

                </el-tab-pane>

              </el-tabs>

            </div>

          </el-col>

          <!-- end: 右边内容 -->

        </div>



      </el-row>



      <!-- 重装系统弹窗 -->

      <el-dialog :title="lang.zjmf_api_reinstall" :visible.sync="reinstallDialog" width="600px" @open="getOsData"
        @closed="reinstallClosed">


        <el-form class="mt-20 reinstall-form" ref="reinstallForm" :model="reinstallFormData" :rules="reinstallFormDataRules"
          :label-width="minScreen?0:'140px'" style="padding:0 20px">
          <el-form-item :label="lang.zjmf_client_os" prop="osVal">
            <el-row type="flex" class="system-kvs">
              <el-col xs="24" sm="12" class="mb-10" v-if="cloudOsGroupOptions && cloudOsGroupOptions.length > 0"
                style="padding-right: 10px;">

                <el-select v-model="reinstallFormData.groupVal" placeholder="" @change="osGroupChange"
                  style="width: 232px;">

                  <template slot="prefix"><img
                      :src=" 'modules/servers/zjmfcloud/templates/server_innerpage/image/icon/' +osSvgSelected + '.svg'"
                      alt="" style="height: 20px;margin-right: 5px;"></template>

                  <el-option v-for="item in cloudOsGroupOptions" :key="'reinstallosgroup' + item.id" :label="item.name"
                    :value="item.id" style="display: flex;
                      align-items: center;">
                    <img :src="'modules/servers/zjmfcloud/templates/server_innerpage/image/icon/' + item.name + '.svg'"
                      alt="" style="height: 20px;marginRight: 10px;">{{item.name}}
                  </el-option>

                </el-select>

              </el-col>
              <el-col xs="24" sm="12">

                <el-select v-model="reinstallFormData.osVal" placeholder="" style="width: 232px;">

                  <el-option v-for="item in filterOsOptions" :key="'reinstallos' + item.id" :label="item.name"
                    :value="item.id">

                    {{item.name}}

                  </el-option>

                </el-select>

              </el-col>

            </el-row>
          </el-form-item>
          
          
          <el-form-item class="creakInput" :label="lang.zjmf_layer_content_password" 
          :prop="reinstallFormData.password_type === 0 ? 'password' : 'ssh_key'"
            style="width: 312px">
           <template slot="label">
            <span>
              <el-select v-model="reinstallFormData.password_type" style="width:110px;" @change="changePassType">
                <el-option :label="lang.zjmf_layer_content_password" :value="0"></el-option>
                <template>
                  <el-option :label="lang.zjmf_client_ssh" :value="1"
                    v-if="baseData.image_group_id !== 1 && baseData.type !== 'hyperv'">
                  </el-option>
                </template>
              </el-select>
            </span>
          </template>
            <el-row style="width: 232px">
              <el-col xs="24" sm="12" class="password" >
               <template v-if="reinstallFormData.password_type === 0">
                    <el-input v-model="reinstallFormData.password"  style="width: 232px" ></el-input>
                    <img class="creakInputRandom"
                      src="modules/servers/zjmfcloud/templates/server_innerpage/image/random.svg" alt=""
                      style="width: 18px;cursor: pointer;margin-left: 10px;" @click="creatCode(12)">
               </template>
                <el-select v-model="reinstallFormData.ssh_key_id" style="width: 232px" v-else>
                  <el-option v-for="item in sshList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-col>
                
            </el-row>
            
          </el-form-item>
          
          
          <el-form-item :label="lang.zjmf_format_data_disk"
            v-if="baseData.setting.format_data_disk&&baseData.host_data.type !== 'hyperv'">
            <el-switch v-model="reinstallFormData.format_data_disk" :active-value="1" :inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="reInstallChecked">{{lang.zjmf_client_backup_ok}}</el-checkbox>
          </el-form-item>

        </el-form>


        <span slot="footer" class="dialog-footer">

          <el-button @click="reinstallDialog = false,reinstallFormData.format_data_disk = 0">
            {{lang.zjmf_layer_cancel}}</el-button>

          <el-button type="primary" @click="saveReinstall" :disabled="!reInstallChecked">{{lang.zjmf_layer_confirm}}
          </el-button>

        </span>

      </el-dialog>

      <!-- 破解密码弹窗 -->

      <el-dialog :title="lang.zjmf_api_crackpass" :visible.sync="crackDialog" width="600px" @close="creakonClose">

        <el-form class="mt-20" ref="crackPassword" :rules="reinstallFormDataRules" :model="crackFrom"
          :label-width="minScreen?0:'140px'" style="padding:0 20px">

          <el-form-item class="creakInput" :label="lang.zjmf_layer_content_password" 
          :prop="crackFrom.password_type === 0 ? 'password' : 'ssh_key_id'">

            <template slot="label">
              <span>
                <el-select v-model="crackFrom.password_type" style="width:110px;" @change="changePassType">
                  <el-option :label="lang.zjmf_layer_content_password" :value="0"></el-option>
                  <template>
                    <el-option :label="lang.zjmf_client_ssh" :value="1"
                      v-if="baseData.image_group_id !== 1 && baseData.type !== 'hyperv'">
                    </el-option>
                  </template>
                </el-select>
              </span>
            </template>
            <template v-if="crackFrom.password_type === 0">
                 <el-input v-model="crackFrom.password" style="width:100% !important"></el-input>

                <img class="creakInputRandom" src="modules/servers/zjmfcloud/templates/server_innerpage/image/random.svg"
                  alt="" style="width: 18px;cursor: pointer;margin-left: 10px;" @click="creatCode(12)">
    
                <i class="el-icon-copy-document creakInputCopy" style="cursor: pointer;" :ref="crackFrom.password"
                  @click="clickCopy(crackFrom.password)" @mouseenter="clickCopy(crackFrom.password)"
                  :data-clipboard-text="crackFrom.password">
                </i>

            </template>    
              <el-select v-model="crackFrom.ssh_key_id" style="width: 316px" v-else>
                <el-option v-for="item in sshList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
           
          </el-form-item>
          
          <template v-if="powerStatus.status!=='off'">
            <div class="tag-danger">
              <span class="title">{{lang.zjmf_clients_repassword_1}}</span>
              <ul>
                <li>{{lang.zjmf_clients_repassword_2}}</li>
                <li>{{lang.zjmf_clients_repassword_3}}</li>
              </ul>
            </div>
            <el-form-item v-if="status!=='off'" :label="lang.zjmf_clients_repassword_4" prop="agree"
              label-width="120px">
              <el-checkbox v-model="crackFrom.agree">{{lang.zjmf_clients_repassword_5}}</el-checkbox>
            </el-form-item>
          </template>
        </el-form>

        <div slot="footer" class="dialog-footer">

          <el-button size="small" type="primary" @click="saveCrack" :loading="btnLoading">{{lang.zjmf_layer_confirm}}
          </el-button>

        </div>

      </el-dialog>

      <!-- 救援系统 -->
        <el-dialog :title="lang.zjmf_api_rescue" :visible.sync="rescueDialog" width="600px" @close="rescueonClose">
          <el-form class="mt-20" ref="rescueFrom" :rules="rescueFormDataRules" :model="rescueFrom"
            :label-width="minScreen?0:'80px'" style="padding:0 20px">
            <el-form-item :label="lang.zjmf_layer_rescue_type" prop="type" label-width="120px">
              <el-select v-model="rescueFrom.type">
                <!--<template slot="prefix" style="line-height: 20px;" class="f-center">-->
                <!--  <img :src="'modules/servers/zjmfcloud/templates/server_innerpage/image/icon/' + rescueFrom.type + '.svg'" alt=""-->
                <!--    style="height: 20px;marginRight: 10px;line-height:20px" class="f-center" />-->
                <!--</template>-->
                <el-option label="Windows(中文版)" :value="1">
                  <!--<div class="select_box" style="display: flex; align-items: center;">-->
                  <!--     <img :src="'modules/servers/zjmfcloud/templates/server_innerpage/image/icon/1.svg'"-->
                  <!--    alt="" style="height: 20px;marginRight: 10px;">-->
                  <!--    Windows-->
                  <!--</div>-->
                </el-option>
                <el-option label="Linux" :value="2">
                  <!--<div class="select_box" style="display: flex; align-items: center;">-->
                  <!--   <img :src="'modules/servers/zjmfcloud/templates/server_innerpage/image/icon/2.svg'"-->
                  <!--    alt="" style="height: 20px;marginRight: 10px;">Linux-->
                  <!--</div>-->
                </el-option>
                <el-option label="Windows(English)" :value="3">
                  <!--<div class="select_box" style="display: flex; align-items: center;">-->
                  <!--   <img :src="'modules/servers/zjmfcloud/templates/server_innerpage/image/icon/2.svg'"-->
                  <!--    alt="" style="height: 20px;marginRight: 10px;">Linux-->
                  <!--</div>-->
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="creakInput" :label="lang.zjmf_layer_temp_pass" prop="temp_pass" label-width="120px">
              <el-input v-model="rescueFrom.temp_pass" style="width:100% !important"></el-input>
              <img class="creakInputRandom"
                src="modules/servers/zjmfcloud/templates/server_innerpage/image/random.svg" alt=""
                style="width: 18px;cursor: pointer;margin-left: 10px;" @click="creatCode(12)">
    
              <i class="el-icon-copy-document creakInputCopy" style="cursor: pointer;" :ref="crackFrom.password"
                @click="clickCopy(crackFrom.password)" @mouseenter="clickCopy(crackFrom.password)"
                :data-clipboard-text="crackFrom.password"></i>
    
            </el-form-item>
            <template v-if="powerStatus.status!=='off'">
              <div class="tag-danger" style="padding-bottom: 14px;">
                <span class="title">{{lang.zjmf_onetime_password_please_save}}</span>
              </div>
              <el-form-item v-if="status!=='off'" :label="lang.zjmf_clients_repassword_4" prop="agree"
                label-width="120px">
                <el-checkbox v-model="rescueFrom.agree">{{lang.zjmf_clients_repassword_5}}</el-checkbox>
              </el-form-item>
            </template>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="saveRescue"
              :loading="btnLoading">{{lang.zjmf_layer_confirm}}
            </el-button>
          </div>
        </el-dialog>


    </div>

  </div>


</body>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/less/less.min.js"></script>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/axios/axios.min.js"></script>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/sweetalert/sweetalert2.min.js"></script>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/js/api.js?v=1.0.6"></script>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/js/vue.min.js"></script>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/element/index.js"></script>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/clipboard/clipboard.min.js"></script>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/echart/echarts.js"></script>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/js/index.js?v=1.0.6"></script>

<script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/lang/zh-cn/element-lang.js"></script>
<script src="modules/servers/zjmfcloud/templates/server_innerpage/lib/lang/en-us/element-lang.js"></script>

<script type="text/javascript" charset="utf-8">
    const Element_lang = {
        "en-us": "en",
        "zh-cn": "zhCN",
        "zh-hk": "zhTW"
      }
     window.onload = function (){
      let lang = `{$zjmf_lang}`
      ELEMENT.locale(ELEMENT.lang[Element_lang[lang]])
     }
</script>



</html>