<!--
 * @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="xflx" label="巡防类型">
            <el-select v-model="listQuery.xflx">
              <el-option v-for="item in props.dic.D_BZ_XFLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="xfzzXm" label="巡防组长">
            <el-input @click="chooseUserVisible = true" v-model="listQuery.xfzzXm" placeholder="请选择组长"></el-input>
          </el-form-item>
          <el-form-item prop="xfzzSfzh" label="巡防组长身份证号">
            <el-input v-model="listQuery.xfzzSfzh" placeholder="请选择巡防组长身份证号"></el-input>
          </el-form-item>
          <el-form-item prop="lxdh" label="巡防时间">
            <el-date-picker v-model="listQuery.xfsj" type="datetime" placeholder="请选择巡防时间"  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
          <el-form-item prop="xfzy" label="巡防组员" style="width:100%;">
            <div class="ipt" @click="chooseZY">
              <span v-show=" listQuery.xfzy.length == 0" style="color:#e5e5e5;padding-left:10px;">请选择组员</span>
              <el-tag v-for="(tag,index) in listQuery.xfzy" :key="tag.id" :closable="!disabledFoem"  :type="tag.type"  @close.stop="handleClose(index)">
                {{ tag.xm }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item prop="xfnr" style="width:100%;">
            <template #label>巡防内容 <el-button type="pramary" @click="showNrDialog = true">选择模板</el-button></template>
            <el-input v-model="listQuery.xfnr" placeholder="请输入巡防内容" show-word-limit type="textarea" />
          </el-form-item>
          <el-form-item prop="xfdw" style="width:100%;">
            <template #label>巡防单位 <el-button type="pramary" @click="showDialog = true">选择模板</el-button></template>
              <el-table :data="listQuery.xfdw" border style="width:100%;">
              <el-table-column type="index" align="center" width="60px" label="序号" />
              <el-table-column prop="dwmc" align="center" label="单位名称" />
              <el-table-column prop="dz" align="center" label="地址"  show-overflow-tooltip />
              <el-table-column prop="lxdh" align="center" label="联系电话" />
            </el-table>
          </el-form-item>
          <el-form-item label="巡防照片" style="width:100%;">
            <el-upload
              action="/mosty-api/mosty-base/minio/image/upload/id"
              v-model:file-list="fileList"
              list-type="picture-card"
              :on-remove="handleRemove"
              :on-success="upImg">
              <el-icon><Plus></Plus></el-icon>
            </el-upload>
          </el-form-item>
            <el-form-item label="巡防地址" style="width:100%;">
              <div class="mapBox"><GdMap /> </div>
          </el-form-item>
      </el-form>
      <ChooseUser v-if="chooseUserVisible" v-model="chooseUserVisible" titleValue="选择负责人" :roleIds="hasChooseFzr" @choosedUsers="hanlderChoose" ></ChooseUser>
      <!-- 下发单位 -->
      <XfdwDialog v-if="showDialog" v-model="showDialog" @choosedList="choosedList" :roleIds="chooseIds"/>
      <!-- 巡防内容 -->
      <XfnrDialog v-if="showNrDialog" :Single="true" v-model="showNrDialog" @choosedList="choosedNrList" :roleIds="chooseIds"/>
      <!-- 选择人员 -->
      <Ryload v-if="peoDialog" v-model:modelValue="peoDialog" @choosedUsers="hanlderChooseRy" :roleIds="roleIdsPeo"/>
    </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import ChooseUser from "@/components/MyComponents/ChooseUser";
import XfdwDialog from './xfdwDialog.vue'
import XfnrDialog from './xfnrDialog.vue'
import Ryload from '@/components/MyComponents/ChooseJz/ryload.vue'
import { qcckGet, qcckPost ,qcckPut} 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/layout/default_male.png";
import GdMap from "@/components/Map/GdMap/index.vue";
import { ref,defineExpose, reactive,defineProps,defineEmits,getCurrentInstance } from 'vue';
const props = defineProps({
  dic:{ type:Object, default:{} }
})
const { proxy } = getCurrentInstance();
const emits = defineEmits(['updateDate'])
const peoDialog = ref(false)
const showDialog = ref(false); //弹窗
const chooseIds = ref([]); //ids
const showNrDialog = ref(false)
const chooseNrIds = ref([]); //ids

const chooseUserVisible = ref(false) //负责人弹窗
const hasChooseFzr = ref([]); //已经选胡负责人
const hasChooseMj = ref([]); //已经选胡民警
import people from "@/assets/images/peo.png";
const title = ref('新增巡访任务管理');
const disabledFoem = ref(false) //表单禁用
const dialogForm = ref(false) //弹窗
const listQuery = ref({ 
  sfzh:'',
  xfdw:[],
  xfzy:[]
}) //表单
const loading = ref(false)
const elform = ref()
const rules = reactive({
    ssbmdm: [{ required: true, message: "请选择单位归属",  trigger: "change" }],
    xfzzXm: [{ required: true, message: "请选择组长", trigger: ['change','blur']}],
    xfzy: [{ required: true, message: "请选择组员", trigger: ['change','blur']}],
})
const roleIdsPeo = ref([])

const imgList = ref([]);
const urlImg = ref("/mosty-api/mosty-base/minio/image/download/");
const fileList = ref([])

// 初始化数据
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-jcgl/tbJcglXf/'+id).then(res=>{
    listQuery.value = res
    listQuery.value.xfdw = res.xfdw ? JSON.parse(res.xfdw) :[]
    listQuery.value.xfzy = res.xfzy ? JSON.parse(res.xfzy) :[]
    roleIdsPeo.value = listQuery.value.xfzy.map(item=>{ return item.id })
    emitter.emit("deletePointArea",'zfry')
    let ids = res.xfzp.split(',')
    fileList.value = []
    ids.forEach(element => {
      let obj = {name:element,url:urlImg.value + element }
      fileList.value.push(obj)
    });
    if(listQuery.value.xfdw.length == 0) return false;
    let list = listQuery.value.xfdw
    emitter.emit("setMapCenter", {location:[list[0].jd,list[0].wd],zoomLevel:10})
    emitter.emit("addPointArea", {coords: list, icon: require("@/assets/home/icon-jz.png"), flag: "zfry"});
  })
}

// 移除
function handleRemove(val){
  imgList.value = imgList.value.filter(item=>{
    return item.uuid != val.uuid
  })
  fileList.value = fileList.value.filter(item=>{
    return item.name != val.name
  })
}
// 上传
function upImg(row,file) {
  file.data = row.data
  imgList.value.push(file)
}

// 选择人员
const hanlderChooseRy = (val)=>{
  listQuery.value.xfzy = val
  roleIdsPeo.value = val.map(item=>{ return item.id})
}
// 删除
const handleClose = (index)=>{
  listQuery.value.xfzy.splice(index,1)
  roleIdsPeo.value.splice(index,1)
}
// 选择组员
const chooseZY = ()=>{
  if(disabledFoem.value) return false;
  peoDialog.value = true
}

//选择用户负责人
const hanlderChoose = (users) => {
  const user = users[0];
  hasChooseFzr.value = [user.id];
  listQuery.value.xfzzXm = user.userName
  listQuery.value.xfzzSfzh = user.idEntityCard
};
// 选择人员
const choosedList = (val)=>{
  emitter.emit("deletePointArea",'zfry')
  listQuery.value.xfdw = val
  chooseIds.value = val.map(item=>{ return item.id})
  showDialog.value = false;
  let list = val.filter(item=>{return item.jd && item.wd})
  if(list.length == 0) return false;
  emitter.emit("setMapCenter", {location:[list[0].jd,list[0].wd],zoomLevel:10})
  emitter.emit("addPointArea", {coords: list, icon: require("@/assets/home/icon-jz.png"), flag: "zfry"});
}
// 选择内容
const choosedNrList = (val)=>{
  showNrDialog.value = false
  chooseNrIds.value = val.map(item=>{ return item.id })
  listQuery.value.xfnr = val[0].nr
}

// 提交
const submit = ()=>{
    elform.value.validate((valid) => {
    if (!valid) return false;
    loading.value = true;
    let pramas = { ...listQuery.value }
    pramas.xfzy = JSON.stringify(pramas.xfzy)
    pramas.xfdw = JSON.stringify(pramas.xfdw)
    let ids1 = imgList.value.map(item=>{ return item.data})
    let ids2 = fileList.value.map(item=>{ return item.name})
    let ids = [...ids1,...ids2]
    pramas.xfzp = ids.join(',')
    if( title.value == '新增巡访任务管理'){
      qcckPost(pramas,'/mosty-jcgl/tbJcglXf').then(res=>{
        proxy.$message({type: "success", message: "新增成功"});
        close()
        emits('updateDate')
        loading.value = false;
      }).catch(()=>{ loading.value = false; })
    }else{
      qcckPut(pramas,'/mosty-jcgl/tbJcglXf').then(res=>{
        proxy.$message({type: "success", message: "新增成功"});
        close()
        emits('updateDate')
        loading.value = false;
      }).catch(()=>{ loading.value = false; })
    }
  });

}
// 关闭
const close = () =>{
  listQuery.value = { xfdw:[],xfzy:[]}
  dialogForm.value = false
  imgList.value = []
  fileList.value = []
}
defineExpose({init});
</script>

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

.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>