<template>
  <div class="info-container">
    <!-- 布控信息 -->
    <FormMessage v-model="listQuery" :formList="formData" ref="elform">
      <!-- 预警标签模型-->
      <template #yjbqList>
        <div class="boxlist">
          <MyTable
            :tableData="tableDate.yjbqList"
            :tableColumn="tableDate.tableColumn"
            :tableHeight="tableDate.tableHeight"
            :key="tableDate.keyCount"
            :tableConfiger="tableDate.tableConfiger"
            :controlsWidth="tableDate.controlsWidth"
          >
            <template #bqYs="{ row }">
              <DictTag :value="row.bqYs" :tag="false" :options="D_GS_SSYJ" />
            </template>
            <template #bqDj="{ row }">
              <DictTag :tag="false" :value="row.bqDj" :options="D_GS_BQ_DJ" />
            </template>
          </MyTable>
        </div>
      </template>
    </FormMessage>
    <!-- 按钮 -->

    <div class="btns">

    </div>
    <MyTable
      :tableData="pageData.tableData"
      :tableColumn="pageData.tableColumn"
      :key="pageData.keyCount"
      :tableConfiger="pageData.tableConfiger"
      :controlsWidth="pageData.controlsWidth"
      @chooseData="chooseData"
    >
      <template #fjZp="{ row }">
        <img width="30" src="@/assets/images/icon100.png" alt="" />
      </template>
      <template #ryXb="{ row }">
        <DictTag :tag="false" :value="row.ryXb" :options="D_BZ_XB" />
      </template>
      <template #qtTbsc="{ row }">
        <div>
          {{ row.qtTbsc == true ? "是" : "否" }}
        </div>
      </template>
      <template #bkLx="{ row }">
        <DictTag :tag="false" :value="row.bkLx" :options="D_GS_BK_LX" />
      </template>
      <!-- <template #controls="{ row }">
        <el-button size="small" type="primary" link>查看档案</el-button>
        <el-button size="small" type="primary" @click="editData(row)" link
          >编辑</el-button
        >
        <el-button size="small" type="danger" @click="deleteData(row.id)" link
          >删除</el-button
        >
      </template> -->
    </MyTable>
    <!-- 列表弹窗 -->



  </div>
</template>
<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { qcckPost, qcckPut } from "@/api/qcckApi.js";
import { add } from "lodash";
import { tr } from "element-plus/es/locale.mjs";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const { D_GS_BK_DX, D_GS_BK_SSJZ, D_GS_SSYJ, D_GS_BQ_DJ, D_BZ_XB, D_GS_BK_LX } =
  proxy.$dict(
    "D_GS_BK_DX",
    "D_GS_BK_SSJZ",
    "D_GS_SSYJ",
    "D_GS_BQ_DJ",
    "D_BZ_XB",
    "D_GS_BK_LX"
  ); //获取字典数据

const formRef = ref();

const dialogFormVisible = ref(false);
const chooseShow = ref(false); //选择弹窗
const chooseTitle = ref(""); //选择弹窗
const dialogForm = ref(false); //弹窗
const chooseType = ref("01"); //选择弹窗类型
const listQuery = ref({}); //表单
const roleIds = ref([]); //角色id
const dialogTitle = ref("新增信息"); //弹窗标题
// 表单数据
const formForData = ref({
  ryXm: "", // 姓名
  ryXb: "", // 性别
  rySfzh: "", // 身份证号
  ryHjd: "", // 户籍地
  ryXjd: "", // 现居住地
  rySjhm: "", // 手机号
  qtTbsc: false, // 同步上传
  clCph: "", // 车牌号
  clCjh: "", // 车号
  qtTxzh: "", // 特许证号
  bkLx: "", // 人员标签
  fjZp: "" // 照片
});

// 表单字段配置
const formDataModel = ref([
  { label: "姓名", prop: "ryXm", type: "input", width: "45%" },
  {
    label: "性别",
    prop: "ryXb",
    type: "select",
    options: D_BZ_XB,
    width: "45%"
  },
  { label: "身份证号", prop: "rySfzh", type: "input", width: "45%" },
  { label: "户籍地", prop: "ryHjd", type: "input", width: "45%" },
  { label: "现居住地", prop: "ryXjd", type: "input", width: "45%" },
  { label: "手机号", prop: "rySjhm", type: "input", width: "45%" },
  { label: "同步上传", prop: "qtTbsc", type: "switch" },
  { label: "车牌号", prop: "clCph", type: "input", width: "45%" },
  { label: "车架号", prop: "clCjh", type: "input", width: "45%" },
  { label: "特许证号", prop: "qtTxzh", type: "input", width: "45%" },
  {
    label: "布控类型",
    prop: "bkLx",
    type: "radio",
    width: "45%",
    options: D_GS_BK_LX
  },

  { label: "照片", prop: "fjZp", type: "upload" },
  { label: "人员标签", prop: "rybqList", type: "slot", width: "100%" } // 使用插槽自定义
]);
// 表单验证规则
// const rulesModel = {
//   ryXm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
//   ryXb: [{ required: true, message: "请选择性别", trigger: "change" }],
//   rySfzh: [
//     { required: true, message: "请输入身份证号", trigger: "blur" },
//     {
//       pattern: /^\d{17}[\dXx]$/,
//       message: "身份证号格式不正确",
//       trigger: "blur"
//     }
//   ],
//   rySjhm: [
//     { required: true, message: "请输入手机号", trigger: "blur" },
//     { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" }
//   ]
// };
const tableDate = reactive({
  yjbqList: [], //表格数据
  rybqList: [], //内置表格数据
  keyCount: 0,
  rykeyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false
  },
  total: 0,
  tableHeight: 225,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 90, //操作栏宽度
  tableColumn: [
    { label: "标签名称", prop: "bqMc", showOverflowTooltip: true },
    { label: "标签代码", prop: "bqDm" },
    { label: "标签等级", prop: "bqDj", showSolt: true },
    { label: "标签颜色", prop: "bqYs", showSolt: true }
  ]
});
const editFormRef = ref(null);
const currentEditIndex = ref(null);
const pageData = reactive({
  tableData: [], //表格数据
  rykeyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "checkBox",
    loading: false,
    size: "small",
    border: false
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  controlsWidth: 220, //操作栏宽度
  tableColumn: [
    { label: "照片", prop: "fjZp", showSolt: true },
    { label: "姓名", prop: "ryXm" },
    { label: "性别", prop: "ryXb", showSolt: true },
    { label: "身份证号", prop: "rySfzh" },
    { label: "户籍地", prop: "ryHjd" },
    { label: "现居住地", prop: "ryXjd" },
    { label: "手机号", prop: "rySjhm" },
    { label: "同步上传", prop: "qtTbsc", showSolt: true },
    { label: "车牌号", prop: "clCph" },
    { label: "车架号", prop: "clCjh" },
    { label: "特许证号", prop: "qtTxzh" },
    { label: "布控类型", prop: "bkLx", showSolt: true },
    { label: "人员标签", prop: "" }
  ]
});
const formData = ref([
  {
    label: "布控标题",
    prop: "bkBt",
    type: "input",
    disabled: true
  },

  {
    label: "所属警种",
    prop: "bkSsjz",
    type: "select",
    options: D_GS_BK_SSJZ,
    disabled: true
  },
  {
    label: "布控对象",
    prop: "bkDx",
    type: "select",
    options: D_GS_BK_DX,
    disabled: true
  },
  { label: "预警标签模型", prop: "yjbqList", type: "slot", width: "80%" }
]);
// const rules = reactive({
//   bkBt: [{ required: true, message: "请输入布控标题", trigger: "blur" }],
//   bkObj: [{ required: true, message: "请选择布控对象", trigger: "blur" }],
//   yjbqList: [
//     { required: true, message: "请选择预警标签模型", trigger: "change" }
//   ]
// });


// 接收父组件传入的数据并回显
const setFormData = (data) => {
  tableDate.yjbqList = data.yjbqList;
  listQuery.value = {
    ...data // 假设 data 包含所有需要的字段
  };
  pageData.tableData = data.bkdxList;
  console.log(listQuery.value);
};



// 3. 暴露方法给父组件
defineExpose({
  setFormData
});
</script>

<style lang="scss" scoped>
.info-container {
  .btns {
    margin-bottom: 10px;
  }
}
.boxlist {
  width: 99%;
  height: 225px;
  margin-top: 10px;
  overflow: hidden;
}
</style>
