<!--
 * @Author: Kane
 * @Date: 2023-09-12 10:43:39
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/reward/RewardTelsaler.vue
 * @Description:
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div
        v-if="ui.showUI"
        class="reward-gainer-wrapper"
    >
        <el-row :gutter="10">
            <el-col :span="8">
                <span>奖励类型</span>
            </el-col>
            <el-col :span="16">
                <el-select
                    v-model="ui.selectedRewardProjectCode"
                    value-key="rewardCode"
                >
                    <el-option
                        v-for="item in ui.rewardProjectList"
                        :key="item.rewardCode"
                        :label="item.rewardName"
                        :value="item.rewardCode"
                    />
                </el-select>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="8">
                <span>坐席名称</span>
            </el-col>
            <el-col :span="16">
                <el-input v-model.trim.lazy="ui.selectedRewardTelsalerName" />
            </el-col>
        </el-row>
        <div class="tool-button-wrapper">
            <el-button
                type="primary"
                icon="select"
                @click="onSaveRewardTelsaler"
            >
                保存
            </el-button>
            <el-button
                type="danger"
                icon="Close"
            >
                放弃
            </el-button>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive, onBeforeMount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
    type RewardProject,
    type RewardProjectResponse,
    type AddRewardTelsalerRequest,
    type AddRewardTelsalerResponse,
    type UpdateRewardTelsalerRequest,
    type UpdateRewardTelsalerResponse,
    requestRewardPorjectsList,
    addRewardTelsaler,
    updateTelsalerReward
} from "@/utils/reward.js";
import eventBus from "@/utils/api/EventBus.js";

interface RewardGainerUI
{
    showUI: boolean;
    showEditRewardGainerDialog: boolean;
    rewardProjectList: RewardProject[] | null;
    selectedRewardProjectCode: number | undefined;
    selectedRewardTelsalerName: string;
    selectedRecID: number;
}

export default {
    name: "RewardTelsaler",
    props: {
        selectedRecId: {
            type: Number,
            require: true,
            default: (): number => -9999,
        },
        selectedRewardProjectCode: {
            type: Number,
            require: true,
            default: (): number => -999,
        },
        selectedTelsalerName: {
            type: String,
            require: true,
            default: (): string => "",
        },
    },
    setup( props )
    {
        const ui: RewardGainerUI = reactive({
            showUI: true,
            showEditRewardGainerDialog: false,
            rewardProjectList: [],
            selectedRewardProjectCode: 1,
            selectedRewardTelsalerName: "",
            selectedRecID: 0,
        });

        /**
         * 请求奖项清单的回调函数，用于处理请求结果。
         * @param response 请求奖项清单的响应对象
         * @param error 请求失败时的错误对象
         */
        const applyRewardProjectsData = ( response: RewardProjectResponse, error: any ): void =>
        {
            if ( !response.success )
            {
                ElMessageBox({
                    message: "请求奖励项目失败，请查看日志！",
                    type: "error",
                })
                    .then((): void => {})
                    .catch((): void => {});

                return;
            }

            ui.rewardProjectList = response.rewardList;
        };

        const refresh = (): void =>
        {
            requestRewardPorjectsList( applyRewardProjectsData );
        };

        onBeforeMount((): void =>
        {
            ui.selectedRewardProjectCode = props.selectedRewardProjectCode;
            ui.selectedRewardTelsalerName = props.selectedTelsalerName;
            ui.selectedRecID = props.selectedRecId;

            refresh();
        });

        const onSaveRewardTelsaler = (): void =>
        {
            if ( props.selectedRecId === -1 )
            {
                // 新增
                const addRequest: AddRewardTelsalerRequest = {
                    rewardIndex: ui.selectedRewardProjectCode as number,
                    telsalerName: ui.selectedRewardTelsalerName,
                };

                addRewardTelsaler( addRequest, addRewardTelsalerHandler );
            }
            else
            {
                // 更新
                const updateRequest: UpdateRewardTelsalerRequest = {
                    recordID: ui.selectedRecID,
                    telsalerName: ui.selectedRewardTelsalerName,
                    rewardIndex: ui.selectedRewardProjectCode as number,
                };

                updateTelsalerReward( updateRequest, updateTelsalerRewardHandler );
            }
        };

        const addRewardTelsalerHandler = ( data: AddRewardTelsalerResponse, error: any ): void =>
        {
            if ( data.success )
            {
                ElMessage({
                    message: data.message,
                    type: "success",
                });
            }
            else
            {
                ElMessage({
                    message: data.message,
                    type: "error",
                });
            }

            eventBus.emit( "onSavedRewardTelsaler" );
        };

        const updateTelsalerRewardHandler = ( data: UpdateRewardTelsalerResponse, error: any ): void =>
        {
            if ( data.success )
            {
                ElMessage({
                    message: data.message,
                    type: "success",
                });
            }
            else
            {
                ElMessage({
                    message: data.message,
                    type: "error",
                });
            }

            eventBus.emit( "onSavedRewardTelsaler" );
        };

        // onBeforeUpdate((): void =>
        // {
        //     refresh();
        // });

        return { ui, onSaveRewardTelsaler, };
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/public/_public.scss";

.reward-gainer-wrapper {
    width: 300px;

    @include query-box-wrap;
}

.tool-button-wrapper {
    display: flex;
    justify-content: flex-end;

    margin-top: 15px;
}
</style>
