<template>
  <div class="wrapper error">
    <div class="logo fl">
      <img src="../assets/logo.png" alt style="margin-left: 10px" />
      应急联动综合管理服务平台
    </div>
    <!--<div style="width: 100%;height: 30px; border-color:#fff "></div>-->
    <el-form ref="editForm" :model="editForm"  label-width="100px">

      <div class="demo-input-suffix"  style="margin-top: 0px;" prop="eventName">
        事件名称<button class="xing" type="text">*</button>:

        <el-input style ="width: 65%"
                  placeholder="输入事件名称"
                  v-model="editForm.eventName">
        </el-input>

      </div>
      <div class="demo-input-suffix"  prop="eventShortName">
        事件简称：
        <el-input style ="width: 65%"
                  placeholder="输入事件简称"
                  v-model="editForm.eventShortName">
        </el-input>
      </div>
      <div class="demo-input-suffix"  prop="eventType">
      <template>
        事件类型：
        <el-select style="width: 65%;" v-model="editForm.eventType" placeholder="请选择类型">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </template>
      </div>
      <div class="demo-input-suffix" style="display:none" prop="eventLevel">
        事件等级：
        <el-radio-group  v-model="editForm.eventLevel">
          <el-radio style="color: #fff" label="Ⅰ">Ⅰ级</el-radio>
          <el-radio style="color: #fff"  label="Ⅱ">Ⅱ级</el-radio>
          <el-radio style="color: #fff" label="Ⅲ">Ⅲ级</el-radio>
        </el-radio-group>
      </div>
      <div class="demo-input-suffix" >
        位置<button class="xing" type="text">*</button>:
        <el-input style ="width: 25%" prop="longitude"
                  size="mini"
                placeholder="经度"
                v-model="editForm.longitude" disabled>
        </el-input>
        <el-input style ="width: 25%" prop="latitude"
                placeholder="维度"
                  size="mini"
                v-model="editForm.latitude" disabled>
        </el-input>
        <el-button size="mini" plain class="primary" style="width: 20%;background:#1e9fff;color: #fff;margin-left: 5px" @click="MapdialogFun()">地图</el-button>
      </div>
        <Mapdialog

                :dialogTableVisible="dialogTableVisible"
                @dialogcancelFun="dialogcancelFun"
                :slat="editForm.latitude || 0"
                :slng="editForm.longitude || 0"
                @confirm="qrFun"
        />
      <div class="demo-input-suffix"  prop="eventAddress">
        事发地点<button class="xing" type="text">*</button>:
        <el-input style ="width: 65%"
                  placeholder="输入事发地点"
                  v-model="editForm.eventAddress">
        </el-input>
      </div>
      <div class="demo-input-suffix"  prop="alarmPeople">
        报案人员<button class="xing" type="text">*</button>:
        <el-input style ="width: 65%"
                  placeholder="报案人姓名"
                  v-model="editForm.alarmPeople">
        </el-input>
      </div>
      <div class="demo-input-suffix"  prop="alarmPeoplePhone">
        联系方式<button class="xing" type="text">*</button>:
        <el-input style ="width: 65%"
                  placeholder="报案人联系方式"
                  v-model="editForm.alarmPeoplePhone"
                  onInput="value = value.replace(/[^\d]/g,'')"
                 >
        </el-input>
      </div>

      <div class="demo-input-suffix"  prop="eventContent">
      事件描述：
    </div>
      <el-input style ="width: 80%;margin-left: 8%"
                type="textarea"
                placeholder="描述"
                v-model="editForm.eventContent">
      </el-input>
      <div class="demo-input-suffix"  prop="remarks">
        备注：
      </div>
      <el-input style ="width: 80%;margin-left: 8%"
                type="textarea"
                placeholder="备注"
                v-model="editForm.remarks">
      </el-input>
    </el-form>

    <div class="cent mainc">
      <el-button plain class="primary" style="width: 30%;background:#1e9fff;color: #fff;" @click="pushUrl('editForm')">提交</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .mapdiv{
    margin-left: 10%;
    width: 80%;
    height: 200px;
  }
  .xing{
    color:red;
    background-color:rgba(0,0,0,0);
    border-color:rgba(0,0,0,0);
    padding: 0
  }
  .mainc {
    left: 50%;
    text-align: center;
    margin-top: 20px;
    height: 100px;
  }
  .error {
    background: url("../assets/h5back.png") center no-repeat;
    width: 100%;
  }
  .demo-input-suffix{
    color:#fff;
    margin-left: 8%;
    margin-top: 20px;
  }
  .logo {
    font-size: 1.5em;
    color: #ffffff;
    font-weight: 700;
    width: 100%;
    margin-top: 5px;
    img {
      height: 40px;
      vertical-align: middle;
    }
  }
</style>
<script lang="ts">
    import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
    import { Message, Form } from "element-ui";
    import { State, Getter, Mutation, Action } from "vuex-class";
    import City from "@/components/city.vue";
    import Mapdialog from "@/components/maplnglatxiao.vue";
    import METHOD from "@/utils/methods";
    @Component({
        components: {City, Mapdialog}
    })
    export default class SubReport extends Vue {
        @Provide() stype:any = "a";
        @Provide() loadmap: Boolean = false;
        @Provide() dialogTableVisible: Boolean = false;
        @Provide() editForm: any = {
            eventName:'',
            eventShortName:'',
            eventType:'火灾',
            eventLevel:'Ⅲ',
            eventSource:'公众号'
        };
        @Provide() options: any = [{
            value: '水灾',
            label: '水灾'
        }, {
            value: '火灾',
            label: '火灾'
        }, {
            value: '突发',
            label: '突发'
        }];
        @Provide() value: any =  '火灾';

        pushUrl(formName: string){
            let that = this,
                params = that.editForm;
            if(params.eventName==''){
                Message.error('请输入事件名称')
                return false;
            }
            if( params.latitude==undefined){
                Message.error('请选择经纬度')
                return false;
            }
            if( params.longitude==undefined){
                Message.error('请选择经纬度')
                return false;
            }
            if(params.eventAddress==''|| params.eventAddress==undefined){
                Message.error('请输入事发地点')
                return false;
            }
            if(params.alarmPeople==''|| params.alarmPeople==undefined){
                Message.error('请输入报案人姓名')
                return false;
            }
            if(params.alarmPeoplePhone==''|| params.alarmPeoplePhone==undefined){
                Message.error('请输入报案人电话')
                return false;
            }
            // console.log( that.$refs['editForm'] )
                    (that as any).$axios
                        .post("/eventInfo/addOrEditEventInfo", params)
                        .then((res: any) => {
                            (that as any).$message({
                                message: "信息上报成功！",
                                type: "success"
                            });
                            that.editForm={
                                eventType:'火灾',
                                eventLevel:'Ⅲ',
                                eventSource:'公众号'
                            }
                        });

        }
        qrFun(v: any) {
            //确认选择经纬度
            this.editForm.longitude = v.lng;
            this.$refs.long;
            this.editForm.latitude = v.lat;
            // this.$set(this.editForm,'longitude',v.lng)
            console.log(this.editForm)
        }
        MapdialogFun() {
            this.loadmap = false;
            this.$nextTick(() => {
                this.loadmap = true;
            });
            this.dialogTableVisible = true;
        }
        dialogcancelFun() {
            this.dialogTableVisible = false;
        }
    }
</script>
