<template>
  <div>
    <el-dialog :title="title" width="80%" v-model="props.modelValue" :before-close="closeDialog">
      <div class="config">
        <el-form ref="dialogFormRef" :inline="true" label-position="top" :model="dialogForm" :rules="rules">
          <!-- <el-form-item class="ww100" label="模块名称">
            <el-input show-word-limit placeholder="请填写部门地址" maxlength="200" v-model="dialogForm.address"
              :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"></el-input>
          </el-form-item> -->

          <el-form-item v-if="dialogForm.type === 'children'" class="ww100" label="模块名称" prop="moduleName">
            <el-input show-word-limit placeholder="请填写模块名称" v-model="dialogForm.moduleName"></el-input>
          </el-form-item>
          <el-form-item v-if="dialogForm.type === 'add'" class="ww100" label="模块名称" prop="moduleName">
            <el-input show-word-limit placeholder="请填写模块名称" v-model="dialogForm.moduleName"></el-input>
          </el-form-item>
          <el-form-item v-if="dialogForm.type === 'edit'" class="ww100" label="模块名称" prop="moduleName">
            <el-input show-word-limit placeholder="请修改模块名称" v-model="dialogForm.moduleName"></el-input>
          </el-form-item>
          <el-form-item style="width: 100%;" v-if="dialogForm.type === 'files'" prop="attachment1">
            <MOSTY.Upload v-if="dialogForm.type === 'files'" :limit="5" :nopicer="true"
              placeholder="请上传设备资料（pdf,ofd,doc,docx,xls,xlsx,jpg,png,jpeg,wps）" :isImg="false" ShowfileList
              v-model="dialogForm.attachment" :nameshow='true' :disabledStatus="false"
              :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'jpg', 'png', 'jpeg','wps']" />
          </el-form-item>
          <el-form-item style="width: 100%;" v-if="dialogForm.type === 'view'" prop="attachment">
            <MOSTY.Uploadhj v-if="dialogForm.type === 'view'" :width="'100%'" :showbut="false" :limit="5"
              :nopicer="true" placeholder="请上传设备资料（pdf,ofd,doc,docx,xls,xlsx,jpg,png,jpeg,wps）" :isImg="false" ShowfileList
              v-model="dialogForm.attachment" :nameshow='true' :disabledStatus="false"
              :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'jpg', 'png', 'jpeg','wps']" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="handleSave(dialogFormRef)">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button @click="closeDialog" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { ref, onMounted, watch, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { addManual, updateManual } from "@/api/user-manage";
const emits = defineEmits(["changeAddVi"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  editObj: {
    type: Object,
    default: () => { }
  },
});
const rules = ref({
  moduleName: [
    { required: true, message: "请填写父级名称", trigger: "blur" }
  ],
  attachment: [
    { required: true, message: "请上传附件", trigger: "blur" }
  ]
})

const loading = ref(false); //新增保存按钮截流
const title = ref("新增");
const dialogFormRef = ref();
const dialogForm = ref({
  // orgNo: 1
});
onMounted(() => {
  if (props.editObj.type === 'files') {
    // props.editObj.attachment = null;
  }
  if (props.editObj.type === 'add') {
    // 清空数据
    props.editObj.moduleName = "";
    props.editObj.id = "";
  }

  dialogForm.value = JSON.parse(JSON.stringify(props.editObj));
  // console.log(dialogForm.value, 'dialogForm.value');
  title.value = props.editObj && props.editObj?.type == 'add' ? "新增" : props.editObj?.type == 'children' ? "新增子节点" : props.editObj?.type == 'edit' ? "修改" : props.editObj?.type == 'files' ? "上传附件" : props.editObj?.type == 'view' ? "查看附件" : "";
})
// watch(() => props.modelValue, (val) => {
//   if (val) {
//     // 清空数据
//     dialogForm.value.moduleName = "";
//     dialogForm.value.id = "";
//     dialogForm.attachment = '';
//     dialogForm.value = JSON.parse(JSON.stringify(props.editObj));
//     console.log(dialogForm.value, 'dialogForm.value');
//     title.value = props.editObj && props.editObj?.type == 'add' ? "新增" : props.editObj?.type == 'children' ? "新增子节点" : props.editObj?.type == 'edit' ? "修改" : props.editObj?.type == 'files' ? "上传附件" : props.editObj?.type == 'view' ? "查看附件" : "";
//   }
// }, { deep: true });
// 保存
const handleSave = async (dialogFormRef) => {
  if (!dialogFormRef) return;
  await dialogFormRef.validate((valid) => {
    if (valid) {
      if (title.value == "新增") {
        let params = {
          moduleName: dialogForm.value.moduleName
        }
        addManual(params).then(() => {
          loading.value = false;
          ElMessage.success("新增父节点成功");
          emits("changeAddVi", false);
        })
      } else if (dialogForm.value.type === 'children') {
        let params = {
          parentId: dialogForm.value.id,
          moduleName: dialogForm.value.moduleName
        }
        addManual(params).then(() => {
          loading.value = false;
          ElMessage.success("新增子节点成功");
          emits("changeAddVi", false);
        })
      } else if (dialogForm.value.type === 'edit') {
        let paramsedit = {
          id: dialogForm.value.id,
          moduleName: dialogForm.value.moduleName
        }
        updateManual(paramsedit).then(() => {
          loading.value = false;
          ElMessage.success("修改成功");
          emits("changeAddVi", false);
        })
      } else if (dialogForm.value.type === 'files') {
        if (dialogForm.value.attachment.length === 0) {
          if (dialogForm.value.attachments) return
          let paramsfiles = {
            id: dialogForm.value.id,
            attachment: dialogForm.value.attachment.join(',')
          }
          updateManual(paramsfiles).then(() => {
            loading.value = false;
            ElMessage.success("附件全部删除成功");
            emits("changeAddVi", false);
          })
        } else {
          let paramsfiles = {
            id: dialogForm.value.id,
            attachment: dialogForm.value.attachment.join(',')
          }
          updateManual(paramsfiles).then(() => {
            loading.value = false;
            ElMessage.success("保存成功");
            emits("changeAddVi", false);
          })
        }

      }
    } else {
      ElMessage.error("请输入必填项");
    }
  });
};
// 关闭
const closeDialog = () => {
  loading.value = false;
  dialogFormRef.value.clearValidate();
  emits("changeAddVi", false);
};
</script>

<style lang="scss" scoped>
.config {
  .el-form {
    padding: 10px 40px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .el-form-item {
    text-align: center;
  }
}
</style>