<template>
    <div class="container">
        <!-- 搜索框 -->
        <el-input v-model="search" placeholder="输入关键字" :maxlength="20" />

        <el-button class="searchButton" @click="tableData()" type="primary">搜索</el-button>
        <el-button class="addButton" @click="addHrs()" type="primary">添加英雄</el-button>
    </div>


    <el-table :data="tableData()" class="table-container" :border="true">
        <el-table-column prop="id" label="ID" class="centered-content" align="center" />
        <!-- <el-table-column prop="name" label="英雄名称" class="centered-content" align="center"/> -->
        <el-table-column prop="lv" label="英雄等级" class="centered-content" align="center" />
        <el-table-column prop="alv" label="英雄觉醒等级" class="centered-content" align="center" />

        <el-table-column label="操作" width="180" align="center">
            <template #default="scope" >
                <span class="con">
                    <el-button @click="editHrs(scope.row)" @mouseenter="showText" @mouseleave="hideText" type="primary"
                        :icon="Edit" class="button-container">
                        <i class="icon"></i>
                        <span class="text">修改英雄</span>
                    </el-button>

                    <el-button @click="delHrs(scope.row)" type="danger" :icon="Delete" class="button-container"
                        @mouseenter="showText" @mouseleave="hideText">
                        <i class="ic, resultPropson"></i>
                        <span class="text">删除英雄</span>
                    </el-button>
                </span>

            </template>
        </el-table-column>
    </el-table>

    <el-pagination style="margin: auto;" class="pagination-container" background layout="prev, pager, next ,total,sizes"
        :total="state.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />

    <!-- 模态框 -->
    <el-dialog :title="dialogTitle" v-model="showModal" @close="closeModal" width="350px">

        <el-form-item label="英雄ID">
            <el-input v-model="hrsId" placeholder="输入英雄ID" :maxlength="5" :disabled="!addDisabled"
                style="width: 200px;position: relative; left: 41.219px;" />
        </el-form-item>
        <!-- <el-form-item label="英雄名称">
            <el-input v-model="hrsName" placeholder="输入英雄名称" :disabled="true" :maxlength="5"
                style="width: 200px;position: relative; left: 28px;" />
        </el-form-item> -->
        <el-form-item label="英雄等级">
            <el-input-number v-model="hrsLv" placeholder="输入英雄等级" :disabled="addDisabled" :max="100" :min="1" :maxlength="5"
                style="width: 200px;position: relative; left: 28px;" />
        </el-form-item>
        <el-form-item label="英雄觉醒等级">
            <el-input-number v-model="hrsAlv" placeholder="输入英雄觉醒等级"  :disabled="addDisabled" :max="19" :min="1" style="width: 200px" />
        </el-form-item>


        <span slot="footer" class="dialog-footer" style="position: absolute; right: 20px; bottom: 10px;">
            <el-button type="primary" @click="saveHrs">保存</el-button>
            <el-button @click="closeModal">关闭</el-button>
        </span>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, rowContextKey } from 'element-plus';
import { reactive, ref, } from 'vue'
import { Edit, Check, Close, Delete } from '@element-plus/icons-vue'
import playerApi from '@/api/player'
import { id } from 'element-plus/es/locale';

const props = defineProps({
    hrs: Array,
    ruleForm: Object,
    callback: {
        type: Function,
        required: true
    },
    callback1: {
        type: Function,
        required: true
    }
});

let dialogTitle = ref<string>('');

const showModal = ref<Boolean>(false);
const addDisabled = ref<Boolean>(true);
const search = ref("");

const hrsId = ref("");
const hrsName = ref("");
const hrsLv = ref<Number>();
const hrsAlv = ref<Number>();

const state = reactive({
    page: 1,
    limit: 10,
    total: props.hrs.length
});



const tableData = () => {
    let hrs: any = [];
    if (search.value == "") {
        state.total = props.hrs.length;
        hrs = props.hrs;
    } else {
        const regex = new RegExp(search.value, 'i');
        hrs = props.hrs.filter(
            (item: { id: string }, index) => {
                return regex.test(item.id);
            }
        );
        state.total = hrs.length;

    }

    return hrs.filter(
        (item, index) =>
            index < state.page * state.limit &&
            index >= state.limit * (state.page - 1)
    );
};

const showText = (event) => {
    const button = event.target;
    const text = button.querySelector('.text');
    text.style.display = 'block';
}

const hideText = (event) => {
    const button = event.target;
    const text = button.querySelector('.text');
    text.style.display = 'none';
}


const closeModal = () => {
    hrsId.value = null
    hrsLv.value = null
    hrsAlv.value = null
    showModal.value = false;
    dialogTitle.value = "添加英雄";
}

const addHrs = () => {
    dialogTitle.value = "添加英雄";
    addDisabled.value = true;
    showModal.value = true;
}

// 修改英雄
const editHrs = (row: any) => {
    dialogTitle.value = "修改英雄";
    addDisabled.value = false;
    showModal.value = true;

    hrsId.value = row.id;
    hrsLv.value = row.lv;
    hrsAlv.value = row.alv;
}

// 保存
const saveHrs = () => {
    if (addDisabled.value) { //默认添加英雄
        let data = {
            playerId: props.ruleForm.id,
            heroID: hrsId.value,
            srvId:props.ruleForm.gId
        }

        playerApi.addHrs(data).then((resp) => {
            console.log(resp);
            let data = resp.data.result;
            props.callback(data);
            ElMessage({
                message: "添加成功",
                type: 'success',
                duration: 3000
            });
        });
    } else {  // 修改英雄
        let data = {
            playerId: props.ruleForm.id,
            heroID: hrsId.value,
            heroLv: hrsLv.value,
            heroAlv: hrsAlv.value,
            srvId:props.ruleForm.gId
        }

        playerApi.editHrs(data).then((resp) => {
            let result = resp.data.result;
            if (result === '修改成功') {
                props.callback1(data);
                ElMessage({
                    message: "修改成功",
                    type: 'success',
                    duration: 3000
                });
            } else {
                ElMessage({
                    message: "修改失败",
                    type: 'error',
                    duration: 3000
                });
            }
        });
    }
    showModal.value = false;
}

// 删除英雄
const delHrs = (row: any) => {
    ElMessageBox.confirm('确定要删除该英雄吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        let data = {
            playerId: props.ruleForm.id,
            heroID: row.id,
            srvId:props.ruleForm.gId
        }

        playerApi.delHrs(data).then((resp) => {
            if (resp.data.result === '删除成功') {
                ElMessage({
                    message: "删除成功",
                    type: 'success',
                    duration: 3000
                });
                let index = props.hrs.indexOf(row);
                props.hrs.splice(index, 1);
            } else {
                ElMessage({
                    message: "删除失败",
                    type: 'error',
                    duration: 3000
                });
            }
        });



    }).catch(() => { });
}


// 分页

const handleCurrentChange = (e) => {
    state.page = e;
};

const handleSizeChange = (e) => {
    state.limit = e;
};

</script>

<style>
.con {
    display: flex;
    align-items: center;
}

.button-container {
    position: relative;
    left: 10px;
    transform: translateY(1%);
    border-radius: 50%;
    width: 30px;
    height: 28px;
}

.input-container {
    display: flex;
    align-items: center;
}

.addButton {
    position: absolute;
    right: 5%;
}

.searchButton {
    margin-right: 20px;
    /* 调整搜索按钮的右侧间距 */
}


.button-container:hover {
    border-radius: 10px;
    width: 100px;
}

.button-container el-button {
    margin-right: 10px;
}

.button-container el-button:last-child {
    margin-right: 0;
}

.container {
    display: flex;
    align-items: center;
    width: 200px;
    justify-content: space-between;
    align-items: center;
}

.edit-button {
    position: absolute;
    top: 50%;
    left: 120px;
    transform: translateY(-50%);
}

.table-container {
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.pagination-container {
    display: flex;
    justify-content: center;
}

.centered-content {
    text-align: center;
}

.text {
    display: none;
}
</style>