<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="receivePlanCode">
                        <el-input v-model="queryParams.receivePlanCode" placeholder="搜索关键词" clearable
                                  style="width: 240px" @keyup.enter="handleQuery"/>
                    </el-form-item>

                    <el-form-item  prop="receiveStatus">
                        <el-select v-model="queryParams.receiveStatus" placeholder="请选择回款状态" clearable>
                            <el-option
                                v-for="dict in [1,2,3]"
                                :key="dict"
                                :label="dict"
                                :value="dict"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item prop="planReceiveDate">
                        <el-date-picker clearable
                                        v-model="queryParams.planReceiveDate"
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                        placeholder="请选择计划回款日期"
                        />
                    </el-form-item>

                    <el-form-item prop="planReceiveAmount">
                        <SelectUser placeholder="订单所属人员" @onOk="handleQuery" v-model="queryParams.ownerBy"></SelectUser>
                    </el-form-item>

                    <el-form-item prop="planReceiveAmount">
                        <el-tree-select
                            v-model="queryParams.deptId"
                            :data="orgOptions"
                            :props="{ value: 'id', label: 'title', children: 'children' }"
                            value-key="id"
                            node-key="id"
                            placeholder="订单所属部门"
                            check-strictly
                            filterable
                            clearable
                            highlight-current
                        />
<!--                        <SelectUser @onOk="handleQuery" v-model="queryParams.ownerBy"></SelectUser>-->
                    </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="receivePlanDetailTable"
               :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>
    <addForm ref="addFormRef"></addForm>
</template>

<script setup name="ReceivePlanDetail" lang="ts">
import {
    listReceivePlanDetail,
    getReceivePlanDetail,
    delReceivePlanDetail,
    addReceivePlanDetail,
    updateReceivePlanDetail,
    computedPlanDetail
} from '@/api/finance/receivePlanDetail';
import {listCustomer, delCustomer} from '@/api/customer';
import { listOrderForm, delOrderForm } from '@/api/orderForm';
import {
    ReceivePlanDetailVO,
    ReceivePlanDetailQuery,
    ReceivePlanDetailForm,
    ComputedPlan
} from '@/api/finance/receivePlanDetail/types';
import auth from '@/plugins/auth'
import Table from '@/components/Table/index.vue'
import {tableTypes} from '@/components/Table/types'
import {DeptVO} from "@/api/system/dept/types";
import {listDept} from "@/api/system/dept";
import {MiniOrderFormVo,  OrderFormQuery, OrderFormVO} from "@/api/orderForm/types";
import addForm from './addForm.vue'

const addFormRef = ref()

const {proxy} = getCurrentInstance() as ComponentInternalInstance;

const orgOptions = ref<Array<DeptVO>>([]);

const receivePlanDetailList = ref<ReceivePlanDetailVO[]>([]);
const buttonLoading = ref(false);
const queryCutloading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const leftBtn = ref(
    [
        {type: 'remove', hasPermi: 'receivePlanDetail:receivePlanDetail:remove'},
        {type: 'add', hasPermi: 'receivePlanDetail:receivePlanDetail:add'},
        {type: 'edit', hasPermi: 'receivePlanDetail:receivePlanDetail:edit'},
        {type: 'import', hasPermi: 'receivePlanDetail:receivePlanDetail:import'},
        {type: 'export', hasPermi: 'receivePlanDetail:receivePlanDetail:export'},
    ]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

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

const handleUpdate = () =>{


}
const tableParams = reactive<tableTypes<ReceivePlanDetailQuery, ReceivePlanDetailVO>>({
    tableColumn: [
        {show: true, label: '关联订单', prop: 'orderId', sortable: true},
        {show: true, label: '订单归属人员', prop: 'ownerBy', sortable: true},
        {show: true, label: '回款期次', prop: 'periodNum', sortable: true},
        {show: true, label: '计划回款金额', prop: 'planReceiveAmount', sortable: true},
        {show: true, label: '实际回款金额', prop: 'actualReceiveAmount', sortable: true},
        {show: true, label: '计划回款日期', prop: 'planReceiveDate', sortable: true},
        {show: true, label: '回款状态', prop: 'receiveStatus', sortable: true},
        {show: true, label: '实际回款日期', prop: 'actualReceiveDate', sortable: true},
        {
            show: true,
            label: '操作',
            width: 200,
            prop: 'operation',
            disabledMove: true,
            render: ({column}: { column: ReceivePlanDetailVO }) => {
                return [
                    auth.hasPermi('system:user:demo') ? h(ElButton, {
                        link: true, type: 'primary', onClick: () => {
                        }
                    }, 'demo') : '',
                ]
            }
        },
    ],
    keyId: 'id',
    queryParams: {
        receivePlanCode: undefined,
        planReceiveDate: undefined,
        actualReceiveDate: undefined,
        planReceiveAmount: undefined,
        actualReceiveAmount: undefined,
        receiveRatio: undefined,
        orderId: undefined,
        approveStatus: undefined,
        periodNum: undefined,
        periodTotal: undefined,
        receiveStatus: undefined,
        overdueDay: undefined,
        isDelete: undefined,
        enabled: undefined,
        deptId: undefined,
        customerId: undefined
    },
    listFn: listReceivePlanDetail,
    delFn: delReceivePlanDetail,
})


const initFormData: ReceivePlanDetailForm = {
    id: undefined,
    receivePlanCode: undefined,
    planReceiveDate: undefined,
    actualReceiveDate: undefined,
    planReceiveAmount: undefined,
    customerId: undefined,
    actualReceiveAmount: undefined,
    ReceiveRatio: undefined,
    orderId: undefined,
    approveStatus: undefined,
    periodNum: undefined,
    periodTotal: undefined,
    receiveStatus: undefined,
    overdueDay: undefined,
    remark: undefined,
    isDelete: undefined,
    enabled: undefined,
    receivePeriodTotal: 0,
    receiveIntervalUnit: 0,
    firstReceiveDate: undefined,
    updateData: []
}

const data = reactive<PageData<ReceivePlanDetailForm, ReceivePlanDetailQuery>>({
    form: {...initFormData},
    rules: {
        id: [
            {required: true, message: "主键不能为空", trigger: "blur"}
        ],
        receivePlanCode: [
            {required: true, message: "编号不能为空", trigger: "blur"}
        ],
        planReceiveDate: [
            {required: true, message: "计划回款日期不能为空", trigger: "blur"}
        ],
        actualReceiveDate: [
            {required: true, message: "实际回款日期不能为空", trigger: "blur"}
        ],
        planReceiveAmount: [
            {required: true, message: "计划回款金额不能为空", trigger: "blur"}
        ],
        actualReceiveAmount: [
            {required: true, message: "实际回款金额不能为空", trigger: "blur"}
        ],
        ReceiveRatio: [
            {required: true, message: "占比不能为空", trigger: "blur"}
        ],
        orderId: [
            {required: true, message: "关联订单id不能为空", trigger: "blur"}
        ],
        approveStatus: [
            {required: true, message: "审批状态不能为空", trigger: "change"}
        ],
        periodNum: [
            {required: true, message: "期次不能为空", trigger: "blur"}
        ],
        periodTotal: [
            {required: true, message: "总期次不能为空", trigger: "blur"}
        ],
        receiveStatus: [
            {required: true, message: "回款 状态不能为空", trigger: "change"}
        ],
        overdueDay: [
            {required: true, message: "逾期天数不能为空", trigger: "blur"}
        ],
        remark: [
            {required: true, message: "备注信息不能为空", trigger: "blur"}
        ],
        isDelete: [
            {required: true, message: "是否删除：0未删除，1已删除不能为空", trigger: "blur"}
        ],
        enabled: [
            {required: true, message: "是否启用:1:启用,0:不启用不能为空", trigger: "blur"}
        ],
    }
});
const {form, rules} = toRefs(data);

const {queryParams} = toRefs(tableParams);


const receivePlanDetailTable = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
    receivePlanDetailTable.value.getData()
}

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

/** 多选框选中数据 */
const handleSelectionChange = (selection: ReceivePlanDetailVO[]) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
    addFormRef.value.open()
}

const getList = () => {
    receivePlanDetailTable.value.getData()
}


onMounted(() => {

});
</script>
