<template>
    <el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="right">
        <el-divider content-position="left">群体信息</el-divider>
        <el-form-item prop="qtmc" label="群体名称">
            <MOSTY.Other width="100%" clearable v-model="listQuery.qtmc" :placeholder="`请输入群体名称`"/>
        </el-form-item>  
        <el-form-item prop="qtbm" label="群体别名">
            <MOSTY.Other width="100%" clearable v-model="listQuery.qtbm" :placeholder="`请输入群体别名`"/>
        </el-form-item>  
        <el-form-item prop="qtjc" label="群体简称">
            <MOSTY.Other width="100%" clearable v-model="listQuery.qtjc" :placeholder="`请输入群体简称`"/>
        </el-form-item>  
        <el-form-item prop="qtlb" label="群体类别">
            <MOSTY.Other width="100%" clearable v-model="listQuery.qtlb" :placeholder="`请输入群体类别`"/>
        </el-form-item>  
        <el-form-item prop="clsj" label="成立时间">
            <el-date-picker v-model="listQuery.clsj" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width:100%;" />
        </el-form-item>  
        <el-form-item prop="fxdj" label="风险等级">
            <MOSTY.Select filterable v-model="listQuery.fxdj" :dictEnum="[]" width="100%"  clearable :placeholder="`请选择风险等级`"/>
        </el-form-item>  
        <el-form-item prop="fxjc" label="风险检测" style="width:100%">
            <div class="flex align-center">
                <MOSTY.Other filterable v-model="listQuery.fxjc" readonly />
                <span class="ml5"><el-icon color="#0072FF" style="top:4px" size="20px"><CirclePlus /></el-icon></span>
            </div>
        </el-form-item> 
        <el-form-item prop="ybjc" label="一般监测" style="width:100%">
            <div class="flex align-center">
                <MOSTY.Other filterable v-model="listQuery.ybjc" readonly />
                <span class="ml5"><el-icon color="#0072FF" style="top:4px" size="20px"><CirclePlus /></el-icon></span>
            </div>
        </el-form-item> 
        <el-form-item prop="ybjc" label="重点监测" style="width:100%">
            <div class="flex align-center">
                <MOSTY.Other filterable v-model="listQuery.zdjc" readonly />
                <span class="ml5"><el-icon color="#0072FF" style="top:4px" size="20px"><CirclePlus /></el-icon></span>
            </div>
        </el-form-item> 
        <el-form-item prop="ybjc" label="背景资料" style="width:100%">
            <MOSTY.Other filterable v-model="listQuery.bjzl" style="width:100%" />
        </el-form-item> 
        <el-form-item prop="ybjc" label="两群采集录入" style="width:100%">
            <MyTable
            :tableData="pageData.tableData"
            :tableColumn="pageData.tableColumn"
            :tableHeight="pageData.tableHeight"
            :key="pageData.keyCount"
            :tableConfiger="pageData.tableConfiger"
          />
        </el-form-item> 
        <el-divider content-position="left">群体管辖信息</el-divider>
        <el-form-item prop="gxdw" label="管辖单位">
            <MOSTY.Other width="100%" clearable v-model="listQuery.gxdw" :placeholder="`请输入管辖单位`"/>
        </el-form-item> 
        <el-form-item prop="gxxq" label="管辖辖区">
            <MOSTY.Other width="100%" clearable v-model="listQuery.gxxq" :placeholder="`请输入管辖辖区`"/>
        </el-form-item> 
        <el-form-item prop="lxr" label="联系人">
            <MOSTY.Other width="100%" clearable v-model="listQuery.lxr" :placeholder="`请输入联系人`"/>
        </el-form-item> 
        <el-form-item prop="lxfs" label="联系方式">
            <MOSTY.Other width="100%" clearable v-model="listQuery.lxfs" :placeholder="`请输入联系方式`"/>
        </el-form-item> 
        <el-divider content-position="left">审批信息</el-divider>
        <el-form-item prop="sqr" label="申请人">
            <MOSTY.Other width="100%" clearable v-model="listQuery.sqr" :placeholder="`请输入申请人`"/>
        </el-form-item> 
        <el-form-item prop="sqdw" label="申请单位">
            <MOSTY.Other width="100%" clearable v-model="listQuery.sqdw" :placeholder="`请输入申请单位`"/>
        </el-form-item> 
        <el-form-item prop="shr" label="审核人">
            <MOSTY.Other width="100%" clearable v-model="listQuery.shr" :placeholder="`请输入审核人`"/>
        </el-form-item> 
        <el-form-item prop="shdw" label="审核单位">
            <MOSTY.Other width="100%" clearable v-model="listQuery.shdw" :placeholder="`请输入审核单位`"/>
        </el-form-item> 
        <el-form-item prop="spr" label="审批人">
            <MOSTY.Other width="100%" clearable v-model="listQuery.spr" :placeholder="`请输入审批人`"/>
        </el-form-item> 
        <el-form-item prop="spdw" label="审批单位">
            <MOSTY.Other width="100%" clearable v-model="listQuery.spdw" :placeholder="`请输入审批单位`"/>
        </el-form-item> 
        <el-form-item prop="jsdw" label="接收单位">
            <MOSTY.Other width="100%" clearable v-model="listQuery.jsdw" :placeholder="`请输入接收单位`"/>
        </el-form-item> 
        <el-form-item prop="sffk" label="是否反馈">
            <MOSTY.Other width="100%" clearable v-model="listQuery.sffk" :placeholder="`请输入是否反馈`"/>
        </el-form-item> 
    </el-form>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/MyTable.vue";
import { reactive,defineEmits,ref , defineExpose,} from 'vue'
const emits = defineEmits(["update:modelValue"]);
const elform = ref();
const listQuery = ref({});
const rules = reactive({
    qtmc: [{ required: true, message: '请输入群体名称', trigger: 'blur' }],
})


const pageData = reactive({
  tableData: [],
  tableConfiger: {
    rowHieght: 30,
    showSelectType: "null",
    loading: false,
    haveControls:false,
    showIndex:false
  },
  tableHeight:200,
  tableColumn: [
    { label: "微信群", prop: "wxq"},
    { label: "QQ群", prop: "qqq"},
    { label: "群主", prop: "qz"},
    { label: "联系电话", prop: "lxdh"},
    { label: "群重要内容", prop: "zynr"},
  ]
});


const submit = (resfun) => {
  elform.value.validate((valid) => {
    if (!valid) return false;
    resfun(listQuery.value);
  });
};

defineExpose({ submit });
</script>

<style>

</style>