<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="addBps()" 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="bid" label="图纸ID" class="centered-content" align="center" />
        <el-table-column prop="biId" label="道具ID" class="centered-content" align="center" />
        <el-table-column prop="bty" label="图纸类型" class="centered-content" align="center">
            <template #default="scope">
                <span>{{ bpsTyeps[scope.row.bty] }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="btr" label="研发状态" class="centered-content" align="center">
            <template #default="scope">
                <span v-if="scope.row.btr">已研发</span>
                <span v-else>未研发</span>
            </template>
        </el-table-column>
        <el-table-column prop="btl" label="最后研发图纸" class="centered-content" align="center" />

        <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
                <span class="con">
                    <el-button @click="editBps(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="delBps(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="bpsId" 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="bpsLv" placeholder="研发状态" :disabled="addDisabled" :maxlength="5"
                style="width: 200px;position: relative; left: 28px;" />
        </el-form-item>
        <el-form-item label="最后研发图纸">
            <el-input v-model="bpsAlv" placeholder="最后研发图纸" :disabled="addDisabled" :maxlength="5" style="width: 200px" />
        </el-form-item>


        <span slot="footer" class="dialog-footer" style="position: absolute; right: 20px; bottom: 10px;">
            <el-button type="primary" @click="saveBps">保存</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({
    bps: 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 bpsId = ref("");
const bpsName = ref("");
const bpsLv = ref<Number>();
const bpsAlv = ref<Number>();

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

const bpsTyeps = ['', '短柄', '长柄', '盾牌', '圣物', '法器', '弓箭', '枪炮', '', '', '', '秘石', '神器'];

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

    return bps.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 = () => {
    bpsId.value = null
    bpsLv.value = null
    bpsAlv.value = null
    showModal.value = false;
    dialogTitle.value = "添加图纸";
}

const addBps = () => {
    dialogTitle.value = "添加图纸";
    addDisabled.value = true;
    showModal.value = true;
}

// 制造图纸
const editBps = (row: any) => {
    let data = {
        playerId: props.ruleForm.id,
        bluePrintId: row.bid,
        srvId:props.ruleForm.gId
    }

    playerApi.makeBps(data).then((resp) => {
        if (resp.data.result === '制造成功') {
            ElMessage({
                message: "制造成功",
                type: 'success',
                duration: 3000
            });
        } else {
            ElMessage({
                message: "制造失败",
                type: 'error',
                duration: 3000
            });
        }
    });
}

// 保存
const saveBps = () => {
    if (addDisabled.value) { //默认添加图纸
        let data = {
            playerId: props.ruleForm.id,
            bluePrintId: bpsId.value,
            srvId:props.ruleForm.gId
        }

        playerApi.addBps(data).then((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 delBps = (row: any) => {
    ElMessageBox.confirm('确定要删除该图纸吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        let data = {
            playerId: props.ruleForm.id,
            bluePrintId: row.bid,
            srvId:props.ruleForm.gId
        }

        playerApi.delBps(data).then((resp) => {
            console.log(resp);

            if (resp.data.result === '删除成功') {
                ElMessage({
                    message: "删除成功",
                    type: 'success',
                    duration: 3000
                });
                let index = props.bps.indexOf(row);
                props.bps.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;
    margin-bottom: 10px; /* 设置向下间距为 10 像素 */
}

.container .el-input {
    margin-right: 10px;
    /* 调整输入框的右边距 */
}

.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>