<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="106px">
        <el-form-item label="选择企业" prop="enterpriseId" v-if="play">
          <el-select v-model="editForm.enterpriseId" placeholder="请选择" @change="seletChange">
            <el-option
                    v-for="item in enterpriseList"
                    :key="item.enterpriseId"
                    :label="item.unitName"
                    :value="item.enterpriseId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" prop="dataType">
          <el-select v-model="editForm.dataType">
            <el-option label="监控设备" value="1"></el-option>
            <el-option label="传感器" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="editForm.deviceName"></el-input>
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceNumber">
          <el-input v-model="editForm.deviceNumber"></el-input>
        </el-form-item>
        <el-form-item label="设备短号" prop="shortNum">
          <el-input v-model="editForm.shortNum"></el-input>
        </el-form-item>
        <el-form-item label="设备介绍" prop="deviceInfo">
          <el-input type="textarea" v-model="editForm.deviceInfo"></el-input>
        </el-form-item>
        <el-form-item label="设备IP" prop="deviceIp">
          <el-input v-model="editForm.deviceIp"></el-input>
        </el-form-item>
        <el-form-item label="设备登录名" prop="deviceLoginName">
          <el-input v-model="editForm.deviceLoginName"></el-input>
        </el-form-item>
        <el-form-item label="设备登录端口" prop="deviceLoginPort">
          <el-input v-model="editForm.deviceLoginPort"></el-input>
        </el-form-item>
        <el-form-item label="设备登录密码" prop="deviceLoginPwd">
          <el-input v-model="editForm.deviceLoginPwd"></el-input>
        </el-form-item>
        <el-form-item label="所在厂区位置" prop="factoryLocation">
          <el-input v-model="editForm.factoryLocation"></el-input>
        </el-form-item>
        <p style="color: #F56C6C;float: left;position: relative;left: 45px;">*</p>
        <el-form-item label="经纬度">
          <el-row>
            <el-col :span="8">
              <!--<el-input v-model="editForm.longitude"></el-input>-->
              <el-form-item prop="longitude" style="margin-right: 9px">
                <el-input v-model="editForm.longitude"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="latitude" style="margin-right: 9px">
                <el-input v-model="editForm.latitude"></el-input>
              </el-form-item>
              <!--<el-input v-model="editForm.latitude"></el-input>-->
            </el-col>
            <el-col :span="6">
              <el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <!--<el-form-item label="纬度" prop="latitude">
          <el-input v-model="editForm.latitude"></el-input>
        </el-form-item>-->
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="物品类型" prop="category">
          <el-input v-model="editForm.category"></el-input>
        </el-form-item>
        <!--<el-form-item label="否是重大危险源" prop="isBigDanger">
          <el-radio-group v-model="editForm.isBigDanger">
            <el-radio :label="'0'">否</el-radio>
            <el-radio :label="'1'">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="危险等级" prop="dangerGrade">
          <el-select v-model="editForm.dangerGrade" placeholder="请选择">
            <el-option value="一级"></el-option>
            <el-option value="二级"></el-option>
            <el-option value="三级"></el-option>
            <el-option value="四级"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="editForm.contacts"></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"
      :slng="editForm.longitude"
      @confirm="qrFun"
    />
  </div>
</template>
<style lang="scss">
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import Mapdialog from "@/components/maplnglat.vue";
import METHOD from "@/utils/methods";

@Component({
  components: { Mapdialog }
})
export default class SafetyDeviceMgEdit extends Vue {
  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;
  @Provide() loading: Boolean = false;
  @Prop(Object) editForm!: {
    deviceName: String;
    longitude: Number;
    latitude: Number;
    dataType: String;
    enterpriseId: String;
  };
  @Prop(String) title!: String;
 // @Provide() editForm: any = {};
  @Provide() enterpriseList: any = [];
  @Provide() qvvalue: any = []; //区域值
  @Provide() signsArr: any = []; //图例list
  @Provide() dialogTableVisible: Boolean = false;
  @Provide() rules: any = {
    enterpriseId: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    deviceName: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ],
    dataType: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    /*isBigDanger: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ],
    dangerGrade: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ],*/
    factoryLocation: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ],
    longitude: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    latitude: [{ required: true, trigger: "blur", message: "该项为必填项！" }]
  };
  @Provide() loadmap: Boolean = false;
  @Provide() play: Boolean = false;
  @Provide() enterpriseId: string = "dbe0c3268a3c4911913f35a2fdcd0e3e";

  qrFun(v: any) {
    //确认选择经纬度
    this.editForm.longitude = v.lng;
    this.editForm.latitude = v.lat;
  }
  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;
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        METHOD.axiosPost(
          that,
          `/safetyDeviceInfo/addOrEditSafetyDeviceInfo`,
          params,
          function(res: any) {
            if (res.code == 0) {
              (that as any).$emit("dialogFun");
              (that as any).$message({
                message: "操作成功！",
                type: "success"
              });
              that.$emit("refreshTableData"); //刷新表格
            }
          }
        );
      } else {
        return false;
      }
    });
  }
  getnterpriseListInfo() {
      let that = this,
          param ={accountStatus:'0'};
      that.loading = true;
      METHOD.axiosPost(
          that,
          `/enterpriseInfo/queryEnterpriseListInfo`,
          param,
          function(res: any) {
              that.loading = false;
              if (res.code == 0) {
                  that.enterpriseList = res.data;
              }
          }
      );
  }
getnterpriseListInfo() {
    let that = this,
        param ={accountStatus:'0'};
    that.loading = true;
    METHOD.axiosPost(
        that,
        `/enterpriseInfo/queryEnterpriseListInfo`,
        param,
        function(res: any) {
            that.loading = false;
            if (res.code == 0) {
                that.enterpriseList = res.data;
            }
        }
    );
}
  seletChange(enterpriseId: any) {
      let that = this,
          arr;
      arr = that.enterpriseList.filter((ele: any) => enterpriseId == ele.enterpriseId);
      that.editForm.enterpriseListId = arr[0].enterpriseId;
  }
  created() {
      //this.editForm = this.editFormData;
      if(METHOD.enterpriseId){
          this.enterpriseId = METHOD.enterpriseId;
      }else{
          //政府用户
          this.play = true;
          this.getnterpriseListInfo();
      }
  }
}
</script>
<style lang="scss">
@import "@/utils/public.scss";
</style>