<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="设备名称" prop="deviceName">
          <el-input v-model="editForm.deviceName"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType">
          <el-select v-model="editForm.deviceType" placeholder="请选择">
            <el-option
              v-for="item in typeArr"
              :key="item.id"
              :label="item.typeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备状态" prop="deviceStatus">
          <el-radio-group v-model="editForm.deviceStatus">
            <el-radio :label="'0'">正常</el-radio>
            <el-radio :label="'1'">故障</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设备别名" prop="deviceAliasName">
          <el-input v-model="editForm.deviceAliasName"></el-input>
        </el-form-item>
        <el-form-item label="设备编号" prop="deviceNo">
          <el-input v-model="editForm.deviceNo"></el-input>
        </el-form-item>
        <el-form-item label="安装地址" prop="address">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
        <el-form-item label="地图类型" prop="mapType">
          <el-select v-model="editForm.mapType">
            <el-option value="1" label="高德地图"></el-option>
            <el-option value="2" label="百度地图"></el-option>
            <el-option value="3" label="谷歌地图"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-row>
            <el-col :span="16">
              <el-input v-model="editForm.longitude" type="number"></el-input>
            </el-col>
            <el-col :span="8">
              <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" type="number"></el-input>
        </el-form-item>
        <el-form-item label="所属地区">
          <!-- <City @changeFun="qvChange" :valueqv="qvvalue" :param="dialogVisible"/> -->
          <el-cascader :options="options" :props="props" @change="qvChange" v-model="qvvalue"></el-cascader>
        </el-form-item>
        <!-- <el-form-item label="所属单位" prop="deptId">
          <el-input v-model="editForm.deptId"></el-input>
        </el-form-item>-->
        <el-form-item label="所属单位">
          <el-select v-model="editForm.enterpriseId" placeholder="请选择">
            <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="contacts">
          <el-input v-model="editForm.contacts"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="telephone">
          <el-input v-model="editForm.telephone"></el-input>
        </el-form-item>
        <el-form-item label="设备品牌" prop="deviceBrand">
          <el-input v-model="editForm.deviceBrand"></el-input>
        </el-form-item>
        <el-form-item label="品牌标识" prop="brandLogo">
          <el-input v-model="editForm.brandLogo"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="editForm.sort"></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 SensorMgEdit extends Vue {
  @Getter("signs") getsigns: any; //获取vuex中存储的数据

  //属性或参数中使用!:表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Prop(Boolean) dialogVisible!: Boolean;

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

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

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

  @Provide() typeArr: any = [];//类型type

  @Provide() deptList: any = [];

  @Provide() dialogTableVisible: Boolean = false;

  @Provide() rules: any = {
    deviceName: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ],
    // legendId: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    deviceType: [
      { required: true, trigger: "blur", message: "该项为必填项！" }
    ],
    address: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    mapType: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    longitude: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    latitude: [{ required: true, trigger: "blur", message: "该项为必填项！" }],
    deviceNo: [{ required: true, trigger: "blur", message: "该项为必填项！" }]
  };

  @Provide() loadmap: Boolean = false;

  // @Provide() qvvalue:any = [];
  @Provide() options: Object = [];
  @Provide() props: any = {
    value: "id",
    label: "label",
    children: "children"
  };
  // @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;
  // }
  getTypeList(){
    let that = this;
    (that as any).$axios
      .get(`zhDeviceInfo/getZHDeviceTypeList/`)
      .then((res: any) => {
        if (res.code == 0) {
          that.typeArr = res;
        } else {
          (that as any).$message({
              message: "操作成功！",
              type: "success"
            });
        }
      });
  }
  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 = Object.assign({}, that.editForm);
    (that as any).$refs[formName].validate((valid: boolean) => {
      if (valid) {
        (that as any).$axios
          .post(`/zhDeviceInfo/addOrEditZHDeviceInfo`, params)
          .then((res: any) => {
            if( res ){
              (that as any).$emit("dialogFun");
              (that as any).$message({
                message: "操作成功！",
                type: "success"
              });
              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;
    }
  }
  created() {
    // this.getTypeData();
    this.getTypeList();
    let cityData = localStorage.getItem("cityJson");
    if (typeof cityData == "string") {
      this.options = JSON.parse(cityData);
    }
    this.signsArr = [...this.getsigns];
    let varr = [];
    if (this.title == "编辑") {
      varr.push(this.editForm.provinceId);
      varr.push(this.editForm.cityId);
      varr.push(this.editForm.countyId);
    }
    this.qvvalue = varr;
    let that = this;
    METHOD.deptList(that, function(res: any) {
      that.deptList = res;
    });
  }
}
</script>
