<template>
  <BasicLayout>
    <template #wrapper>
      <el-card class="box-card">
        <div class="mb10">
          <el-row :gutter="10" class="mb8">
            <el-col
              :span="1.5"
              class="mb8"
              style="
                color: #1890ff;
                font-weight: bold;
                line-height: 28px;
                height: 28px;
              "
              >批量添加岗位
            </el-col>
            <el-col
              :span="1.5"
              class="mb8"
              style="color: #1890ff; font-weight: bold"
            >
              <el-button icon="el-icon-arrow-left" size="mini" @click="goTo()"
                >返回列表</el-button
              >
            </el-col>
          </el-row>
        </div>
        <div style="margin: 0 auto; width: 800px">
          <el-row :gutter="10" class="mb10">
            <el-col :span="19" :xs="24">岗位名称（必填）</el-col>
            <el-col :span="4" :xs="24">操作</el-col>
          </el-row>
          <el-form ref="form" :model="form">
            <div v-for="(val, index) in form.occupationList" :key="index">
              <el-form-item
                label=""
                :prop="'occupationList.' + 0 + '.name'"
                :rules="{
                  required: true,
                  message: '岗位名称不能为空',
                  trigger: 'blur',
                }"
              >
                <el-row :gutter="10">
                  <el-col :span="19" :xs="24">
                    <el-input v-model="val.name" placeholder="岗位名称" />
                  </el-col>
                  <el-col :span="4" :xs="24">
                    <span
                      @click.prevent="removeVal(val)"
                      style="color: #409eff; font-size: 12px"
                      >移除</span
                    >
                  </el-col>
                </el-row>
              </el-form-item>
            </div>
            <el-form-item>
              <el-row>
                <el-col :span="12" :xs="24">
                  <span
                    @click="addVal"
                    style="
                      color: #409eff;
                      font-size: 12px;
                      display: block;
                      cursor: pointer;
                    "
                    ><i class="el-icon-circle-plus-outline"></i> 添加一条</span
                  >
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="submitForm"
                >确定</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="cancelForm"
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </template>
  </BasicLayout>
</template>

<script>
import { addJobs } from "@/api/jobs";
export default {
  data() {
    return {
      // 表单参数
      form: {
        occupationList: [
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
        ],
      },
    };
  },
  methods: {
    goTo() {
      this.$router.push("/organization/jobs");
    },
    //移除
    removeVal(item) {
      var index = this.form.occupationList.indexOf(item);
      if (index !== -1) {
        this.form.occupationList.splice(index, 1);
      }
    },
    //新增一条
    addVal() {
      this.form.occupationList.push({
        name: "",
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addJobs(this.form).then((response) => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
              // this.open = false;
              // this.getList();
              this.$router.push("/organization/jobs");
            } else {
              this.msgError(response.msg);
            }
          });
        }
      });
    },
    // 新增和修改弹窗取消按钮
    cancelForm() {
      this.open = false;
      this.reset();
    },
    reset() {
      this.form = {
        occupationList: [
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
          {
            name: "",
          },
        ],
      };
    },
  },
};
</script>
