<template>
  <MOSTY.PageTree :pageTitle="'访客管理列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch">
      </MOSTY.Search>
    </template>
    <template #table>
      <div class="eltab7">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
          :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
          <!-- 操作 -->
          <template #sex="{ row }">
            <!-- <dict-tag :options="D_BZ_SB" :value="row.sex" :tag="false" /> -->
            <span v-if="row.sex === '1'">男</span>
            <span v-else>女</span>
          </template>
        </MOSTY.Table>
      </div>

      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </template>
  </MOSTY.PageTree>

</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";


import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
// 数据
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
const searchArr = reactive([
  {
    showType: "input",
    prop: "username",
    placeholder: '请输入来访人员姓名'
  },

])
const tableColumn = reactive([
  {
    title: "来访人员姓名",
    prop: "username",
  },
  {
    title: "性别",
    prop: "sex",
    slot: true,
    options: D_BZ_XB,
  },
  {
    title: "身份证号",
    prop: "idcard",
  },
  {
    title: "联系电话",
    prop: "phone",
  },
  {
    title: "居住地",
    prop: "address",
    align: "center"
  },
  {
    title: "车牌号",
    prop: "carnumber",
    solt: true
  },
  {
    title: "离开时间",
    prop: "departureTime",
    solt: true
  },

  {
    title: "工作单位",
    prop: "jobOrg",
  },

  {
    title: "拜访事由",
    prop: "reason",
  },
  {
    title: "来访时间",
    prop: "visitTime",
  }
])

const editObj = reactive({
  deptname: "",
  title: "",
  savebtn: true,
  seeimg: true,
  editObj: {}
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  orgid: ""
});

//获取部门数据
const getdeptId = (val) => {
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  getListData();
};
// 获取表格数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  editObj.deptname = getItem("deptId").ssbmid;
  getApi(listQuery, `/mosty-jcgl/visitorRegister/getPageList`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        listQuery.total = res.total;
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  )
    .finally(() => {
      tableloading.value = false;
    });
}


//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};

onMounted(() => {

});
const onSearch = (obj) => {
  listQuery.username = obj.username
  listQuery.pageCurrent = 1;
  getListData();
}


</script>

<style lang="scss" scoped>
.from_box {
  display: flex;
  justify-content: space-between;

  .from_left {
    width: 25%;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    // height: 1030px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .btnBox {
      .el-select {
        width: 150px;
      }

      .header-right {
        display: flex;
        align-items: center;
      }

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

.tabBox {
  // height: calc(100% - 70px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}
</style>
