010GMClient/src/components/player/relicInfo/index.vue

<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="addrls()" 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="iId" label="道具ID" class="centered-content" align="center" />
        <el-table-column label="遗物名称" class="centered-content" align="center">
            <template #default="scope">
                <span>{{ scope.row.iId }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="pId" label="属性ID" class="centered-content" align="center" />
        <el-table-column prop="rsi" label="套装ID" class="centered-content" align="center" />
        <el-table-column prop="etp" label="遗物类型" class="centered-content" align="center">
            <template #default="scope">
                <span>{{ rlsTyeps[scope.row.etp] }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="rat" label="主属性" class="centered-content" align="center">
            <template #default="scope">
                <span>{{ attrJson[scope.row.rat] }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="ratValue" label="主属性值" class="centered-content" align="center" />
        <el-table-column prop="qua" label="遗物品质" class="centered-content" align="center" />
        <el-table-column prop="lv" label="遗物等级" class="centered-content" align="center" />
        <el-table-column prop="sar" label="遗物星级" class="centered-content" align="center" />
        <el-table-column prop="onr" label="装备英雄" class="centered-content" align="center">
            <template #default="scope">
                <span>{{ heroJson[scope.row.onr] }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="exp" label="exp" class="centered-content" align="center" />
        <el-table-column prop="rdm" label="副词条1" class="centered-content" align="center">
            <template #default="scope">
                <span>
                    <span v-for="(item, index) in scope.row.rdm" :key="item">
                        <span v-if="index == 0">
                            <a href="#" @click="openModal(scope.row, item, index, $event)" style="text-decoration: none">{{
                                attrJson[item.typ] }}</a>
                        </span>
                    </span>
                </span>
            </template>
        </el-table-column>

        <el-table-column prop="rdm" label="副词条2" class="centered-content" align="center">
            <template #default="scope">
                <span>
                    <span v-for="(item, index) in scope.row.rdm" :key="item">
                        <span v-if="index == 1">
                            <a href="#" @click="openModal(scope.row, item, index, $event)" style="text-decoration: none">{{
                                attrJson[item.typ] }}</a>
                        </span>
                    </span>
                </span>
            </template>
        </el-table-column>

        <el-table-column prop="rdm" label="副词条3" class="centered-content" align="center">
            <template #default="scope">
                <span>
                    <span v-for="(item, index) in scope.row.rdm" :key="item">
                        <span v-if="index == 2">
                            <a href="#" @click="openModal(scope.row, item, index, $event)" style="text-decoration: none">{{
                                attrJson[item.typ] }}</a>
                        </span>
                    </span>
                </span>
            </template>
        </el-table-column>

        <el-table-column prop="rdm" label="副词条4" class="centered-content" align="center">
            <template #default="scope">
                <span>
                    <span v-for="(item, index) in scope.row.rdm" :key="item">
                        <span v-if="index == 3">
                            <a href="#" @click="openModal(scope.row, item, index, $event)" style="text-decoration: none">{{
                                attrJson[item.typ] }}</a>
                        </span>
                    </span>
                </span>
            </template>
        </el-table-column>

        <el-table-column label="操作" width="100px" align="center">
            <template #default="scope">
                <span class="con">
                    <el-button @click="editrls(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="delRls(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="800px">
        <el-row>
            <el-col :span="20">
                <span v-if="editAddFlag">
                    <el-form-item label="遗物数量" label-width="100px" class="label-left">
                        <el-input v-model="rlsCount" placeholder="添加同类型遗物数量" :maxlength="10" style="width: 200px" />
                    </el-form-item>
                </span>
                <span v-else>
                    <el-form-item label="遗物ID" label-width="100px" class="label-left">
                        <el-input v-model="rlsId" placeholder="遗物ID" disabled="disabled" :maxlength="10"
                            style="width: 200px" />
                    </el-form-item>
                </span>
            </el-col>
            <el-col :span="4">
                <el-button @click="openRlsModal()" type="primary" style="">添加词条</el-button>
            </el-col>
        </el-row>
        <el-row style="margin-bottom: 20px;"></el-row>
        <el-form>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="遗物道具" label-width="100px" class="label-left">
                        <el-input v-model="rlsiId" placeholder="输入道具ID" :maxlength="10" :disabled="!addDisabled"
                            style="width: 200px;" @change="inputChange" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="遗物名称" label-width="100px" class="label-left">
                        <el-input v-model="rlsName" placeholder="遗物名称" :disabled="addDisabled" :maxlength="10"
                            style="width: 200px;" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="基础属性" label-width="100px" class="label-left">
                        <el-input v-model="rlsPid" placeholder="基础属性ID" :disabled="addDisabled" :maxlength="10"
                            style="width: 200px" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="遗物类型" label-width="100px" class="label-left">
                        <el-select v-model="rlsTyp" placeholder="遗物类型" :disabled="addDisabled" style="width: 200px">
                            <el-option v-for="option in typeOptions" :key="option.value" :label="option.label"
                                :value="option.value"></el-option>
                        </el-select>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="主属性类型" label-width="100px" class="label-left">
                        <el-select v-model="rlsAttr" placeholder="请选择主属性类型" style="width: 200px" :rules="rlsAttrRules"
                            show-error>
                            <el-option v-for="option in attrOptions" :key="option.value" :label="option.label"
                                :value="option.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="主属性值" label-width="100px" class="label-left">
                        <el-input v-model="rlsAttrV" placeholder="主属性值" :maxlength="10" style="width: 200px" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="套装ID" label-width="100px" class="label-left">
                        <el-input v-model="rsi" placeholder="套装ID" :disabled="addDisabled" :maxlength="10"
                            style="width: 200px" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="遗物品质" label-width="100px" class="label-left">
                        <el-input v-model="rlsqua" placeholder="遗物品质" :disabled="addDisabled" :maxlength="10"
                            style="width: 200px" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="遗物等级" label-width="100px" class="label-left">
                        <el-input v-model="rlsLv" placeholder="遗物等级" @change="lvChange" :maxlength="10"
                            style="width: 200px" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="遗物星级" label-width="100px" class="label-left">
                        <el-input v-model="rlsStar" placeholder="遗物星级" :disabled="addDisabled" :maxlength="10"
                            style="width: 200px" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">

                    <el-form-item label="装备英雄" label-width="100px" class="label-left">
                        <el-input v-model="rlsOwn" placeholder="装备英雄" :maxlength="10" style="width: 200px" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">

                    <el-form-item label="遗物经验值" label-width="100px" class="label-left">
                        <el-input v-model="rlsExp" placeholder="遗物经验值" :maxlength="10" style="width: 200px" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" :class="{ 'hidden': !rdm1Dis }">
                    <el-form-item label="副词条1 " label-width="100px" class="label-left">
                        <el-input v-model="rdm1" placeholder="副词条1" :maxlength="10" style="width: 200px" />
                        <el-button @click="editRdm1" icon="Edit" type="primary" round></el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :class="{ 'hidden': !rdm2Dis }">
                    <el-form-item label="副词条2 " label-width="100px" class="label-left">
                        <el-input v-model="rdm2" placeholder="副词条2" :maxlength="10" style="width: 200px" />
                        <el-button @click="editRdm2" icon="Edit" type="primary" round></el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" :class="{ 'hidden': !rdm3Dis }">
                    <el-form-item label="副词条3 " label-width="100px" class="label-left">
                        <el-input v-model="rdm3" placeholder="副词条3" :maxlength="10" style="width: 200px" />
                        <el-button @click="editRdm3" icon="Edit" type="primary" round></el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="12" :class="{ 'hidden': !rdm4Dis }">
                    <el-form-item label="副词条4 " label-width="100px" class="label-left">
                        <el-input v-model="rdm4" placeholder="副词条4" :maxlength="10" style="width: 200px" />
                        <el-button @click="editRdm4" icon="Edit" type="primary" round></el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="margin-bottom: 20px;"></el-row>


            <span slot="footer" class="dialog-footer" style="position: absolute; right: 20px; bottom: 10px;">
                <el-button type="primary" @click="saverls">保存</el-button>
                <el-button @click="closeModal">关闭</el-button>
            </span>

        </el-form>
    </el-dialog>

    <el-dialog title="副词条" v-model="rdmModal" @close="closeRdmModal" width="300px">
        <el-form-item label="词条类型">
            <el-select v-model="rdmTyp" placeholder="请选择词条类型" style="width: 200px" @change="rdmChange">
                <el-option v-for="option in rdmOptions" :key="option.value" :label="option.label"
                    :value="option.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="词条数值">
            <el-input v-model="rdmVal" placeholder="请输入词条数值" :maxlength="5" style="width: 200px" />
        </el-form-item>
        <el-form-item label="强化次数">
            <el-input v-model="rdmsTs" placeholder="请输入强化次数" :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="saveRdm">保存</el-button>
            <el-button @click="closeRdmModal">关闭</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({
    rls: Array,
    ruleForm: Object,
    callback: {
        type: Function,
        required: true
    },
    callback1: {
        type: Function,
        required: true
    }
});

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

const showModal = ref<Boolean>(false);
const rdmModal = ref<Boolean>(false);
const addDisabled = ref<Boolean>(true);
const editAddFlag = ref<Boolean>(true);  // 遗物新增  删除标志位

const search = ref("");
const rlsId = ref("");
const rlsName = ref("");
const rlsAlv = ref<Number>();
const rlsiId = ref<Number>();   // 遗物道具Id
const rlsPid = ref<Number>(); // 基础属性ID
const rlsTyp = ref<Number>();  // 遗物类型
const rlsAttr = ref<Number>();  // 遗物主属性
const rlsAttrV = ref<Number>(0);  // 主属性值
const rsi = ref<Number>(); // 套装ID
const rlsqua = ref<Number>(); // 遗物品质
const rlsLv = ref<Number>(0); // 遗物等级
const rlsStar = ref<Number>(); // 遗物星级
const rlsOwn = ref<Number>(0); // 装备英雄
const rlsExp = ref<Number>(0);  // 经验
const rlsCount = ref<Number>(1); // 添加数量
const attrOptions = reactive([]);
const rdm1 = ref(""); // 副词条1
const rdm2 = ref(""); // 副词条2
const rdm3 = ref(""); // 副词条3
const rdm4 = ref(""); // 副词条4

const rdm1Dis = ref<Boolean>(false); // 隐藏
const rdm2Dis = ref<Boolean>(false); // 副词条2
const rdm3Dis = ref<Boolean>(false); // 副词条3
const rdm4Dis = ref<Boolean>(false); // 副词条4
const rdmOpenType = ref<Number>(0);
const existRdm = reactive([]);  // 已存在的副词条属性

const rdmTyp = ref<Number>(0);
const rdmVal = ref<Number>(0);
const rdmsTs = ref<Number>(0);
const rdmOptions = reactive([]);
const rdmIndex = ref<Number>();
const rdmId = ref();

const rlsAttrRules = [
    { required: true, message: '请选择主属性类型', trigger: 'change' }
];

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

const rlsTyeps = ['', '部件A', '部件B', '部件C', '部件D'];

const typeOptions = [
    {
        'label': "部位1",
        'value': 1
    }, {
        'label': "部位2",
        'value': 2
    }, {
        'label': "部位3",
        'value': 3
    }, {
        'label': "部位4",
        'value': 4
    }
];

const attrJson = {
    101: "生命",
    102: "攻击",
    103: "威力",
    104: "防御",
    201: "暴击几率",
    202: "攻击加成",
    203: "威力加成",
    204: "攻击速度",
    301: "生命加成",
    302: "防御加成",
    303: "治疗效果",
    304: "护盾精通",
    401: "充能速度",
    402: "施法速度",
    403: "跌落抗性",
    404: "召唤精通"
};

const heroJson = {
    0: "无",
    101: "莱格拉斯",
    102: "米娅",
    104: "霍夫曼",
    105: "米洛",
    201: "凡妮莎",
    202: "内迪",
    205: "糕点师",
    206: "艾尔莎",
    301: "船长",
    303: "男主",
    304: "兔盾",
    401: "烧烤奶",
    402: "艾丽西亚",
    403: "占星师",
    501: "维维安",
    502: "沙拉曼",
    601: "彩虹箭",
    602: "大卫",
    603: "指挥官",
    702: "双枪",
    703: "消防员"
};

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

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

const inputChange = (val) => {
    let data = {
        itemID: val + "",
        srvId:props.ruleForm.gId
    }

    playerApi.getRls(data).then((resp) => {
        let result = resp.data.result;
        if (result == '') {
            ElMessage({
                message: "遗物道具不存在",
                type: 'error',
                duration: 3000
            });
        } else {
            let jsonData = JSON.parse(result);
            rlsName.value = jsonData.itemId;
            rlsPid.value = jsonData.pId;
            rlsStar.value = jsonData.star;
            rsi.value = jsonData.rsi;
            rlsLv.value = jsonData.lv;
            rlsqua.value = jsonData.qua;
            rlsTyp.value = jsonData.type;

            for (let index = 0; index < jsonData.attr.length; index++) {
                let key = jsonData.attr[index];
                let option = {
                    'label': attrJson[key],
                    'value': key
                };
                attrOptions.push(option);
            }

            for (let index = 0; index < jsonData.rdm.length; index++) {
                let key = jsonData.rdm[index];
                let option = {
                    'label': attrJson[key],
                    'value': key
                };
                rdmOptions.push(option);
            }
        }
    });
}

const lvChange = (val) => {
    let data = {
        itemID: rlsiId.value,
        changeLv: val + "",
        srvId:props.ruleForm.gId
    }
    if (val > 0) {
        playerApi.rlsChangeLv(data).then((resp) => {
            let result = resp.data.result;
            let jsonData = JSON.parse(result);
            if (jsonData.pId == 0) {
                ElMessage({
                    message: "超出最大等级",
                    type: 'error',
                    duration: 3000
                });
            } else {
                rlsPid.value = jsonData.pId;
            }

        });
    }
}

const openModal = (row, item, index, event) => {
    event.preventDefault();
    rdmOpenType.value = 1;
    rdmModal.value = true;
    rdmTyp.value = item.typ;
    rdmVal.value = item.val;
    rdmsTs.value = item.sTs;
    rdmIndex.value = index;
    rlsId.value = row.id
    existRdm.splice(0, existRdm.length);
    rdmOptions.splice(0, rdmOptions.length);
    // 获取部位能选择的参数
    let data = {
        partType: row.etp,
        srvId:props.ruleForm.gId
    }

    // 移除已经存在的词条
    let rdms = row.rdm;
    for (let i = 0; i < rdms.length; i++) {
        if (i == index) {
            continue;
        }
        const element = rdms[i];
        existRdm.push(element.typ);
    }

    playerApi.getPart(data).then((resp) => {
        let data = resp.data.result;
        const jsonFun = new Function('return ' + data);
        const jsonData = jsonFun();

        for (let index = 0; index < jsonData.rdm.length; index++) {
            let key = jsonData.rdm[index];
            if (!existRdm.includes(key)) {
                let option = {
                    'label': attrJson[key],
                    'value': key
                };
                rdmOptions.push(option);
            }
        }
    });
}

const editRdm1 = () => {
    rdmOpenType.value = 1;
    rdmIndex.value = 0;
    let s = rdm1.value;
    let item = s.split(":");
    rdmModal.value = true;

    rdmTyp.value = parseInt(item[0]);
    rdmVal.value = parseInt(item[1]);
    rdmsTs.value = parseInt(item[2]);
    let option = {
        'label': attrJson[rdmTyp.value],
        'value': rdmTyp.value
    };

    if (!existRdm.includes(rdmTyp.value)) {
        rdmOptions.push(option);
        existRdm.push(rdmTyp.value);
    }
}

const editRdm2 = () => {
    rdmOpenType.value = 1;
    rdmIndex.value = 1;
    let s = rdm2.value;
    let item = s.split(":");
    rdmModal.value = true;

    rdmTyp.value = parseInt(item[0]);
    rdmVal.value = parseInt(item[1]);
    rdmsTs.value = parseInt(item[2]);
}

const editRdm3 = () => {
    rdmOpenType.value = 1;
    rdmIndex.value = 2;
    let s = rdm3.value;
    let item = s.split(":");
    rdmModal.value = true;

    rdmTyp.value = parseInt(item[0]);
    rdmVal.value = parseInt(item[1]);
    rdmsTs.value = parseInt(item[2]);
}

const editRdm4 = () => {
    rdmOpenType.value = 1;
    rdmIndex.value = 3;
    let s = rdm4.value;
    let item = s.split(":");
    rdmModal.value = true;
    console.log(item);

    rdmTyp.value = parseInt(item[0]);
    rdmVal.value = parseInt(item[1]);
    rdmsTs.value = parseInt(item[2]);
}

const openRlsModal = () => {
    let count = 0;
    if (rdm1.value != "") {
        count++;
    }
    if (rdm2.value != "") {
        count++;
    }
    if (rdm3.value != "") {
        count++;
    }
    if (rdm4.value != "") {
        count++;
    }

    if (count < rlsStar.value - 1) {
        rdmModal.value = true;
        rdmTyp.value = null;
        rdmVal.value = 0;
        rdmsTs.value = 0;
        rdmOpenType.value = 2;
    } else {
        let rdmCount = rlsStar.value - 1
        let msg = "该星级最大词条数" + rdmCount;
        ElMessage({
            message: msg,
            type: 'error',
            duration: 3000
        });
    }
}

const rdmChange = (val) => {
    if (existRdm.includes(val)) {
        ElMessage({
            message: "该词条已存在，请重新选择",
            type: 'error',
            duration: 3000
        });
    }
}

const saveRdm = () => {
    let data = {
        playerId: props.ruleForm.id,
        rdmType: rdmTyp.value,
        rdmVal: rdmVal.value,
        rdmsTs: rdmsTs.value,
        rlsId: rlsId.value,
        rdmIndex: rdmIndex.value,
        srvId:props.ruleForm.gId
    }

    if (rdmOpenType.value == 1) {
        playerApi.saveRdm(data).then((resp) => {
            props.callback(data);
            rdmModal.value = false;
            switch (rdmIndex.value) {
                case 0:
                    rdm1.value = data.rdmType + ":" + data.rdmVal + ":" + data.rdmsTs
                    break;
                case 1:
                    rdm2.value = data.rdmType + ":" + data.rdmVal + ":" + data.rdmsTs
                    break;
                case 2:
                    rdm3.value = data.rdmType + ":" + data.rdmVal + ":" + data.rdmsTs
                    break;
                case 3:
                    rdm4.value = data.rdmType + ":" + data.rdmVal + ":" + data.rdmsTs
                    break;
                default:
                    break;
            }
        });
    } else if (rdmOpenType.value == 2) {
        let d = rdmTyp.value + ":" + rdmVal.value + ":" + rdmsTs.value;
        if (rdm1.value == "") {
            rdm1.value = d;
            rdm1Dis.value = true;
        } else if (rdm2.value == "") {
            rdm2.value = d;
            rdm2Dis.value = true;
        } else if (rdm3.value == "") {
            rdm3.value = d;
            rdm3Dis.value = true;
        } else if (rdm4.value == "") {
            rdm4.value = d;
            rdm4Dis.value = true;
        }
    }

    rdmModal.value = false;
}

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 = () => {
    rlsId.value = null
    rlsiId.value = null
    rlsLv.value = null
    rlsAlv.value = null
    rlsExp.value = null;
    rlsAttr.value = null;
    rlsAttrV.value = null;
    rdm1.value = null;
    rdm2.value = null;
    rdm3.value = null;
    rdm4.value = null;
    rdm1Dis.value = false;
    rdm2Dis.value = false;
    rdm3Dis.value = false;
    rdm4Dis.value = false;
    showModal.value = false;
    dialogTitle.value = "添加遗物";
}

const closeRdmModal = () => {
    rdmTyp.value = null
    rdmVal.value = null
    rdmsTs.value = null
    rdmModal.value = false;
}

const addrls = () => {
    editAddFlag.value = true;
    dialogTitle.value = "添加遗物";
    addDisabled.value = true;
    showModal.value = true;
    rlsName.value = null;
    rlsPid.value = 0;
    rlsStar.value = null;
    rsi.value = null;
    rlsLv.value = 0;
    rlsqua.value = null;
    rlsTyp.value = null;
    rlsCount.value = 1;
    attrOptions.splice(0, attrOptions.length);
    rdmOptions.splice(0, rdmOptions.length);
}

// 修改图纸
const editrls = (row: any) => {
    dialogTitle.value = "修改遗物";
    showModal.value = true;
    editAddFlag.value = false;

    rlsId.value = row.id;
    rlsiId.value = row.iId;
    rlsLv.value = row.lv;
    rlsOwn.value = row.onr;
    rlsqua.value = row.qua;
    rlsStar.value = row.sar;
    rlsAttr.value = parseInt(row.rat);
    rlsAttrV.value = row.ratValue;
    rsi.value = row.rsi;
    rlsPid.value = row.pId;
    rlsExp.value = row.exp;
    rlsTyp.value = row.etp;
    existRdm.splice(0, existRdm.length);

    for (let index = 0; index < row.rdm.length; index++) {
        const element = row.rdm[index];
        switch (index) {
            case 0:
                rdm1Dis.value = true;
                rdm1.value = element.typ + ":" + element.val + ":" + element.sTs
                break;
            case 1:
                rdm2Dis.value = true;
                rdm2.value = element.typ + ":" + element.val + ":" + element.sTs
                break;
            case 2:
                rdm3Dis.value = true;
                rdm3.value = element.typ + ":" + element.val + ":" + element.sTs
                break;
            case 3:
                rdm4Dis.value = true;
                rdm4.value = element.typ + ":" + element.val + ":" + element.sTs
                break;
            default:
                break;
        }
        existRdm.push(element.typ);
    }

    let data = {
        partType: row.etp,
        srvId:props.ruleForm.gId
    }

    playerApi.getPart(data).then((resp) => {
        let data = resp.data.result;
        let jsonData = JSON.parse(data);
        for (let index = 0; index < jsonData.attr.length; index++) {
            let key = jsonData.attr[index];
            let option = {
                'label': attrJson[key],
                'value': key
            };
            attrOptions.push(option);
        }

        for (let index = 0; index < jsonData.rdm.length; index++) {
            let key = jsonData.rdm[index];

            let option = {
                'label': attrJson[key],
                'value': key
            };
            rdmOptions.push(option);
        }
    });

}

// 保存
const saverls = () => {
    let flag = editAddFlag.value;
    console.log(rlsAttr.value);

    if (flag) {
        if (rlsAttr.value == undefined) {
            ElMessage({
                message: "请选择主属性",
                type: 'error',
                duration: 3000
            });
        } else {
            let data = {
                playerId: props.ruleForm.id,
                pbId: rlsPid.value,
                itemId: rlsiId.value,
                attrType: rlsAttr.value,
                attrVal: rlsAttrV.value,
                lv: rlsLv.value,
                exp: rlsExp.value,
                heroId: rlsOwn.value,
                rdm1: rdm1.value,
                rdm2: rdm2.value,
                rdm3: rdm3.value,
                rdm4: rdm4.value,
                relicNum: rlsCount.value,
                srvId:props.ruleForm.gId
            }

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

                if (data === '添加失败') {
                    ElMessage({
                        message: "添加失败",
                        type: 'error',
                        duration: 3000
                    });
                } else {
                    let jsonArray = JSON.parse(data);
                    props.callback1(jsonArray);
                }
            });

        }
    } else {
        let data = {
            relicId: rlsId.value,
            playerId: props.ruleForm.id,
            pbId: rlsPid.value,
            attrType: rlsAttr.value,
            attrVal: rlsAttrV.value,
            lv: rlsLv.value,
            exp: rlsExp.value,
            heroId: rlsOwn.value,
            rdm1: rdm1.value,
            rdm2: rdm2.value,
            rdm3: rdm3.value,
            rdm4: rdm4.value,
            srvId:props.ruleForm.gId
        }

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

            if (data === '修改失败') {
                ElMessage({
                    message: "修改失败",
                    type: 'error',
                    duration: 3000
                });
            } else {
                let jsonArray = JSON.parse(data);
                props.callback1(jsonArray);
            }
        });
    }


    showModal.value = false;
}

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

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

            if (resp.data.result === '删除成功') {
                ElMessage({
                    message: "删除成功",
                    type: 'success',
                    duration: 3000
                });
                let index = props.rls.indexOf(row);
                props.rls.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>
.hidden {
    display: none;
}

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

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

.label-left {
    text-align: left;
}

.label-left .el-input {
    margin-right: 10px;
    /* 调整输入框的右边距 */
}
</style>