<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.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">{{ cloudData.workplace }}</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="apply_type == 0"
                class="head_right_msg_item apply_wait"
              >待审批</span>
              <span v-if="apply_type == 1" class="head_right_msg_item apply_success">审批通过</span>
              <span v-if="apply_type == -1" class="head_right_msg_item apply_refuse">审批未通过</span>
            </p>
            <p class="head_right_msg_p">
              业务系统名：
              <span class="head_right_msg_item">{{ cloudData.system_name }}</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 }}</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">CPU：</span>
                <div class="params_block_item_val">
                  <span class="val_has_2">最高&nbsp;{{ cloudDteail.one_memory_max }}核</span>
                  <span class="val_has_2">默认&nbsp;{{ cloudDteail.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">{{ 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}}</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">CPU：</span>
                <div class="params_block_item_val">
                  <span class="val_has_2">最高&nbsp;{{ cloudDetailNew.adjust_one_memory_max }}核</span>
                  <span class="val_has_2">默认&nbsp;{{ cloudDetailNew.adjust_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>{{ data1.total }}核</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>{{ data1.remaining }}核</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>{{ data1.total }}GB</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>{{ data1.remaining }}GB</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>{{ data1.total }}GB</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>{{ data1.remaining }}GB</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>{{ data1.total }}</span>
                  </div>
                  <div class="params_chart_msg_item">
                    剩余量
                    <span>{{ data1.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">
            <span v-if="super_status == 0" class="head_right_msg_item apply_wait">待审批</span>
            <span v-if="super_status == 1" class="head_right_msg_item apply_success">审批通过</span>
            <span v-if="super_status == -1" class="head_right_msg_item apply_refuse">审批未通过</span>
          </div>
        </InfoList>
      </div>
      <div
        class="btn_footer"
        v-if="now_user != 0 || (now_user == 0 && apploy_msg.second_level != 0)"
      >
        <el-button
          v-if="now_user == 1 && apploy_msg.first_level == 0"
          class="submit"
          @click="submit"
        >提交资源申请</el-button>
        <el-button
          v-if="now_user == 0 && apploy_msg.second_level != 0"
          class="adjustment"
          @click="adjustment"
        >资源调整</el-button>
        <el-button
          class="adjustment"
          v-if="now_user == 1 && apploy_msg.second_level == 1 && use_uid == ''"
          @click="distribution"
        >分配</el-button>
        <el-button
          v-if="now_user == 2 && apploy_msg.second_level == 0 || now_user == 1 && apploy_msg.first_level == 0"
          class="refuse"
          @click="refuse"
        >拒绝</el-button>
        <el-button
          v-if="now_user == 2 && apploy_msg.second_level == 0"
          class="adjustment"
          @click="pass"
        >通过</el-button>
        <el-button v-if="now_user == 2 && use_uid != ''" 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:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      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"
        }
      ],
      super_status: 0,
      desc:
        "工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：工作区域描述：",
      resourceOverview:
        "当您觉得使用空间不足时，可以选择至服务超市-云资源服务页面的升级现有工作区域来完成配置扩容操作。",
      data1: {
        data: 80,
        text: "CPU已使用",
        total: 0,
        remaining: 0
      },
      data2: {
        data: 60,
        text: "内存已使用",
        total: 0,
        remaining: 0
      },
      data3: {
        data: 40,
        text: "数据盘已使用",
        total: 0,
        remaining: 0
      },
      data4: {
        data: 10,
        text: "容器组已使用",
        total: 0,
        remaining: 0
      },
      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: null,
      tabShow: true,
      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
      },
      use_uid: "",
      could_delete: false,
      apply_id: ""
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["level"]),
    ...mapState(["userInfo"])
  },
  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.query.id || "";
      if (this.use_uid != "") {
        this.getCloudApplication();
      }
    },
    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.$api.workbench
        .setCloudAllocation({ id: this.id, userId: this.user_id })
        .then(response => {
          if (response.data.success == 1) {
            this.$message({
              message: "分配成功",
              type: "success"
            });
            this.$router.push(this.getUrl());
          } else {
            this.$message({
              message: "分配失败",
              type: "error"
            });
          }
        });
    },
    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);
        }
      });
    },
    submit() {
      this.$refs.allotConfirm.getDetail(this.apply_id);
    },
    clickTab() {},
    // 根据列表参数来判断显示什么
    setListWithRole() {
      if (this.now_user == 0) {
        // 普通用户
        if (this.apply_type == 0) {
          // 申请类型0
          let index = this.list_arr.findIndex(
            item => item.title == "资源使用情况："
          );
          this.list_arr.splice(index);
          this.tabShow = false;
        } else if (this.apply_type != 0) {
          // 申请类型1
          this.tabShow = false;
        }
      } else if (this.now_user == 1) {
        // 组织
        if (this.apply_type == 0) {
          // 申请类型
          let index = this.list_arr.findIndex(
            item => item.title == "资源使用情况："
          );
          this.list_arr.splice(index);
        } 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;
        }
      } else if (this.now_user == 2) {
        // 超管
        if (this.apply_type == 0) {
          let index = this.list_arr.findIndex(
            item => item.title == "资源使用情况："
          );
          this.list_arr.splice(index);
          this.tabShow = false;
        } else if (this.apply_type != 0) {
          this.tabShow = false;
        }
      }
      this.activeName = "0";
    },
    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;
        console.log(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.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_leve; //  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;
          this.data1.data = Math.round((count.cpu_total / count.cpu_use) * 100);
          this.data2.total = count.memory_total;
          this.data2.remaining = count.memory_total - count.memory_use;
          this.data2.data = Math.round(
            (count.memory_total / count.memory_use) * 100
          );
          this.data3.total = count.disk_total;
          this.data3.remaining = count.disk_total - count.disk_use;
          this.data3.data = Math.round(
            (count.disk_total / count.disk_use) * 100
          );
          this.data4.total = count.containers_total;
          this.data4.remaining = count.containers_total - count.containers_use;
          this.data4.data = Math.round(
            (count.containers_total / count.containers_use) * 100
          );
        }
        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.cloudDteail.adjust_duration_time = data.adjust_duration_time;
        this.cloudDteail.adjust_one_cpu_max = data.adjust_one_cpu_max;
        this.cloudDteail.adjust_one_cpu_min = data.adjust_one_cpu_min;
        this.cloudDteail.adjust_one_memory_max = data.adjust_one_memory_max;
        this.cloudDteail.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.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;
        this.setListWithRole();
      });
    }
  }
};
</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;
}
.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;
}
.apply_wait {
  color: #ef9433;
}
.apply_refuse {
  color: #e15260;
}
.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>

