<template>
    <div class="nav_detail">
        <Table
            ref="orderFormTable"
            :tableParams="tableParams"
            @handleAdd="handleAdd('add')"
            @selectionChange="handleSelectionChange"
            :btnRole="btnRole"
            :right-btn="[]"
        >
			<template #left>
                <el-button @click="batchDelete()" type="danger" v-hasPermi="[`${ props.perPrefix }:detail:tab_gldd_sc`]">删除</el-button>
            </template>
        </Table>
    </div>
</template>

<script setup lang="ts">
import { listOrderForm, delOrderForm } from '@/api/orderForm';
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import { OrderFormVO, OrderFormQuery } from '@/api/orderForm/types';
import Table from '@/components/Table/index.vue'
import { tableTypes } from '@/components/Table/types'
import auth from "@/plugins/auth";
const props = defineProps({
    perPrefix: {
        type: String
    },
	businessId: {
		type: String
	},
	customerId: {
		type: String
	}
})

const btnRole = ref([
    // { type: 'add', hasPermi: `${ props.perPrefix }:detail:tab_gldd_tj` },
    { type: 'remove', hasPermi: `${ props.perPrefix }:detail:tab_gldd_sc` },
    { type: 'export', hasPermi: `${ props.perPrefix }:detail:tab_gldd_dc` }
])

const tableParams = reactive<tableTypes<OrderFormQuery, OrderFormVO>>({
	tableColumn: [
        { show: true, label: '订单标题', prop: 'title', sortable: true },
        { show: true, label: '订单总金额', prop: 'quotation.totalOrderAmt', sortable: true, render: ({ column }: { column: OrderFormVO }) => {
            return column.quotation?.totalOrderAmt.toFixed(2)
        } },
        { show: true, label: '归属人员', prop: 'ownerByName' },
        { show: true, label: '订单类型', prop: 'orderTypeName' },
        { show: true, label: '签单日期', prop: 'signingDate', sortable: true },
		// { show: true, label: '已回款金额', prop: '' },
		// { show: true, label: '已开票金额', prop: '' },
        { show: true, label: '创建时间', prop: 'createTime' },
		{
			show: true, label: '操作', width: 150, prop: 'operation', disabledMove: true, render: ({ column }: { column: OrderFormVO }) => {
				return [
                    auth.hasPermi(`${ props.perPrefix }:detail:tab_gldd_xq`) ?
                    h(ElButton, { link: true, type: 'primary', onClick: () => { detail(column.id) } }, '详情') : '',
				]
			}
		},
	],
	queryParams: {
		customerId: props.customerId,
		businessId: props.businessId,
	},
	listFn: listOrderForm,
	delFn: delOrderForm,
	keyId: 'id',
    exportCode: 'EXPORT_ORDER_EXCEL',
    commonQueryOrderBy: 'signingDate'
})

const { queryParams } = toRefs(tableParams);

/** 新增按钮操作 */
const router = useRouter()
const handleAdd = (type: string, data?: OrderFormVO) => {
	router.push('/order/add?type=' + type + '&id=' + data?.id)
}

// 工单详情
const detail = (id: string | number) => {
    router.pushTarget('/order/detail?id=' + id)
}

/** 多选框选中数据 */
const ids = ref<OrderFormVO[]>([])
const handleSelectionChange = (selection: OrderFormVO[]) => {
    ids.value = selection
}

const orderFormTable = ref()
const batchDelete = () => {
    if(ids.value.length == 0) {
        ElMessage.error("请选择数据")
        return false
    }
    ElMessageBox.confirm(
        '是否确认删除当前所选数据？',
        '确认提示',
        { type: 'warning', confirmButtonText: '提交' }
    ).then(() => {
        delOrderForm(ids.value.map(item => item.id)).then(res => {
            if(res.success) {
                ElMessage.success('删除成功')
                orderFormTable.value.getData()
            }else{
                ElMessage.error('删除失败')
            }
        })
    }).catch(() => { })
}
</script>
