<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>
      <el-tabs v-model="activeName" class="params_tabs" @tab-click="clickTab">
        <el-tab-pane label="用户申请信息" name="0"></el-tab-pane>
        <el-tab-pane label="我的申请信息" name="1"></el-tab-pane>
      </el-tabs>
      <div v-if="activeName=='0'" 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>
                <div class="params_block_item_val">
                  <div>{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB</div>
                </div>
              </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>
            <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="ApplyBeforeParams" slot="ApplyBeforeParams" 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>
                <div class="params_block_item_val">
                  <div>{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB</div>
                </div>
              </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>
            <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" class="params_apply_desc">{{ desc }}</div>
          <div ref="ResourceOverview" slot="ResourceOverview" class="params_resource_overview">
            {{ resourceOverview }}
            <el-row class="params_charts">
              <el-col :span="6" class="params_col">
                <div class="params_chart">
                  <dashboard ref="chart_1" :data="data1" dangerousValue="high"></dashboard>
                </div>
                <div class="params_chart_msg">
                  <div class="params_chart_msg_item">
                    物理总量
                    <span>1632核</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>1632核</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="6" class="params_col">
                <div class="params_chart">
                  <dashboard ref="chart_2" :data="data2" dangerousValue="high"></dashboard>
                </div>
                <div class="params_chart_msg">
                  <div class="params_chart_msg_item">
                    物理总量
                    <span>1632核</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>1632核</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="6" class="params_col">
                <div class="params_chart">
                  <dashboard ref="chart_3" :data="data3" dangerousValue="high"></dashboard>
                </div>
                <div class="params_chart_msg">
                  <div class="params_chart_msg_item">
                    物理总量
                    <span>1632核</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>1632核</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="6" class="params_col">
                <div class="params_chart">
                  <dashboard ref="chart_4" :data="data4" dangerousValue="high"></dashboard>
                </div>
                <div class="params_chart_msg">
                  <div class="params_chart_msg_item">
                    物理总量
                    <span>1632核</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>1632核</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div ref="AppList" slot="AppList">
            <table-um
              ref="AppListTable"
              :headers="appListHeaders"
              :stripe="true"
              :datas="appList"
              height="260"
              detailsUrl
            ></table-um>
          </div>
        </InfoList>
      </div>
      <div v-if="activeName == '1'" class="my_params">
        <InfoList :list_arr="list_arr_my" class="detail_s_val">
          <div
            ref="ApplicationStatus"
            slot="ApplicationStatus"
            class="params_apply_desc"
          >{{ applicationStatus }}</div>
        </InfoList>
      </div>
      <div class="btn_footer">
        <el-button class="submit" @click="submit">提交资源申请</el-button>
        <el-button class="adjustment" @click="adjustment">资源调整</el-button>
        <el-button class="adjustment" @click="distribution">分配</el-button>
        <el-button class="refuse" @click="refuse">拒绝</el-button>
      </div>
    </BlockRadius>
    <AllotInfoConfirm ref="allotConfirm"></AllotInfoConfirm>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import InfoList from "@/components/infoList";
import helper from "@/services/helper.js";
import Dashboard from "@/components/e-charts/dashboard";
import TableUm from "@/components/table/table-um";
import { mapGetters, mapState } from "vuex";
import AllotInfoConfirm from "@/components/allot-info-confirm";
export default {
  components: {
    BlockRadius,
    InfoList,
    Dashboard,
    TableUm,
    AllotInfoConfirm
  },
  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: "审批通过后工作区域规格：",
          type: "solt",
          solt_name: "ApplyParams"
        },
        {
          title: "资源申请文件：",
          info: "2222222222222222222222.docs",
          url: "",
          type: "down"
        },
        {
          title: "工作区域描述：",
          type: "solt",
          solt_name: "ApplyDesc"
        },
        {
          title: "资源使用情况：",
          prop: "title"
        },
        {
          title: "获取时间：",
          info: "2020-06-02 15:54:21"
        },
        {
          title: "剩余使用天数：",
          info: "1000天"
        },
        {
          title: "到期时间：",
          info: "2020-06-02 15:54:21"
        },
        {
          title: "资源使用概况：",
          type: "solt",
          solt_name: "ResourceOverview"
        },
        {
          title: "已部署应用列表：",
          prop: "title"
        },
        {
          title: "",
          type: "solt",
          solt_name: "AppList"
        }
      ],
      list_arr_my: [
        {
          title: "提交申请时间：",
          info: "2020-06-02 15:54:21"
        },
        {
          title: "获取时间：",
          info: "2020-06-02 15:54:21"
        },
        {
          title: "申请状态：",
          type: "solt",
          solt_name: "ApplicationStatus"
        }
      ],
      applicationStatus: "申请通过",
      desc:
        "工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：",
      resourceOverview:
        "当您觉得使用空间不足时，可以选择至服务超市-云资源服务页面的升级现有工作区域来完成配置扩容操作。",
      data1: {
        data: 80,
        text: "CPU1已使用"
      },
      data2: {
        data: 60,
        text: "CPU2已使用"
      },
      data3: {
        data: 40,
        text: "CPU3已使用"
      },
      data4: {
        data: 10,
        text: "CPU4已使用"
      },
      appListHeaders: [
        {
          label: "应用名称",
          prop: "app_name",
          align: "center",
          type: "href"
        },
        {
          label: "应用类型",
          prop: "app_name",
          align: "center"
        },
        {
          label: "应用版本号",
          prop: "app_name",
          align: "center"
        },
        {
          label: "应用部署时间",
          prop: "app_name",
          align: "center"
        }
      ],
      appList: [
        {
          id: "123",
          app_name: "单文件啊"
        },
        {
          id: "1223",
          app_name: "单文件啊"
        },
        {
          id: "1313",
          app_name: "单文件啊"
        },
        {
          id: "124563",
          app_name: "单文件啊"
        },
        {
          id: "126783",
          app_name: "单文件啊"
        },
        {
          id: "1225673",
          app_name: "单文件啊"
        },
        {
          id: "13134563",
          app_name: "单文件啊"
        },
        {
          id: "12234563",
          app_name: "单文件啊"
        }
      ],
      now_user: "",
      activeName: "0"
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"])
  },
  created() {
    if (this.userInfo) {
      this.now_user = this.level;
    } else {
      this.getCurrentUser();
    }
  },
  mounted() {
    this.getUrl();
    this.setListWithRole();
    this.getCloudDetail();
  },
  methods: {
    getUrl() {
      return this.$route.path.substring(0, 9);
    },
    download() {},
    adjustment() {},
    distribution() {},
    submit() {},
    refuse() {},
    getCurrentUser() {
      this.$api.user.getNowUser().then(({ data }) => {
        if (data.success == 1) {
          this.$store.commit("userInfofun", data.data);
          this.now_user = this.level;
        } else {
          console.log(data.errMsg);
        }
      });
    },
    submit(item) {
      this.$refs.allotConfirm.getDetail(item.apply_id);
    },
    clickTab() {},
    setListWithRole() {
      console.log(this.now_user);
      if (this.now_user == 0) {
        let index = this.list_arr.findIndex(
          item => item.title == "资源使用情况："
        );
        this.list_arr.splice(index);
      } else if (this.now_user == 1) {
      } else if (this.now_user == 2) {
      }
    },
    getCloudDetail() {
      let query = {
        type: 0,
        applyId: 13
      };
      this.$api.workbench.getCloudDetail(query).then(response => {
      });
    }
  }
};
</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;
}
.params_apply_desc {
  margin: 5px 0;
  padding-left: 15px;
  line-height: 26px;
}
.params_resource_overview {
  margin: 5px 0;
  padding-left: 15px;
  line-height: 26px;
}
.params_charts {
  width: 800px;
  height: 200px;
}
.params_col {
  height: 100%;
  position: relative;
}
.params_chart {
  height: 180px;
  padding: 0;
}
.params_chart_msg {
  width: 120px;
  position: absolute;
  bottom: 0;
  left: 40px;
}
.params_chart_msg_item {
  display: flex;
  justify-content: space-between;
  color: #8890a7;
}
.params_chart_msg_item span {
  color: #0d1847;
}
.btn_footer {
  text-align: right;
  margin: 60px 20px 10px;
  position: relative;
}
.submit {
  width: 130px;
  background-color: #0f2683;
  color: #f8f9fd;
  position: absolute;
  left: 20px;
}
.submit:hover {
  background-color: #0f2683;
  color: #f8f9fd;
}
.adjustment {
  width: 100px;
  background-color: #0f2683;
  color: #f8f9fd;
}
.adjustment:hover {
  background-color: #0f2683;
  color: #f8f9fd;
}
.refuse {
  width: 100px;
  background-color: #e15260;
  color: #f8f9fd;
}
.refuse:hover {
  background-color: #e15260;
  color: #f8f9fd;
}
.val_has_2 {
  margin-right: 20px;
}
.my_params p {
  padding: 0 15px;
}
</style>
<style>
.params_tabs .el-tabs__header {
  margin: 20px 0;
}
</style>

