<template>
  <el-dialog v-model="dialogTableVisible" title="XXXXXXX涉及人数" width="1000px" @close="close">
    <div class="dialog-container">
      <!-- 搜索 -->
      <div ref="searchBox">
        <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount" class="seacrh" />
      </div>
      <!-- 表格 -->
      <div class="tabBox">
        <MyTable
          :tableData="pageData.tableData"
          :tableColumn="pageData.tableColumn"
          tableHeight="400px"
          :key="pageData.keyCount"
          :tableConfiger="pageData.tableConfiger"
          :controlsWidth="pageData.controlsWidth"
          @chooseData="chooseData"
        >
          <!-- 操作 -->
          <template #controls="{ row }">
            <el-button size="small" @click="addEdit('detail', row)">详情</el-button>
          </template>
        </MyTable>
        <Pages
          @changeNo="changeNo"
          @changeSize="changeSize"
          :tableHeight="pageData.tableHeight"
          :pageConfiger="{
            ...pageData.pageConfiger,
            total: pageData.total
          }"
        ></Pages>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
  import { ref, reactive } from "vue";
  import Search from "@/components/aboutTable/Search.vue";
  import MyTable from "@/components/aboutTable/MyTable.vue";
  const dialogTableVisible = ref(false);
  const searchConfiger = ref([
    {
      label: "姓名",
      prop: "name",
      placeholder: "请输入场所名称",
      showType: "input"
    },
    {
      label: "身份证号",
      prop: "idCard",
      placeholder: "请输入从业人姓名",
      showType: "input"
    },
    {
      label: "车牌号",
      prop: "plateNumber",
      placeholder: "请输入场所名称",
      showType: "input"
    },
    {
      label: "车牌号",
      prop: "plateNumber2",
      placeholder: "请输入从业人姓名",
      showType: "input"
    }
  ]);
  const pageData = reactive({
    tableData: [
      {
        name: "1"
      }
    ], //表格数据
    keyCount: 0,
    tableConfiger: {
      rowHieght: 61,
      showSelectType: "null",
      loading: false
    },
    total: 0,
    pageConfiger: {
      pageSize: 20,
      pageCurrent: 1
    }, //分页
    controlsWidth: 120, //操作栏宽度

    tableColumn: [
      { label: "照片", prop: "photo", width: "80" },
      { label: "姓名", prop: "name", width: "100" },
      { label: "性别", prop: "gender", width: "80" },
      { label: "身份证号", prop: "idCard", width: "180" },
      { label: "户籍地", prop: "residence", width: "150" },
      { label: "现居住地", prop: "currentAddress", width: "150" },
      { label: "手机号", prop: "phone", width: "120" },
      { label: "虚拟身份", prop: "virtualId", width: "120" },
      { label: "车牌号", prop: "plateNumber", width: "120" },
      { label: "车牌号", prop: "plateNumber2", width: "120" },
      { label: "特征描述", prop: "features", width: "150" },
      { label: "人员标签", prop: "personTags", width: "150" }
    ]
  });

  // 初始化数据
  const init = (type, row) => {
    dialogTableVisible.value = true;
  };

  const close = () => {};

  defineExpose({ init });
</script>

<style lang="scss" scoped>
  .dialog-container {
    // .box {
    //   flex-wrap: nowrap !important;
    // }
    .seacrh {
      .box {
        flex-wrap: nowrap !important;
      }
    }
  }
</style>
