<template>
  <!-- 
  apply_id
  user_id
  apply_type
  use_uid
  id
  -->
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
      <el-breadcrumb-item
        :to="{ path: getUrl() }"
      >{{ this.$route.params.level == 1 ? $t('lang.cloud_resources_service') : $t('lang.cloud_resources_management') }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t('lang.cloud_resources_detail') }}</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="require('@/assets/imgs/img_yunziyuan.png')"
            fit="fill"
          ></el-image>
        </div>
        <div class="head_right">
          <div class="head_right_name">
            {{ cloudData.workplace }}
            <span class="head_eng_name">({{ cloudData.namespace }})</span>
          </div>
          <div class="head_right_msg">
            <p class="head_right_msg_p">
              申请用户：
              <span class="head_right_msg_item">{{ cloudData.user_name }}</span>
              联系电话：
              <span class="head_right_msg_item">{{ cloudData.phone }}</span>
              资源申请状态：
              <span
                v-if="apploy_msg.first_level == 0"
                class="head_right_msg_item apply_wait"
              >待审批</span>
              <span
                v-if="apploy_msg.first_level == 1 && apploy_msg.second_level == 0"
                class="head_right_msg_item apply_wait"
              >审批中</span>
              <span
                v-else-if="apploy_msg.first_level == 1 && apploy_msg.second_level == 1"
                class="head_right_msg_item apply_success"
              >审批通过</span>
              <span
                v-else-if="apploy_msg.first_level == -1 || (apploy_msg.first_level == 1 && apploy_msg.second_level == -1)"
                class="head_right_msg_item apply_refuse"
              >审批未通过</span>
            </p>
            <p class="head_right_msg_p">
              工作区域英文名称：
              <span class="head_right_msg_item">{{ cloudData.namespace }}</span>
              资源申请时间：
              <span class="head_right_msg_item">{{ cloudData.apply_time }}</span>
            </p>
          </div>
        </div>
      </div>
      <el-tabs v-if="tabShow" 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">{{ cloudDteail.cpu }}核</span>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">内存：</span>
                <span class="params_block_item_val">{{ cloudDteail.memory }}GB</span>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">容器组：</span>
                <span class="params_block_item_val">{{ cloudDteail.containers }}个</span>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">数据盘：</span>
                <div class="params_block_item_val">
                  <div>{{ cloudDteail.disk != "" ? cloudDteail.disk : "无" }}</div>
                </div>
              </div>
              <!-- <div class="params_block_item_in">
                <span class="params_block_item_title">数据盘类型：</span>
                <div class="params_block_item_val">
                  <div>{{ cloudDteail.store_type }}</div>
                </div>
              </div>-->
              <div class="params_block_item_in">
                <span class="params_block_item_title">申请时长：</span>
                <span class="params_block_item_val">{{ cloudDteail.apply_duration_time }}</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;{{ cloudDteail.one_cpu_max }}核</span>
                  <span class="val_has_2">默认&nbsp;{{ cloudDteail.one_cpu_min }}核</span>
                </div>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">内存：</span>
                <div class="params_block_item_val">
                  <span class="val_has_2">最高&nbsp;{{ cloudDteail.one_memory_max }}G</span>
                  <span class="val_has_2">默认&nbsp;{{ cloudDteail.one_memory_min }}G</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">{{ cloudDetailNew.adjust_cpu }}核</span>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">内存：</span>
                <span class="params_block_item_val">{{ cloudDetailNew.adjust_memory }}GB</span>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">容器组：</span>
                <span class="params_block_item_val">{{ cloudDetailNew.adjust_containers }}个</span>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">数据盘：</span>
                <div class="params_block_item_val">
                  <div>{{ cloudDetailNew.adjust_disk != "" ? cloudDetailNew.adjust_disk : "无"}}</div>
                </div>
              </div>
              <!-- <div class="params_block_item_in">
                <span class="params_block_item_title">数据盘类型：</span>
                <div class="params_block_item_val">
                  <div>{{ cloudDetailNew.store_type }}</div>
                </div>
              </div>-->
              <div class="params_block_item_in">
                <span class="params_block_item_title">续期时长：</span>
                <span class="params_block_item_val">{{ cloudDetailNew.adjust_duration_time }}</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;{{ cloudDetailNew.adjust_one_cpu_max }}核</span>
                  <span class="val_has_2">默认&nbsp;{{ cloudDetailNew.adjust_one_cpu_min }}核</span>
                </div>
              </div>
              <div class="params_block_item_in">
                <span class="params_block_item_title">内存：</span>
                <div class="params_block_item_val">
                  <span class="val_has_2">最高&nbsp;{{ cloudDetailNew.adjust_one_memory_max }}G</span>
                  <span class="val_has_2">默认&nbsp;{{ cloudDetailNew.adjust_one_memory_min }}G</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">
            <div v-if="now_user == 0 && use_uid != ''">
              当您觉得使用空间不足时，可以选择至服务超市-
              <span
                v-if="apploy_msg.state == 1 && (apploy_msg.first_level == -1 || (apploy_msg.first_level == 1 && apploy_msg.second_level != 0))"
                @click="goto(`/shop/cloud?namespace=${cloudData.namespace}`)"
                class="link_span"
              >云资源服务页面</span>
              <span v-else>云资源服务页面</span>的升级现有工作区域来完成配置扩容操作。
            </div>
            <el-row class="params_charts">
              <el-col :span="8" 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>{{ data1.total }}核</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>{{ data1.remaining }}核</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" 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>{{ data2.total }}GB</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>{{ data2.remaining }}GB</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" class="params_col">
                <div class="params_chart">
                  <dashboard ref="chart_4" :data="data3" dangerousValue="high"></dashboard>
                </div>
                <div class="params_chart_msg">
                  <div class="params_chart_msg_item">
                    物理总量
                    <span>{{ data3.total }}</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>{{ data3.remaining }}</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_1">
            <span v-if="super_status == 0" class="head_right_msg_item apply_wait">待审批</span>
            <span v-else-if="super_status == 1" class="head_right_msg_item apply_success">审批通过</span>
            <span v-else-if="super_status == -1" class="head_right_msg_item apply_refuse">审批未通过</span>
          </div>
        </InfoList>
      </div>
      <div class="btn_footer">
        <el-button
          v-if="apploy_msg.state == 1 && now_user == 1 && apploy_msg.first_level == 0"
          class="submit"
          @click="pass"
        >提交资源申请</el-button>
        <el-button
          v-if="now_user == 0 && apploy_msg.state == 1 && use_uid != '' && (apploy_msg.first_level == -1 || (apploy_msg.first_level == 1 && apploy_msg.second_level == -1) || apploy_msg.second_level == 1)"
          class="adjustment"
          @click="adjustment"
        >资源调整</el-button>
        <el-button
          class="adjustment"
          v-if="apploy_msg.state == 1 && now_user == 1 && apploy_msg.second_level == 1 && use_uid == ''"
          @click="distribution"
        >分配</el-button>
        <el-button
          v-if="apploy_msg.state == 1 && ((now_user == 2 && apploy_msg.first_level == 1 && apploy_msg.second_level == 0) || (now_user == 1 && apploy_msg.first_level == 0))"
          class="refuse"
          @click="refuse"
        >拒绝</el-button>
        <el-button
          v-if="apploy_msg.state == 1 && now_user == 2 && apploy_msg.second_level == 0 && apploy_msg.first_level == 1"
          class="adjustment"
          @click="pass"
        >通过</el-button>
        <el-button
          v-if="now_user == 2 && use_uid != '' && !isApprove"
          class="refuse"
          @click="deleteItem"
        >删除</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 {
      id: "",
      url: "",
      helper,
      list_arr: [
        {
          title: "云资源详情",
          prop: "title",
        },
        {
          title: "工作区域申请规格：",
          type: "solt",
          solt_name: "ApplyParams",
        },
        {
          title: "审批通过后工作区域规格：",
          type: "solt",
          solt_name: "ApplyBeforeParams",
        },
        {
          title: "资源申请文件：",
          info: "2.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: "0 金币",
        // },
        {
          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",
        },
      ],
      super_status: 0,
      desc: "",
      data1: {
        data: 0,
        text: "CPU已使用",
        total: 0,
        remaining: 0,
      },
      data2: {
        data: 0,
        text: "内存已使用",
        total: 0,
        remaining: 0,
      },
      data3: {
        data: 0,
        text: "容器组已使用",
        total: 0,
        remaining: 0,
      },
      appListHeaders: [
        {
          label: "应用名称",
          prop: "deploy_name",
          align: "center",
          type: "href",
        },
        {
          label: "应用类型",
          prop: "type_name",
          align: "center",
        },
        {
          label: "应用版本号",
          prop: "app_version",
          align: "center",
        },
        {
          label: "应用部署时间",
          prop: "created",
          align: "center",
        },
      ],
      appList: [],
      now_user: "",
      activeName: null,
      tabShow: false,
      cloudData: {
        namespace: "",
        workplace: "",
        user_name: "",
        phone: "",
        apply_time: "",
        system_name: "",
      },
      cloudDteail: {
        containers: "",
        cpu: "",
        disk: "",
        memory: "",
        apply_duration_time: "",
        one_cpu_max: "",
        one_cpu_min: "",
        one_memory_max: "",
        one_memory_min: "",
      },
      cloudDetailNew: {
        adjust_containers: "",
        adjust_cpu: "",
        adjust_disk: "",
        adjust_memory: "",
        adjust_duration_time: "",
        adjust_one_cpu_max: "",
        adjust_one_cpu_min: "",
        adjust_one_memory_max: "",
        adjust_one_memory_min: "",
      },
      apply_type: 0,
      approve_state: 1,
      approve_update_state: 1,
      apploy_msg: {
        first_level: null,
        second_level: null,
        state: null,
      },
      use_uid: "",
      could_delete: false,
      apply_id: "",
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"]),
    isApprove() {
      return this.$route.query.isApprove == 1;
    },
  },
  created() {
    if (this.userInfo) {
      this.now_user = this.level;
    } else {
      this.getCurrentUser();
    }
  },
  mounted() {
    this.getUrlQuery();
    this.getCloudDetail();
  },
  methods: {
    getUrlQuery() {
      this.apply_id = this.$route.query.apply_id || "";
      this.user_id = this.$route.query.user_id || "";
      this.apply_type = this.$route.query.apply_type || 0;
      this.use_uid = this.$route.query.use_uid || "";
      this.id = this.$route.params.id || "";
      if (this.apply_type != 0) {
        this.list_arr[2].title = "资源调整数据规格：";
      }
    },
    getUrl() {
      return this.$route.path.substring(0, 9);
    },
    getCloudApplication() {
      this.$api.workbench
        .getCloudApplication({ namespace: this.cloudData.namespace })
        .then((response) => {
          if (response.data.success == 1) {
            this.appList = response.data.data;
          } else {
            console.log(response.data.errMsg);
          }
        });
    },
    download() {},
    adjustment() {
      this.$router.push("/shop/cloud");
    },
    distribution() {
      this.$refs.allotConfirm.getDetail(this.apply_id);
    },
    refuse() {
      let query = {
        applyId: this.apply_id,
        applyState: -1,
        applyType: this.apply_type,
        applyCloudId: this.id,
        namespace: this.cloudData.namespace,
      };
      this.$api.workbench.setCloudApproval(query).then((response) => {
        if (response.data.success == 1) {
          this.$message({
            message: "申请已拒绝",
            type: "success",
          });
          this.$router.push(this.getUrl());
        } else {
          this.$message({
            message: "申请拒绝失败",
            type: "error",
          });
        }
      });
    },
    pass() {
      let query = {
        applyId: this.apply_id,
        applyState: 1,
        applyType: this.apply_type,
        applyCloudId: this.id,
        namespace: this.cloudData.namespace,
      };
      this.$api.workbench.setCloudApproval(query).then((response) => {
        if (response.data.success == 1) {
          this.$message({
            message: "申请已通过",
            type: "success",
          });
          this.$router.push(this.getUrl());
        } else {
          this.$message({
            message: "申请通过失败",
            type: "error",
          });
        }
      });
    },
    deleteItem() {
      this.$api.workbench
        .deleteCloud({
          id: this.id,
          namespace: this.cloudData.namespace,
          useUid: this.use_uid,
        })
        .then((response) => {
          if (response.data.success == 1) {
            this.$message({
              message: "该资源已删除",
              type: "success",
            });
            this.$router.push(this.getUrl());
          } else {
            this.$message({
              message: "资源删除失败",
              type: "error",
            });
          }
        });
    },
    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);
        }
      });
    },
    clickTab() {},
    // 根据列表参数来判断显示什么
    setListWithRole() {
      if (this.now_user == 0) {
        // 普通用户
        if (this.use_uid == "") {
          // 没分配
          let index = this.list_arr.findIndex(
            (item) => item.title == "资源使用情况："
          );
          this.list_arr.splice(index);
        }
        if (this.apply_type == 0) {
          // 申请类型0
          this.list_arr.splice(2, 1);
        } else if (this.apply_type != 0) {
          // 申请类型1
        }
        this.tabShow = false;
        this.activeName = "0";
      } else if (this.now_user == 1) {
        // 组织
        if (this.use_uid == "") {
          // 没分配
          let index = this.list_arr.findIndex(
            (item) => item.title == "资源使用情况："
          );
          this.list_arr.splice(index);
        }
        if (this.apply_type == 0) {
          // 申请类型0
          this.list_arr.splice(2, 1);
        } else if (this.apply_type != 0) {
        }
        if (this.apploy_msg.first_level == 0) {
          // 没审批
          this.tabShow = false;
        } else if (this.apploy_msg.first_level != 0) {
          // 组织审批了
          this.tabShow = true;
          this.list_arr.splice(0, 1);
        }
        this.activeName = "0";
      } else if (this.now_user == 2) {
        // 超管
        if (this.use_uid == "") {
          // 没分配
          let index = this.list_arr.findIndex(
            (item) => item.title == "资源使用情况："
          );
          this.list_arr.splice(index);
        }
        if (this.apply_type == 0) {
          // 申请类型0
          this.list_arr.splice(2, 1);
        } else if (this.apply_type != 0) {
        }
        this.tabShow = false;
        this.activeName = "0";
      }

      /**
       * 资源调整通过后，"工作区域申请规格"会同步"审批通过后工作区域规格"信息，届时需要隐藏掉"审批通过后工作区域规格"
       * add by xuym
       * */

      if (
        this.apploy_msg.first_level == 1 &&
        this.apploy_msg.second_level == 1
      ) {
        let index = this.list_arr.findIndex(
          (item) => item.title == "审批通过后工作区域规格："
        );
        if (index > -1) {
          this.list_arr.splice(index, 1);
        }

        let index2 = this.list_arr.findIndex(
          (item) => item.title == "资源调整数据规格："
        );
        if (index2 > -1) {
          this.list_arr.splice(index2, 1);
        }
      }
      if (this.appList.length == 0) {
        this.list_arr.splice(-2);
      }
    },
    getCloudDetail() {
      let query = {
        type: this.apply_type,
        applyId: this.apply_id,
        id: this.id,
      };
      this.$api.workbench.getCloudDetail(query).then((response) => {
        let data = response.data.data;
        if (data) {
          this.list_arr[3].info = helper.downloadFileFormat(
            data.apply_file ? data.apply_file : ""
          ); //  application file name
          this.list_arr[3].url = data.apply_file; //  application file url
          this.list_arr[6].info = data.bgn_time; //  get time
          this.list_arr[7].info = data.time_remaining; //  remaining days
          // this.list_arr[8].info = data.total_money;
          this.list_arr[8].info = data.end_time; //  maturity time
          this.list_arr_my[0].info = data.first_level_time || "暂未提交"; //  submit application time
          this.list_arr_my[1].info = data.second_level_time || "暂未获取"; //  super get time
          this.super_status = data.second_level; //  super status
          this.desc = data.workplacedesc; //  workplace description
          let count = data.cloud_resource_count; //  resource usage
          if (count) {
            this.data1.total = count.cpu_total;
            this.data1.remaining = (count.cpu_total - count.cpu_use).toFixed(2);
            if (count.cpu_total != 0 && count.cpu_use != 0) {
              this.data1.data = Math.round(
                (count.cpu_use / count.cpu_total) * 100
              );
            } else {
              this.data1.data = 0;
            }
            this.data2.total = count.memory_total;
            this.data2.remaining = (
              count.memory_total - count.memory_use
            ).toFixed(2);
            if (count.memory_total != 0 && count.memory_use != 0) {
              this.data2.data = Math.round(
                (count.memory_use / count.memory_total) * 100
              );
            } else {
              this.data2.data = 0;
            }
            this.data3.total = count.containers_total;
            this.data3.remaining = (
              count.containers_total - count.containers_use
            ).toFixed(2);
            if (count.containers_total != 0 && count.containers_use != 0) {
              this.data3.data = Math.round(
                (count.containers_use / count.containers_total) * 100
              );
            } else {
              this.data3.data = 0;
            }
          } else {
            let index = this.list_arr.findIndex(
              (item) => item.title == "资源使用概况："
            );
            this.list_arr.splice(index, 1);
          }

          this.cloudDteail.containers = data.containers;
          this.cloudDteail.cpu = data.cpu;
          this.cloudDteail.disk = data.disk;
          this.cloudDteail.memory = data.memory;
          this.cloudDteail.apply_duration_time = data.apply_duration_time;
          this.cloudDteail.one_cpu_max = data.one_cpu_max;
          this.cloudDteail.one_cpu_min = data.one_cpu_min;
          this.cloudDteail.one_memory_max = data.one_memory_max;
          this.cloudDteail.one_memory_min = data.one_memory_min;

          this.cloudDetailNew.adjust_containers = data.adjust_containers;
          this.cloudDetailNew.adjust_cpu = data.adjust_cpu;
          this.cloudDetailNew.adjust_disk = data.adjust_disk;
          this.cloudDetailNew.adjust_memory = data.adjust_memory;
          this.cloudDetailNew.adjust_duration_time = data.adjust_duration_time;
          this.cloudDetailNew.adjust_one_cpu_max = data.adjust_one_cpu_max;
          this.cloudDetailNew.adjust_one_cpu_min = data.adjust_one_cpu_min;
          this.cloudDetailNew.adjust_one_memory_max =
            data.adjust_one_memory_max;
          this.cloudDetailNew.adjust_one_memory_min =
            data.adjust_one_memory_min;

          this.apploy_msg.first_level = data.first_level;
          this.apploy_msg.second_level = data.second_level;
          this.apploy_msg.state = data.state;

          this.cloudData.namespace = data.namespace;
          this.cloudData.workplace = data.workplace;
          this.cloudData.user_name = data.user_name;
          this.cloudData.phone = data.phone;
          this.cloudData.apply_time = data.apply_time;
          this.cloudData.system_name = data.system_name;
        }

        if (this.use_uid != "") {
          this.getCloudApplication();
        }
        this.setListWithRole();
      });
    },
    goto(path) {
      this.$router.push(path);
    },
  },
};
</script>
<style scoped>
.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;
  border: 4px #f4f7fc solid;
}
.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_eng_name {
  font-size: 17px;
  font-weight: normal;
  color: #0d1847;
  margin-left: 10px;
}
.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;
}
.apply_wait {
  color: #ef9433;
}
.apply_refuse {
  color: #e15260;
}
.cloud_params {
  padding-left: 10px;
}
.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_apply_desc_1 {
  margin: 5px 0;
  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: 40%;
  position: absolute;
  bottom: 0;
  left: 30%;
}
.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;
}
.link_span {
  color: #515fe7;
  text-decoration: underline;
  cursor: pointer;
}
</style>
<style>
.params_tabs .el-tabs__header {
  margin: 20px 0;
}
</style>

