<template>
  <div class="">
    <a-table
      :columns="tableColumns"
      :data="contractList"
      :scroll="{
        x: 1600
      }"
      stripe
      :pagination="false"
      :bordered="{
        cell: false,
        headerCell: true,
        wrapper: false
      }"
      :hoverable="false"
    >
      <template #operate="{ record }">
        <div class="operate-text-button">
          <!-- v-permission="[Project.PROJECT_CONTRACT_DETAIL]" -->
          <a-button type="text" @click="redirectContractDetailPage(record.id)"
            >详情</a-button
          >
          <a-divider direction="vertical" />
          <!-- v-permission="[Project.PROJECT_CONTRACT_REMOVE]" -->
          <a-button
            type="text"
            status="danger"
            @click="handleRemoveContract(record.id, record.name)"
            >删除</a-button
          >
        </div>
      </template>
    </a-table>
    <Page :page="page" @change="pageChangehandle" />
    <CURDModal
      ref="curdModalRef"
      :account-list="accountList"
      :customer-list="customerList"
    ></CURDModal>
    <DetailModal
      ref="detailModalRef"
      :is-auth-customer="isAuthCustomer"
      :customer-list="customerList"
      :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 usePage, { IPage } from '@/components/page/index'
import { Contract, ContractListReqParams } from '@/types/contract'
import { getContractList } from '@/api/project/contract'
import { useEmitt } from '@/logics/mitt/useEmitt'
import CURDModal from './Curd.vue'
import DetailModal from './Detail.vue'

const { page } = usePage()
const props = defineProps({
  filterForm: {
    type: Object,
    default() {
      return {}
    }
  },
  isAuthCustomer: {
    type: Boolean
  },
  // projectList: {
  //   type: Array as PropType<{ id: string; name: string }[]>
  // },
  customerList: {
    type: Array as PropType<{ id: string; name: string }[]>
  },
  accountList: {
    type: Array as PropType<{ id: string; name: string }[]>
  }
})

const contractList = ref<Contract[]>([])
const curdModalRef = ref<any>(null) // Modal 增删改子组件ref
const detailModalRef = ref<any>(null) // Modal 增删改子组件ref
const tableColumns: TableColumnData[] = [
  {
    title: '序号',
    dataIndex: 'id',
    tooltip: true,
    ellipsis: true
  },
  {
    title: '合同名称',
    dataIndex: 'name',
    width: 200,
    tooltip: true,
    ellipsis: true
  },
  {
    title: '项目名称',
    dataIndex: 'prj_name',
    width: 200,
    tooltip: true,
    ellipsis: true
  },
  {
    title: '客户名称',
    dataIndex: 'customer_name',
    width: 200,
    tooltip: true,
    ellipsis: true
  },
  {
    title: '合同金额（万元）',
    dataIndex: 'amount',
    width: 180
  },
  {
    title: '合同起始日',
    dataIndex: 'begin_at',
    tooltip: true,
    ellipsis: true
  },
  {
    title: '合同终止日',
    dataIndex: 'end_at',
    tooltip: true,
    ellipsis: true
    // align: 'center'
  },

  {
    title: '签订人',
    dataIndex: 'handler_name'
    // align: 'center'
  },
  {
    title: '签订日期',
    dataIndex: 'signed_at',
    tooltip: true,
    ellipsis: true
    // align: 'center'
  },
  {
    title: '合同负责人',
    dataIndex: 'leader_name'
    // align: 'center'
  },
  {
    title: '录入日期',
    dataIndex: 'created_at',
    tooltip: true,
    ellipsis: true
    // align: 'center'
  },
  {
    title: '操作',
    slotName: 'operate',
    width: 150,
    // align: 'left',
    fixed: 'right'
  }
]

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

/**
 * 获取筛选框列表
 */
const getFilterForm = () => {
  const { prjName, name, customerName, date, handlerId } = props.filterForm
  const beginFrom = date ? date[0] : date
  const endTo = date ? date[1] : date
  return {
    name: name === '' ? undefined : name,
    prjName: prjName === '' ? undefined : prjName,
    customerName: customerName === '' ? undefined : customerName,
    handlerId: handlerId === '' ? undefined : handlerId,
    endTo,
    beginFrom
  }
}

// 获取合同列表
const getList = async () => {
  try {
    const { pageIndex, pageSize } = page
    const { prjName, name, customerName, handlerId, beginFrom, endTo } =
      getFilterForm()
    const params: ContractListReqParams = {
      page_no: pageIndex,
      page_size: pageSize,
      begin_from: beginFrom,
      end_to: endTo,
      name,
      prj_name: prjName,
      customer_name: customerName,
      handler_id: handlerId
    }
    const { list, total } = await getContractList(params)
    page.total = total
    contractList.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('获取合同列表'))
}

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

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

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

// 删除合同
const handleRemoveContract = (id: string, name: string) => {
  curdModalRef.value?.handleRemoveContract(id, name)
}

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

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