<template>
  <div class="deployment-container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="`/yygl/${$route.params.level}/0`">
          我的应用
        </el-breadcrumb-item>
        <el-breadcrumb-item
          :to="`/yygl/${$route.params.level}/${$route.params.type}`"
        >
          应用仓库
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          应用部署
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <app-build-steps :active-step="step">
      <app-build-step
        title="部署基本信息"
        :step="0"
        :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
      >
        <el-form
          ref="step1_form"
          class="step_form"
          label-position="top"
          :model="image_info"
          :rules="image_rules"
        >
          <el-form-item label="镜像名称：" prop="image_name">
            <el-input
              v-model="image_info.image_name"
              placeholder="请输入镜像名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="版本号：" prop="tag">
            <el-input
              v-model="image_info.tag"
              placeholder="请输入版本号"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="apass_button step_action">
          <el-button type="primary" @click="nextStep">
            下一步
          </el-button>
        </div>
      </app-build-step>
      <app-build-step
        title="应用配置"
        :step="1"
        :active-icon="require('@/assets/imgs/progress_ic_yingyongpz.png')"
      >
        <!-- content  -->
        <div class="apass_button step_action">
          <el-button type="primary" plain @click="preStep">
            上一步
          </el-button>
          <el-button type="primary" @click="nextStep">
            下一步
          </el-button>
        </div>
      </app-build-step>
      <app-build-step
        title="应用部署"
        :step="2"
        :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
      >
        <deployment-info
          :data="stateList"
          style="margin-top: 30px;"
        ></deployment-info>
        <div class="apass_button step_action">
          <el-button type="primary">
            前往查看
          </el-button>
          <el-button type="primary">
            重新部署
          </el-button>
        </div>
      </app-build-step>
    </app-build-steps>

    <apass-dialog
      ref="dialog"
      :title="dialogInfo.title"
      :msg="dialogInfo.msg"
      :submit="dialogInfo.submit"
    ></apass-dialog>
  </div>
</template>

<script>
import appBuildSteps from "@/components/app-build-steps/app-build-steps";
import appBuildStep from "@/components/app-build-steps/app-build-step";
import apassDialog from "@/components/apass-dialog";
import deploymentInfo from "@/components/deployment-info";

export default {
  components: {
    appBuildSteps,
    appBuildStep,
    apassDialog,
    deploymentInfo,
  },
  data: () => ({
    step: 0,
    dialogInfo: {
      title: "",
      msg: "",
      submit: null,
    },
    image_info: {
      image_name: "",
      tag: "",
      file: "",
    },
    image_rules: {
      image_name: [
        { required: true, message: "请输入镜像名称", trigger: "blur" },
      ],
      tag: [{ required: true, message: "请输入版本号", trigger: "blur" }],
      file: [{ required: true, message: "请选择镜像文件", trigger: "change" }],
    },
    evtUuid: "",
    evtSource: null,
    listStatus: [],
    state: "",
    text: "",
    url: "",
    act: 0,
    stateList: [
      {
        name: "获取部署参数",
        value: "values",
        content: "获取部署参数",
        state: 1,
      },
      {
        name: "拉取部署文件",
        value: "pull-chart",
        content: "拉取部署文件",
        state: 1,
      },
      {
        name: "开始部署",
        value: "install",
        content: "开始部署",
        state: 1,
      },
      {
        name: "部署状态",
        value: "deploy-status",
        content: "部署状态",
        state: 2,
      },
    ],
  }),
  methods: {
    preStep() {
      this.step--;
    },
    nextStep() {
      this.step++;
    },
    getStatus() {
      let evtUuid = Math.random()
        .toString(16)
        .substr(3);
      let evtSource = new EventSource(
        `/apaas/hubApi/event/subscribe/deploy/${evtUuid}`
      );

      this.evtUuid = evtUuid;
      this.evtSource = evtSource;

      evtSource.addEventListener("message", function(e) {
        if (this.listStatus.map((o) => o.status).indexOf(e.lastEventId) == -1) {
          if (this.listStatus.length) {
            this.listStatus[this.listStatus.length - 1].success = "success";
          }

          this.listStatus.push({
            status: e.lastEventId,
            success: JSON.parse(e.data).state,
            data: JSON.parse(e.data).data,
          });

          this.text = this.listStatus[this.listStatus.length - 1].data;
          this.text = "<span class='linenum'></span>" + this.text;
          this.text = this.text.replace(
            /\n/g,
            "\n<span class='linenum'></span>"
          );
          this.text = this.text.replace(/>==>/g, ">>");
          this.act = this.listStatus.length - 1;
        } else {
          let i = this.listStatus.map((o) => o.status).indexOf(e.lastEventId);
          let item = this.listStatus[i].data;

          item = item + "\n" + JSON.parse(e.data).data;

          this.listStatus[i].data = item;
          this.text = this.listStatus[this.listStatus.length - 1].data;
          this.text = "<span class='linenum'></span>" + this.text;
          this.text = this.text.replace(
            /\n/g,
            "\n<span class='linenum'></span>"
          );
          this.text = this.text.replace(/>==>/g, ">>");
          this.act = this.listStatus.length - 1;

          if (JSON.parse(e.data).state != "notes") {
            this.listStatus[i].success = JSON.parse(e.data).state;
          }
        }

        if (JSON.parse(e.data).state == "success") {
          this.state = "部署成功！";
          this.url = `https://${window.location.host}/apaas/ui/#/pods?namespace=${this.baseInfoForm.namespace}`;
        }

        for (let i = 0; i < this.listStatus.length; i++) {
          switch (this.listStatus[i].status) {
            case "values":
              this.listStatus[i].statusHan = "获取部署参数";
              break;
            case "pull-chart":
              this.listStatus[i].statusHan = "拉取部署文件";
              break;
            case "install":
              this.listStatus[i].statusHan = "开始部署";
              break;
            case "deploy-status":
              this.listStatus[i].statusHan = "部署状态";
              break;
            default:
              this.listStatus[i].statusHan = "其他";
              break;
          }
        }
      });
    },
  },
  mounted() {
    this.getStatus();
  },
};
</script>

<style scoped>
.deployment-container {
  margin: 20px 40px;
}
.deployment-container > .app_build_steps {
  border-radius: 12px;
  background-color: #fff;
  padding: 30px;
}
.step_action {
  text-align: right;
  margin-top: 45px;
}
.step_action .el-button:not(:last-child) {
  margin-right: 30px;
}
</style>

<style>
.deployment-container .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.deployment-container .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.deployment-container .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.deployment-container .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.deployment-container .step_form {
  max-width: 970px;
  margin-top: 20px;
}
.deployment-container .step_form .el-form-item {
  margin: 0 10px 24px;
}
.deployment-container .step_form .el-form-item .el-select {
  width: 100%;
}
.deployment-container .step_form .el-form-item__label {
  padding-bottom: 8px;
  padding-left: 15px;
  line-height: 25px;
  color: #58617a;
}
.image_list .el-table th > .cell {
  color: #1a2236;
}
.image_list .el-table td,
.image_list .el-table th.is-leaf {
  border: none !important;
  line-height: 23px;
}
.image_list .el-table::before {
  display: none;
}
.image_list .el-table {
  width: 100%;
}
.image_list .el-table__row:nth-child(odd) td {
  background-color: #f8f9fd;
}
</style>
