<template>
  <div
    class="L-main L-mainTow"
    id="L-size-main"
  >
    <div
      class="content-search"
      id="L-header"
    >
      <div class="search-title">查询条件</div>
      <el-form
        :inline="true"
        :model="queryParams"
        ref="queryForm"
        size="default"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item
              label="单位名称："
              prop="nickName"
            >
              <el-input
                v-model="queryParams.nickName"
                placeholder="请输入单位名称"
                clearable
                @keyup.enter.native="handleQuery"
                style="width: 95%;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label="单位类型："
              prop="dwlx"
            >
              <el-select
                v-model="queryParams.dwlx"
                placeholder="请选择单位类型"
                clearable
                style="width: 95%;"
              >
                <el-option
                  v-for="dict in dict.type.dwlx"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item
              label="统一社会信用代码："
              class="tyshxydm-class"
              prop="userName"
            >
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入统一社会信用代码"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="3"
            style="text-align: right; padding-right: 20px"
          >
            <el-form-item class="unit-form">
              <el-button
                size="default"
                @click="resetQuery"
                >重置</el-button
              >
              <el-button
                size="default"
                type="primary"
                @click="handleQuery"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <main>
      <div class="search-title">
        <span class="search-title-span">单位列表</span>
      </div>
      <section>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="userList"
          :height="tabHeader"
          :max-height="tabHeader"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
          row-key="userName"
        >
          <el-table-column
            type="selection"
            width="55"
            :reserve-selection="true"
          />
          <el-table-column
            type="index"
            label="序号"
            width="70"
            align="center"
          />
          <el-table-column
            label="单位名称"
            align="center"
            key="nickName"
            prop="nickName"
          >
            <template #default="scope">{{ scope.row.nickName }}</template>
          </el-table-column>
          <el-table-column
            label="单位类型"
            align="center"
            key="dwlx"
            prop="dwlx"
          >
            <template #default="scope">
              <dict-tag
                :options="dict.type.dwlx"
                :value="scope.row.dwlx"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="统一社会信用代码"
            align="center"
            key="userName"
            prop="userName"
          >
            <template #default="scope">{{ scope.row.userName }}</template>
          </el-table-column>
          <el-table-column
            label="所属区域"
            align="center"
            key="ssqycounty"
            prop="ssqycounty"
          >
            <template #default="scope">{{ getSsqu(scope.row) }}</template>
          </el-table-column>
          <el-table-column
            label="所属行业"
            align="center"
            key="sshy"
            prop="sshy"
          >
            <template #default="scope">
              <dict-tag
                :options="dict.type.sshy"
                :value="scope.row.sshy"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="单位地址"
            align="center"
            key="dwxxdz"
            prop="dwxxdz"
          >
            <template #default="scope">{{ scope.row.dwxxdz }}</template>
          </el-table-column>
        </el-table>
      </section>
      <my-pagination
        id="L-pagination"
        :total="total"
        :page="queryParams.current"
        :limit="queryParams.size"
        @pagination="getPagination"
        :current-page.sync="queryParams.current"
      ></my-pagination>
    </main>
    <div class="bottomclass">
      <el-button
        size="default"
        @click="resetCancel"
        >取消</el-button
      >
      <el-button
        type="primary"
        size="default"
        @click="resetConfirm"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { listUnitdw } from "@/api/auditPagesApi/index";
import { getToken } from "@/utils/auth";

// 定义props和emits
const emit = defineEmits(["liebiaoClose", "adddanweilist"]);

// 响应式数据
const loading = ref(true);
const userList = ref([]);
const total = ref(0);
const tabHeader = ref(undefined);
const tabclicklist = ref([]);
const queryForm = ref(null);
const multipleTable = ref(null);

const queryParams = ref({
  current: 1,
  size: 10,
  userName: undefined,
  nickName: undefined,
  dwlx: undefined,
  type: "0",
});

// 字典数据
const dict = {
  type: {
    dwlx: [],
    sshy: [],
  },
};

// 方法
const getSsqu = (row) => {
  if (row.ssqyprovince && row.ssqycity && row.ssqycounty) {
    return row.ssqyprovince + "/" + row.ssqycity + "/" + row.ssqycounty;
  } else if (row.ssqyprovince && row.ssqycity) {
    return row.ssqyprovince + "/" + row.ssqycity;
  } else if (row.ssqyprovince) {
    return row.ssqyprovince;
  }
  return "";
};

const resetCancel = () => {
  emit("liebiaoClose");
  toggleSelection();
  emit("adddanweilist", []);
};

const resetConfirm = () => {
  emit("adddanweilist", tabclicklist.value);
  emit("liebiaoClose");
  toggleSelection();
};

const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTable.value.toggleRowSelection(row);
    });
  } else {
    multipleTable.value.clearSelection();
  }
};

const handleSelectionChange = (val) => {
  tabclicklist.value = val || [];
};

const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 !== 0 ? "evenNumber-row" : "";
};

const getType = (type) => {
  queryParams.value.type = type.join(",");
  getList();
};

const dakai = (val) => {
  console.log(val);
  toggleSelection(val);
};
// 暴露 getType 给父组件
defineExpose({
  getType,
  dakai,
});

const getList = async () => {
  loading.value = true;
  queryParams.value.isSearch = 1;
  try {
    const response = await listUnitdw(queryParams.value);
    userList.value = response.data.records;
    total.value = response.data.total;
  } finally {
    loading.value = false;
  }
};

const getPagination = (pages) => {
  queryParams.value.current = pages.page;
  queryParams.value.size = pages.limit;
  getList();
};

const handleQuery = () => {
  queryParams.value.current = 1;
  getList();
};

const resetQuery = () => {
  queryForm.value.resetFields();
  toggleSelection();
  handleQuery();
};

const cancalDebounce = () => {
  const element = document.getElementById("L-size-main");
  const header = document.getElementById("L-header");
  const pagination = document.getElementById("L-pagination");
  const elementHeight = element.offsetHeight;
  const headerHeight = header.offsetHeight;
  const paginationtHeight = pagination.offsetHeight;
  tabHeader.value = elementHeight - headerHeight - paginationtHeight - 120;
};

// 生命周期钩子
onMounted(() => {
  getList();
  cancalDebounce();
  window.addEventListener("resize", cancalDebounce);
});

onUnmounted(() => {
  window.removeEventListener("resize", cancalDebounce);
});
</script>

<style lang="scss" scoped>
:deep(.danweiList) {
  padding: 0 20px;
}

:deep(.content-search) {
  padding-top: 10px;
}

.L-mainTow {
  background-color: #ffffff !important;
}

:deep(.search-title) {
  border: none !important;
}
</style>
