<!--
 * @Author: Kane
 * @Date: 2023-03-23 16:05:08
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/views/DataManagement.vue
 * @Description:
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="wrapper">
        <div class="reward-wrapper">
            <div class="reward-gainer-wrapper">
                <el-divider content-position="left">
                    90俱乐部
                </el-divider>
                <div class="toolbutton-wrapper">
                    <el-button type="primary">
                        新增
                    </el-button>
                    <el-button type="danger">
                        删除
                    </el-button>
                </div>
                <el-table
                    border
                    stripe
                    style="width:100%;"
                    :height="tableHeight"
                >
                    <el-table-column type="selection" />
                    <el-table-column
                        label="坐席名称"
                        align="center"
                    />
                    <el-table-column
                        label="奖项名称"
                        align="center"
                    />
                </el-table>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { reactive, computed } from "vue";
import {
    type RewardProject,
    type RewardGainer,
    type RewardProjectResponse,
    type RewardGainerResponse,
    requestRewardPorjectsList,
    requestRewardGainers
} from "@/utils/reward.js";

interface UI
{
    rewardGainerList: RewardGainer[];
}

export default {
    name: "DataManagement",
    setup()
    {
        const ui: UI = reactive({
            rewardGainerList: [],
        });

        const tableHeight = computed((): number =>
        {
            return 5 * 50 + 40;
        });

        const applyGainerList = ( response: RewardGainerResponse ): void =>
        {
            if ( response.success )
            {
                ui.rewardGainerList = response.gainerList;
            }
        };

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

.wrapper {
    margin: 10px;
    padding: 10px;

    // background-color: #fff;
    // border-radius: 5px;
    // box-shadow: $box-shadow;

    // &:hover {
    //     box-shadow: $box-shadow-hover;
    // }

    min-width: 800px;

    >*+* {
        margin-top: 10px;
    }
}

.reward-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

    >div {
        background-color: #fff;
        border-radius: 5px;
        box-shadow: $box-shadow;

        padding: 10px;

        &:hover {
            box-shadow: $box-shadow-hover;
        }
    }

    >*+* {
        margin-left: 10px;
    }
}

.reward-gainer-wrapper {
    flex-grow: 1;
}

.dishonor-wrapper {
    flex-grow: 1;
}

.toolbutton-wrapper {
    text-align: left;
    margin-bottom: 10px;
    >*+* {
        margin-left: 15px;
    }
}
</style>
