<!-- 外层新增弹出框 -->
<template>
  <div>
    <el-dialog v-model="props.diaShow" :title="props.title" :before-close="handleClose" label-width="200px" draggable>
      <el-form :model="form" :label-position="right" label-width="200px">
        <el-form-item label="单元编号：">
          <el-input v-model="form.riskunit" />
        </el-form-item>
        <el-form-item label="风险单元：">
          <el-input v-model="form.cellname" />
        </el-form-item>
        <el-form-item label="风险单元使用岗位：">
          <el-input v-model="form.adoptunit" />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="form.bz" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSave">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="handleClose">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  onUpdated,
  inject,
  getCurrentInstance,
  watch
} from "vue";
import { getApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
// 数据
const form = ref({});
const props = defineProps({
  diaShow: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  // 获取详情接口的id
  InfoId: {
    type: String,
    default: ""
  }
});
const isShowTip = ref(false);
const emits = defineEmits(["changeVi"], ["save"], ["saveItem"]);
// 控制确认弹出框的展示
const confirmShow = ref(false);
const title = ref("");

// 方法
// 关闭弹窗
const closeDialog = () => {
  emits("changeVi", false);
};
const changePasswordTip = (isShow) => {
  if (isShow) {
    isShowTip.value = true;
  } else {
    // isShowTip.value = false;
  }
};
// 保存
const handleSave = () => {
  confirmShow.value = true;
  emits("save", form.value);
  emits("changeVi", false);
};
// 关闭
const handleClose = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("changeVi", false);
    })
    .catch(() => {
      // catch error
    })

};
// 控制新增和修改取消弹出框的显示
const changeNvi = (val) => {
  confirmShow.value = val;
};

// 获取详情的接口
const getInfo = (id) => {
  getApi({}, `/mosty-jcgl/yhpcCell/getYhpcCellById/${id}`).then((res) => {
    form.value = res
  });
};

onMounted(() => {
  // emitter.on('my-event',(id) => {
  // })
});
watch(
  () => props.InfoId,
  (val) => {
    if (val) {
      getInfo(val);
    }
  }, {
  deep: true
}
);

onUpdated(() => { });
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 100%;
}

.el-form {
  flex-wrap: wrap;
}
</style>