<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/detail'

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 dialogTitle = ref<string>('')
const dialogVisible = ref<boolean>(false)

const queryConfig: FormConfigType[] = [
  {
    type: 'input',
    prop: 'contractId',
    label: '合同id'
  },
  {
    type: 'input',
    prop: 'spuId',
    label: '商品id'
  },
  {
    type: 'input',
    prop: 'bulkGoodsSpecId',
    label: '大宗商品规格Id'
  },
  {
    type: 'input',
    prop: 'spuName',
    label: '商品名'
  },
  {
    type: 'input',
    prop: 'colour',
    label: '颜色'
  },
  {
    type: 'input',
    prop: 'quantity',
    label: '数量'
  },
  {
    type: 'input',
    prop: 'customizeTag',
    label: '定制标签：1-激光打印；2-UV印刷'
  },
  {
    type: 'input',
    prop: 'customizeProcessingItemId',
    label: '定制加工项目id'
  },
  {
    type: 'input',
    prop: 'blueprintUrl',
    label: '设计图'
  },
  {
    type: 'input',
    prop: 'blueprintSpecDetails',
    label: '设计图规格详情'
  },
  {
    type: 'input',
    prop: 'colourDetails',
    label: '颜色规格详情'
  },
  {
    type: 'input',
    prop: 'packagingDetails',
    label: '包材配置详情'
  },
  {
    type: 'input',
    prop: 'salesPrice',
    label: '购买单价'
  },
  {
    type: 'input',
    prop: 'customizeProcessingPrice',
    label: '定制加工单价'
  },
  {
    type: 'input',
    prop: 'packingMaterialPrice',
    label: '包材金额'
  },
  {
    type: 'input',
    prop: 'freightPrice',
    label: '运费金额'
  },
  {
    type: 'input',
    prop: 'additionalCustomizeDetails',
    label: '额外费用详情'
  },
  {
    type: 'input',
    prop: 'additionalCustomizePrice',
    label: '额外费用'
  },
  {
    type: 'input',
    prop: 'amount',
    label: '金额'
  },
  {
    type: 'input',
    prop: 'remark',
    label: '备注'
  },
  {
    type: 'input',
    prop: 'createBy',
    label: '创建者'
  },
  {
    type: 'input',
    prop: 'createTime',
    label: '创建时间'
  },
  {
    type: 'input',
    prop: 'updateBy',
    label: '更新者'
  },
  {
    type: 'input',
    prop: 'updateTime',
    label: '最后更新时间'
  },
  {
    type: 'input',
    prop: 'delFlag',
    label: '删除标志（0代表存在 1代表删除）'
  },
  {
    type: 'input',
    prop: 'tenantId',
    label: '租户id'
  },
]

const toolbarConfig: ToolbarConfigType[] = [
  {
    common: 'search',
    click() {
      queryData.value.pageNum = 1
      getPage()
    }
  },
  {
    common: 'reset',
    click() {
      queryRef.value?.resetFields()
      getPage()
    }
  },
  {
    common: 'add',
    click() {
      dialogVisible.value = true
      dialogTitle.value = '新增'
    }
  },
  {
    common: 'delete',
    disabled() {
      return selectKeys.value.length == 0
    },
    click() {
      handleRemove(selectKeys.value)
    }
  }
]

const columnConfig: ColumnConfigType[] = [
  {
    prop: 'contractId',
    label: '合同id'
  },
  {
    prop: 'spuId',
    label: '商品id'
  },
  {
    prop: 'bulkGoodsSpecId',
    label: '大宗商品规格Id'
  },
  {
    prop: 'spuName',
    label: '商品名'
  },
  {
    prop: 'colour',
    label: '颜色'
  },
  {
    prop: 'quantity',
    label: '数量'
  },
  {
    prop: 'customizeTag',
    label: '定制标签：1-激光打印；2-UV印刷'
  },
  {
    prop: 'customizeProcessingItemId',
    label: '定制加工项目id'
  },
  {
    prop: 'blueprintUrl',
    label: '设计图'
  },
  {
    prop: 'blueprintSpecDetails',
    label: '设计图规格详情'
  },
  {
    prop: 'colourDetails',
    label: '颜色规格详情'
  },
  {
    prop: 'packagingDetails',
    label: '包材配置详情'
  },
  {
    prop: 'salesPrice',
    label: '购买单价'
  },
  {
    prop: 'customizeProcessingPrice',
    label: '定制加工单价'
  },
  {
    prop: 'packingMaterialPrice',
    label: '包材金额'
  },
  {
    prop: 'freightPrice',
    label: '运费金额'
  },
  {
    prop: 'additionalCustomizeDetails',
    label: '额外费用详情'
  },
  {
    prop: 'additionalCustomizePrice',
    label: '额外费用'
  },
  {
    prop: 'amount',
    label: '金额'
  },
  {
    prop: 'remark',
    label: '备注'
  },
  {
    prop: 'createBy',
    label: '创建者'
  },
  {
    prop: 'createTime',
    label: '创建时间'
  },
  {
    prop: 'updateBy',
    label: '更新者'
  },
  {
    prop: 'updateTime',
    label: '最后更新时间'
  },
  {
    prop: 'delFlag',
    label: '删除标志（0代表存在 1代表删除）'
  },
  {
    prop: 'tenantId',
    label: '租户id'
  },
  {
    width: 250,
    handleConfig: [
      {
        common: 'update',
        click(row) {
          dialogVisible.value = true
          dialogTitle.value = '编辑'
          getDetailApi({ id: row.id }).then((resp: StrAnyObj) => {
            formData.value = resp
          })
        }
      },
      {
        common: 'delete',
        click(row) {
          handleRemove([row.id])
        }
      }
    ]
  }
]

const formConfig: FormConfigType[] = [
  {
    type: 'input',
    prop: 'contractId',
    label: '合同id',
    rule: [{ required: true, message: '合同id不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'spuId',
    label: '商品id',
    rule: [{ required: true, message: '商品id不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'bulkGoodsSpecId',
    label: '大宗商品规格Id',
    rule: [{ required: true, message: '大宗商品规格Id不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'spuName',
    label: '商品名',
    rule: [{ required: true, message: '商品名不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'colour',
    label: '颜色',
    rule: [{ required: true, message: '颜色不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'quantity',
    label: '数量',
    rule: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'customizeTag',
    label: '定制标签：1-激光打印；2-UV印刷',
    rule: [{ required: true, message: '定制标签：1-激光打印；2-UV印刷不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'customizeProcessingItemId',
    label: '定制加工项目id',
    rule: [{ required: true, message: '定制加工项目id不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'blueprintUrl',
    label: '设计图',
    rule: [{ required: true, message: '设计图不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'blueprintSpecDetails',
    label: '设计图规格详情',
    rule: [{ required: true, message: '设计图规格详情不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'colourDetails',
    label: '颜色规格详情',
    rule: [{ required: true, message: '颜色规格详情不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'packagingDetails',
    label: '包材配置详情',
    rule: [{ required: true, message: '包材配置详情不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'salesPrice',
    label: '购买单价',
    rule: [{ required: true, message: '购买单价不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'customizeProcessingPrice',
    label: '定制加工单价',
    rule: [{ required: true, message: '定制加工单价不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'packingMaterialPrice',
    label: '包材金额',
    rule: [{ required: true, message: '包材金额不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'freightPrice',
    label: '运费金额',
    rule: [{ required: true, message: '运费金额不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'additionalCustomizeDetails',
    label: '额外费用详情',
    rule: [{ required: true, message: '额外费用详情不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'additionalCustomizePrice',
    label: '额外费用',
    rule: [{ required: true, message: '额外费用不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'amount',
    label: '金额',
    rule: [{ required: true, message: '金额不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'remark',
    label: '备注',
    rule: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'createBy',
    label: '创建者',
    rule: [{ required: true, message: '创建者不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'createTime',
    label: '创建时间',
    rule: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'updateBy',
    label: '更新者',
    rule: [{ required: true, message: '更新者不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'updateTime',
    label: '最后更新时间',
    rule: [{ required: true, message: '最后更新时间不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'delFlag',
    label: '删除标志（0代表存在 1代表删除）',
    rule: [{ required: true, message: '删除标志（0代表存在 1代表删除）不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'tenantId',
    label: '租户id',
    rule: [{ required: true, message: '租户id不能为空', trigger: 'blur' }]
  },
]

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(() => {
    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()
}

function handleRemove(idList: string[]) {
  useHandleData('是否确认删除？', () => {
    deleteApi({ idList }).then(() => {
      ElMessage.success('删除成功')
      getPage()
    })
  })
}
</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
      selection
      :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"
    >
    </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>
  </div>
</template>
