<script setup lang="ts">
import AForm from '@/components/AForm/index.vue'
import { FormConfigType } from '@/components/AForm/type'
import { ToolbarConfigType } from '@/components/AToolbar/type'
import { ColumnConfigType } from '@/components/ATable/type'
import { StrAnyObj, StrAnyObjArr } from '@/typings'
import { confirmArrivalAccountApi, getDetailApi, getPageApi } from '@/api/business/contract/fundReceived'
import { getPageApi as getCapitalAccountPageApi } from '@/api/business/capital/account'
import Detail from '@/views/business/contract/info/detail.vue'
import { getPageApi as getContractPageApi } from '@/api/business/contract/info'
import UserOperation from '@/views/business/log/userOperation/index.vue'

const queryRef = ref<InstanceType<typeof AForm>>()
const formRef = ref<InstanceType<typeof AForm>>()

const showQuery = ref<boolean>(true)
const selectKeys = ref<string[]>([])
const pageTotal = ref<number>(0)

const queryData = ref<StrAnyObj>({ pageNum: 1, pageSize: 10 })
const tableData = ref<StrAnyObjArr>([])
const formData = ref<StrAnyObj>({})
const logData = ref<StrAnyObj>({})
const operationLog = ref<boolean>(false)

const dialogTitle = ref<string>('')
const dialogVisible = ref<boolean>(false)
const detailDialog = ref<boolean>(false)

const queryConfig: FormConfigType[] = [
  {
    type: 'input',
    prop: 'contractNo',
    label: '合同'
  },
  {
    type: 'select',
    prop: 'hasReceived',
    label: '是否认领',
    dict: 'yes_no'
  }
]

const toolbarConfig: ToolbarConfigType[] = [
  {
    common: 'search',
    click() {
      queryData.value.pageNum = 1
      getPage()
    }
  },
  {
    common: 'reset',
    click() {
      queryRef.value?.resetFields()
      getPage()
    }
  }
]

const columnConfig: ColumnConfigType[] = [
  {
    slot: 'contractNo',
    label: '合同'
  },
  {
    prop: 'receivedAmount',
    label: '到账金额'
  },
  {
    prop: 'hasReceived',
    label: '是否认领',
    dict: 'yes_no'
  },
  {
    prop: 'accountAlias',
    label: '资金账号'
  },
  {
    prop: 'receivedTime',
    label: '到账时间'
  },
  {
    prop: 'remark',
    label: '备注'
  },
  {
    width: 180,
    handleConfig: [
      {
        text: '操作日志',
        click(row) {
          logData.value = row
          operationLog.value = true
        }
      },
      {
        if: (row) => {
          return row.hasReceived == 0
        },
        text: '到账认领',
        click(row) {
          dialogVisible.value = true
          dialogTitle.value = '到账认领'
          getDetailApi({ id: row.id }).then((resp: StrAnyObj) => {
            formData.value = resp
          })
        }
      }
    ]
  }
]

const formConfig: FormConfigType[] = [
  {
    type: 'select',
    label: '合同',
    prop: 'contractId',
    option: () => {
      return getContractPageApi({ searchAll: true }).then((res: StrAnyObjArr) => {
        if (res.records && res.records.length > 0) {
          return res.records.map((item) => {
            return {
              label: item.contractNo,
              key: item.id
            }
          })
        } else {
          return []
        }
      })
    }
  },
  {
    type: 'input',
    prop: 'receivedAmount',
    label: '到账金额',
    disabled: true
  },
  {
    type: 'select',
    prop: 'capitalAccountId',
    label: '资金账号',
    keyName: 'id',
    labelName: 'accountAlias',
    disabled: true,
    async option() {
      const data = await getCapitalAccountPageApi({ searchAll: true })
      return data.records
    },
    rule: [{ required: true, message: '资金账号不能为空', trigger: 'blur' }]
  },
  {
    type: 'datePicker',
    prop: 'receivedTime',
    label: '到账时间',
    datePickerType: 'datetime',
    format: 'YYYY-MM-DD hh:mm:ss',
    valueFormat: 'YYYY-MM-DD hh:mm:ss',
    disabled: true,
    rule: [{ required: true, message: '到账时间不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    itemType: 'textarea',
    prop: 'remark',
    label: '备注',
    rows: 3,
    span: 24
  }
]

onMounted(() => {
  getPage()
})

function getPage() {
  getPageApi(queryData.value).then((resp) => {
    tableData.value = resp.records
    pageTotal.value = resp.total
  })
}

function tableSelectionChange(item: StrAnyObjArr) {
  selectKeys.value = item.map((item) => item.id)
}

function formSubmit() {
  formRef.value?.validate(() => {
    confirmArrivalAccountApi(formData.value).then(() => {
      dialogVisible.value = false
      ElMessage.success('确认成功')
      getPage()
    })
  })
}

function formClosed() {
  formRef.value?.resetFields()
}

function clickContract(item: StrAnyObjArr) {
  formData.value = {
    id: item.contractId
  }
  detailDialog.value = true
  dialogTitle.value = '详情'
}
</script>

<template>
  <div>
    <el-card v-if="showQuery">
      <a-form ref="queryRef" v-model="queryData" :config="queryConfig" :span="6"></a-form>
    </el-card>

    <a-table
      :data="tableData"
      :page-total="pageTotal"
      :toolbar-config="toolbarConfig"
      :column-config="columnConfig"
      v-model:showQuery="showQuery"
      v-model:page-num="queryData.pageNum"
      v-model:page-size="queryData.pageSize"
      @page-num-change="getPage"
      @page-size-change="getPage"
      @selection-change="tableSelectionChange"
    >
      <template #contractNo="{ row }">
        <div>
          <a style="color: #409eff; cursor: pointer; word-break: break-all" @click="clickContract(row)">{{ row.contractNo }}</a>
        </div>
      </template>
    </a-table>

    <a-dialog v-model="dialogVisible" :title="dialogTitle" @submit="formSubmit" @closed="formClosed">
      <a-form ref="formRef" v-model="formData" :config="formConfig" :span="24"></a-form>
    </a-dialog>

    <a-dialog v-if="detailDialog" v-model="detailDialog" :title="detailTitle" @closed="formClosed" style="width: 900px" :footer="false">
      <Detail :rowData="formData"></Detail>
    </a-dialog>

    <a-dialog v-model="operationLog" title="操作日志" width="90%" :footer="false">
      <UserOperation :logData="logData"></UserOperation>
    </a-dialog>
  </div>
</template>
