
<template>
  <el-dialog
    :title="'创建存储卷'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="70%"
  >
    <el-form
      ref="volumesForm"
      :model="volumesForm"
      :rules="dataRule"
      label-width="80px"
    >
      <el-form-item label="名称" prop="name" labelWidth="25%">
        <el-input
          v-model="volumesForm.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="alias" labelWidth="25%">
        <el-input
          v-model="volumesForm.alias"
          style="width: 400px"
          maxlength="63"
          show-word-limit
          clearable
        ></el-input>
        <div style="width: 400px; line-height: 1">
          别名可以由任意字符组成，帮助您更好的区分资源，最长 63 个字符。
        </div>
      </el-form-item>
      <br />
      <el-form-item label="描述信息" prop="description" labelWidth="25%">
        <el-input
          v-model="volumesForm.description"
          style="width: 400px"
          maxlength="256"
          show-word-limit
          type="textarea"
          placeholder="描述信息不超过 256 个字符"
          :rows="4"
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="存储卷容量" labelWidth="25%" prop="capacity">
        <el-input
          v-model.number="volumesForm.capacity"
          style="width: 400px"
          @input="capacityChange(arguments[0])"
          @change="capacityChange(arguments[0])"
          clearable
          ><i slot="suffix" style="margin-right: 10px">Gi</i></el-input
        >
        <div style="width: 400px; line-height: 1">存储卷容量最大为1024Gi</div>
      </el-form-item>
      <div style="text-align: right; margin: 0">
        <el-button style="margin-top: 12px" @click="cancel">取消</el-button>
        <el-button style="margin-top: 12px" @click="submit"
          >创建</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      visible: false,
      active: 1,
      max: 1024,
      volumesForm: {
        name: "",
        alias: "",
        description: "",
        capacity: "",
        tag: [],
      },
      dataRule: {
        name: [
          { required: true, message: "存储卷名称不能为空", trigger: "blur" },
        ],
        alias: [],
        capacity: [
          { required: true, message: "存储卷容量不能为空", trigger: "blur" },
        ],
        description: [],
      },
    };
  },
  methods: {
    // 初始化
    init(id) {
      this.volumesForm.volumesId = id || 0;
      this.volumesForm.tag = [];
      this.active = 1;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["volumesForm"].resetFields();
        if (this.volumesForm.volumesId) {
          this.$http({
            url: this.$http.adornUrl(
              `/generator/volumes/info/${this.volumesForm.volumesId}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.volumesForm.volumesName = data.volumes.volumesName;
              this.volumesForm.volumesAlias = data.volumes.volumesAlias;
              this.volumesForm.volumesState = data.volumes.volumesState;
              this.volumesForm.accessMode = data.volumes.accessMode;
              this.volumesForm.volumesMount = data.volumes.volumesMount;
              this.volumesForm.createTime = data.volumes.createTime;
              this.volumesForm.parentProjectId = data.volumes.parentProjectId;
              this.volumesForm.volumesSize = data.volumes.volumesSize;
              this.volumesForm.volumesDescription =
                data.volumes.volumesDescription;
              this.volumesForm.creatorId = data.volumes.creatorId;
            }
          });
        }
      });
    },
    // 表单提交
    submit() {
      this.$refs["volumesForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl("/kubeSphereApi/createStorageVolume"),
            method: "post",
            data: {
              name: this.volumesForm.name,
              storage: this.volumesForm.capacity+"Gi",
              alias: this.volumesForm.alias,
              description: this.volumesForm.description,
              creator: this.$store.state.user.name,
              namespace: "mkcloud"
            },
          }).then((res) => {
            console.log(res);
            this.$http({
              url: this.$http.adornUrl("/generator/volumes/save"),
              method: "post",
              data: this.$http.adornData({
                volumesName: this.volumesForm.name,
                volumesAlias: this.volumesForm.alias,
                accessMode: "ReadWriteOnce",
                volumesMount: "未挂载",
                createTime: new Date().getTime(),
                parentProjectName: "mkcloud",
                volumesSize: this.volumesForm.capacity,
                volumesDescription: this.volumesForm.description,
                creatorName: this.$store.state.user.name,
              }),
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList");
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          }).catch( error => {
            console.log("创建存储卷错误", error);
            this.$message.warning("创建存储卷错误");
          })
        } else {
          this.$message.warning("提交失败");
        }
      });
    },
    next() {
      this.active++;
    },
    pre() {
      this.active--;
    },
    cancel() {
      this.visible = false;
    },
    capacityChange(val) {
      console.log(val);
      //转换数字类型
      this.volumesForm.capacity = Number(val);
      this.$nextTick(() => {
        if (this.volumesForm.capacity > this.max) {
          this.$message.warning("输入的存储卷容量不能大于1024");
          this.volumesForm.capacity = undefined;
        } else if (this.volumesForm.capacity == 0) {
          this.$message.warning("输入的存储卷容量不能为0");
          this.volumesForm.capacity = undefined;
        }
      });
    },
  },
};
</script>
