<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="dwmc" label="单位名称">
              <el-input v-model="listQuery.dwmc" placeholder="请输入单位名称"></el-input>
            </el-form-item>
            <el-form-item prop="dwfl" label="单位分类">
              <el-select v-model="listQuery.dwfl">
                <el-option v-for="item in props.dic.D_BZ_DWFL" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="dws" label="单位地址数">
              <el-input-number v-model="listQuery.dws" :min="0" style="width:100%;" placeholder="请输入单位地址数"></el-input-number>
            </el-form-item>
            <el-form-item prop="dwlx" label="单位类型">
              <el-select v-model="listQuery.dwlx">
                <el-option v-for="item in props.dic.D_BZ_DWLX" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="lxdh" label="联系电话">
              <el-input v-model="listQuery.lxdh" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item prop="dz" label="第一地址" style="width:100%;">
              <el-input v-model="listQuery.dz" placeholder="请输入第一地址"></el-input>
            </el-form-item>
            <el-form-item prop="dz1" label="第二地址" style="width:100%;">
              <el-input v-model="listQuery.dz1" placeholder="请输入第二地址"></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
              <template #label> 经纬度 <el-button type="pramary" @click="chackLat">坐标</el-button></template>
              <ul class="dzBox">
                <li class="dzItem">
                  <div class="text">经度 ：<el-input placeholder="请选择经度" style="width:90%" v-model="listQuery.jd"></el-input></div>
                  <div class="text">纬度 ：<el-input placeholder="请选择纬度" style="width:90%" v-model="listQuery.wd"></el-input></div>
                </li>
              </ul>
              <div class="mapBox">
                <div style="width:35%;height:360px"> <GdMap /></div>
                <div style="width:65%">
                  <el-form-item prop="xzry" style="width:100%;">
                    <template #label>选择人员</template>
                      <div class="searchBox1">
                        <div>姓名: <el-input v-model="searchForm.xm" placeholder="请输入姓名" style="width:72%"></el-input> </div>
                        <div>身份证号: <el-input v-model="searchForm.sfzh" placeholder="请输入身份证号" style="width:72%"></el-input> </div>
                        <el-button @click="serchDate">查询</el-button>
                        <el-button @click="resetDate">重置</el-button>
                        <el-button :disabled="chooseList.length == 0" @click="saveDate">保存</el-button>
                      </div>
                      <div style="width:100%;">
                        <div style="width:100%;height:260px;">
                          <el-table ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData" border style="width: 100%;height:100%;">
                            <el-table-column type="selection" width="55" />
                            <el-table-column type="index" align="center" width="60px" label="序号"/>
                            <el-table-column prop="xm" label="姓名" align="center"/>
                            <el-table-column prop="sfzh" label="身份证号" align="center"/>
                          </el-table>
                        </div>
                        <div style="width:100%;border-top:1px solid rgb(34,61,148);">
                          <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="searchForm.pageCurrent"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="searchForm.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="searchForm.total"
                          ></el-pagination>
                      </div>
                      </div>
                  </el-form-item>
                </div>
              </div>
          </el-form-item>
          <el-form-item prop="cyry" style="width:100%;">
              <template #label>
                从业人员  <el-button type="pramary" @click="showAdd = true">添加人员</el-button>
              </template>
            </el-form-item>
            <el-table :data="tableDataCnt" border>
              <el-table-column type="index" align="center" width="60px" label="序号" />
              <el-table-column prop="xm" align="center" label="姓名" />
              <el-table-column prop="sfzh" align="center" label="身份证号" />
              <el-table-column prop="jg" align="center" label="籍贯" />
              <el-table-column label="操作" align="center"  width="180px">
              <template #default="{ row }">
                <el-button @click="delDictItem(row)" type="danger" size="small" >删除</el-button>
              </template>
            </el-table-column>
            </el-table>
          <el-form-item prop="bz" label="备注" style="width:100%;">
            <el-input v-model="listQuery.bz" type="textarea" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
        <ChooseUser
          v-if="chooseUserVisible"
          v-model="chooseUserVisible"
          titleValue="选择负责人"
          :roleIds="hasChooseFzr"
          @choosedUsers="hanlderChoose"
      ></ChooseUser>
      <!-- 添加人员 -->
      <AddPerson v-model:showAdd="showAdd" @addDate="addDate"/>
    </div>
</template>

<script setup>
import ChooseUser from "@/components/MyComponents/ChooseUser";
import AddPerson from "./addPerson.vue";
import emitter from "@/utils/eventBus.js";
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, onMounted ,getCurrentInstance} from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
    dic:{ type:Object, default:{} }
})


const emits = defineEmits(['updateDate'])
const showAdd = ref(false);//添加人员
const chooseList = ref([]) //选择的成员
const multipleUserRef = ref(false)

const chooseUserVisible = ref(false) //负责人弹窗
const hasChooseFzr = ref([]); //已经选胡负责人
const hasChooseMj = ref([]); //已经选胡民警
const searchForm = ref({
  sfzh:'',
  xm:'',
  pageCurrent:1,
  pageSize:10,
  total:0
}) 

const title = ref('新增巡访任务管理');
const disabledFoem = ref(false) //表单禁用
const dialogForm = ref(false) //弹窗
const  xfzy = ref([])
const listQuery = ref({ dws :0}) //表单
const  tableData = ref([])
const tableDataCnt = ref([])
const loading = ref(false)
const elform = ref()
const rules = reactive({
    ssbmdm: [{ required: true, message: "请选择单位归属",  trigger: "change" }],
    xfzz: [{ required: true, message: "请选择组长", trigger: ['change','blur']}],
})
onMounted(()=>{
  getRyList() //获取人员数据
  emitter.on("coordString", (res) => {
    if (res.type === "point") {
      listQuery.value.jd = res.coord[0];
      listQuery.value.wd = res.coord[1];
    }
  });
})

//选择用户负责人
const hanlderChoose = (users) => {
  const user = users[0];
  hasChooseFzr.value = [user.id];
  listQuery.value.xfzz = user.userName
};

// 查询数据
const serchDate = ()=>{
  searchForm.value.pageCurrent = 1;
  getRyList()
}
// 重置数据
const resetDate = ()=>{
  searchForm.value.xm = ''
  searchForm.value.sfzh = ''
  serchDate()
}
// 新增数据
const addDate = (val)=>{
  tableDataCnt.value.unshift(val)
}
// 保存数据
const saveDate= ()=>{
  tableDataCnt.value = chooseList.value.concat(tableDataCnt.value)
  chooseList.value = [];
  multipleUserRef.value.clearSelection()
}

// 删除数据
const delDictItem = (row)=>{
  tableDataCnt.value = tableDataCnt.value.splice(row,1)
}

// 获取人员数据
const getRyList = ()=>{
  let pramas = {...searchForm.value }
  delete pramas.total;
  qcckGet(pramas,'/mosty-jcgl/tbJcglXfCyry').then(res=>{
    tableData.value = res.records?res.records:[]
    searchForm.value.total = res.total
  })
}
// 多选数据
const handleSelectionChange = (val)=>{
  chooseList.value = val
}

// 人员分页
const handleSizeChange = (val)=>{
  searchForm.value.pageSize = val
  getRyList()
}

// 人员页数
const handleCurrentChange = (val)=>{
  searchForm.value.pageCurrent = val
  getRyList()
}


// 初始化数据
const init = (type,id)=> {
    dialogForm.value = true
    disabledFoem.value = type == 'detail'? true :false
    if(id){
      title.value = type == 'detail'? '单位管理详情' :'单位管理编辑'
      getDataById(id) //根据id查询详情
    }else{
      title.value = '新增单位管理'
    }
}
// 根据id查询详情
const getDataById = (id)=>{
  qcckGet({},'/mosty-jcgl/tbJcglXfDwgl/'+id).then(res=>{
    res.cyry = res.cyry ? JSON.parse(res.cyry): []
    listQuery.value = JSON.parse(JSON.stringify(res))
    tableDataCnt.value = res.cyry
  })
}

//获取经纬度 
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;
    loading.value = true;
    let pramas = { ...listQuery.value }
    pramas.cyry = JSON.stringify(tableDataCnt.value)
    if(title.value == '新增单位管理'){
      qcckPost(pramas,'/mosty-jcgl/tbJcglXfDwgl').then(res=>{
        proxy.$message({type: "success", message: "新增成功"});
        loading.value = false;
        close()
        emits('updateDate')
      }).catch(()=>{ loading.value = false; })
    }else{
      qcckPut(pramas,'/mosty-jcgl/tbJcglXfDwgl').then(res=>{
        proxy.$message({type: "success", message: "编辑成功"});
        loading.value = false;
        close()
        emits('updateDate')
      }).catch(()=>{ 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%;
    }
  }
}
.searchBox1{
  display: flex;
  margin-bottom: 4px;
}
.mapBox{
  width: 100%;
  display: flex;
}
.ipt {
  border: 1px solid rgb(7, 85, 188);
  width: 100%;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
  position: relative;
  background: #001238;
}

</style>