<template>
  <el-dialog
    :title="'创建服务'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :append-to-body="true"
    width="70%"
  >
    <el-steps :active="active" finish-status="success">
      <el-step title="基本信息"></el-step>
      <el-step title="容器镜像"></el-step>
      <!-- <el-step title="高级设置"></el-step> -->
    </el-steps>
    <el-form
      ref="serviceForm"
      :model="serviceForm"
      :rules="dataRule"
      label-width="80px"
    >
      <el-form-item v-show="active == 1">
        <el-form-item label="名称" prop="name" labelWidth="15%">
          <el-input
            v-model="serviceForm.name"
            style="width: 400px"
            clearable
          ></el-input>
          <div style="width: 400px; line-height: 1">
            最长 253
            个字符，只能包含小写字母、数字及分隔符("-")，且必须以小写字母或数字开头及结尾
          </div> </el-form-item
        ><br />
        <el-form-item label="版本" prop="version" labelWidth="15%">
          <el-input
            v-model="serviceForm.version"
            style="width: 400px"
            clearable
          ></el-input>
          <div style="width: 400px; line-height: 1">
            最长 16 个字符，只能包含小写字母及数字
          </div>
        </el-form-item>
        <br />
        <el-form-item label="描述信息" prop="description" labelWidth="15%">
          <el-input
            v-model="serviceForm.description"
            style="width: 400px"
            maxlength="256"
            show-word-limit
            type="textarea"
            placeholder="描述信息不超过 256 个字符"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form-item>
      <el-form-item v-show="active == 2">
        <h3 style="line-height: 0.5">容器组副本数量</h3>
        <el-input-number
          v-model="serviceForm.replicas"
          :min="1"
          :max="10"
        ></el-input-number>
        <br /><br />
        <h3 style="line-height: 1">添加容器镜像(至少添加一个容器)</h3>
        <el-form-item
          v-for="(item, index) in serviceForm.container"
          :key="index"
        >
          <el-card shadow="always" style="font-size: 20px; width: 600px"
            ><i class="el-icon-view"></i>&nbsp;&nbsp;镜像名称：{{
              item.containerData.name
            }}
            镜像：{{ item.containerData.imageName }}
            <el-button
              type="danger"
              icon="el-icon-delete"
              style="position: absolute; right: 200px"
              circle
              @click="deleteContainer(index)"
            ></el-button
          ></el-card>
          <add-container
            ref="addContainer"
            v-if="item.visible"
            @submitContainerData="
              (containerData) => {
                item.containerData = containerData;
              }
            "
            @cancel="deleteContainer"
          ></add-container>
        </el-form-item>
        <el-card shadow="hover" style="font-size: 20px; width: 400px"
          ><el-button plain style="width: 150px" @click="addContainer"
            >添加容器镜像</el-button
          >
        </el-card>
        <br />
        <el-form-item label="部署模式" labelWidth="15%">
          <el-select
            v-model="serviceForm.affinity"
            style="width: 400px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in deployment"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <br />
      </el-form-item>
    </el-form>
    <div style="text-align: right; margin: 0">
      <el-button style="margin-top: 12px" @click="cancel">取消</el-button>
      <el-button
        type="primary"
        plain
        style="margin-top: 12px"
        @click="pre"
        v-if="active == 2"
        >上一步</el-button
      >
      <el-button
        type="primary"
        plain
        style="margin-top: 12px"
        @click="next"
        v-if="active == 1"
        >下一步</el-button
      >
      <el-button
        type="primary"
        round
        style="margin-top: 12px"
        @click="submit"
        v-if="active == 2"
        >创建</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import AddContainer from "./applications-add-container.vue";
export default {
  data() {
    const checkContainer = (rule, value, callback) => {
      let resdata = JSON.parse(JSON.stringify(value));
      console.log("resdata", resdata);
      if (resdata.length == 0) return callback(new error("请至少添加一个容器"));
      return callback();
    };
    return {
      visible: false,
      active: 1,
      index: 0,
      volumeList: undefined,
      deployment: [
        {
          label: "容器组副本将根据默认策略部署",
          value: "",
        },
        {
          label: "容器组副本将会尽量部署在同一节点上",
          value: "podAffinity",
        },
        {
          label: "容器组副本将会尽量分散在不同节点中",
          value: "podAntiAffinity",
        },
      ],
      serviceForm: {
        name: "",
        version: "v1",
        description: "",
        replicas: 1,
        // 容器部署模式
        affinity: "",
        container: [],
      },
      dataRule: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        version: [
          {
            required: true,
            message: "请输入版本",
            trigger: "blur",
          },
        ],
        description: [],
      },
    };
  },
  components: {
    AddContainer,
  },
  methods: {
    init(index) {
      this.index = index;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["serviceForm"].resetFields();
      });
    },
    submit() {
      this.$refs["serviceForm"].validate((valid) => {
        if (valid) {
          // 如果没有添加容器则提示需要添加容器不通过
          if (this.serviceForm.container.length === 0) {
            this.$message({
              message: "请至少添加一个容器",
              type: "error",
              duration: 2000,
            });
            return;
          }
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 3000,
            onClose: () => {
              this.visible = false;
              console.log("servicedata", this.serviceForm);
              this.$emit("submitServiceData", this.serviceForm);
            },
          });
        } else {
          this.$message.error("请填入必填项目");
          this.active = 1;
        }
      });
    },
    next() {
      this.active++;
    },
    pre() {
      this.active--;
    },
    cancel() {
      console.log("删除了service窗口");
      this.$nextTick(() => {
        this.visible = false;
        this.$emit("cancel", this.index);
      });
    },
    // 添加容器镜像
    addContainer() {
      const index = this.serviceForm.container.length;
      this.serviceForm.container.push({
        index,
        visible: true,
        containerData: {},
      });
      this.$nextTick(() => {
        this.$refs.addContainer[index].init(index);
      });
    },
    // 删除容器镜像
    deleteContainer(index) {
      console.log("index", index);
      this.serviceForm.container.splice(index, 1);
    },
  },
};
</script>
