<template>
  <el-dialog
    :title="titleValue"
    width="900px"
    :model-value="modelValue"
    append-to-body
    @close="closed"
  >
    <FormMessage
      v-model="formForData"
      :formList="formDataModel"
      ref="formRef"
      label-width="120px"
    >
    </FormMessage>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" @click="onComfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { defineProps, ref, onMounted } from "vue";
import { qcckGet } from "@/api/qcckApi.js";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  dic: {
    type: Object,
    default: () => {}
  },
  bqDl: {
    type: String,
    default: "01"
  },
  bqLx: {
    type: String,
    default: "01"
  },
  titleValue: {
    type: String,
    default: "选择大类"
  },
  LeaderType: {
    type: String,
    default: ""
  },
  //是否单选
  Single: {
    type: Boolean,
    default: true
  },
  roleIds: {
    type: Array,
    default: []
  }
});
const total = ref(0);
const listQuery = ref({});
// 表单数据
const formForData = ref({
  wxqId: "", // 微信群
  qqqId: "", // QQ群
  qzNc: "", // 群主昵称
  qzXm: "", // 群主姓名
  qzLxdh: "", // 联系人电话
  qZynr: "" // 群重要内容
});
const loading = ref(false);
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "chooseDate"]);
// 表单字段配置
const formDataModel = ref([
  { label: "微信群", prop: "wxqId", type: "input" },
  {
    label: "QQ群",
    prop: "qqqId",
    type: "input"
  },
  { label: "群主昵称", prop: "qzNc", type: "input" },
  { label: "群主姓名", prop: "qzXm", type: "input" },
  { label: "联系人电话", prop: "qzLxdh", type: "input" },
  { label: "群重要内容", prop: "qZynr", type: "input" }
]);
const closed = () => {
  emits("update:modelValue", false);
};

const keyid = (row) => {
  return row.id;
};
// 子表单提交方法
const onComfirm = () => {
  emits("chooseDate", formForData.value);
  closed();
};

defineExpose({});
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
  border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>
