<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 { useHandleData } from '@/utils/useHandleData'
import { getPageApi, getDetailApi, addApi, editApi, deleteApi } from '@/api/business/contract/info'
import ContractPDF from '@/components/PDF/contractPDF.vue'
import { getPdf } from '@/utils/getPdf.js'

const queryRef = ref<InstanceType<typeof AForm>>()
const formRef = ref<InstanceType<typeof AForm>>()
const pageTotal = ref<number>(0)
const queryData = ref<StrAnyObj>({ pageNum: 1, pageSize: 10 })
const tableData = ref<StrAnyObjArr>([])
const formData = ref<StrAnyObj>({})
const rowData = ref<StrAnyObj>({})
const dialogPrint = ref<boolean>(false)
const dialogTitle = ref<string>('')
const dialogVisible = ref<boolean>(false)
const toolbarConfig: ToolbarConfigType[] = [
  {
    common: 'search',
    click() {
      queryData.value.pageNum = 1
      getPage()
    }
  }
]
const columnConfig: ColumnConfigType[] = [
  {
    prop: 'code',
    label: '合同编号'
  },
  {
    prop: 'customerCorporationName',
    label: '客户单位名称'
  },
  {
    prop: 'customerCorporationAddress',
    label: '客户单位地址'
  },
  {
    prop: 'customerLegalRepresentative',
    label: '客户法定代表人'
  },
  {
    prop: 'customerContactPerson',
    label: '客户业务联系人'
  },
  {
    prop: 'customerContactNumber',
    label: '客户联系电话'
  },
  {
    prop: 'signingDate',
    label: '签订日期'
  },
  {
    prop: 'totalAmount',
    label: '合同总金额'
  },
  {
    prop: 'taxRate',
    label: '税率'
  },
  {
    prop: 'freight',
    label: '运费'
  },
  {
    prop: 'deliveryAddress',
    label: '收货地址'
  },
  {
    width: 120,
    handleConfig: [
      {
        common: 'update',
        click(row) {
          dialogVisible.value = true
          dialogTitle.value = '编辑'
          getDetailApi({ id: row.id }).then((resp: StrAnyObj) => {
            formData.value = resp
          })
        }
      },
      {
        text: '打印',
        click(row) {
          rowData.value = row
          dialogPrint.value = true
        }
      }
    ]
  }
]
const formConfig: FormConfigType[] = [
  {
    type: 'input',
    prop: 'code',
    label: '合同编号',
    rule: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'customerCorporationName',
    label: '客户单位名称',
    rule: [{ required: true, message: '客户单位名称不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'customerCorporationAddress',
    label: '客户单位地址',
    rule: [{ required: true, message: '客户单位地址不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'customerLegalRepresentative',
    label: '客户法定代表人',
    rule: [{ required: true, message: '客户法定代表人不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'customerContactPerson',
    label: '客户业务联系人',
    rule: [{ required: true, message: '客户业务联系人不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'customerContactNumber',
    label: '客户联系电话',
    rule: [{ required: true, message: '客户联系电话不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'signingDate',
    label: '签订日期',
    rule: [{ required: true, message: '签订日期不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'totalAmount',
    label: '合同总金额',
    rule: [{ required: true, message: '合同总金额不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'taxRate',
    label: '税率',
    rule: [{ required: true, message: '税率不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'freight',
    label: '运费',
    rule: [{ required: true, message: '运费不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'deliveryAddress',
    label: '收货地址',
    rule: [{ required: true, message: '收货地址不能为空', trigger: 'blur' }]
  }
]

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

function getPage() {
  getPageApi(queryData.value).then((resp) => {
    tableData.value = resp.records
    pageTotal.value = resp.total
  })
}
function formSubmit() {
  formRef.value?.validate(() => {
    if (formData.value.id) {
      editApi(formData.value).then(() => {
        dialogVisible.value = false
        ElMessage.success('修改成功')
        getPage()
      })
    } else {
      addApi(formData.value).then(() => {
        dialogVisible.value = false
        ElMessage.success('新增成功')
        getPage()
      })
    }
  })
}
function formClosed() {
  formRef.value?.resetFields()
}
const printObj = ref({
  id: 'pdfDom',
  popTitle: '',
  extraCss:
    'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
})
const clickDownload = () => {
  getPdf('合同' + rowData.value.code)
}
</script>

<template>
  <div>
    <a-table
      selection
      :data="tableData"
      :page-total="pageTotal"
      :toolbar-config="toolbarConfig"
      :column-config="columnConfig"
      v-model:page-num="queryData.pageNum"
      v-model:page-size="queryData.pageSize"
      @page-num-change="getPage"
      @page-size-change="getPage"
    >
    </a-table>

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

    <a-dialog :footer="false" v-if="dialogPrint" v-model="dialogPrint" title="打印" width="880px">
      <ContractPDF :rowData="rowData"></ContractPDF>
      <template #footer>
        <div>
          <el-button @click="dialogPrint = false" size="large">取消</el-button>
          <el-button type="primary" v-print="printObj" size="large">打印</el-button>
          <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
        </div>
      </template>
    </a-dialog>
  </div>
</template>
