<template>
    <div id="dfzy_nw_rwk_search">
        <el-table ref="multipleTables" class="table-div" :data="data_list" tooltip-effect="dark" :header-cell-style="{color:'#ffffffc7',fontSize:'14px',background:'#263b5d'}" :row-style="{color:'#ffffffc7',fontSize:'14px',background:'#1d2d46'}">
            <el-table-column label="姓名" align="center">
                <template slot-scope="scope">
                    <span @click="showInfo(scope.row)">{{ scope.row.baseProperty['姓名']}}</span>
                </template>
            </el-table-column>
            <el-table-column label="外文名" align="center">
                <template slot-scope="scope">
                    <span @click="showInfo(scope.row)">{{ scope.row.baseProperty['外文名']}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-div">
            <el-pagination class="myPagination" background :pager-count="5" layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage" @size-change="handleSizeChange" :page-size="everySize" :total="total" :page-sizes="[10,20,50,100]" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { get, post, startLoading, endLoading } from '../../../util/http_util';
import { imgUrl } from "../../../api/publicUrl";
export default {
    components: { },
    data() {
        return {
            currentPage: 1,
            everySize: 10,
            total: 0,
            multipleSelection:[],
            data_list:[],
            input:"",
        };
    },
    props: {
        clientDetails: {
            type: Object,
            default: {},
        },
    },
    methods: {
        showInfo(item){
            this.$router.push({ name: "人物详情" + this.$route.meta.type_name, params: { key: item ,types:true } });
        },
        //查询
        search(pageNum){
            this.data_list = [];
            if(this.input==''){
                this.total = 0;
                return
            }
            get(
                "api/rest/resource/queryResourceTree?module="+'敌方资源机构'
            ).then((res) => {
                let options_s_online = [];
                if (res.length > 0) {
                options_s_online = this.jsonToArray(res);
                } else {
                options_s_online = [];
                }
                post(
                `api/rest/resource/queryDynamicCharacter?pageNum=${pageNum}&pageSize=${this.everySize}&multiFieldSearch=${this.input}`,
                {
                    mould: '敌方资源',
                    "baseProperty.所在机构": "",
                }
                )
                .then((res) => {
                    this.data_list = res.list;
                    this.data_list.forEach((item) => {
                    item.photos =
                        imgUrl +
                        item.baseProperty["photos"];
                    item.label =
                        item.extraProperty["标签"] == undefined
                        ? ""
                        : item.extraProperty["标签"].split("|");
                    if (item.baseProperty["所在机构"] != "") {
                        this.value_szjg = item.baseProperty["所在机构"];
                        let jg_names = options_s_online.find(
                        (e) => e.code == item.baseProperty["所在机构"]
                        );
                        item.baseProperty["所在机构"] =
                        jg_names == undefined || jg_names == "" || jg_names == null
                            ? item.baseProperty["所在机构"]
                            : jg_names.label;
                        item.baseProperty["所在机构编号"] = this.value_szjg;
                    }
                    });
                    this.total = res.totals;
                })
                .catch((err) => {
                    this.$message.warning(err.message);
                });
            });
        },
        //分页
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum;
            this.search(pageNum);
        },
        //分页的pageSize改变事件
        handleSizeChange(val) {
            this.everySize = val;
            this.currentPage = 1;
            this.search(1);
        },
        jsonToArray(nodes) {
            var r = [];
            if (Array.isArray(nodes)) {
                for (var i = 0, l = nodes.length; i < l; i++) {
                r.push(nodes[i]); // 取每项数据放入一个新数组
                if (
                    Array.isArray(nodes[i]["children"]) &&
                    nodes[i]["children"].length > 0
                )
                    // 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
                    r = r.concat(this.jsonToArray(nodes[i]["children"]));
                delete nodes[i]["children"];
                }
            }
            return r;
        },
       
    },
    watch:{
        clientDetails: function (val) {
            this.input= val.input;
            this.search(1);
        }
    }
};
</script>
<style lang="scss">
#dfzy_nw_rwk_search{
    width: 100%;
    height: 100%;
    .table-div {
        width: 100%;
        height: calc(100% - 50px);
    }
    .el-table tr {
        background-color: #1d2d46 !important;
        color: #ffffffc7;
        font-size: 14px;
    }
    .el-table td {
        border-bottom: 1px solid #127a89;
        border-right: unset;
    }
    .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #82848a78;
    }
    
    .el-table .el-table__body-wrapper {
        width: 100%;
        height: calc(100% - 48px);
        overflow-y: auto;
    }
    .el-table th {
        border: unset;
        background-color: #263b5d !important;
    }
    .el-table--fit {
        background: none !important;
        border: unset;
    }
    .el-table--group::after,
    .el-table--border::after,
    .el-table::before {
        background-color: unset;
    }
    .pagination-div {
        width: 100%;
        height: 50px;
        .el-pagination {
            margin-top: 9px;
            text-align: right;
            .el-pagination__jump {
                color: white;
            }
            .el-pagination__total {
                color: white;
            }
        }
        .myPagination.is-background .el-pager li:not(.disabled).active {
            color: #fff;
            border: 1px solid #146a80;
            box-shadow: 0 0 10px #1b6097;
            background-color: #1d2d46;
        }
    }
}
</style>