<template>
  <div class="">
    <a-table
      :columns="tableColumns"
      :data="customerList"
      :scroll="{
        x: 1600
      }"
      stripe
      :pagination="false"
      :bordered="{
        cell: false,
        headerCell: true,
        wrapper: false
      }"
      :hoverable="false"
    >
      <template #operate="{ record }">
        <div class="operate-text-button">
          <a-button type="text" @click="redirectCustomerDetailPage(record.id)"
            >详情</a-button
          >
          <a-divider direction="vertical" />
          <a-button
            type="text"
            status="danger"
            @click="handleRemoveCustomer(record)"
            >删除</a-button
          >
        </div>
      </template>
    </a-table>
    <Page :page="page" @change="pageChangehandle" />
    <CURDModal
      ref="curdModalRef"
      :region-tree-data="regionTreeData"
      :industry-list="industryList"
      :level-list="levelList"
      :account-list="accountList"
    ></CURDModal>
    <DetailModal
      ref="detailModalRef"
      :region-tree-data="regionTreeData"
      :industry-list="industryList"
      :level-list="levelList"
      :account-list="accountList"
    ></DetailModal>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref } from 'vue'
import { TableColumnData } from '@arco-design/web-vue/es/table/interface'
import Page from '@/components/page/index.vue'
import { useEmitt } from '@/logics/mitt/useEmitt'
import usePage, { IPage } from '@/components/page/index'
import { Customer, CustomerListReqParams } from '@/types/customer'
import { DomainTree } from '@/types/domain'

import { getCustomerList } from '@/api/biz/customer'
import CURDModal from './Curd.vue'
import DetailModal from './Detail.vue'

const { page } = usePage()
const props = defineProps({
  filterForm: {
    type: Object,
    default() {
      return {}
    }
  },
  regionTreeData: {
    type: Array as PropType<DomainTree[]>
  },
  industryList: {
    type: Array as PropType<{ id: string; name: string }[]>
  },
  levelList: {
    type: Array as PropType<{ id: string; name: string }[]>
  },
  accountList: {
    type: Array as PropType<{ id: string; name: string }[]>
  }
})
const customerList = ref<Customer[]>([])
const tableColumns: TableColumnData[] = [
  {
    title: '客户编号',
    dataIndex: 'id',
    tooltip: true,
    ellipsis: true
  },
  {
    title: '客户名称',
    dataIndex: 'name',
    tooltip: true,
    ellipsis: true,
    width: 200
  },
  {
    title: '所在地区',
    dataIndex: 'region_name'
  },
  {
    title: '所属行业',
    dataIndex: 'industry_name'
  },
  {
    title: '客户级别',
    dataIndex: 'level_name'
  },
  {
    title: '客户联系人',
    dataIndex: 'link_man'
  },
  {
    title: '联系电话',
    dataIndex: 'link_phone'
  },
  {
    title: '市场负责人',
    dataIndex: 'bizman_name'
  },

  {
    title: '创建日期',
    dataIndex: 'created_at',
    tooltip: true,
    ellipsis: true
  },
  {
    title: '最近拜访时间',
    dataIndex: 'updated_at',
    tooltip: true,
    ellipsis: true
  },
  {
    title: '操作',
    slotName: 'operate',
    width: 150,
    fixed: 'right'
  }
]

const curdModalRef = ref<any>(null) // Modal 增删改子组件ref
const detailModalRef = ref<any>(null) // Modal 详情组件ref

// 跳转到详情页面
const redirectCustomerDetailPage = (id: string) => {
  detailModalRef.value?.showDetailModal(id)
  // routerTurnByPath(`/workplace/project-detail`, [id], undefined, true)
}

/**
 * 获取筛选框列表
 */
const getFilterForm = () => {
  const { name, levelId, industryId, regionId } = props.filterForm
  return {
    name,
    levelId: levelId === '' ? undefined : levelId,
    industryId: industryId === '' ? industryId : industryId,
    regionId: regionId === '' ? undefined : regionId
  }
}

// 获取客户列表
const getList = async () => {
  try {
    const { pageIndex, pageSize } = page
    const { name, levelId, industryId, regionId } = getFilterForm()
    const params: CustomerListReqParams = {
      page_no: pageIndex,
      page_size: pageSize,
      name,
      level_id: levelId,
      industry_id: industryId,
      region_id: regionId
    }
    const { list, total } = await getCustomerList(params)
    page.total = total
    customerList.value = list
  } catch (e) {
    console.error(e)
  }
}

/**
 * 分页变化事件
 * @param argPage
 */
const pageChangehandle = (argPage: IPage): void => {
  page.pageIndex = argPage.pageIndex
  page.pageSize = argPage.pageSize
  getList().then(() => console.log('获取客户列表'))
}

/**
 * 根据表单按条件筛选分类项
 */
const filterCustomer = (): void => {
  getList().then(() => console.log('获取列表'))
}

/**
 * 显示增删改modal
 * @param type modal 类型
 * @param item
 */
const showCustomerModal = async () => {
  curdModalRef.value?.showCustomerModal()
}

// 删除客户
const handleRemoveCustomer = async ({
  id,
  name
}: {
  id: string
  name: string
}) => {
  curdModalRef.value?.handleRemoveCustomer(id, name)
}

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
  name: 'get_customer_list',
  callback: () => {
    page.pageIndex = 1
    getList().then(() => console.log('获取列表'))
  }
})

defineExpose({ filterCustomer, showCustomerModal }) // 暴露子组件的方法或者数据
</script>

<script lang="ts">
export default {
  name: 'CustomerList'
}
</script>
