<template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
      <el-breadcrumb-item
        :to="{ path: getUrl() }"
      >{{ this.$route.params.level == 1 ? $t('lang.cloudResourcesService') : $t('lang.cloudResourcesManagement') }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t('lang.cloudResourcesDetail') }}</el-breadcrumb-item>
    </el-breadcrumb>
    <BlockRadius class="in_cloud_block">
      <div class="cloud_block_head">
        <div class="head_left">
          <el-image class="head_left_img" :src="url" fit="fill"></el-image>
        </div>
        <div class="head_right">
          <div class="head_right_name">aPaaS V3.0</div>
          <div class="head_right_msg">
            <p class="head_right_msg_p">
              申请用户：
              <span class="head_right_msg_item">张三</span>
              联系电话：
              <span class="head_right_msg_item">12345678901</span>
              资源申请状态：
              <span
                class="head_right_msg_item"
                :class="true ? 'apply_success' : ''"
              >审批通过</span>
            </p>
            <p class="head_right_msg_p">
              业务系统名：
              <span class="head_right_msg_item">aPaaS V3.0 一期</span>
              资源申请时间：
              <span class="head_right_msg_item">2020-02-12 15:54:21</span>
            </p>
          </div>
        </div>
      </div>
      <div class="cloud_params">
        <InfoList @download="download" :list_arr="list_arr" class="detail_s_val">
          <div ref="ApplyParams" slot="ApplyParams" class="params_block">
            <span class="params_block_title">申请规格：</span>
            <div class="params_block_item">
              <div class="params_block_item_in">
                <span class="params_block_item_title">CPU：</span>
                <span class="params_block_item_val">{{ orderDetail.cpu }}核</span>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">内存：</span>
                <span class="params_block_item_val">{{ orderDetail.memory }}GB</span>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">容器组：</span>
                <span class="params_block_item_val">{{ orderDetail.memory }}核</span>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">数据盘：</span>
                <span
                  class="params_block_item_val"
                >{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB</span>
              </div>
            </div>
            <span class="params_block_title margin_top_20">单个容器组规格：</span>
            <div class="params_block_item">
              <div class="params_block_item_in">
                <span class="params_block_item_title">CPU：</span>
                <div class="params_block_item_val">
                  <span class="val_has_2">最高&nbsp;{{ orderDetail.one_cpu_max }}核</span>
                  <span class="val_has_2">默认&nbsp;{{ orderDetail.one_cpu_min }}核</span>
                </div>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">CPU：</span>
                <div class="params_block_item_val">
                  <span class="val_has_2">最高&nbsp;{{ orderDetail.one_memory_max }}核</span>
                  <span class="val_has_2">默认&nbsp;{{ orderDetail.one_memory_min }}核</span>
                </div>
              </div>
            </div>
          </div>
          <div ref="ApplyDesc" slot="ApplyDesc">
            {{ desc }}
          </div>
        </InfoList>
      </div>
    </BlockRadius>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import InfoList from "@/components/infoList";
import helper from "@/services/helper.js";
export default {
  components: {
    BlockRadius,
    InfoList
  },
  data() {
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      orderDetail: {},
      helper,
      list_arr: [
        {
          title: "云资源详情：",
          prop: "title"
        },
        {
          title: "工作区域申请规格：",
          type: "solt",
          solt_name: "ApplyParams"
        },
        {
          title: "资源申请文件：",
          info: "2222222222222222222222.docs",
          url: "",
          type: "down"
        },
        {
          title: "工作区域描述：",
          type: "solt",
          solt_name: "ApplyDesc",
        }
      ],
      desc: "工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述："
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getUrl();
  },
  methods: {
    getUrl() {
      return this.$route.path.substring(0, 9);
    },
    download() {}
  }
};
</script>
<style>
.in_cloud_block {
  margin: 0 20px;
}
.cloud_block_head {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.head_left {
  width: 150px;
}
.head_left_img {
  width: 144px;
  height: 144px;
  border-radius: 8px;
}
.head_right {
  width: calc(100% - 160px);
}
.head_right_name {
  font-size: 18px;
  font-weight: bold;
  color: #0d1847;
  line-height: 30px;
  margin-left: 10px;
  margin-bottom: 18px;
}
.head_right_msg {
  border-radius: 8px;
  height: 96px;
  background-color: #f6f7fb;
  padding: 10px 20px;
}
.head_right_msg_p {
  font-size: 14px;
  line-height: 38px;
  color: #8890a7;
}
.head_right_msg_item {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  color: #242c43;
  margin-right: 48px;
}
.apply_success {
  color: #515fe7;
}
.cloud_params .service_title {
  padding: 0 10px;
}
.cloud_params p {
  padding: 0 15px;
}
.cloud_params p span {
  display: inline;
  line-height: 21px;
}
.params_block {
  background-color: #f8f9fd;
  border-radius: 8px;
  margin: 10px 0;
  padding: 20px;
  font-size: 14px;
  line-height: 22px;
}
.params_block_title {
  padding-left: 5px;
  color: #242c43;
}
.params_block_item {
  padding: 10px 0 0 0;
}
.params_block_item_in {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.params_block_item_title {
  color: #8890a7;
  width: 80px;
  text-align: right;
}
.params_block_item_val {
  color: #242c43;
  width: calc(100% - 82px);
}
.margin_top_20 {
  display: block;
  margin-top: 20px;
}
</style>
