<!--
 * @Author: your name
 * @Date: 2024-01-25 16:21:46
 * @LastEditTime: 2024-01-26 10:10:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \my_web_new\src\views\backOfficeSystem\patrolManagement\task\editAddForm.vue
-->
<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 prop="ssbmdm" label="所属部门">
        <MOSTY.Department width="100%" clearable v-model="listQuery.ssbmdm" />
      </el-form-item>
      <el-form-item prop="ssxqid" label="所属巡区">
        <el-select v-model="listQuery.ssxqid">
          <el-option
            v-for="item in props.dic.D_XFTZ_XQLX"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="xfbmmc" label="走访对象">
        <el-input
          style="width: 100%"
          clearable
          v-model="listQuery.xfbmmc"
          placeholder="请填写走访对象"
        ></el-input>
      </el-form-item>
      <el-form-item prop="xzqhdm" label="行政辖区">
        <el-select v-model="listQuery.xzqhdm">
          <el-option
            v-for="item in props.dic.D_XFTZ_XZXQ"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="ssjdb" label="街道办">
        <el-input
          style="width: 100%"
          clearable
          v-model="listQuery.ssjdb"
          placeholder="请填写街道办"
        ></el-input>
      </el-form-item>
      <el-form-item prop="sssq" label="社区">
        <el-input
          style="width: 100%"
          clearable
          v-model="listQuery.sssq"
          placeholder="请填写社区"
        ></el-input>
      </el-form-item>
      <el-form-item prop="dwxz" label="走访对象类型">
        <el-select v-model="listQuery.dwxz">
          <el-option
            v-for="item in props.dic.D_XFTZ_DWXZ"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="dwfzrxm" label="负责人姓名">
        <el-input
          style="width: 100%"
          clearable
          v-model="listQuery.dwfzrxm"
          placeholder="请填写负责人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="dwfzrlxdh" label="负责人联系电话">
        <el-input
          style="width: 100%"
          clearable
          v-model="listQuery.dwfzrlxdh"
          placeholder="请填写负责人联系电话"
        ></el-input>
      </el-form-item>
      <el-form-item prop="zbfwly" label="安保服务来源">
        <el-select v-model="listQuery.zbfwly">
          <el-option
            v-for="item in props.dic.D_DWGL_ABFWLY"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="abfzrzxm" label="安保负责人姓名">
        <el-input
          style="width: 100%"
          clearable
          v-model="listQuery.abfzrzxm"
          placeholder="请填写安保负责人姓名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="abfzrzdh" label="安保负责人电话">
        <el-input
          style="width: 100%"
          clearable
          v-model="listQuery.abfzrzdh"
          placeholder="请填写安保负责人电话"
        ></el-input>
      </el-form-item>
      <el-form-item prop="bars" label="网格员/保安人数">
        <el-input
          style="width: 100%"
          clearable
          type="number"
          v-model="listQuery.bars"
          placeholder="请填写网格员/保安人数"
        ></el-input>
      </el-form-item>
      <el-form-item prop="dwdz" label="地址">
        <el-input
          style="width: 100%"
          clearable
          v-model="listQuery.dwdz"
          placeholder="请填写详细地址：区、街道、路、门牌号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="jd" label="经度">
        <el-input
          style="width: 100%"
          clearable
          type="number"
          v-model="listQuery.jd"
        ></el-input>
      </el-form-item>
      <el-form-item prop="wd" label="纬度">
        <el-input
          style="width: 100%"
          clearable
          type="number"
          v-model="listQuery.wd"
        ></el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <template #label>
          经纬度
          <el-button type="pramary" @click="chackLat">坐标</el-button></template
        >
      </el-form-item>

      <div style="width: 35%; height: 360px"><GdMap /></div>
      <el-form-item label="走访照片" style="width: 100%">
        <MOSTY.Upload
          width="800px"
          :limit="3"
          v-model="listQuery.xfzp"
        ></MOSTY.Upload>
      </el-form-item>
    </el-form>
    <ChooseUser
      v-if="chooseUserVisible"
      v-model="chooseUserVisible"
      titleValue="选择负责人"
      :roleIds="hasChooseFzr"
      @choosedUsers="hanlderChoose"
    ></ChooseUser>
  </div>
</template>

<script setup>
import ChooseUser from "@/components/MyComponents/ChooseUser";
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
import * as MOSTY from "@/components/MyComponents/index";
import * as rule from "@/utils/rules.js";
import { IdCard } from "@/utils/validate.js";
import Person from "@/assets/images/default_male.png";
import GdMap from "@/components/GdMap/index.vue";
import emitter from "@/utils/eventBus.js";
import {
  ref,
  defineExpose,
  reactive,
  onMounted,
  defineProps,
  getCurrentInstance
} from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["updateChange"]);
const imgList = ref([]);
const urlImg = ref("/bagl/mosty-base/minio/image/download/");
const props = defineProps({
  dic: { type: Object, default: {} }
});
const fileList = ref([]);
const xflxList = ref([
  { label: "巡访类型1", value: "01" },
  { label: "巡访类型2", value: "02" }
]);
const chooseUserVisible = ref(false); //负责人弹窗
const hasChooseFzr = ref([]); //已经选胡负责人
const hasChooseMj = ref([]); //已经选胡民警

const title = ref("新增巡访台账");
const disabledFoem = ref(false); //表单禁用
const dialogForm = ref(false); //弹窗
const xfzy = ref([]);
const listQuery = ref({}); //表单
const loading = ref(false);
const elform = ref();
const rules = reactive({
  ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "change" }],
  dwxz: [{ required: true, message: "请选择单位性质", trigger: "change" }],
  dwfzrxm: [{ required: true, message: "请输入负责人姓名", trigger: "change" }],
  dwfzrlxdh: [
    { required: true, message: "请输入负责人联系电话", trigger: "change" }
  ],
  abfzrzxm: [
    { required: true, message: "请输入安保负责人姓名", trigger: "change" }
  ],
  abfzrzdh: [
    { required: true, message: "请输入安保负责人电话", trigger: "change" }
  ],
  bars: [
    { required: true, message: "请输入网格员/保安人数", trigger: "change" }
  ],
  ssxqid: [{ required: true, message: "请输入所属巡区", trigger: "change" }],
  xfbmmc: [{ required: true, message: "请输入巡防部门", trigger: "change" }],
  xzqhdm: [{ required: true, message: "请选择行政辖区", trigger: "change" }],
  dwdz: [{ required: true, message: "请输入地址", trigger: "change" }]
});

//选择用户负责人
const hanlderChoose = (users) => {
  const user = users[0];
  hasChooseFzr.value = [user.id];
  listQuery.value.xfzz = user.userName;
};
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;
  listQuery.value.xfzp = [];
  if (type == "add") {
    disabledFoem.value = false;
    title.value = "新增巡访台账";
  } else if (type == "edit") {
    disabledFoem.value = false;
    title.value = "修改巡访台账";
  } else {
    disabledFoem.value = true;
    title.value = "巡访台账详情";
  }
  if (id) {
    getDataById(id); //根据id查询详情
  }
};
// 根据id查询详情
const getDataById = (id) => {
  qcckGet({ id }, "/mosty-jmxf/xftz/selectById").then((res) => {
    listQuery.value = JSON.parse(JSON.stringify(res));
    listQuery.value.xfzp = listQuery.value.xfzp
      ? listQuery.value.xfzp.split(",")
      : [];
  });
};

//获取经纬度
function chackLat(type) {
  emitter.emit("drawShape", { type: "point", flag: "point", isclear: true });
  listQuery.value.jd = "";
  listQuery.value.wd = "";
}
// 提交
const submit = () => {
  elform.value.validate((valid) => {
    if (!valid) return false;
    if (valid) {
      loading.value = true;
      if (listQuery.value.xfzp && Array.isArray(listQuery.value.xfzp))
        listQuery.value.xfzp = listQuery.value.xfzp.join(",");
      if (listQuery.value.id) {
        qcckPost(listQuery.value, "/mosty-jmxf/xftz/updateEntity")
          .then((res) => {
            proxy.$message({
              type: "success",
              message: "修改成功"
            });
            dialogForm.value = false;
            emits("updateChange");
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        qcckPost(listQuery.value, "/mosty-jmxf/xftz/addEntity")
          .then((res) => {
            proxy.$message({
              type: "success",
              message: "新增成功"
            });
            dialogForm.value = false;
            emits("updateChange");
          })
          .finally(() => {
            loading.value = false;
          });
      }
    }
  });
};
// 关闭
const close = () => {
  listQuery.value = { sfzh: "" };
  dialogForm.value = false;
};
defineExpose({ init });
</script>

<style lang='scss' scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
.photosBox {
  display: flex;
  flex-wrap: wrap;
  .photosItem {
    width: 98px;
    height: 130px;
    margin-right: 10px;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
}
.dzBox {
  width: 100%;
  margin-bottom: 4px;
  .dzItem {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4px;
    .text {
      width: 45%;
    }
  }
}
.mapBox {
  width: 100%;
  height: 600px;
}
.ipt {
  border: 1px solid rgb(7, 85, 188);
  width: 100%;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
  position: relative;
  background: #001238;
}
</style>
