<template>
  <div>
    <PageTitle :title="pageTitle">

      <el-button type="primary" @click="submit(ruleFormRef)"><el-icon>
          <DocumentChecked />
        </el-icon>保存</el-button>
      <el-button @click="black"><el-icon>
          <DocumentDelete />
        </el-icon>关闭</el-button>
    </PageTitle>

    <div class="formBox">
      <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px" class="demo-ruleForm"
        status-icon :inline="true" label-position="top">
        <el-row :gutter="80">
          <el-col :span="18">
            <el-form-item label="岗位名称" prop="gwmc">
              <el-input v-model="data.formData.gwmc" placeholder="请输入岗位名称" style="width: 100%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="适用范围" prop="syfw">
              <el-select v-model="data.formData.syfw" placeholder="请选择适用范围" style="width: 100%">
                <el-option v-for="item in GWSYFY" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  watch,
  nextTick
} from "vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const { GWSYFY } = proxy.$dict("GWSYFY");
const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const emit = defineEmits("changePage");
const ruleFormRef = ref();
let pageTitle = ref("添加考核登记");
const data = reactive({
  formData: {
    gwmc: "", //考核岗位名称
    gwfl: "", //岗位分类
    syfw: "" //适用范围
  }
});

const rules = reactive({
});

// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
    }
  });
};

const black = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emit("changePage", "Main");
    })
    .catch(() => {
      // catch error
    })

};

watchEffect(() => {
  if (props.editObj) {
    data.formData = JSON.parse(JSON.stringify(props.editObj));

  }
});
</script>

<style lang="scss" scoped>
::v-deep .el-cascader,
::v-deep .el-select {
  width: 100%;
}

.formBox {
  padding: 30px 120px;
  background-color: #fff;
  height: 750px;
}
</style>