<script lang="ts" setup>
import { useI18n } from '@/hooks/web/useI18n'
import { ref,onMounted } from 'vue'
import { applicationAdd,applicationUpdate } from '@/api/application/application'
import { ElMessage } from 'element-plus-secondary'
// import type { UploadProps } from 'element-plus'
const emit = defineEmits(['closeClick'])
const { t } = useI18n()
const isDialog:any = ref(true)
const isSwitch:any = ref(false)
const dataInfo:any = ref({
  type: '01',
  name: '',
  description: '',
  image: '',
  simplename:'',
  organization: ''
})
const props = defineProps({
  paramsObj: {
    type: Object,
    default: false
  }
})
onMounted(()=>{
  if(props.paramsObj.id != null){
    dataInfo.value = JSON.parse(JSON.stringify(props.paramsObj))
  }
})

const paramsObjRules = ref(
  {
  // name: [
  //   {
  //     required: true,
  //     message: "",
  //     trigger: 'change'
  //   }
  // ]
})
function paramsResetForm() {
  emit('closeClick', false)
}
function saveParamsObj(){
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  if(dataInfo.value.id != null){
    applicationUpdate(dataInfo.value).then(res => {
      ElMessage.success('编辑成功')
      emit('closeClick', true)
    }).catch(() => {
      isSwitch.value = false
    })
  }else{
    applicationAdd(dataInfo.value).then(res => {
      ElMessage.success('添加成功')
      emit('closeClick', true)
    }).catch(() => {
      isSwitch.value = false
    })
  }
 

}
const handleAvatarSuccess = file => {
  //   if (file.raw!.type !== 'image/jpeg'&& file.raw!.type !== 'image/png') {
  //   // ElMessage.error('Avatar picture must be JPG format!')
  //   return false
  // } else if (file.size / 1024 / 1024 > 2) {
  //   // ElMessage.error('Avatar picture size can not exceed 2MB!')
  //   return false
  // }
  const reader = new FileReader()
  reader.onload = (e) => {
    dataInfo.value.image = e.target.result // 这里会得到 base64 字符串
  }
  reader.readAsDataURL(file.raw) // 读取文件内容为 Data URL
}
</script>
<template>
  <el-dialog
        :title="'新建项目'"
        v-model="isDialog"
        width="570px"
        class="create-project-dialog"
        :before-close="paramsResetForm"
      >
        <el-form
          ref="paramsObjRef"
          :model="dataInfo"
          :rules="paramsObjRules"
        >
          <el-form-item :label="'项目名称'" prop="name">
            <el-input
              :placeholder="'请输入'"
              v-model="dataInfo.name"
            />
          </el-form-item>
          <el-form-item :label="'项目简称'" prop="simplename">
            <el-input
              :placeholder="'请输入'"
              v-model="dataInfo.simplename"
            />
          </el-form-item>
          <el-form-item :label="'用户单位'" prop="organization">
            <el-input
              :placeholder="'请输入'"
              v-model="dataInfo.organization"
            />
          </el-form-item>
          
          <el-form-item :label="'项目描述'" prop="name">
            <el-input
             :autosize="{ minRows: 4, maxRows: 8 }"
              type="textarea"
              :placeholder="'请输入'"
              v-model="dataInfo.description"
            />
          </el-form-item>
          <el-form-item :label="'上传logo'" prop="name">
            <el-upload
              class="avatar-uploader"
              action=""
              :auto-upload="false"
              accept=".jpeg,.jpg,.png,.gif,.svg"
              :show-file-list="false"
              :on-change="handleAvatarSuccess"
            >
              <img v-if="dataInfo.image != ''" :src="dataInfo.image" style="width: 223px;height: 120px;"/>
              <div v-else class="update-avatar">
                <img src="@/assets/newimg/u166.png" alt="">
                <div class="update-avatar-text">点击上传图片</div>
              </div>
              <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button class="tsbtn" secondary @click="paramsResetForm">{{ t('dataset.cancel') }} </el-button>
          <el-button class="tsbtn" type="primary" @click="saveParamsObj">{{ t('dataset.confirm') }} </el-button>
        </template>
      </el-dialog>
</template>

<style lang="less" scoped>
.ed-button.is-secondary{
  color: #F2F4F5;
  background-color: #212121;
  border: 1px solid #363636;
}
.ed-button--primary{
  background-color: #0089ff;
  border: 1px solid #0089ff;
}
:deep(.ed-input__wrapper){
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(67, 67, 67,0);
    border-radius: 4px;
    box-shadow:none;
    border: 1px solid rgb(67, 67, 67);
  }
  :deep(.ed-input__wrapper:hover){
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(67, 67, 67);
    border-radius: 4px;
    border: 1px solid #0089ff;
    box-shadow:none;
  }


  
  :deep(.ed-input__inner){
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(51, 51, 51, 0);
    border-radius: 4px;
    color: #fff;
  }
  :deep(.ed-input-group__prepend){
    background-color: rgba(37, 38, 38, 1);
    border: 0;
    box-shadow:0 0 0 1px transparent ;
    padding:0 10px;
    padding-right: 0;
    border-color: rgba(51, 51, 51, 0);
  }

  :deep(.ed-textarea__inner){
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(51, 51, 51, 0);
    border-radius: 4px;
    color: #fff;
    box-shadow: none;
    border: 1px solid #434343;
  }
  :deep(.ed-textarea__inner:hover){
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(51, 51, 51, 0);
    border-radius: 4px;
    color: #fff;
    box-shadow: none;
    border: 1px solid #0089ff;
  }



  .update-avatar{
    width: 223px;
    height: 120px;
    background: inherit;
    background-color: rgba(40, 40, 40, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(54, 54, 54, 1);
    border-radius: 4px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    .update-avatar-text{
      margin-top: 10px;
      width: 100%;
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #969696;
      text-align: center;
      text-align: center;
    }
  }
  
</style>
<style>

.create-project-dialog{
  --ed-dialog-bg-color: rgba(33, 33, 33, 1);
}
.create-project-dialog .ed-dialog__title{
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #F2F4F5;
}
.create-project-dialog .ed-form-item__label{
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #D2D2D2;
}

</style>
<style>
.ed-dialog__header{
  padding: 13px 20px;
  border-bottom: 1px solid #333333;
  margin-right: 0px;
}
.ed-dialog__headerbtn{
  color: #ffffff;
  top: 11px !important;
  right: 15px !important;
}
.ed-dialog__title{
  color: #ffffff;
}
.ed-dialog {
  border: 1px solid #4f5052;
  border-radius: 4px;
}
</style>
