<template>
    <div class="detailsDialog">
        <el-dialog width="836px" center v-if="detailsDialogData.dialogVisible" :visible.sync="detailsDialogData.dialogVisible" title="详情">
            <el-form label-width="120px" ref="ruleForm" :rules="rules" :model="detailsDialogData.data" label-position="top">
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="报警时间:" prop="alarmTime">
                            <el-date-picker 
                            disabled
                            value-format="yyyy-MM-dd HH:mm:ss" 
                            v-model="detailsDialogData.data.alarmTime"                      
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报警类型:" prop="alarmType">
                            <el-select v-model="detailsDialogData.data.alarmType" placeholder="请选择报警病害类型" clearable disabled>
                                <el-option label="泥石流" value="1"></el-option>
                                <el-option label="异物侵限" value="2"></el-option>
                                <el-option label="断轨监测" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="报警来源:" prop="source">
                            <el-select disabled v-model="detailsDialogData.data.source" placeholder="请选择报警来源" clearable>
                                <el-option
                                    v-for="item in monitorNameData"
                                    :key="item.monitorSystemName"
                                    :label="item.monitorSystemName"
                                    :value="item.clientId"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报警属性:" prop="alarmAttr">
                            <el-input disabled placeholder="请输入报警病害属性" v-model="detailsDialogData.data.alarmAttr"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="报警线路编码:" prop="alarmRailway">
                            <el-input disabled placeholder="请输入报警线路编码" v-model="detailsDialogData.data.alarmRailway"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报警级别:" prop="alarmLevel">
                            <el-select disabled v-model="detailsDialogData.data.alarmLevel" placeholder="请选择报警级别" clearable>
                                <el-option label="一级" value="1"></el-option>
                                <el-option label="二级" value="2"></el-option>
                                <el-option label="三级" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="报警里程位置:" prop="alarmMile">
                            <el-input disabled placeholder="请输入报警里程位置" v-model="detailsDialogData.data.alarmMile"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报警置信度:" prop="alarmConfidence">
                            <el-input disabled placeholder="请输入报警置信度" v-model="detailsDialogData.data.alarmConfidence"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="行别:" prop="lineDir">
                            <el-select disabled placeholder="请选择行别" clearable v-model="detailsDialogData.data.lineDir">
                               <el-option label="上行" value="1"></el-option> 
                               <el-option label="下行" value="2"></el-option> 
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="报警信息内容:" prop="content">
                            <el-input disabled placeholder="请输入报警信息内容" v-model="detailsDialogData.data.content" type="textarea" :rows="2"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row> 
                <el-row :gutter="24">                    
                    <el-col :span="12">
                        <el-form-item label="唯一标识:" prop="alarmId">
                            <el-input disabled placeholder="请输入唯一标识" v-model="detailsDialogData.data.alarmId"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="推送车次:" prop="trainNum">
                            <el-input disabled placeholder="请输入推送车次" v-model="detailsDialogData.data.trainNum"></el-input>
                        </el-form-item>
                    </el-col>                     
                </el-row>               
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="附件上传图片:">
                            <!-- <el-upload ref="uploadFile" class="upload-demo" drag action="#"
                                :http-request="uploadHttpRequest" :auto-upload="false" :file-list="fileList" :on-change="uploadFileList">
                                <i class="el-icon-upload" />
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>                                
                            </el-upload> -->
                            <div style="width: 300px;" v-if="detailsDialogData.data.fileUrl">
                                <img :src="detailsDialogData.data.fileUrl" style="width: 100%;height: 100%;"/>
                            </div>
                            <div style="width:300px" v-else></div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>        
        </el-dialog>
    </div>
</template>
<script>
import { importPng } from '@/api/analogData'
import { monitorNameList } from "@/api/monitor";
export default {
    name:'addDialog',
    props:{
        detailsDialogData:{
            type: Object,
            default: {} 
        }
    },
    data() {
        return {
            addImitateData:{
                alarmTime:'',
                alarmType:'',
                alarmRailway:'',
                alarmLevel:'',
                alarmMile:'',
                alarmId:'',
                alarmAttr:'',
                alarmConfidence:'',
                lineDir:'',
                content:'',
                files:[]
            },
            monitorNameData: [],
            fileList: [],
            rules:{
              alarmTime:[{required: true, message: '请选择报警时间', trigger: 'change' }] ,
              alarmType:[{required: true, message: '请选择报警病害类型', trigger: 'change' }] ,
              alarmRailway :[{required: true, message: '请输入报警线路编码', trigger: 'blur' }] ,
              alarmLevel:[{required: true, message: '请选择报警级别', trigger: 'change' }] ,
              alarmMile:[{required: true, message: '请输入报警里程位置', trigger: 'blur' }] ,
              alarmConfidence:[{required: true, message: '请输入报警置信度', trigger: 'blur' }] ,
              lineDir:[{required: true, message: '请选择行别', trigger: 'change' }] ,
              content:[{required: true, message: '请输入报警信息内容', trigger: 'blur' }] ,
              alarmId:[{required: true, message: '请输入唯一标识', trigger: 'blur' }] ,
              alarmAttr:[{required: true, message: '请输入报警病害属性', trigger: 'blur' }] ,
              source:[{required: true, message: '请选择报警来源', trigger: 'change' }],
              trainNum:[{required: true, message: '请输入推送车次', trigger: 'blur' }]
            }
        }
    },
    created() {
        this.getMonitoreName();
    },
    methods:{
        getMonitoreName() {
            let params = {};
            monitorNameList(params).then((response) => {
                        this.monitorNameData = response.data;
                    });
            },
        uploadFileList(file) {
            if (file.status === 'ready') {
                this.fileList.push(file)
                if (this.fileList.length > 1) {
                this.fileList.splice(0, 1)
                }
            }            
            let formData = new FormData();
            formData.append('stream', this.fileList[0].raw)
            formData.append('size', '1')
            formData.append('contentType', 'contentType')
            formData.append('alarmMile', this.addImitateData.alarmMile)
            formData.append('alarmRailway', this.addImitateData.alarmRailway)
            formData.append('lineDir', this.addImitateData.lineDir)
            let configHeaders = {
                headers: { "Content-Type": "multipart/form-data" }
            };
            let isHttpRequest = this.fileList[0].raw.name.split('.')                    
            if (isHttpRequest[isHttpRequest.length - 1] == 'png') {
            importPng(formData).then(res => {
            if (res.message == "成功") {
                    this.$message({
                        type: 'success',
                        message: '导入成功!'
                    });
                    // let uid = this.fileList[0].raw.uid
                    // let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)
                    // this.$refs.uploadFile.uploadFiles.splice(idx, 1)                                        
                    this.addImitateData.files[0] = res.data.url
                }else{
                    this.$message({
                        type: 'error',
                        message: res.data
                    });
                }
                })
                } else {
                    this.$message({
                    type: 'error',
                    message: '上传的文件只能是png格式!'
                    });
                    let uid = this.fileList[0].raw.uid
                    let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)
                    this.$refs.uploadFile.uploadFiles.splice(idx, 1)
                }
        },
        addImitateDataBtn() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.$emit('addImitateData',this.addImitateData)
                }
            })
        },
        closeDialog() {
            this.addImitateData = {
                alarmTime:'',
                alarmType:'',
                alarmRailway:'',
                alarmLevel:'',
                alarmMile:'',
                alarmConfidence:'',
                lineDir:'',
                content:'',
                files:[]
            }
            this.addDialogData.dialogVisible = false            
        }
    }
}

</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body{
  padding: 20px 95px !important;
}
.dialog-footer{    
    div {        
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }

      div:hover {
        cursor: pointer;
      }
      .search {
        margin: 0 12px;
        background-color: #2766DD;
        color: #fff;
      }

      .search:hover {
        background-color: #4D85F4;
      }
      .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
      }

      .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
      }
}
// 选中后radio文本的颜色
::v-deep .el-radio__input.is-checked+.el-radio__label {
    color: #2766DD
}

/* radio选中后小圆点的颜色 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
    background: #2766DD !important;
    border-color: #2766DD !important;
}
.changKerBtn{
    margin: 0px 10px 15px 0;
    cursor: pointer;
    text-align: center;
    height: 39px;
    color: #fff;
    border-radius: 2px;
    border: 1px solid #ABC7FD;
    font-weight: 400;
    font-size: 14px;
    background-color: #2250C8;
}
</style>