<template>
    <el-card shadow="never" class="list-card">
        <template #header>
            <div class="search" v-show="showSearch">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                    <el-form-item prop="refundCode">
                        <el-input v-model="queryParams.keyWord" placeholder="搜索关键词" clearable style="width: 240px"
                                  @keyup.enter="handleQuery"/>
                    </el-form-item>
                    <el-form-item label="审批状态" prop="approveStatus">

                        <SelectDict v-model="queryParams.approveStatus" placeholder="请选择审批状态"
                                    dictCode="order_review_status"></SelectDict>
                    </el-form-item>
                    <el-form-item prop="costTakeDate">
                        <el-date-picker
                            v-model="refundDate"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="退款开始时间"
                            end-placeholder="退款结束时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            @change="getDate"
                            style="width: 200px"
                        />
                    </el-form-item>
                    <el-form-item prop="ownerBy">
                        <SelectUser placeholder="负责人" v-model="queryParams.ownerBy"></SelectUser>
                    </el-form-item>
                    <el-form-item prop="refundCode">
                        <el-date-picker
                            v-model="createdDate"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="提交开始时间"
                            end-placeholder="提交结束时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            @change="getCreateDate"
                            style="width: 200px"
                        />
<!--                        <el-input v-model="queryParams.create_time" placeholder="请输入退款编号" clearable style="width: 240px"-->
<!--                                  @keyup.enter="handleQuery"/>-->
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>

        <Table ref="refundRecordTable"
               :tableParams="tableParams"
               :btnRole="leftBtn"
               @handleAdd="handleAdd"
               @handleEdit="handleUpdate"
               @selectionChange="handleSelectionChange"
        >
            <template #left>
                <el-button>demoBotton</el-button>
            </template>
            <template #right>
<!--                <el-button link @click="openRule">-->
<!--                    <i-ep-QuestionFilled/>-->
<!--                    右侧demoBotton-->
<!--                </el-button>-->
            </template>
        </Table>
    </el-card>
    <addRefund ref="addRefundRef" @onOk="handleQuery"></addRefund>

</template>

<script setup name="RefundRecord" lang="ts">
import {
    listRefundRecord,
    getRefundRecord,
    delRefundRecord,
    addRefundRecord,
    updateRefundRecord
} from '@/api/finance/refundRecord';
import {RefundRecordVO, RefundRecordQuery, RefundRecordForm} from '@/api/finance/refundRecord/types';
import auth from '@/plugins/auth'
import Table from '@/components/Table/index.vue'
import {tableTypes} from '@/components/Table/types'
import {useDictCache} from "@/hooks/web/useDict";
import {listOrderForm} from "@/api/orderForm";
import addRefund from "./addRefund.vue";
const router = useRouter()
const {queryDictDetailByCodes} = useDictCache(['order_review_status'])
queryDictDetailByCodes()
const {proxy} = getCurrentInstance() as ComponentInternalInstance;


const refundRecordList = ref<RefundRecordVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const detailDialog = ref(false);//详情
const refundDate = ref();//
const createdDate = ref();//
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const leftBtn = ref(
    [
        {type: 'remove', hasPermi: 'finance:refundRecord:remove'},
        {type: 'add', hasPermi: 'finance:refundRecord:add'},
        {type: 'edit', hasPermi: 'finance:refundRecord:edit'},
        {type: 'import', hasPermi: 'finance:refundRecord:import'},
        {type: 'export', hasPermi: 'finance:refundRecord:export'},
    ]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const refundRecordFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});

const groupData = ref<{ label: string; value: string | number }[]>([])

const getDate = (data:any) =>{
    queryParams.value.startDate = data[0]
    queryParams.value.endDate = data[1]
    handleQuery()
}
const getCreateDate = (data:any) =>{
    queryParams.value.createStartDate = data[0]
    queryParams.value.createEndDate = data[1]
    handleQuery()
}

const tableParams = reactive<tableTypes<RefundRecordQuery, RefundRecordVO>>({
    tableColumn: [
        {show: true, label: '退款编号', prop: 'refundCode', sortable: true},
        {show: true, label: '关联客户', prop: 'customerId', sortable: true},
        {show: true, label: '关联订单', prop: 'orderId', sortable: true},
        {show: true, label: '退款金额', prop: 'refundAmount', sortable: true},
        // {show: true, label: '退款方式', prop: 'refundMethod', sortable: true},
        // {show: true, label: '退款日期', prop: 'refundDate', sortable: true},
        // {show: true, label: '票据类型', prop: 'invoicingType', sortable: true},
        // {show: true, label: '关联币种单位id', prop: 'currencyUnitId', sortable: true},
        {show: true, label: '拥有者', prop: 'ownerBy', sortable: true},
        // {show: true, label: '备注信息', prop: 'remark', sortable: true},
        {show: true, label: '审批状态', prop: 'approveStatus', sortable: true},
        {
            show: true,
            label: '操作',
            width: 200,
            prop: 'operation',
            disabledMove: true,
            render: ({column}: { column: RefundRecordVO }) => {
                return [
                    auth.hasPermi('system:user:demo') ? h(ElButton, {
                        link: true, type: 'primary', onClick: () => {
                        }
                    }, 'demo') : '',
                    auth.hasPermi('finance:refundRecord:detail') ? h(ElButton, {
                        link: true, type: 'primary', onClick: () => {
                            detail(column)
                        }
                    }, '详情') : '',
                ]
            }
        },
    ],
    keyId: 'id',
    queryParams: {
        refundCode: undefined,
        refundAmount: undefined,
        refundMethod: undefined,
        refundDate: undefined,
        customerId: undefined,
        orderId: undefined,
        invoicingType: undefined,
        approveStatus: undefined,
        ownerBy: undefined,
        startDate: undefined,
        endDate: undefined,
        createStartDate: undefined,
        createEndDate: undefined
    },
    listFn: listRefundRecord,
    delFn: delRefundRecord,
})


const {queryParams} = toRefs(tableParams);


const refundRecordTable = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
    refundRecordTable.value.getData()
}
/** 取消按钮 */
const detailCancel = () => {
    detailDialog.value = false;
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: RefundRecordVO[]) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}
const addRefundRef = ref()
/** 新增按钮操作 */
const handleAdd = () => {
    addRefundRef.value.handleAdd()
}
/** 修改按钮操作 */
const detail = async (row?: RefundRecordVO) => {
    const _id = row?.id
    // const res = await getRefundRecord(_id);
    // Object.assign(form.value, res.result);
    // detailDialog.value = true;
    router.push(`/refundRecord/detail?id=${_id}`)
}
/** 修改按钮操作 */
const handleUpdate = async (row?: RefundRecordVO) => {
    const _id = row?.id
    addRefundRef.value.handleUpdate(_id)
}
const getList = () => {
    refundRecordTable.value.getData()
}


onMounted(() => {
});
</script>
