<template>
  <div class="app_build-container">
    <div class="sevice_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>在线组件工具</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_jingxiang.png')"
      >
        <el-form class="step_form" label-position="top" :model="mirrorInfo">
          <el-form-item label="镜像名称：">
            <el-input
              v-model="mirrorInfo.name"
              placeholder="请输入镜像名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="版本数：">
            <el-input
              v-model="mirrorInfo.version"
              placeholder="请输入版本数"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传镜像包：">
            <upload-file
              :multiple="false"
              :max="1"
              type="default"
              :readOnly="false"
              :list="mirrorList"
              @getNewList="getNewList"
              :drag="true"
            ></upload-file>
            <p class="mirror_info">
              <img :src="require('@/assets/imgs/ic_newdata.png')" />
              <span>镜像文件001.rar</span>
            </p>
            <div class="mirror_ation">
              <el-button type="primary" @click="sunmitMirror">
                确认
              </el-button>
            </div>
          </el-form-item>
          <div class="form_line"></div>
          <el-form-item label="上传镜像列表：">
            <ces-table
              class="mirror_list"
              emptyText="暂无数据"
              :border="false"
              :headers="mirror_headers"
              :datas="mirror_datas"
              :isIndex="false"
            ></ces-table>
          </el-form-item>
        </el-form>
        <div class="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_bushudata.png')"
      >
        <el-form class="step_form" label-position="top">
          <el-form-item label="上传镜像包：">
            <div class="description_info">
              <i class="el-icon-warning-outline"></i>
              <p>
                压缩包上传提示：<br />
                1.必须包含以下文件：Chart.yaml，README.md，step.yaml，values.yaml，logo.png；<br />
                2.上述文件必须按照上述名称进行命名；<br />
                3.请将文件夹压缩为“.zip”、“.tgz”、“.tar.gz”格式，如：名称为redis-ha的文件夹压缩为redis-ha.zip。
              </p>
            </div>
            <upload-file
              :multiple="false"
              :max="1"
              type="default"
              :readOnly="false"
              :list="mirrorList"
              @getNewList="getNewList"
              :drag="true"
            ></upload-file>
            <p class="mirror_info">
              <img :src="require('@/assets/imgs/ic_newdata.png')" />
              <span>镜像文件001.rar</span>
            </p>
          </el-form-item>
        </el-form>
        <div class="step_action" style="margin-top: 120px;">
          <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_xinxitx.png')"
      >
        <el-form class="step_form" label-position="top" :model="appInfo">
          <el-form-item label="应用名称称：">
            <el-input
              v-model="appInfo.name"
              placeholder="请输入应用名称称"
            ></el-input>
          </el-form-item>
          <el-form-item label="应用版本：">
            <el-input
              v-model="appInfo.version"
              placeholder="请输入应用版本，例：1.0.0"
            ></el-input>
          </el-form-item>
          <el-form-item label="业务领域：">
            <el-select v-model="appInfo.area" placeholder="请选择业务领域">
              <el-option
                v-for="item in areas"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应用类型：">
            <el-select v-model="appInfo.type" placeholder="请选择应用类型">
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传镜像包：">
            <upload-file
              :multiple="false"
              :max="1"
              type="picture"
              :readOnly="false"
              :list="cover"
              @getNewList="getcoverList"
            ></upload-file>
          </el-form-item>
          <el-form-item label="所属组织：">
            <el-select
              v-model="appInfo.organization"
              placeholder="请选择所属组织"
            >
              <el-option
                v-for="item in organizations"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应用简介：">
            <el-input
              v-model="appInfo.app_description"
              type="textarea"
              placeholder="请输入应用简介"
            ></el-input>
          </el-form-item>
          <el-form-item label="功能简介：">
            <el-input
              v-model="appInfo.function_description"
              type="textarea"
              placeholder="请输入功能简介"
            ></el-input>
          </el-form-item>
          <el-form-item label="应用场景示例：">
            <el-input
              v-model="appInfo.example"
              type="textarea"
              placeholder="请输入应用场景示例"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="step_action">
          <el-button type="primary" plain @click="preStep">
            上一步
          </el-button>
          <el-button type="primary" @click="sunbmitAction">
            提交
          </el-button>
        </div>
      </app-build-step>
    </app-build-steps>
  </div>
</template>

<script>
import appBuildSteps from "@/components/app-build-steps/app-build-steps";
import appBuildStep from "@/components/app-build-steps/app-build-step";
import uploadFile from "@/components/upload_file";
import cesTable from "@/components/table-um";

export default {
  components: {
    appBuildSteps,
    appBuildStep,
    uploadFile,
    cesTable,
  },
  data: () => ({
    step: 0,
    mirrorList: [],
    mirrorInfo: {
      name: "",
      version: "",
      image: "",
    },
    mirror_headers: [
      { label: "", prop: "", type: "", align: "", width: 50 },
      { label: "镜像名称", prop: "name", type: "", align: "left" },
      { label: "版本数", prop: "version", type: "", align: "center" },
      {
        label: "操作",
        type: "Button",
        align: "center",
        btnList: [
          {
            type: "action-delete",
            label: "删除",
          },
        ],
      },
    ],
    mirror_datas: [
      {
        name: "cemplat-api",
        version: "1.0.0",
      },
      {
        name: "cemplat-api",
        version: "1.0.1",
      },
      {
        name: "cemplat-api",
        version: "1.0.2",
      },
      {
        name: "cemplat-api",
        version: "1.0.3",
      },
      {
        name: "cemplat-api",
        version: "1.0.4",
      },
    ],
    appInfo: {
      name: "",
      version: "",
      area: "",
      type: "",
      cover: "",
      organization: "",
      app_description: "",
      function_description: "",
      example: "",
    },
    areas: [
      {
        name: "应急领域",
        value: 0,
      },
      {
        name: "公安领域",
        value: 1,
      },
      {
        name: "全领域",
        value: 2,
      },
      {
        name: "交通领域",
        value: 3,
      },
    ],
    types: [
      {
        name: "基础工具",
        value: 0,
      },
      {
        name: "通用应用",
        value: 1,
      },
      {
        name: "业务应用",
        value: 2,
      },
    ],
    organizations: [
      {
        name: "比格大数据",
        value: 0,
      },
      {
        name: "贵州公安厅",
        value: 1,
      },
      {
        name: "贵州交通厅",
        value: 2,
      },
      {
        name: "贵州迪爱思交通厅",
        value: 3,
      },
    ],
    cover: [],
  }),
  methods: {
    getNewList(values) {
      console.log(values);
    },
    sunmitMirror() {
      console.log(this.mirrorInfo.image);
    },
    deleteItem(item) {
      console.log(item);
    },
    getcoverList(values) {
      console.log(values);
    },
    preStep() {
      this.step--;
    },
    nextStep() {
      this.step++;
    },
    sunbmitAction() {
      console.log("submit action");
    },
  },
};
</script>

<style scoped>
.app_build-container {
  margin: -157px 40px 20px;
}
.app_build-container .el-button {
  min-width: 124px;
  height: 44px;
}
.app_build-container .el-button--primary {
  color: #fff;
  background-color: #0f2683;
  border-color: #0f2683;
}
.app_build-container .el-button--primary.is-plain {
  color: #0f2683;
  background-color: #e1e4fb;
  border-color: #e1e4fb;
}
.app_build-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;
}
.mirror_info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  line-height: 20px;
  color: #8890a7;
  margin-left: 15px;
}
.mirror_info > img {
  margin-right: 10px;
  width: 12px;
}
.mirror_ation {
  margin-top: 45px;
}
.form_line {
  border: 1px solid #f4f7fc;
  margin: 30px 0 24px;
}
.description_info {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
  border-radius: 10px;
  background-color: #f8f9fd;
  margin-bottom: 15px;
}
.description_info > * {
  font-size: 12px;
  color: #8890a7;
  line-height: 25px;
}
.description_info > i {
  font-size: 14px;
  margin-right: 10px;
}
</style>

<style>
.app_build-container .sevice_breadcrumb {
  padding: 0 20px;
}
.app_build-container .sevice_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
  color: #626de9;
}
.app_build-container
  .sevice_breadcrumb
  > .el-breadcrumb
  .el-breadcrumb__item:last-child
  .el-breadcrumb__inner {
  color: #b4c0f5;
}
.app_build-container .step_form {
  max-width: 970px;
  margin-top: 20px;
}
.app_build-container .step_form .el-form-item {
  margin: 0 10px 24px;
}
.app_build-container .step_form .el-form-item .el-select {
  width: 100%;
}
.app_build-container .step_form .el-form-item__label {
  padding-bottom: 8px;
  padding-left: 15px;
  line-height: 25px;
  color: #58617a;
}
.mirror_list .el-table th > .cell {
  color: #1a2236;
}
.mirror_list .el-table td,
.mirror_list .el-table th.is-leaf {
  border: none !important;
  line-height: 23px;
}
.mirror_list .el-table::before {
  display: none;
}
.mirror_list .el-table {
  width: 100%;
}
.mirror_list .el-table__row:nth-child(odd) td {
  background-color: #f8f9fd;
}
</style>
