<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['department_name']) || '-'"
          ></p>
        </div>
        <div class="info_list" style="width: 50%;">
          <p class="info_text text_grey">申请用户：</p>
          <p
            class="info_text"
            v-text="(detail && detail['user_name']) || '-'"
          ></p>
        </div>
        <div class="info_list" style="width: 50%;">
          <p class="info_text text_grey">联系电话：</p>
          <p class="info_text" v-text="(detail && detail['phone']) || '-'"></p>
        </div>
        <div class="info_list" style="width: 100%;">
          <p class="info_text text_grey">上传申请文件：</p>
          <p class="info_text" v-text="(detail && detail['file']) || '-'"></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['namespace']) || '-'"></span>
              </p>
              <p class="info_text info_cell">
                <span class="text_grey">中文名称：</span>
                <span v-text="(detail && detail['workplace']) || '-'"></span>
              </p>
              <p class="info_text info_cell">
                <span class="text_grey">描述信息：</span>
                <span
                  v-text="(detail && detail['workplacedesc']) || '-'"
                ></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['cpu']) || '-'"></span>
              </p>
              <p class="info_text info_cell">
                <span class="text_grey"> 内存：</span>
                <span v-text="(detail && detail['memory']) || '-'"></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['duration_time']) || '-'"
                ></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"
        :loading="submitLoading"
        @click="confrimAction"
      >
        确认提交
      </el-button>
    </template>
  </apass-dialog>
</template>

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

export default {
  components: { apassDialog },
  data: () => ({
    detail: null,
    submitLoading: false,
  }),
  methods: {
    showDialog() {
      this.$refs.confrim.show();
    },
    hideDialog() {
      this.$refs.confrim.hide();
    },
    getDetail(apply_id) {
      this.$http
        .get("/apaas/service/v3/resource/apply/distributionDisplay", {
          params: {
            apply_id: apply_id,
          },
        })
        .then(({ data }) => {
          if (data.success) {
            let datas = data.data;

            this.detail = {
              ...datas,
              cpu: `最高${datas.max_cpu}核，默认${datas.min_cpu}核`,
              memory: `最高${datas.max_memory}GB，默认${datas.min_memory}GB`,
            };
          } else {
            this.$message({
              message: "获取详情失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          this.$message({
            message: "获取详情失败",
            type: "warning",
          });
        });

      this.showDialog();
    },
    confrimAction() {
      this.submitLoading = true;

      this.$http
        .put("/apaas/service/v3/resource/apply/distribution", null, {
          params: {
            id: this.detail.id,
            user_id: this.detail.user_id,
          },
        })
        .then(({ data }) => {
          this.submitLoading = false;

          if (data.success) {
            this.$message({
              message: "分配成功",
              type: "success",
            });

            this.$emit("allot-success");
            this.hideDialog();
          } else {
            this.$message({
              message: "分配失败",
              type: "warning",
            });
          }
        })
        .catch((error) => {
          this.submitLoading = false;

          this.$message({
            message: "分配失败",
            type: "warning",
          });
        });
    },
  },
};
</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>
