<template>
  <el-dialog draggable class='cn-operate-dialog' v-model='dialogVisible' :title='title' width='550px' top='20vh'>
    <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>

      <el-form-item label='所属供电公司' >
        <el-input
            readonly
            v-model='form.dept'
        ></el-input>
      </el-form-item>

      <el-form-item label='终端名称' >
        <el-input
            readonly
            v-model='form.deviceName'
        ></el-input>
      </el-form-item>


      <el-form-item for='-' label='本次定检时间：' prop='nowCheckTime'>
        <el-date-picker
            v-model='form.nowCheckTime'
            placeholder='选择日期'
            format='YYYY-MM-DD'
            style='width: 100%'
            value-format='YYYY-MM-DD'
            type='date'
        />
      </el-form-item>

      <el-form-item for='-' label='报告文件：' class='uploadFile' prop='reportPath'>
        <el-upload
            v-model:file-list='form.reportPath'
            ref='uploadRef'
            action=''
            accept=''
            :limit='1'
            :on-exceed='handleExceed'
            :on-change='choose'
            :auto-upload='false'
            :on-remove='removeFile'
        >
          <template #trigger>
            <el-button type='primary'>上传文件</el-button>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label='描述' prop='description'>
        <el-input
            type='textarea'
            clearable
            :autosize='{ minRows: 2, maxRows: 4 }'
            placeholder='请输入描述'
            v-model='form.description'
        ></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
            <span class='dialog-footer'>
                <el-button @click='dialogVisible = false'>取消</el-button>
                <el-button type='primary' @click='submit'>确认</el-button>
            </span>
    </template>
  </el-dialog>
</template>
<script lang='ts' setup>
import { ref, inject } from 'vue'
import { genFileId, ElMessage } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { uploadFile } from '@/api/system-boot/file'
import { reload, submitDevice } from '@/api/supervision-boot/cycleDetection/index'

const emits = defineEmits(['onSubmit'])
//下拉数据源

const title = ref('')
const formRef = ref()
const reportPath = ref('')

const dialogVisible = ref(false)

// 注意不要和表单ref的命名冲突
const form: any = ref({
  id: '',
  reportPath: [],
  description: '',
  nowCheckTime: '',
  dept: '',
  deviceName: ''
})

//form表单校验规则
const rules = {
  reportPath: [{ required: true, message: '请上传文件', trigger: 'change' }],
  nowCheckTime: [{ required: true, message: '请选择定检时间', trigger: 'change' }],
  description: [{ required: true, message: '请输入描述', trigger: 'blur' }]
}

const open = async (text: string, tempData?: any) => {
  title.value = text
  if (tempData) {
    form.value.id = tempData.id
    form.value.dept = tempData.dept
    form.value.deviceName = tempData.deviceName
    form.value.status = tempData.status
    
    if (tempData.status == null) {
      form.value.reportPath = []
      form.value.description = ''
    } else {
      form.value.reportPath = [{ name: tempData.checkFilePath.split('/')[2] }]
      form.value.description = tempData.description
      form.value.nowCheckTime = tempData.thisTimeCheck
    }
  }

  dialogVisible.value = true
}

/**
 * 提交用户表单数据
 */
const submit = () => {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      if (form.value.status == null) {
        submitDevice({ ...form.value, reportPath: reportPath.value }).then(res => {
          ElMessage({
            message: '提交成功!',
            type: 'success'
          })
          dialogVisible.value = false
          emits('onSubmit')
        })
      } else {
        reload({ ...form.value, reportPath: reportPath.value }).then(res => {
          ElMessage({
            message: '提交成功!',
            type: 'success'
          })
          dialogVisible.value = false
          emits('onSubmit')
        })
      }
    }
  })
}
// 上传报告
const uploadRef = ref()
const handleExceed: UploadProps['onExceed'] = files => {
  uploadRef.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  uploadRef.value!.handleStart(file)
}
const choose = (e: any) => {
  uploadFile(e.raw, '/supervision/').then(res => {
    reportPath.value = res.data.name
    // reportPath.value = '测试aaa'
  })
}

//移除文件上传
const removeFile = (file: any, uploadFiles: any) => {
  console.log(file, uploadFiles)
}

defineExpose({ open })
</script>

<style scoped lang='scss'>
.el-upload-list__item {
  transition: none !important;
}

.el-select {
  min-width: 180px;
}

::v-deep .el-tree-node__children > div {
  display: block !important;
}
</style>
