<template>
  <div class="wrapper editwrap">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <!-- <el-form-item label="所属地区">
          <City @changeFun="qvChange" :valueqv="qvvalue" :param="dialogVisible" />
        </el-form-item>
        <el-form-item label="所属单位">
          <el-select v-model="editForm.unitId" placeholder="请选择" @change="selectedBFun">
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.fullName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="事件名称" prop="eventName">
          <el-input v-model="editForm.eventName"></el-input>
        </el-form-item>
        <el-form-item label="事件简称" prop="eventShortName">
          <el-input v-model="editForm.eventShortName"></el-input>
        </el-form-item>
        <el-form-item label="事件类型" prop="eventType">
          <el-select v-model="editForm.eventType" placeholder="请选择" @change="seletChangeEventSortArr" filterable>
            <el-option
                    v-for="item in eventSortArr"
                    :key="item.dictId"
                    :label="item.name"
                    :value="item.dictId.toString()"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件等级" prop="eventLevel">
          <el-radio-group v-model="editForm.eventLevel">
            <el-radio label="Ⅰ">Ⅰ级</el-radio>
            <el-radio label="Ⅱ">Ⅱ级</el-radio>
            <el-radio label="Ⅲ">Ⅲ级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="事发地点" prop="eventAddress">
          <el-input v-model="editForm.eventAddress"></el-input>
        </el-form-item>
        <el-form-item label="报案人" prop="alarmPeople">
          <el-input v-model="editForm.alarmPeople"></el-input>
        </el-form-item>
        <el-form-item label="报案人电话" prop="alarmPeoplePhone">
          <el-input v-model="editForm.alarmPeoplePhone"></el-input>
        </el-form-item>
        <el-form-item label="事发时间" prop="alarmTime">
          <el-date-picker
            v-model="editForm.alarmTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="经纬度" prop="longitude">
          <el-row>
            <el-col :span="8">
              <el-input v-model="editForm.longitude" type="number"></el-input>
            </el-col>
            <el-col :span="8">
              <el-input v-model="editForm.latitude" type="number"></el-input>
            </el-col>
            <el-col :span="5">
              <el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="事件描述" prop="eventContent">
          <el-input type="textarea" autosize v-model="editForm.eventContent"></el-input>
        </el-form-item>
        <el-form-item label="事件来源" prop="eventSource">
          <el-input v-model="editForm.eventSource"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="editForm.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="confirmFun('editForm')">确定</el-button>
        <el-button @click="$emit('dialogFun')" size="small">取消</el-button>
      </span>
    </el-dialog>
    <Mapdialog
      v-if="loadmap"
      :dialogTableVisible="dialogTableVisible"
      @dialogcancelFun="dialogcancelFun"
      :slat="editForm.latitude || 0"
      :slng="editForm.longitude || 0"
      @confirm="qrFun"
    />
  </div>
</template>
<style lang="scss">
  .el-col {
    margin-left: 0;
    margin-right: 10px;
  }
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import City from "@/components/city.vue";
import Mapdialog from "@/components/maplnglat.vue";
import METHOD from "@/utils/methods";

@Component({
  components: { City, Mapdialog }
})
export default class EventsMgEdit extends Vue {
  // @Getter('signs') signsData: any;
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;

  @Prop(Object) editForm!: {
    fullName: String;
    // provinceId: String;
    // cityId: String;
    // countyId: String;
    longitude: Number;
    latitude: Number;
  };
  @Prop(String) title!: String;

  @Provide() qvvalue: any = []; //区域值

  @Provide() signsArr: any = []; //图例list

  @Provide() typeArr: any = [];

  @Provide() deptList: any = []; //单位

  @Provide() dialogTableVisible: Boolean = false;

  @Provide() eventSortArr: any = [];

  @Provide() rules: any = {
    eventName: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    alarmPeople: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    eventType: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    alarmTime: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    alarmPeoplePhone: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    longitude: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    latitude: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    eventLevel: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ],
    eventAddress: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ]
  };

  @Provide() loadmap: Boolean = false;

  @Watch("editForm") formChange(row: any) {
    let varr = [];
    if (this.title == "编辑") {
      varr.push(row.provinceId);
      varr.push(row.cityId);
      varr.push(row.countyId);
    }
    this.qvvalue = varr;
  }
  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;
  }
  //取消事件要在父级取消是所以用到 $emit
  confirmFun(formName: string) {
    let that = this,
      params = that.editForm;
      // console.log( that.$refs['editForm'] )
      // return
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        (that as any).$axios
          .post("/eventInfo/addOrEditEventInfo", params)
          .then(() => {
            (that as any).$message({
              message: "操作成功！",
              type: "success"
            });
            (that as any).$emit("dialogFun");
            that.$emit("refreshTableData"); //刷新表格
          });
      } else {
        return false;
      }
    });
  }
  // qvChange(v: any) {
  //   switch (v.length) {
  //     case 1:
  //       this.editForm.provinceId = v[0];
  //       break;
  //     case 2:
  //       this.editForm.provinceId = v[0];
  //       this.editForm.cityId = v[1];
  //       break;
  //     case 3:
  //       this.editForm.provinceId = v[0];
  //       this.editForm.cityId = v[1];
  //       this.editForm.countyId = v[2];
  //       break;
  //   }
  // }
  //获取图例类型
  getTypeData() {
    let that = this,
      id = this.$route.matched[1].meta.listId;
    (that as any).$axios
      .get(`/legendInfo/getChildLegendInfoByParentId/${id}`)
      .then((res: any) => {
        that.typeArr = res;
      });
  }
  seletChangeEventSortArr(dictId: any) {
      let that = this,
          arr;
      arr = that.eventSortArr.filter((ele: any) => dictId == ele.dictId);
      that.editForm.eventType = arr[0].name;
  }
  //事件分类
  getEventSort() {
      let that = this;
      (that as any).$axios
          .get(
              `/dict/getSysDictByDictTypeCode/event_sort`
          )
          .then((res: any) => {
              that.eventSortArr = res;
          });
  }
  created() {
    let that = this;
    that.getEventSort();
    /*METHOD.deptList(that, function(res: any) {
      that.deptList = res.data;
    });
    that.getTypeData();
    let varr = [],
      row = that.editForm;
    if (that.title == "编辑" && row.provinceId && row.cityId && row.countyId) {
      varr.push(row.provinceId);
      varr.push(row.cityId);
      varr.push(row.countyId);
      that.qvvalue = varr;
    } else {
      that.qvvalue = [];
    }*/
  }
}
</script>