【无标题】

一、configCard

<template>
    <div>
        <el-card class="boxCard">
            <div class="form-body">
                <div class="form-left">
                    <span prop="name" label="Name" align="center" class="name">{{ bigName }}</span><br><br>
                    <span prop="description" label="Description" align="center" class="description">{{ littleName }}</span>
                </div>
                <div class="form-right">
                    <el-button icon="el-icon-edit-outline" @click="edit(bigName)">&nbsp;{{ $t('message.edit') }}</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    props: ['bigName', 'littleName'],
    methods: {
        //点击进入编辑路由界面
        edit(flag) {
            console.log('****', flag);
            if (flag == '全局') {
                this.$router.replace({ path: '/main/configGlobal' })
            }
            else if (flag == 'Global') {
                this.$router.replace({ path: '/main/configGlobal' })
            }
            else if (flag == '集群') {
                this.$router.replace({ path: '/main/configCluster' })
            }
            else if (flag == 'Cluster') {
                this.$router.replace({ path: '/main/configCluster' })
            }
            else if (flag == '注册服务') {
                this.$router.replace({ path: '/main/configAuth' })
            }
            else if (flag == 'Registration service') {
                this.$router.replace({ path: '/main/configAuth' })
            }
            else if (flag == '警报') {
                this.$router.replace({ path: '/main/configAlerts' })
            }
            else if (flag == 'alarm') {
                this.$router.replace({ path: '/main/configAlerts' })
            }
            else if (flag == '政策监察') {
                this.$router.replace({ path: '/main/configRootcheck' })
            }
            else if (flag == 'Policy supervision') {
                this.$router.replace({ path: '/main/configRootcheck' })
            }
            else if (flag == 'CIS-CAT') {
                this.$router.replace({ path: '/main/cis-cat' })
            }
            else if (flag == 'Osquery') {
                this.$router.replace({ path: '/main/configOsquery' })
            }
            else if (flag == 'Syscollector') {
                this.$router.replace({ path: '/main/configSyscollector' })
            }
            else if (flag == '命令') {
                this.$router.replace({ path: '/main/configCommand' })
            }            
            else if (flag == 'order') {
                this.$router.replace({ path: '/main/configCommand' })
            }
            else if (flag == '本地日志文件监视器') {
                this.$router.replace({ path: '/main/configLocalfile' })
            }
            else if (flag == 'Local log file monitor') {
                this.$router.replace({ path: '/main/configLocalfile' })
            }
            else if (flag == '本地系统日志') {
                this.$router.replace({ path: '/main/configLocalfile2' })
            }
            else if (flag == 'Local system log') {
                this.$router.replace({ path: '/main/configLocalfile2' })
            }
            else if (flag == '日志') {
                this.$router.replace({ path: '/main/configLogging' })
            }
            else if (flag == 'journal') {
                this.$router.replace({ path: '/main/configLogging' })
            }
            else if (flag == '远程') {
                this.$router.replace({ path: '/main/configRemote' })
            }
            else if (flag == 'remote') {
                this.$router.replace({ path: '/main/configRemote' })
            }
            else if (flag == '漏洞扫描') {
                this.$router.replace({ path: '/main/configSca' })
            }
            else if (flag == 'Vulnerability scanning') {
                this.$router.replace({ path: '/main/configSca' })
            }
            else if (flag == '漏洞检测') {
                this.$router.replace({ path: '/main/configVd' })
            }
            else if (flag == 'Vulnerability detection') {
                this.$router.replace({ path: '/main/configVd' })
            }
            else if (flag == '规则集') {
                this.$router.replace({ path: '/main/configRuleset' })
            }
            else if (flag == 'Rule set') {
                this.$router.replace({ path: '/main/configRuleset' })
            }
            else if (flag == '规则测试') {
                this.$router.replace({ path: '/main/configRuleTest' })
            }
            else if (flag == 'Rule test') {
                this.$router.replace({ path: '/main/configRuleTest' })
            }
            else if (flag == '完整性检查') {
                this.$router.replace({ path: '/main/configSyscheck' })
            }
            else if (flag == 'Integrity check') {
                this.$router.replace({ path: '/main/configSyscheck' })
            }
            else if (flag == '地址组') {
                this.$router.replace({ path: '/main/configAddressGroups' })
            }
            else if (flag == 'AddressGroups') {
                this.$router.replace({ path: '/main/configAddressGroups' })
            }
            else if (flag == 'PortGroups') {
                this.$router.replace({ path: '/main/configPortGroups' })
            }
            else if (flag == '端口组') {
                this.$router.replace({ path: '/main/configPortGroups' })
            }
        }
    }
}
</script>

<style lang="scss">
.boxCard {
    margin: 1vh 1vw;
    justify-content: space-between;
    box-sizing: border-box;
    display: block;

    .form-body {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: rgba(255, 255, 255, 1);
        width: 21.5vw;

        .form-left {
            height: 61px;
            margin: 1vh 0vw;
            width: 15vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .name {
                font-size: 16px;
                font-weight: bold;
                width: 64px;
                height: 22px;
                color: rgba(31, 30, 72, 1);
                line-height: 22px;
            }

            .description {
                width: 84px;
                height: 17px;
                color: rgba(136, 135, 153, 1);
                font-size: 12px;
                line-height: 17px;
            }
        }

        .form-right {
            margin: 1vh 1vw;

            .el-icon-edit-outline,
            .el-button {
                color: #4A61D5;
                font-size: 12px;
            }

            .el-button {
                border: 1px solid #4A61D5;
            }
        }
    }
}
</style>

二、configuration

<template>
    <div>
        <!-- 表格 -->
        <div class="form">
            <div class="title">
                <!-- 标题栏 -->
                <span class="titleName">Wazuh</span>
                <div class="ico">

                </div>
            </div>
            <!-- 卡片表格 -->
            <div class="cardList">
                <!-- 1 -->
                <div class="cardCol">
                    <configCard :bigName="$t('message.Global')" :littleName="$t('message.Full aggregation remote setting')">
                    </configCard>
                    <configCard :bigName="$t('message.Cluster')" :littleName="$t('message.Master node configuration')">
                    </configCard>
                    <configCard :bigName="$t('message.Registration service')"
                        :littleName="$t('message.Automatic agent registration service')"></configCard>
                    <configCard :bigName="$t('message.alarm')"
                        :littleName="$t('message.Settings related to alerts and their formats')"></configCard>

                    <configCard :bigName="$t('message.Policy supervision')"
                        :littleName="$t('message.Configure to ensure compliance with security policies, standards and hardening guidelines')">
                    </configCard>

                    <configCard :bigName="'CIS-CAT'"
                        :littleName="$t('message.Use CIS scanner and SCAP check for configuration evaluation')">
                    </configCard>
                    <configCard :bigName="'Osquery'"
                        :littleName="$t('message.Expose the operating system to a high-performance relational database')">
                    </configCard>
                    <configCard :bigName="'Syscollector'" :littleName="$t('message.Specify the Wodle module to configure')">
                    </configCard>
                    <configCard :bigName="$t('message.order')"
                        :littleName="$t('message.Configuration options for Command wodle')"></configCard>

                    <configCard :bigName="$t('message.Local log file monitor')"
                        :littleName="$t('message.Identify changes in the contents, permissions, ownership and attributes of files')">
                    </configCard>
                    <configCard :bigName="$t('message.journal')" :littleName="$t('message.Log record')"></configCard>


                    <configCard :bigName="$t('message.remote')" :littleName="$t('message.Remote log collector')">
                    </configCard>
                    <configCard :bigName="$t('message.Vulnerability scanning')"
                        :littleName="$t('message.System vulnerability scanning')"></configCard>
                    <configCard :bigName="$t('message.Vulnerability detection')"
                        :littleName="$t('message.System vulnerability scanning')"></configCard>
                    <configCard :bigName="$t('message.Integrity check')"
                        :littleName="$t('message.Configure system integrity check')"></configCard>
                    <configCard :bigName="$t('message.Local system log')"
                        :littleName="$t('message.Define local system log files')"></configCard>
                    <configCard :bigName="$t('message.Rule set')" :littleName="$t('message.Define rule set')"></configCard>

                    <configCard :bigName="$t('message.Rule test')"
                        :littleName="$t('message.Define rule test options to specify how the Wazuh agent tests rules')">
                    </configCard>

                </div>
                <!-- 2 -->
                <div class="card2">
                    <span class="titleName">Suricata</span>
                    <div class="cardCol">
                        <configCard :bigName="$t('message.AddressGroups')"
                            :littleName="$t('message.Define address groups')"></configCard>

                        <configCard :bigName="$t('message.PortGroups')" :littleName="$t('message.Define port groups')">
                        </configCard>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import configCard from '@/views/configuration/configCard.vue'
export default {
    data() {
        return {
            // configList: [{
            //     name: '',
            //     description: '',
            // }]
            data11: {},
            query: {
                ddd: ''
            }
        }
    },
    components: {
        configCard
    },
    methods: {
        async getEditor(arg) {
            this.query.ddd = arg
            let result = await this.$api.configuration.getEditor(this.query)
            // console.log('XML11', result);
            this.xmlCode = result;
            // 调用转换方法
            this.data11 = this.$x2js.xml2js(result);
            // console.log('aaaa', this.data11);
        }
    },
    created() {
        this.getEditor()
    }
}
</script>

<style lang="scss">
* {
    padding: 0;
    margin: 0;
}

//表格样式
.form {
    margin-top: 10vh;

    .titleName {
        margin: 2vh 1vw;
        width: 96px;
        height: 33px;
        color: rgba(31, 30, 72, 1);
        font-size: 20px;
        font-weight: 600;
        line-height: 33px;
    }

    .cardList {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cardCol {
        display: flex;
        flex-wrap: wrap;
    }

    //标题栏样式
    .title {
        display: flex;
        justify-content: space-between;

        .el-button {
            font-size: 12px;
        }

        .ico {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-button {
                margin: 0vh 1vw;
            }

            .el-icon-refresh-right,
            .el-icon-edit-outline {
                color: #4A61D5;
            }

            .el-button {
                color: #4A61D5;
                border: 1px solid #4A61D5;
            }
        }
    }
}</style>

三、configAuth

<template>
    <div>
        <el-card>
            <!-- 标头 -->
            <div class="headerTitle">
                <div class="titleText">
                    <div class="titleLeft">
                        <i class="el-icon-arrow-left" @click="goBackPath"></i>
                    </div>
                    <div class="titleRight">
                        <div class="rightTop">
                            <span class="registerSev">{{ $t('message.Registration service') }}</span>&nbsp;&nbsp;&nbsp;
                            <span class="enabled">{{ $t('message.enbled') }}</span><br>
                            <span class="autoRegister">{{ $t('message.Automatic agent registration service') }}</span>
                        </div>
                        <div class="rightBottom">
                        </div>
                    </div>
                </div>

                <div class="icoa">
                </div>
            </div>

            <!-- 表单模式 -->
            <div class="formList" v-if="activeName == 'form'">
                <!-- 主要设置部分 -->
                <div class="mainSettings">
                    <div class="mainSet">
                    </div>
                    <div class="iconRight">
                        <el-button type="primary" @click="save(1)">保存</el-button>
                        <button><i class="el-icon-edit-outline"></i>{{ $t('message.Form mode') }}</button>
                        <button @click="goJson"><i class="el-icon-c-scale-to-original"></i>JSON</button>
                        <button @click="goExpert"><i class="el-icon-s-custom"></i>{{ $t('message.Expert mode') }}</button>
                    </div>
                </div>

                <!-- 表单 -->
                <el-form>
                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Enable or disable authentication and encryption options')
                        }}</span>
                        <el-input v-model="status1"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.The port number on which the Wazuh agent will listen')
                        }}</span>
                        <el-input v-model="status2"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">
                            {{ $t('message.Enable or disable IP address verification to ensure the legitimacy') }}
                        </span>
                        <el-input v-model="status3"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Timeout for disconnecting idle connection (in seconds)')
                        }}</span>
                        <el-input v-model="status4"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Enable or disable password authentication') }}</span>
                        <el-input v-model="status5"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.List of allowed encryption algorithms') }}</span>
                        <el-input v-model="status6"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Enable or disable SSL hostname verification') }}</span>
                        <el-input v-model="status7"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.SSL certificate path of management server') }}</span>
                        <el-input v-model="status8"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.SSL private key path of management server') }}</span>
                        <el-input v-model="status9"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <span class="formListItem">{{ $t('message.Enable or disable auto-negotiation of SSL/TLS version')
                        }}</span>
                        <el-input v-model="status10"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <!-- JSON模式 -->
            <div class="jsonModel" v-if="activeName == 'json'">
                <!-- XML查看器部分 -->
                <div class="mainSettings">
                    <div class="mainSet">
                    </div>
                    <div class="iconRight">
                        <el-button type="primary" @click="save(2)">保存</el-button>
                        <button @click="goForm"><i class="el-icon-edit-outline"></i>{{ $t('message.Form mode') }}</button>
                        <button><i class="el-icon-c-scale-to-original"></i>JSON</button>
                        <button @click="goExpert"><i class="el-icon-s-custom"></i>{{ $t('message.Expert mode') }}</button>
                    </div>
                </div>

                <!-- 模式框 -->
                <div class="models">
                    <!-- 引用插件 -->
                    <VueDataEditor @input="jsonCodeChange" :value="jsonCode" :disable="false"></VueDataEditor>
                </div>
            </div>

            <!-- 专家模式 -->
            <div class="expertModel" v-if="activeName == 'expert'">
                <!-- XML查看器部分 -->
                <div class="mainSettings">
                    <div class="mainSet">
                    </div>
                    <div class="iconRight">
                        <el-button type="primary" @click="save(3)">保存</el-button>
                        <button @click="goForm"><i class="el-icon-edit-outline"></i>{{ $t('message.Form mode') }}</button>
                        <button @click="goJson"><i class="el-icon-c-scale-to-original"></i>JSON</button>
                        <button><i class="el-icon-s-custom"></i>{{ $t('message.Expert mode') }}</button>
                    </div>
                </div>

                <!-- 模式框 -->
                <div class="models">
                    <!-- 引用插件 -->
                    <VueDataEditor @input="xmlCodeChange" :value="xmlCode" :disable="false"></VueDataEditor>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>

import axios from 'axios'
import VueDataEditor from '@/views/configuration/editor'
export default {
    data() {
        return {
            data11: {},
            //表格传入数据
            status1: '',
            status2: '',
            status3: '',
            status4: '',
            status5: '',
            status6: '',
            status7: '',
            status8: '',
            status9: '',
            status10: '',

            query: {
                ddd: ''
            },
            expert: [],
            xmlCode: '',
            disable: false,
            // 双向绑定的值
            jsonCode: '',
            activeName: "form",
            jsonA: ''

        }
    },
    components: {
        VueDataEditor
    },
    methods: {
        async save(val) {
            switch (val) {
                case 1: {
                    // const result = await this.$api.configuration.updateXMLWazuh(this.initJsonData)
                    // console.log(result);
                    // break;
                }
                case 2: {
                    // const result = await this.$api.configuration.updateXMLWazuh(this.jsonCode)
                    // break;
                }
                case 3: {
                    console.log(this.xmlCode);
                    const xml = this.xmlCode
                    console.log(xml);
                    console.log(this.$x2js);
                    console.log(this.$x2js.xml2dom(xml));
                    const a = this.$x2js.xml2js(xml)
                    console.log(a);
                    this.initJsonData.auth = a
                    this.b.ossec_config = this.initJsonData
                    console.log(this.b);
                    // const result = await this.$api.configuration.updateXMLWazuh(this.b)
                    // console.log(result);
                    if (result.code == 200) {
                        this.$message.success(this.$t('message.modify successfully'))
                    }
                    break;
                }
            }
        },
        //箭头跳转
        goBackPath() {
            this.$router.replace({ path: '/main/configuration' })
        },
        //点击到表单页面
        goForm() {
            this.activeName = "form"
        },
        //点击到Json页面
        goJson() {
            this.activeName = "json"
        },
        //点击到专家页面
        goExpert() {
            this.activeName = "expert"
        },
        // 子组件传递过来的最新值的方法
        jsonCodeChange(event) {
            this.jsonCode = event;
        },
        xmlCodeChange(event) {
            this.xmlCode = event;
        },

        async getEditor(arg) {
            this.query.ddd = arg
            let result = await this.$api.configuration.getEditor(this.query)
            console.log('alalal', result);
            // this.initData = result
            // this.xmlCode = result;
            // // 调用转换方法
            // //转为 json
            this.initJsonData = result.data.affected_items[0]
            // console.log('editorJson', this.data11);


            // //截取后的json数据
            let jsonA = this.initJsonData.auth
            // console.log('AAA', jsonA);

            // this.jsonCode = JSON.stringify(jsonA)
            // console.log('json111', this.jsonCode);

            // //截取后的xml数据
            // let xmlaa = jsonA;
            // console.log('BBB', xmlaa);

            let A222 = this.$x2js.js2xml(jsonA)
            this.xmlCode = A222
            // console.log('xml111', A222);
        }
    },
    created() {
        this.getEditor()
    }
}
</script>

<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

//按钮
button {
    background-color: #fff;
    border-radius: 5%;
    color: #4A61D5;
    border: 1px solid #4A61D5;
    margin: 0vh 1vw;
    padding: 2vh 1.5vw;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}

//头部标题
.headerTitle {
    display: flex;
    justify-content: space-between;
    margin: 1vh 0vw;

    .titleText {
        display: flex;
        justify-content: space-between;

        .titleLeft {
            .el-icon-arrow-left {
                color: #5D75FA;
                font-size: 60px;
                cursor: pointer;
            }
        }

        .titleRight {
            .registerSev {
                color: rgba(77, 94, 128, 1);
                font-size: 16px;
                font-weight: 500;
                line-height: 32px;
            }

            .enabled {
                background-color: #FDEEED;
                padding: 0.5vh 1vw;
                border-radius: 50%;
            }

            .autoRegister {
                color: rgba(136, 135, 153, 1);
                font-size: 16px;
                line-height: 28px;
                margin-top: 8px;
                padding: 0.5vh 0vw;
            }
        }
    }
}

// 主要设置部分
.mainSettings {
    display: flex;
    justify-content: space-between;
    margin: 3vh 1vw;

    .mainSet {
        .mainSets {
            width: 96px;
            height: 32px;
            overflow-wrap: break-word;
            color: rgba(77, 94, 128, 1);
            font-size: 16px;
            font-weight: 500;
            line-height: 32px;
        }

        .registerConfig {
            width: 240px;
            height: 28px;
            color: rgba(136, 135, 153, 1);
            font-size: 16px;
            line-height: 28px;
            padding: 0.5vh 0vw;
        }
    }

    .iconRight {
        display: flex;
        justify-content: space-between;
        align-items: center;


        .el-icon-refresh-right,
        .el-icon-edit-outline,
        .el-icon-question {
            color: #4A61D5;
        }


    }
}

// 表格部分
.formList {
    margin: 1vh 1vw;

    .formListItem {
        width: 96px;
        height: 32px;
        color: rgba(77, 94, 128, 1);
        font-size: 16px;
        font-weight: 500;
        line-height: 32px;
    }

    .el-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .el-form-item {
        margin-bottom: 10px;
        width: 40vw;
    }
}

.ico {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icoa {

    .el-icon-refresh-right,
    .el-icon-edit-outline {
        color: #4A61D5;
    }
}

//模式框
.models {
    width: 92%;
    height: 40%;
    margin: 3vh 3vw;

    .buttonBottom {
        text-align: center;
        padding-bottom: 5vh;
    }
}
</style>

四、分页

<template>
    <div class="list-container">
        <!-- 表头搜索 -->
        <div style="border-bottom: 1px solid #dcdee2;margin-bottom: 20px;">
            <div style="width: 600px;display: flex;padding: 20px;">
                <p style="width:140px;line-height: 40px;">用户搜索 ：</p>
                <el-input v-model="inputValue" placeholder="请输入用户" clearable @clear="clear">
                    <template #append>
                        <el-select style="width: 110px;" v-model="optionsValue" class="m-2" placeholder="请选择" size="large">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </template>
                </el-input>
                <div style="display: flex;margin-left: 20px;">
                    <el-button @click="searchUser(inputValue, optionsValue)" type="primary" size="large">搜索</el-button>
                    <el-button @click="reset" size="large">重置</el-button>
                </div>
            </div>
        </div>

        <div style="margin-bottom: 20px;margin-left: 20px;">
            <el-button type="primary" @click="addUser" size="large">添加用户</el-button>
            <el-button @click="sendCoupon" size="large">发送优惠券</el-button>
            <el-button @click="setGroup" size="large">批量设置分组</el-button>
            <el-button @click="setLabel" size="large">批量设置标签</el-button>
            <el-button @click="exportExcel" size="large" :icon="Upload">导出</el-button>
        </div>

        <!-- 表格主体 -->
        <div>
            <el-table v-loading="loading" :data="tableData" @selection-change="getCheckboxInfo" style="width: 100%;" ref="table">
                <!-- 展开行 -->
                <el-table-column type="expand">
                    <template #default="props">
                        <!-- {{ props.row }} -->
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="首次访问：">
                                <span>{{ new Date(props.row.add_time).toLocaleString() }}</span>
                            </el-form-item>
                            <el-form-item label="近次访问：">
                                <span>{{ new Date(props.row.last_time).toLocaleString() }}</span>
                            </el-form-item>
                            <el-form-item label="身份证号：">
                                <span></span>
                            </el-form-item>
                            <el-form-item label="真实姓名：">
                                <span>{{ props.row.real_name }}</span>
                            </el-form-item>
                            <el-form-item label="标签：">
                                <span>{{ props.row.labels }}</span>
                            </el-form-item>
                            <el-form-item label="生日：">
                                <span>{{ props.row.birthday }}</span>
                            </el-form-item>
                            <el-form-item label="推荐人：">
                                <span>{{ props.row.spread_uid_nickname }}</span>
                            </el-form-item>
                            <el-form-item label="地址：">
                                <span>{{ props.row.address }}</span>
                            </el-form-item>
                            <el-form-item label="备注：">
                                <span></span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column type="selection" @selection-change="getCheckboxInfo" width="55" />
                <el-table-column prop="uid" label="用户ID"></el-table-column>
                <el-table-column v-slot="scope" label="头像">
                    <el-image :src="scope.row.avatar" style="width: 50px;" />
                </el-table-column>
                <el-table-column prop="nickname" label="姓名"></el-table-column>
                <el-table-column prop="vip_name" label="付费会员">
                    <template #default="props">
                        {{ props.row.vip_name === false ? '否' : '是' }}
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="用户等级"></el-table-column>
                <el-table-column prop="group_id" label="分组"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="user_type" label="用户类型"></el-table-column>
                <el-table-column prop="edit" label="操作" fixed="right" width="200">
                    <template v-slot="scope">
                        <div>
                            <el-button type="text" @click="xiangqing(scope.row)">详情</el-button>
                            <!-- 移入 -->
                            <el-popover placement="bottom" :width="100" trigger="hover"
                                v-model:popoverVisible="popoverVisible">
                                <el-menu style="width: 150px;margin-left: -10px;">
                                    <el-menu-item style="height:40px">积分余额</el-menu-item>
                                    <el-menu-item style="height:40px">赠送会员</el-menu-item>
                                    <el-menu-item style="height:40px">设置分组</el-menu-item>
                                    <el-menu-item style="height:40px">设置标签</el-menu-item>
                                    <el-menu-item style="height:40px">修改上级推广人</el-menu-item>
                                </el-menu>
                                <template #reference>
                                    <el-button type="text">更多</el-button>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 点击详情右侧弹出的抽屉 -->
            <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="1100">
                <div style="border-bottom: 1px solid #e8eaec;padding-bottom: 20px;">
                    <h3>用户详情</h3>
                </div>
                <div class="drawer-container" style="display: flex;">
                    <div style="padding: 20px;">
                        <el-image :src="DetailInfo.avatar" style="border-radius: 50%;width: 80px;" />
                    </div>
                    <div style="display: flex;margin-top:50px;justify-content: space-evenly;width: 400px;">
                        <div>
                            用户名：{{ DetailInfo.nickname }}
                        </div>
                        <div>
                            余额：{{ DetailInfo.now_money }}
                        </div>
                        <div>
                            总消费金额：{{ DetailInfo.pay_count }}
                        </div>
                    </div>
                    <el-button v-show="!editflag" @click="edit(DetailInfo)" type="primary" size="large"
                        style="margin-left: 420px;margin-top: 30px;">编辑</el-button>
                    <div style="margin-left: 370px;margin-top: 30px;" v-show="editflag">
                        <el-button size="large" @click="editflag = false">取消</el-button>
                        <el-button type="primary" size="large" @click="saveInfo(DetailInfo)">保存</el-button>
                    </div>

                </div>
                <div>
                    <!-- 可以左右切换的标签页 -->
                    <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick1">
                        <el-tab-pane label="用户信息" name="one">
                            <div class="demo-tabs-item"
                                style="display: flex; justify-content: space-between;padding: 40px;flex-wrap: wrap;">
                                <div v-show="!editflag">用户编号：{{ DetailInfo.uid }}</div>
                                <div v-show="editflag">
                                    用户编号：<el-input disabled v-model="DetailInfo.uid" style="width: 200px;"></el-input>
                                </div>
                                <div v-show="!editflag">真实姓名：{{ DetailInfo.real_name === '' ? '-' : DetailInfo.real_name }}
                                </div>
                                <div v-show="editflag">
                                    真实姓名：<el-input v-model="DetailInfo.real_name" style="width: 200px;"></el-input>
                                </div>
                                <div v-show="!editflag">手机号码：{{ DetailInfo.phone }}</div>
                                <div v-show="editflag">
                                    手机号码：<el-input v-model="DetailInfo.phone" style="width: 200px;"></el-input>
                                </div>
                                <div v-show="!editflag">生日：{{ new Date(DetailInfo.add_time).toLocaleString() }}</div>
                                <div v-show="editflag">
                                    生日： <el-date-picker style="width: 200px;" v-model="DetailInfo.add_time" type="date"
                                        placeholder="请选择日期" :size="size" />
                                </div>
                                <div v-show="!editflag">性别：{{ DetailInfo.sex }}</div>
                                <div v-show="editflag">
                                    性别：
                                    <el-radio-group v-model="DetailInfo.sex">
                                        <el-radio label="男" value="1" />
                                        <el-radio label="女" value="2" />
                                        <el-radio label="保密" value="0" />
                                    </el-radio-group>
                                </div>
                                <div v-show="!editflag">地址：{{ DetailInfo.addres === '' ? '-' : DetailInfo.addres }}</div>
                                <div v-show="editflag">
                                    地址：<el-input style="width: 200px;" v-model="DetailInfo.addres"></el-input>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="消费记录" name="two">消费记录</el-tab-pane>
                        <el-tab-pane label="积分明细" name="three">积分明细</el-tab-pane>
                        <el-tab-pane label="签到记录" name="four">签到记录</el-tab-pane>
                        <el-tab-pane label="持有优惠券" name="five">持有优惠券</el-tab-pane>
                        <el-tab-pane label="余额变动" name="six">余额变动</el-tab-pane>
                        <el-tab-pane label="好友关系" name="seven">好友关系</el-tab-pane>
                    </el-tabs>
                </div>
            </el-drawer>
            <!-- 点击增加弹出的抽屉 -->
            <el-drawer v-model="drawer1" title="I am the title" :with-header="false" :size="750">
                <div style="border-bottom: 1px solid #e8eaec;padding-bottom: 10px;">
                    <h3>用户信息填写</h3>
                </div>
                <div style="margin-top: 20px;">
                    <el-form :rules="rules">
                        <el-form-item label="真实姓名：" prop="name">
                            <el-input placeholder="请输入真实姓名" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="手机号码：" prop="phone">
                            <el-input placeholder="请输入真实姓名" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="生日：">
                            <el-date-picker placeholder="请选择生日" />
                        </el-form-item>
                        <el-form-item label="身份证号：">
                            <el-input placeholder="请输入身份证号" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="用户地址：">
                            <el-input placeholder="请输入用户地址" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="用户备注：">
                            <el-input placeholder="请输入用户备注" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="登录密码：" prop="password">
                            <el-input placeholder="请输入登录密码（修改用户可不填写，不填写不修改原始密码）" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="确认密码：" prop="surePassword">
                            <el-input placeholder="请输入确认密码（修改用户可不填写，不填写不修改原始密码）" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="用户等级：">
                            <el-select v-model="value" placeholder="请选择" size="large">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户分组：">
                            <el-select v-model="value" placeholder="请选择" size="large">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户标签：">
                            <el-input placeholder="请选择用户关联标签" style="width: 450px;" />
                        </el-form-item>
                        <el-form-item label="推广资格：">
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio label="1" size="large">启用</el-radio>
                                <el-radio label="2" size="large">禁用</el-radio>
                            </el-radio-group>

                        </el-form-item>
                        <div style="padding-bottom: 20px;text-indent:6em;color:#bbbbbb;">指定分销模式下，开启或关闭用户的推广权限</div>
                        <el-form-item label="推广权限：">
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio label="1" size="large">开启</el-radio>
                                <el-radio label="2" size="large">锁定</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div style="padding-bottom: 20px;text-indent:6em;color:#bbbbbb;">指定分销模式下，开启或关闭用户的推广权限</div>
                        <el-form-item label="用户状态：">
                            <el-radio-group v-model="radio1" class="ml-4">
                                <el-radio label="1" size="large">开启</el-radio>
                                <el-radio label="2" size="large">锁定</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
                <div style="float: right;border-top: 1px solid #e8e8e8;padding-top: 20px;">
                    <el-button>取消</el-button>
                    <el-button type="primary">提交</el-button>
                </div>
            </el-drawer>
            <div>
                <!-- 分页 -->
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" background
                    layout="total, prev, pager, next, jumper" :total="count" style="padding: 20px;margin-left: 50%;" />
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, ref, reactive } from 'vue';
import api from '@/api';
import { ElMessage } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'

import XLSX from 'xlsx'
import { saveAs } from 'file-saver'
// ---------------------------- 初始化数据 ----------------------------

// exportExcel() =>{  
//     // 构造数据  
//     const data = [    
//         ['姓名', '年龄', '性别'],    
//         ['张三', 18, '男'],    
//         ['李四', 20, '女'],    
//         ['王五', 22, '男'],  
//     ]  
//     // 创建 Workbook 对象  
//     const workbook = XLSX.utils.book_new()  
//     // 创建 Worksheet 对象  
//     const worksheet = XLSX.utils.aoa_to_sheet(data)  
//     // 将 Worksheet 添加到 Workbook 中  
//     XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')  
//     // 将 Workbook 转换成二进制数据流  
//     const binaryData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })  
//     // 将二进制数据流保存为文件  
//     saveAs(new Blob([binaryData], { type: 'application/octet-stream' }), 'data.xlsx')
// }
const loading = ref(true)   
let tableData = ref()
let count = ref()
let currentPage = ref(1)
const pageSize = ref(1)
const drawer = ref(false)
const drawer1 = ref(false)
const activeName1 = ref('one')
const optionsValue = ref('')
const inputValue = ref('')
const options = [
    {
        value: '',
        label: '全部',
    },
    {
        value: 'uid',
        label: 'UID',
    },
    {
        value: 'phone',
        label: '手机号',
    },
    {
        value: 'nickname',
        label: '用户昵称',
    }
]
const DetailInfo = ref()
let editflag = ref(false)

// 接收父组件传过来的数据
let props = defineProps({
    flag: String,
})
// 添加用户的表单验证
let rules = reactive({
    name: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { min: 3, max: 5, message: '长度必须是3-5位', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 18, message: '长度必须是6-18位', trigger: 'blur' },
    ]
})

// ---------------------------- 函数逻辑部分 --------------------------
async function getUserList(arg) {
    let res = await api.user.getUserList(arg)
    // console.log(res.data.data);
    if(res.data.data.list){
        loading.value = false
    }
    // 总条数
    count.value = res.data.data.count;
    tableData.value = res.data.data.list
}
// 编辑接口
async function editUserInfo(uid, data) {
    let res = await api.user.editUserInfo(uid, data)
    console.log(res);
    if (res.data.status === 200) {
        editflag.value = !editflag.value
        ElMessage({
            message: '修改成功',
            type: 'success',
        })
    }
    else if (res.data.status === 400) {
        ElMessage({
            message: '请填写您的姓名和电话',
            type: 'error',
        })
    } else {
        ElMessage({
            message: '修改失败，请检查网络或重新尝试',
            type: 'error',
        })
    }
}

// 搜索
function searchUser(arg1, arg2) {
    console.log(arg1, arg2);
    console.log({ field_key: arg2, nickname: arg1 });

    getUserList({ page: pageSize, limit: 15, field_key: arg2, nickname: arg1 })
}
// 重置
function reset() {
    optionsValue.value = ''
    inputValue.value = ''
    getUserList({ page: pageSize, limit: 15 })
}

// 添加用户
function addUser() {
    drawer1.value = true
    
}

// 点击某一行的多选框触发
function getCheckboxInfo(val) {
    // 获取选中的复选框个数
    // console.log(val.length);

    // 获取这一行的数据
    // console.log(val[0].uid);
}

// 点击详情
function xiangqing(arg: any) {
    console.log(arg);
    drawer.value = true
    DetailInfo.value = arg
}
// 点击查看更多
function more(arg) {

}
// 分页部分
const handleSizeChange = (pageSize: number) => {
    //   console.log(`${pageSize} items per page`)
}
const handleCurrentChange = (currentPage: number) => {
    //   console.log(`current page: ${currentPage}`)
    getUserList({ page: currentPage, limit: 15 })
}

// 编辑
function edit(arg) {
    // console.log(arg);
    editflag.value = !editflag.value
}
// 点击保存触发
function saveInfo(data) {
    console.log(data);
    // 将日历选择的格式转化为时间戳
    data.add_time = new Date(data.add_time).valueOf()
    // console.log(new Date(data.add_time).valueOf());
    editUserInfo(data.uid, data)
}

onMounted(() => {
    getUserList({ user_type: props.flag, page: pageSize, limit: 15 })
})
</script>

<style lang='scss' scoped>
.list-container {
    background-color: white;
}

.demo-table-expand {
    padding: 0;
    font-size: 0;
    margin-left: 50px;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.demo-tabs-item div {
    margin-bottom: 20px;
}
</style>