<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :maskClosable="false"
    :title="title"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
  >
    <ele-pro-table
      ref="tableRef"
      row-key="modelId"
      :datasource="datasource"
      :columns="columns"
      :customRow="customRow"
      :striped="true"
      :pagination="false"
    >
      <template #toolbar>
        <a-input-search
          allow-clear
          v-model:value="searchText"
          placeholder="请输入搜索关键词"
          style="width: 200px"
          @search="reload"
          @pressEnter="reload"
        />
      </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 { pageProject } from "@/api/tower/project";
import { FILE_THUMBNAIL } from "@/config/setting";
import { EleProTable } from "ele-admin-pro";
import { TowerModel, TowerModelParam } from "@/api/tower/model/model";
import { Contract, ContractParam } from "@/api/tower/contract/model";
import { pageContract } from "@/api/tower/contract";
import { message } from "ant-design-vue";

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

const emit = defineEmits<{
  (e: "done", data: Contract): 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[]>([
  {
    key: "index",
    width: 48,
    align: "center",
    fixed: "left",
    hideInSetting: true,
    customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
  },
  {
    title: "合同编号",
    dataIndex: "contactNumber"
  },
  {
    title: "项目名称",
    dataIndex: "projectName"
  },
  {
    title: "业务负责人",
    dataIndex: "customerContact"
  },
  {
    title: "签订日期",
    dataIndex: "signDate"
  },
  {
    title: "操作",
    key: "action",
    align: "center"
  }
]);

// 表格数据源
const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
  // 搜索条件
  if (searchText.value) {
    where.keywords = searchText.value;
  }
  return pageContract({
    ...where,
    ...orders,
    page,
    limit
  });
};

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

/* 自定义行属性 */
const customRow = (record: Contract) => {
  return {
    // 行点击事件
    onClick: () => {
      updateVisible(false);
      if (record.settleMethod === null || record.settleMethod === undefined) {
        message.warning("请先设置合同结算方式");
        return;
      }
      emit("done", record);
    }
  };
};
</script>
<style lang="less"></style>
