<template>
  <div class="operate">
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :disabled="opts.type === 'view'"
    >
      <el-row :gutter="20">
        <el-col :span="13">
          <el-form-item label="文件名称:" prop="fileName" class="formItem140">
            <el-input v-model="form.fileName" />
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item
            label="文件描述:"
            prop="fileDescription"
            class="formItem140"
          >
            <el-input
              type="textarea"
              v-model="form.fileDescription"
            />
          </el-form-item>
        </el-col>

        <el-col :span="13">
          <el-form-item label="文件:" prop="fileSaveRequestList" class="formItem140">
            <el-upload
              v-model:file-list="form.fileSaveRequestList"
              class="upload-demo"
              action="/prod-api/system/upload"
              :headers="uploadHeader"
              multiple
              :on-preview="handlePreview"
              style="width: 100%"
              :before-remove="beforeRemove"
            >
              <el-button type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { required } from "@/utils/validate-helper";
import { getProjectInfoNewList, getDicts } from "@/api/projectApproval";
import { projectInfoNewDetail } from "@/api/projectInformationNew";
import { FileSystemList } from "@/api/project/tenderReview";

import {
  projectPlanningPermissionAdd,
  projectPlanningPermissionEdit,
  projectPlanningPermissionDetail,
} from "@/api/xmsczl";
import { inheritAttr } from "@/utils/v3";
import { useDicts } from "@/hooks";
import uploadHeader from "@/utils/getUploadHeader";
import { Loading } from "element-plus/es/components/loading/src/service";
const { proxy } = getCurrentInstance();
const { sponge_land_type, findText } = useDicts(proxy);
const { pro_project_approval } = proxy.useDict("pro_project_approval");
const { planning_stage } = proxy.useDict("planning_stage");
const emit = defineEmits(["close"]);
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({}),
  },
  opts: {
    type: Object,
    default: () => ({}),
  },
  types: {
    type: Array,
    default: [],
  },
});
const { curRow, opts } = props;
let  form = ref({
  projectName: "",
  fileDescription: "",
  fileSaveRequestList: [],
  fileType :'flow'
});
const fileList1 = ref([]);

const rules = reactive({
  fileName: required("文件名称"),
  fileDescription: required("文件描述"),
  fileSaveRequestList: required("文件"),
});
const beforeUpload = (rawFile) => {
  console.log(rawFile);
};
const reoveFile = (fileList, index) => {
  proxy.$modal
    .confirm("是否确认删除？")
    .then(async () => {
      fileList.splice(index, 1);
    })
    .catch(() => {});
};
const getDetail = async () => {
  const {data} = await projectPlanningPermissionDetail(curRow.id);
 form.value =data;
 FileSystemList({
    refId: curRow?.id,
    refType: "examinationGuideline",
  }).then(({ data }) => {
    form.value.fileSaveRequestList=data
  });
};
const submit = () => {
  proxy.$refs.ruleForm.validate(async (valid, fields) => {
    if (valid) {
      const params = JSON.parse(JSON.stringify( form.value ));
      params.fileSaveRequestList = [];
      form.value.fileSaveRequestList.forEach((e) => {
        if (e.hasOwnProperty("response")) {
          e.response.data.refField  = "flow";
          e.response.data.refType   = "examinationGuideline";
          params.fileSaveRequestList.push(e.response.data);
        } else {
          params.fileSaveRequestList.push(e);
        }
      });
      let methed = "";
      if (curRow?.id) {
        params.id = curRow.id;
        methed = projectPlanningPermissionEdit;
      } else {
        methed = projectPlanningPermissionAdd;
      }
      const res = await methed(params);
      if (res?.code !== 200) return;
      proxy.$modal.msgSuccess("操作成功！");
      emit("close");
    } else {
      console.log("error submit!", fields);
    }
  });
};
onMounted(() => {
  if (curRow?.id) {
    getDetail();
  }
});

defineExpose({
  submit,
});
</script>

<style lang="scss" scoped>
.operate {
  .tips {
    margin-left: 10px;
    line-height: 30px;
  }

  .pl140 {
    padding-left: 140px;
  }

  .pl20 {
    margin-left: 20px;
  }

  .fileSaveRequestList {
    .file-item {
      white-space: nowrap;
      display: flex;
      align-items: center;
      .del {
        flex-shrink: 0;
        color: #f56c6c;
        cursor: pointer;
        margin-left: 10px;
      }
    }
  }
  .box {
    margin-bottom: 10px;
  }
}
</style>