<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">{{ title }}</span>
      <div>
          <el-button type="primary" size="small" :loading="loading" @click="submit" v-show="!disabledFoem">保存</el-button>
          <el-button size="small" @click="close">关闭</el-button>
      </div>
    </div>
    <el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" :disabled="disabledFoem" label-position="top">
      <el-form-item label="所属部门">
        <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm"/>
      </el-form-item>
      <el-form-item prop="jwzLx" label="检查站类型">
        <el-select v-model="listQuery.jwzLx" placeholder="请选择检查站类型" style="width: 100%">
          <el-option v-for="(item, index) in D_BZ_JWZLX" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="xjSj" label="建立时间">
        <el-date-picker  v-model="listQuery.xjSj" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%"/>
      </el-form-item>
      <el-form-item prop="jwzMc" label="检查站名称">
        <el-input v-model="listQuery.jwzMc" placeholder="请输入检查站名称" clearable style="width: 100%"/>
      </el-form-item>
      <el-form-item prop="jwzjgdm" label="检查站机构代码">
        <el-input v-model="listQuery.jwzjgdm" placeholder="请输入检查站机构代码" clearable style="width: 100%"/>
      </el-form-item>
      <el-form-item prop="jwzDz" label="检查站详细地址">
        <el-input v-model="listQuery.jwzDz" placeholder="请输入检查站详细地址" clearable style="width: 100%"/>
      </el-form-item>
      <el-form-item prop="fzrXm" label="负责人">
        <el-input @click="mjVisible = true" v-model="listQuery.fzrXm" placeholder="请选择负责人姓名" clearable style="width: 100%" />
      </el-form-item>
      <el-form-item prop="fzrSfzh" label="负责人身份证号码">
        <el-input v-model="listQuery.fzrSfzh" placeholder="请输入负责人身份证号码" clearable style="width: 100%"/>
      </el-form-item>
      <el-form-item prop="snwsp" label="室内外视频">
        <el-input v-model="listQuery.snwsp" placeholder="请输入" clearable style="width: 100%"/>
      </el-form-item>
      <el-form-item style="width: 100%" prop="upload" label="图片上传">
        <MOSTY.Upload width="100%" :limit="2" v-model="listQuery.upload" ></MOSTY.Upload>
      </el-form-item>
      <el-form-item class="one" prop="jd" label="坐标位置">
        <div class="latlng">
          <el-input v-model="listQuery.jd" clearable style="width: 45%"/>
          <el-input v-model="listQuery.wd" clearable style="width: 45%"/>
          <el-button @click="chackLat">选取坐标</el-button>
        </div>
      </el-form-item>
      <el-form-item class="one">
        <div class="map"><GdMap v-if="dialogFormVisible" /> </div>
      </el-form-item>
    </el-form>
    <MjLoad :Single="true" v-model="mjVisible" titleValue="选择负责人" @choosedUsers="hanlderChooseMj"/>
  </div>
</template>

<script setup>
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
import GdMap from "@/components/GdMap/index.vue";
import { qcckGet, qcckPost ,qcckPut} from "@/api/qcckApi.js";
import * as MOSTY from "@/components/MyComponents/index";
import { IdCard } from "@/utils/validate.js";
import { ref,defineExpose, reactive,defineProps,getCurrentInstance ,defineEmits, onMounted} from 'vue';
const props = defineProps({
    dic:{ type:Object, default:{} }
})
const emits = defineEmits(['updateDate'])
const { proxy } = getCurrentInstance();
const mjVisible = ref(false); //民警弹窗
const validateIdentity = () => {
  return (rule, value, callback) => {
    if (!value) {
      return callback(new Error('身份证号不能为空'));
    } else if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
      callback(new Error("输入的身份证长度或格式错误"));
    }
    //身份证城市
    var aCity = {
      11: "北京",
      12: "天津",
      13: "河北",
      14: "山西",
      15: "内蒙古",
      21: "辽宁",
      22: "吉林",
      23: "黑龙江",
      31: "上海",
      32: "江苏",
      33: "浙江",
      34: "安徽",
      35: "福建",
      36: "江西",
      37: "山东",
      41: "河南",
      42: "湖北",
      43: "湖南",
      44: "广东",
      45: "广西",
      46: "海南",
      50: "重庆",
      51: "四川",
      52: "贵州",
      53: "云南",
      54: "西藏",
      61: "陕西",
      62: "甘肃",
      63: "青海",
      64: "宁夏",
      65: "新疆",
      71: "台湾",
      81: "香港",
      82: "澳门",
      91: "国外"
    };
    if (!aCity[parseInt(value?.substr(0, 2))]) {
      callback(new Error("身份证地区非法"));
    }
    // 出生日期验证
    var sBirthday = ( value.substr(6, 4) + "-" + Number(value.substr(10, 2)) + "-" + Number(value.substr(12, 2))).replace(/-/g, "-"),
    d = new Date(sBirthday);
    let yyyy = d.getFullYear();
    let mm = d.getMonth() + 1;
    let dd = d.getDate();
    if (sBirthday !== yyyy + "-" + mm + "-" + dd) {
      listQuery.value.csrq= "";
      callback(new Error("身份证上的出生日期非法"));
    } else {
      let month = mm < 10 ? "0" + mm : mm;
      listQuery.value.csrq= yyyy + "-" + month + "-" + dd;
    }
    // 身份证号码校验
    var sum = 0,
      weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
      codes = "10X98765432";
    for (var i = 0; i < value.length - 1; i++) {
      sum += value[i] * weights[i];
    }
    var last = codes[sum % 11]; //计算出来的最后一位身份证号码
    if (value[value.length - 1] !== last) {
      listQuery.value.xb = ''
      callback(new Error("输入的身份证号非法"));
    } else {
      listQuery.value.csrq= IdCard(listQuery.value.sfzh,1)
      if (parseInt(value.substr(16, 1)) % 2 === 1) {
        listQuery.value.xb = "1";
      } else {
        listQuery.value.xb = "2";
      }
    }
    callback();
  };
};
const title = ref('新增警务站管理');
const disabledFoem = ref(false) //表单禁用
const dialogForm = ref(false) //弹窗
const listQuery = ref({ fzrSfzh:''}) //表单
const loading = ref(false)
const elform = ref()
const rules = reactive({
  fzrSfzh: [
    { required: true, message: "请输入身份证",  trigger: "blur" },
    { trigger: "change", validator: validateIdentity()}
  ],
  fzrXm: [{required: true, message: "请输入负责人姓名"}],
  jwzLx: [{ required: true, message: "请选择检查站类型"}],
  ssbmdm: [{required: true, message: "请选择所属部门" }],
  xjSj: [{ required: true, message: "请选择建立时间" }],
  jwzMc: [{ required: true, message: "请输入检查站名称"}]
})

onMounted(()=>{
  emitter.on("coordString", (res) => {
    if (res.type === "point") {
      listQuery.value.jd = res.coord[0];
      listQuery.value.wd = res.coord[1];
    }
  });
})

// 初始化数据
const init = (type,id)=> {
    dialogForm.value = true
    disabledFoem.value = type == 'detail' ? true :false
    if(id){
      title.value = type == 'edit'?'修改警务站管理':'警务站管理详情'
      getDataById(id) //根据id查询详情
    }else{
      title.value = '新增警务站管理'
    }
}
// 根据id查询详情
const getDataById = (id)=>{
  qcckGet({},'/mosty-jmxf/tbJcglXfCyry/'+id).then(res=>{
    listQuery.value = JSON.parse(JSON.stringify(res))
  })
}
// 提交
const submit = ()=>{
    elform.value.validate((valid) => {
    if (!valid) return false;
    loading.value = true;
    if(title.value == '新增警务站管理'){
      qcckPost(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
        proxy.$message({type: "success", message: "新增成功"});
        close()
        emits('updateDate')
        loading.value = false;
      }).catch(()=>{ loading.value = false; })
    }else{
      qcckPut(listQuery.value,'/mosty-jmxf/tbJcglXfCyry').then(res=>{
        proxy.$message({type: "success", message: "编辑成功"});
        close()
        loading.value = false;
        emits('updateDate')
      }).catch(()=>{ loading.value = false; })
    }
  });
}
// 关闭
const close = ()=>{
  listQuery.value = { fzrSfzh :''}
  dialogForm.value = false
}

//获取经纬度 - 圈层范围清空
function chackLat(type) {
  listQuery.value.jd = "";
  listQuery.value.wd = "";
  emitter.emit("deletePointArea", "jcz_ht");
  emitter.emit("drawShape", { type: "point", flag: "jcz_ht" ,isclear:true});
}
defineExpose({init});
</script>

<style lang='scss' scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

</style>