<template>
    <div class="container">
        <!-- 搜索框 -->
        <el-input v-model="search" placeholder="输入关键字" :maxlength="20" />
        <el-button class="searchButton" @Click="tableData()" type="primary">搜索</el-button>
    </div>

    <el-table :data="tableData()" class="table-container" :border="true">
        <el-table-column prop="group" label="引导组" align="center" />
        <el-table-column prop="val" label="引导ID" align="center" />
        <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
                <el-button @click="delGuids(scope.row)" type="danger" :icon="Delete">删除引导</el-button>
            </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="引导组">
            <el-input v-model="itemId" placeholder="输入道具ID" :maxlength="10"
                style="width: 200px;position: relative; left: 41.219px;" />
        </el-form-item>
        <el-form-item label="引导ID">
            <el-input v-model="itemNum" placeholder="请输入道具数量" :maxlength="5"
                style="width: 200px;position: relative; left: 28px;" />
        </el-form-item>

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

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


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

const showModal = ref<Boolean>(false);
const itemId = ref("");
const itemNum = ref<Number>(1);
const search = ref("");

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

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

    }

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

// 分页
// 删除引导
const delGuids = (row: any) => {
    ElMessageBox.confirm('确定要删除该引导吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        let data = {
            playerId: props.ruleForm.id,
            guid: row.group,
            srvId: props.ruleForm.gId
        }

        console.log(data);

        let resp = playerApi.delPlayerGuids(data);

        ElMessage({
            message: "删除成功",
            type: 'info',
            duration: 3000
        });
        let index = props.guides.indexOf(row);
        props.guides.splice(index, 1);
    }).catch(() => { });
}

const addItem = () => {
    dialogTitle.value = "添加道具";
    showModal.value = true;
}

const closeModal = () => {
    itemId.value = null;
    itemNum.value = 1;
    showModal.value = false;
    dialogTitle.value = "添加图纸";
}

// 保存
const saveItem = () => {
    let data = {
        playerId: props.ruleForm.id,
        itemId: itemId.value,
        itemNum: itemNum.value,
        srvId: props.ruleForm.gId
    }

    // playerApi.addPlayerItem(data).then((resp) => {
    //     let data = resp.data.result;

    //     if (data === '道具添加失败' || data === '已拥有该道具') {
    //         ElMessage({
    //             message: data,
    //             type: 'error',
    //             duration: 3000
    //         });
    //     } else {
    //         props.callback(data)
    //     }
    // });

    showModal.value = false;
}

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

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


// 道具修改
const handlEditClick = (row: any) => {
    row.editing = true;
    row.tempCount = row.count;
};

const handleSaveClick = (row: any) => {
    // row.editing = false;

    ElMessageBox.confirm('确定要修改道具数量吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        row.editing = false;
        let data = {
            playerId: props.ruleForm.id,
            itemId: row.id,
            itemNum: row.tempCount,
            srvId: props.ruleForm.gId
        }

        let resp = playerApi.editPlayerItem(data);

        row.count = row.tempCount;
        ElMessage({
            message: "修改成功",
            type: 'info',
            duration: 3000
        });
    }).catch(() => { });
};

const handleCancelClick = (row: any) => {
    row.editing = false;
    row.tempCount = row.count;
};
</script>

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

.input-container {
    align-items: center;
    width: 250px;
}


.searchButton {
    margin-right: 10px;
}

.button-container {
    position: relative;
    left: 1%;
    transform: translateY(-8%);
}

.container {
    display: flex;
    align-items: center;
    width: 200px;
    margin-bottom: 20px;
}

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

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

.pagination-container {
    display: flex;
    justify-content: center;
}
</style>