<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="documentCode">
            <el-input
              style="width: 100%"
               disabled
              v-model="FormList.documentCode"
              placeholder="请输入文档编码"
            />
          </el-form-item>
          <el-form-item label="项目类型名称:" style="width: 45%" prop="documentName">
            <el-input v-model="FormList.documentName" placeholder="请输入文档名称" />
          </el-form-item>
          <el-form-item label="文档负责人:" prop="documentDutyUserName" class="formItem110"  style="width: 45%" p>
            <el-select value-key="userId" v-model="FormList.documentDutyUserName" @change='dealUserChange' placeholder="请选择文档负责人" style="width: 100%" >
              <el-option v-for="dict in userLists" :key="dict.userId" :label="dict.nickName" :value="dict.userId" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式:" style="width: 45%" prop="phonenumber" >
            <el-input v-model="FormList.phonenumber" placeholder="请输入联系方式" disabled />
          </el-form-item>
          <el-form-item label="文档类容:" style="width: 94%" prop="documentContent">
          <WangEditor v-if="wonderIf"  :modelValue="FormList.documentContent" :isToolbar='1' @update:modelValue="getWEditVal"></WangEditor>
          </el-form-item>
          <el-form-item label="补充说明:" style="width: 94%" prop="description" >
            <el-input type="textarea" v-model="FormList.description" placeholder="请输入补充说明"  />
          </el-form-item>
          <el-form-item label="附件:" style="width: 93%">
            <el-upload
              v-model:file-list="fileList1"
              class="upload-demo"
              action="/system/upload"
              :headers="uploadHeader"
              multiple
              :on-preview="handlePreview"
              style="width: 100%"
              :before-remove="beforeRemove"
              :before-upload="handleBeforeUpload"
            >
              <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 ,projectBonusNoticeGetNumber} from '@/api/project/noticeReward';
import {
  userList,
} from '@/api/project/constructionPermits';
import { systemUpload } from '@/api/project/imgwh';
import { getToken } from '@/utils/auth';
import { ElMessageBox } from 'element-plus';
import { xmlxwhRules } from '@/utils/rules';
import WangEditor from '@/components/WangEditor/index.vue'; //富文本编辑器
import { watch } from 'vue';

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 userLists = 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 handleBeforeUpload(file) {
  if(file.name.length > 50) {
    proxy.$modal.msgError(`文件名称过长(50个字符以内)，请先修改再上传!`);
    return false
  }
  return true
}
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 = 'projectBonusNotice';
          FormList.value.fileSaveRequestList.push(element.response.data);
        } else {
          FormList.value.fileSaveRequestList.push(element);
        }
      });
      console.log(userIdNme,'userIduserId');
      FormList.value.documentDutyUserName= userIdNme.value
      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 = [];
  FormList.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);
}
//文档负责人
const getUserList = async () => {
  const res = await userList();
  if (res?.code !== 200) return;
  userLists.value = res?.data || [];
  FormList.value = typeList;
  fileList1.value = typeList.fileList1;
  wonderIf.value=true
  let str=Number(FormList.value.documentDutyUserName)||''
  FormList.value.documentDutyUserName=str
  getPhone(str)
  if(!typeList.type) {
    projectBonusNoticeGetNumberM()
  }
};
// 富文本编辑器内容获取
function getWEditVal(val) {
  FormList.value.documentContent = val;
}
let  userIdNme=ref(0)
//w文档负责人修改
function getPhone(v){
  userLists.value.forEach((i)=>{
    if(i.userId==v){
       FormList.value.phonenumber=i.phonenumber
    }
  })
    userIdNme.value=v
}
function dealUserChange(v){
  getPhone(v)
}
//获取编号
async function projectBonusNoticeGetNumberM(){
  let { data}=await projectBonusNoticeGetNumber()
   fileList1.value = [];
  FormList.value={}
  FormList.value.documentCode=data

}
const wonderIf=ref(false)
onMounted(() => {
  getUserList();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
</style>