<!--
 * @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 xflxList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="xfzz" label="巡防组长">
              <el-input @click="chooseUserVisible = true" v-model="listQuery.xfzz" 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">
                <span v-show=" xfzy.length == 0" style="color:#e5e5e5;padding-left:10px;">请选择组员</span>
                <el-tag v-for="tag in xfzy" :key="tag.id" closable  :type="tag.type"  @close.stop="handleClose(tag, 'MJ')">
                  {{ tag.jlxm }}
                </el-tag>
              </div>
            </el-form-item>
           <el-form-item prop="xfnr" style="width:100%;">
              <template #label>巡防内容 </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>巡防单位 </template>
              <el-table :data="listQuery.tableData" border>
                <el-table-column type="index" align="center" width="60px" label="序号" />
                <el-table-column prop="dwmc" align="center" label="单位名称" />
                <el-table-column prop="xxdz" 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%;">
              <ul class="photosBox">
                <li class="photosItem"> <el-image :src="Person" fit="cover" lazy /> </li>
                <li class="photosItem"> <el-image :src="Person" fit="cover" lazy /> </li>
                <li class="photosItem"> <el-image :src="Person" fit="cover" lazy /> </li>
                <li class="photosItem"> <el-image :src="Person" fit="cover" lazy /> </li>
              </ul>
            </el-form-item>

             <el-form-item label="巡防地址" style="width:100%;">
               <ul class="dzBox">
                 <li class="dzItem">
                    <div class="text">经度 ：<el-input placeholder="请选择经度" style="width:70%"></el-input></div>
                    <div class="text">纬度 ：<el-input placeholder="请选择纬度" style="width:70%"></el-input></div>
                 </li>
               </ul>
               <div class="mapBox"> <GdMap /> </div>
            </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/layout/default_male.png";
import GdMap from "@/components/Map/GdMap/index.vue";
import { ref,defineExpose, reactive,defineProps } from 'vue';
const props = defineProps({
    dic:{ type:Object, default:{} }
})

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({ 
  sfzh:'',
 
  tableData:[
    { dwmc:'人民医院',xxdz:'xxx街道',lxdh:'12345678900'}
  ]
}) //表单
const loading = ref(false)
const elform = ref()
const rules = reactive({
    ssbmdm: [{ required: true, message: "请选择单位归属",  trigger: "change" }],
    xfzz: [{ required: true, message: "请选择组长", trigger: ['change','blur']}],
})

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


// 初始化数据
const init = (type,id)=> {
    dialogForm.value = true
    disabledFoem.value = true
    title.value = '巡防战果详情'
    getDataById(id) //根据id查询详情
}
// 根据id查询详情
const getDataById = (id)=>{
  // qcckGet({},'/mosty-jcgl/tbJcglXfZg/'+id).then(res=>{
  //   listQuery.value = JSON.parse(JSON.stringify(res))
  // })
}
// 提交
const submit = ()=>{
    elform.value.validate((valid) => {
    if (!valid) return false;
    loading.value = true;
  });

}
// 关闭
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>