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

                <el-form-item label='问题详情：'>
                    <el-input
                        v-model='formData.issueDetail'
                        autocomplete='off'
                        type='textarea'
                        :autosize='{minRows:2,maxRows:6}'
                        readonly
                    />
                </el-form-item>

                <el-form-item label='问题附件：' v-if='showFile'>
                    <el-icon>
                        <Link />
                    </el-icon>
                    <a :href='problemDetail.problemPath' target='_blank'>{{ problemDetail.problemName }}</a>
                </el-form-item>

                <el-form-item label='采取的措施：' prop='takeStep'>
                    <el-input
                        v-model='formData.takeStep'
                        autocomplete='off'
                        placeholder='请输入采取的措施'
                        type='textarea'
                    />
                </el-form-item>

                <el-form-item label='反馈报告：' prop='reportPath'>
                    <el-upload
                        ref='uploadRef'
                        action=''
                        accept='.doc,.docx,.xlsx,.xls,.pdf'
                        :limit='1'
                        :on-exceed='handleExceed'
                        :on-change='choose'
                        :auto-upload='false'
                        :on-progress="uploadFileName('reportPath')"
                    >
                        <template #trigger>
                            <el-button type='primary'>上传文件</el-button>
                        </template>
                    </el-upload>
                </el-form-item>

            </el-form>
        </el-scrollbar>

        <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, reactive, nextTick } from 'vue'
import { ElMessage, genFileId, UploadProps, UploadRawFile } from 'element-plus'
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
import { getFileNameAndFilePath, uploadFile } from '@/api/system-boot/file'
import { addFeedback } from '@/api/supervision-boot/leaflet'
import { Link } from '@element-plus/icons-vue'

//下拉数据源
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()
// 上传报告
const uploadRef = ref()
const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突
const formData = reactive({
    id: '',
    status: '',
    issueDetail: '',
    takeStep: '',
    reportPath: ''
})
//附件是否显示
const showFile = ref(false)

const problemDetail = reactive({
    problemPath: '',
    problemName: ''
})

//处理成效报告
const reportPath = ref('')

//form表单校验规则
const rules = {
    takeStep: [{ required: true, message: '请输入采取的措施', trigger: 'blur' }]
}
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

const open = async (text: string, id: string, status: any, issueDetail: string, problemPath?: string, takeStep?: string, reportPath?: string) => {
    title.value = text
    resetForm()
    if (takeStep) {
        formData.takeStep = takeStep
    }
    uploadRef.value?.clearFiles()
    if (reportPath) {
        formData.reportPath = reportPath
    }
    formData.id = id
    formData.status = status
    formData.issueDetail = issueDetail
    //判断附件是否存在，如果存在则回显出让用户可以点击下载
    if (problemPath) {
        let arrPath = problemPath.split(',')
        await getFileNameAndFilePath({ filePath: arrPath[0] }).then(res => {
            problemDetail.problemPath = res.data.url
            problemDetail.problemName = res.data.fileName
        })
        showFile.value = true
    }else{
        showFile.value = false
    }

    dialogVisible.value = true
}

/**
 * 提交用户表单数据
 */
const submit = () => {
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            if (!reportPath.value) {
                return ElMessage({
                    message: '请上传处理成效报告',
                    type: 'warning'
                })
            }
            if (formData.status == '3') {
                // await quitRunningDeviceUpdate(formData)
                ElMessage.success('重新发起成功')
                tableStore.index()
                dialogVisible.value = false
            } else {
                //此时该告警单处于待反馈状态
                await addFeedback(formData)
                //查询进线数据，避免一直处于loading状态
                ElMessage.success('申请成功')
                tableStore.index()
                dialogVisible.value = false
            }
        }
    })
}

defineExpose({ open })


let uploadName = ref('')
const choose = (e: any) => {
    uploadFile(e.raw, '/supervision/').then(res => {
        reportPath.value = res.data.name
        formData.reportPath = res.data.name
    })
}


const handleExceed: UploadProps['onExceed'] = files => {
    uploadRef.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadRef.value!.handleStart(file)
}

//上传报告改变
const uploadFileName = val => {
    uploadName.value = val
}
</script>

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

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


</style>
