<template>
  <apass-dialog
    ref="confrim"
    class="allot_info_confirm"
    width="600px"
    title="分配信息确认"
  >
    <template slot="content">
      <div class="confirm_container">
        <div class="info_list" style="width: 100%;">
          <p class="info_text text_grey">申请组织：</p>
          <p
            class="info_text"
            v-text="(detail && detail['a_申请组织']) || ''"
          ></p>
        </div>
        <div class="info_list" style="width: 50%;">
          <p class="info_text text_grey">申请用户：</p>
          <p
            class="info_text"
            v-text="(detail && detail['a_申请用户']) || ''"
          ></p>
        </div>
        <div class="info_list" style="width: 50%;">
          <p class="info_text text_grey">联系电话：</p>
          <p
            class="info_text"
            v-text="(detail && detail['a_联系电话']) || ''"
          ></p>
        </div>
        <div class="info_list" style="width: 100%;">
          <p class="info_text text_grey">上传申请文件：</p>
          <p
            class="info_text"
            v-text="(detail && detail['a_上传申请文件']) || ''"
          ></p>
        </div>
        <div class="info_list" style="width: 100%;">
          <!-- <p class="detail_title info_text text_grey">原规格：</p> -->
          <div class="detail_info">
            <div class="detail_list">
              <p class="info_text">基本信息：</p>
              <p class="info_text info_cell">
                <span class="text_grey">工作区域名称：</span>
                <span
                  v-text="(detail && detail['a_工作区域名称']) || ''"
                ></span>
              </p>
              <p class="info_text info_cell">
                <span class="text_grey">中文名称：</span>
                <span v-text="(detail && detail['a_中文名称']) || ''"></span>
              </p>
              <p class="info_text info_cell">
                <span class="text_grey">描述信息：</span>
                <span v-text="(detail && detail['a_描述信息']) || ''"></span>
              </p>
            </div>
            <div class="detail_list">
              <p class="info_text">工作区域申请规格：</p>
              <p class="info_text info_cell">
                <span class="text_grey">CPU：</span>
                <span v-text="(detail && detail['a_CPU']) || ''"></span>
              </p>
              <p class="info_text info_cell">
                <span class="text_grey"> 内存：</span>
                <span v-text="(detail && detail['a_内存']) || ''"></span>
              </p>
            </div>
            <div class="detail_list">
              <p class="info_text">申请时长：</p>
              <p class="info_text info_cell">
                <span class="text_grey"> 申请时长：</span>
                <span v-text="(detail && detail['a_申请时长']) || ''"></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template slot="action">
      <el-button type="defalut" size="mini" @click="hideDialog">
        取消
      </el-button>
      <el-button type="primary" size="mini" @click="confrimAction">
        确认提交
      </el-button>
    </template>
  </apass-dialog>
</template>

<script>
import apassDialog from "@/components/apass-dialog";

export default {
  components: { apassDialog },
  data: () => ({
    detail: null,
  }),
  methods: {
    showDialog() {
      this.$refs.confrim.show();
    },
    hideDialog() {
      this.$refs.confrim.hide();
    },
    getDetail(applyid) {
      this.$http
        .get("/apaas/service/v3/resource/user/apply/approveddetail", {
          params: {
            type: 0,
            applyid: applyid,
          },
        })
        .then(({ data }) => {
          if (data.success) {
            console.log(data.data);
            // this.detail = data.data;
          } else {
            this.$message({
              message: "获取详情失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          this.$message({
            message: "获取详情失败",
            type: "warning",
          });
        });

      this.detail = {
        a_申请组织: "贵州省交通运输厅",
        a_申请用户: "贵州省交通运输厅",
        a_联系电话: "13523232333",
        a_上传申请文件: "云资源申请修改意见V2.0审批审批函.pdf",
        a_工作区域名称: "aPaaS-V3.0",
        a_中文名称: "aPaaS平台V3.0",
        a_描述信息:
          "用于部署运行aPaaS平台V3.0用于部署运行aPaaS平台V3.0用于部署运行aPaaS平台V3.0",
        a_CPU: "最高2核，默认1核",
        a_内存: "最高2GB，默认1GB",
        a_申请时长: "6个月",
      };

      this.showDialog();
    },
    confrimAction() {
      console.log("confrim");
    },
  },
};
</script>

<style scoped>
.confirm_container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  text-align: left;
}
.info_list + .info_list,
.detail_list + .detail_list {
  margin-top: 15px;
}
.info_text {
  font-size: 14px;
  line-height: 27px;
  color: #242c43;
}
.text_grey {
  color: #8890a7;
}
.detail_title {
  margin-bottom: 7px;
}
.detail_info {
  background-color: #f8f9fd;
  padding: 15px;
  border-radius: 7px;
  overflow: hidden;
}
.info_cell {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.info_cell > span:nth-child(1) {
  width: 8em;
  flex-shrink: 0;
  text-align: right;
  margin-right: 10px;
}
.info_cell > span:nth-child(2) {
  flex-grow: 1;
}
</style>
