<template>
  <ele-modal
    width="50%"
    :visible="visible"
    :maskClosable="false"
    :title="title"
    :footer="null"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
  >
    <ele-pro-table
      ref="tableRef"
      row-key="companyId"
      :datasource="datasource"
      :columns="columns"
      :customRow="customRow"
      :pagination="false"
    >
      <template #toolbar>
        <a-space>
          <a-input-search
            allow-clear
            v-model:value="searchText"
            placeholder="请输入搜索关键词"
            style="width: 200px"
            @search="reload"
            @pressEnter="reload"
          />
          <a-checkbox v-model:checked="idleOnly" @change="reload">仅显示未绑定项目设备</a-checkbox>
        </a-space>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link">选择</a-button>
          </a-space>
        </template>
      </template>
    </ele-pro-table>
  </ele-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  ColumnItem,
  DatasourceFunction
} from "ele-admin-pro/es/ele-pro-table/types";
import { EleProTable } from "ele-admin-pro";
import { TowerEquipment, TowerEquipmentParam } from "@/api/tower/equipment/model";
import { pageTowerEquipment } from "@/api/tower/equipment";

const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 标题
  title?: string;
  // 修改回显的数据
  data?: TowerEquipment | null;
}>();

const emit = defineEmits<{
  (e: "done", data: TowerEquipment): void;
  (e: "update:visible", visible: boolean): void;
}>();

/* 更新visible */
const updateVisible = (value: boolean) => {
  emit("update:visible", value);
};

// 搜索内容
const searchText = ref(null);

// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);

// 表格配置
const columns = ref<ColumnItem[]>([
  {
    title: "设备名称",
    dataIndex: "name",
    key: "name",
    showSorterTooltip: false,
    ellipsis: true
  },
  {
    title: "设备型号",
    dataIndex: "model",
    showSorterTooltip: false,
    ellipsis: true
  },
  {
    title: "出场编号",
    dataIndex: "factoryNo",
    key: "factoryNo",
    showSorterTooltip: false,
    ellipsis: true
  },
  {
    title: "设备编号",
    dataIndex: "equipmentNo",
    key: "equipmentNo",
    showSorterTooltip: false,
    ellipsis: true
  },
  {
    title: "备案编号",
    dataIndex: "filingNo",
    key: "filingNo",
    showSorterTooltip: false
  },
  {
    title: "制造单位",
    dataIndex: "manufactor",
    key: "manufactor",
    showSorterTooltip: false,
    ellipsis: true
  },
  {
    title: "操作",
    key: "action",
    align: "center"
  }
]);

const idleOnly = ref<boolean>(false)
// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
  where = {};
  // 搜索条件
  if (searchText.value) {
    where.keywords = searchText.value;
  }
  where.isStaff = true;
  where.idleOnly = idleOnly.value;
  return pageTowerEquipment({
    ...where,
    ...orders,
    page,
    limit
  });
};

/* 搜索 */
const reload = (where?: TowerEquipmentParam) => {
  tableRef?.value?.reload({ page: 1, where });
};

/* 自定义行属性 */
const customRow = (record: TowerEquipment) => {
  return {
    // 行点击事件
    onClick: () => {
      updateVisible(false);
      emit("done", record);
    }
  };
};
</script>
<style lang="less"></style>
