<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form
        ref="ruleForm"
        :disabled="typeList.type == 1"
        :rules="xmlxwhRules"
        inline
        :model="FormList"
        label-width="auto"
      >
        <el-row>
          <el-form-item
            label="项目类型编码:"
            style="width: 45%"
            prop="projectTypeCode"
          >
            <el-input
              style="width: 100%"
              :disabled="typeList.type == 2"
              v-model="FormList.projectTypeCode"
              placeholder="请输入项目类型编码"
            />
          </el-form-item>
          <el-form-item
            label="项目类型名称:"
            style="width: 45%"
            prop="projectTypeName"
          >
            <el-input
              v-model="FormList.projectTypeName"
              placeholder="请输入项目类型名称"
            />
          </el-form-item>
          <el-form-item label="所属类型:" style="width: 45%" prop="ownership">
            <el-select
              clearable
              v-model="FormList.ownership"
              class="m-2"
              placeholder="请选择所属类型"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in ownership"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否启用:" style="width: 45%" prop="status">
            <el-select
              clearable
              v-model="FormList.status"
              class="m-2"
              placeholder="请选择是否启用"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in isStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="描述:" style="width: 94%" prop="remark">
            <el-input
              type="textarea"
              v-model="FormList.remark"
              placeholder="请输入描述"
            />
          </el-form-item>
          <el-form-item label="附件:" style="width: 93%">
            <el-upload
              v-model:file-list="fileList1"
              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>
              <template #tip>
                <div class="el-upload__tip">
                  支持CSV格式,可一次性上传多个文件
                </div>
              </template>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { projectInfoAdd, projectInfoEdit } from "@/api/xmlxwh";
import { systemUpload } from "@/api/imgwh";
import { stateOption } from "@/utils/common";
import { getToken } from "@/utils/auth";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, defineEmits, defineProps, defineExpose } from "vue";
import { xmlxwhRules } from "@/utils/rules";
const { typeList } = defineProps(["typeList"]);
const { proxy } = getCurrentInstance();
const { ownership } = proxy.useDict("ownership");
const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});
const fileList1 = ref([]);
let FormList = ref({});
const emits = defineEmits();
const isStatus = ref([
  { label: "是", value: "0" },
  { label: "否", value: "1" },
]);
function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function beforeRemove(file) {
  return true;
}
function submit() {
  proxy.$refs.ruleForm.validate((valid) => {
    if (valid) {
      FormList.value.fileSaveRequestList = [];
      fileList1.value.forEach((element) => {
        if (element.hasOwnProperty("response")) {
          element.response.data.refType = "proProjectType";
          FormList.value.fileSaveRequestList.push(element.response.data);
        } else {
          FormList.value.fileSaveRequestList.push(element);
        }
      });
      if (typeList.type) {
        projectInfoEdit(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
          }
        });
      } else {
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
          }
        });
      }
    }
  });
}
function desertFilds() {
  fileList1.value = [];
  proxy.$refs.ruleForm.resetFields();
}
defineExpose({ submit, desertFilds });
const systemUploadM = async (uploadFile, t) => {
  let formData = new FormData();
  formData.append("file", uploadFile.raw);
  let {
    data: { originalName, url, extension },
  } = await systemUpload(formData);
};
function handleExceed(uploadFile) {
  systemUploadM(uploadFile, 1);
}
onMounted(() => {
  FormList.value = typeList;
  fileList1.value = typeList.fileList1;
  console.log(FormList.value, "  FormList.value");
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
</style>