<template>
    <div id="app">
        <el-button type="primary" @click="openCreateDialog">新增匹配规则</el-button>
        <el-table :data="listData" style="width: 100%">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="自定义报错信息" prop="convert_text"></el-table-column>
            <el-table-column label="原始报错信息" prop="original_text"></el-table-column>
            <el-table-column label="创建时间" prop="created_at"></el-table-column>
            <el-table-column label="修改时间" prop="updated_at"></el-table-column>
            <el-table-column label="是否开启">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" @change="updateStatus(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editText(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteText(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/编辑用户对话框 -->
        <el-dialog :visible.sync="dialogVisible" title="新增/编辑匹配规则">
            <el-form :model="currentText" ref="userForm">
                <el-form-item label="自定义报错信息" :label-width="formLabelWidth">
                    <el-input v-model="currentText.convert_text"></el-input>
                </el-form-item>
                <el-form-item label="原始报错信息" :label-width="formLabelWidth">
                    <el-input v-model="currentText.original_text"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUser">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import { Button, Table, TableColumn, Dialog, Form, FormItem, Input } from 'element-ui';
import { add, edit, list, del } from '@/api/dw'
export default {
    name: 'App',
    components: {
        'el-button': Button,
        'el-table': Table,
        'el-table-column': TableColumn,
        'el-dialog': Dialog,
        'el-form': Form,
        'el-form-item': FormItem,
        'el-input': Input
    },
    data() {
        return {
            listData: '', //列表数据
            dialogVisible: false,
            currentText: { id: null, convert_text: '', original_text: '' },
            users: [
                { id: 1, name: '张三', email: 'zhangsan@example.com' },
                { id: 2, name: '李四', email: 'lisi@example.com' },
            ],
            formLabelWidth: '80px',
        }
    },
    mounted() { },
    created() {
        var that = this

        this.getListApi();

        if (!window.WebSocket) {
            alert('该版本浏览器不支持WebSocket')
        } else {
            console.log('支持websocket')
        }


    },
    methods: {
        getListApi() {
            console.log("getList");
            list().then(response => {
                console.log('🚀 ~ getList ~ response:', response)
                this.listData = response.data
            })
                .catch((e) => {
                    this.$message({
                        message: e.message,
                        type: 'error',
                    })
                })
                .finally(() => { })
        },
        addApi(convert_text, original_text) {
            console.log("addApi");
            add({
                'convert_text': convert_text,
                'original_text': original_text,
            }).then(response => {
                console.log('🚀 ~ addApi ~ response:', response)
            })
                .catch((e) => {
                    this.$message({
                        message: e.message,
                        type: 'error',
                    })
                })
                .finally(() => { })
        },
        editApi(id, convert_text, original_text) {
            console.log("editApi");
            edit({
                'id': id,
                'convert_text': convert_text,
                'original_text': original_text
            }).then(response => {
                console.log('🚀 ~ editApi ~ response:', response)
            })
                .catch((e) => {
                    this.$message({
                        message: e.message,
                        type: 'error',
                    })
                })
                .finally(() => { })
        },
        delApi(textId) {
            del({
                id: textId
            }).then(response => {
                console.log('🚀 ~ delApi ~ response:', response)
            })
                .catch((e) => {
                    this.$message({
                        message: e.message,
                        type: 'error',
                    })
                })
                .finally(() => { })
        },
        updateStatus(item) {
            console.log(item);
            edit({
                'id': item.id,
                'status': item.status,
            }).then(response => {
                console.log('🚀 ~ editApi ~ response:', response)
            })
                .catch((e) => {
                    this.$message({
                        message: e.message,
                        type: 'error',
                    })
                })
                .finally(() => { })
        },
        openCreateDialog() {
            this.currentText = { id: null, convert_text: '', original_text: '' }; // 清空当前用户数据
            this.dialogVisible = true; // 打开对话框
        },
        editText(user) {
            this.currentText = { ...user }; // 复制用户数据
            this.dialogVisible = true; // 打开对话框
        },
        deleteText(user) {
            this.$confirm('确定删除?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log(user.id);
                this.delApi(user.id);
                this.$message.success('删除成功');
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
        saveUser() {
            if (this.currentText.id) {
                // 编辑
                const index = this.users.findIndex(u => u.id === this.currentText.id);
                this.users.splice(index, 1, this.currentText);
                this.editApi(this.currentText.id, this.currentText.convert_text, this.currentText.original_text);
                this.$message.success('编辑成功');
            } else {
                // 新增
                this.addApi(this.currentText.convert_text, this.currentText.original_text);
                const newId = this.users.length + 1;
                this.currentText.id = newId;
                this.users.push({ ...this.currentText });
                this.$message.success('新增成功');
            }
            this.dialogVisible = false; // 关闭对话框
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}

.dialog-footer {
    text-align: right;
}

.textcolorred {
    color: red;
}

.textcolorblack {
    color: black;
}

::v-deep .el-table__body-wrapper {
    height: calc(100vh - 215px);
    overflow-y: auto;
}

.abc {
    .el-form-item--mini.el-form-item {
        margin-bottom: 10px;
    }

    padding-bottom: 5px;
}

.safsac {
    .el-input__inner {
        border: 1px solid #1890ff !important;
    }
}

.asdn {
    padding: 0px 15px 15px;
    font-size: 14px;
    color: #666666;
}

.contnssddf {
    height: 500px;
    width: 96%;
    margin-left: 4%;
    background: #eef5fd;
    position: relative;

    .sds {
        display: flex;
        flex-wrap: wrap;

        .contnssddf-item {
            width: 50%;
            padding-left: 20px;
            padding-top: 12px;
            // padding:4px  16px;
            color: #999999;
            font-size: 14px;
        }
    }

    .fapiao {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 0;
        color: #18518b;
        font-size: 14px;
    }
}

.titles {
    padding-left: 10px;
}

.titles::before {
    content: '';
    display: block;
    position: absolute;
    margin-top: 4px;
    width: 5px;
    height: 15px;
    background: #4991fd;
    border-radius: 10px;
}

.toubu {
    // height: 50px;
    padding: 10px 0;
    display: flex;
    // line-height: 50px;
    color: #666666;
    font-size: 14px;
    padding-left: 20px;

    .toubuitem {
        flex: 1;
        display: flex;
        line-height: 24px;

        // justify-content: space-between;
        .topone_right {
            width: 120px;
            padding-left: 10px;
            border-bottom: 1px solid #666666;
        }
    }

    .jian {
        flex: 0;
        text-align: right;
        padding-right: 20px;
        color: #0a2cd6;
        font-weight: 600;
        font-family: Source Han Sans CN;
        font-size: 16px;
    }
}

.content-right {
    background: white;
    // padding: 10px;
    min-height: calc(100vh - 150px);
    position: relative;

    .content-right-content {
        width: 100%;
        background: #eef5fd;
        height: 610px;

        .toubu {
            // height: 50px;
            padding: 10px 0;
            display: flex;
            // line-height: 50px;
            color: #666666;
            font-size: 14px;
            padding-left: 20px;

            .toubuitem {
                flex: 1;
                display: flex;
                line-height: 24px;

                // justify-content: space-between;
                .topone_right {
                    width: 120px;
                    padding-left: 10px;
                    border-bottom: 1px solid #666666;
                }
            }

            .jian {
                flex: 0;
                text-align: right;
                padding-right: 20px;
                color: #0a2cd6;
                font-weight: 600;
                font-family: Source Han Sans CN;
                font-size: 16px;
            }
        }

        .bidu {
            display: flex;

            div {
                font-size: 14px;
                flex: 1;
                height: 50px;
                line-height: 50px;

                padding-left: 20px;

                span {
                    font-size: 14px;
                    color: #18518b;
                }
            }
        }
    }

    .ksmzjzzzbs {
        color: #666666;
        font-size: 14px;
        padding-right: 5px;
    }

    .xinxi {
        display: flex;
        // margin: 10px 0;
    }

    .btslist {
        width: 50%;
        margin-top: 5px;

        .btns {
            float: left;
            flex: 1;
            // padding: 100px;
            width: 108px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #4991fd;
            border-radius: 4px;
            color: #4991fd;
            line-height: 28px;
            font-size: 14px;
            text-align: center;
            margin: 5px 15px;
            cursor: pointer;
            // margin-right: 10px;
        }

        .btns:hover {
            background-color: #4991fd;
            color: white;
        }
    }

    .sign {
        padding: 10px 0;
    }
}

.content-left {
    background: white;
    // padding: 10px;
    min-height: calc(100vh - 150px);
    position: relative;

    .content-left-type {
        width: 480px;

        .el-radio {
            width: 120px;
            margin: 8px 0;
        }
    }

    .content-left-heji {
        position: absolute;
        // bottom: 20px;
        left: 20px;
        right: 0;
        display: flex;

        .heji {
            width: 100px;
            height: 40px;
            line-height: 38px;
            text-align: center;
            font-size: 14px;
            color: #18518b;
            background: #eef5fd;
        }

        .money {
            width: 160px;
            height: 40px;
            background: #ffffff;
            line-height: 38px;
            border: 1px solid #dddddd;
            border-radius: 2px;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #000000;
            text-align: right;
            padding-right: 10px;
        }
    }
}

.content-left-heji {
    position: absolute;
    // bottom: 20px;
    left: 20px;
    right: 0;
    display: flex;

    .heji {
        width: 100px;
        height: 40px;
        line-height: 38px;
        text-align: center;
        font-size: 14px;
        color: #18518b;
        background: #eef5fd;
    }

    .money {
        width: 160px;
        height: 40px;
        background: #ffffff;
        line-height: 38px;
        border: 1px solid #dddddd;
        border-radius: 2px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #000000;
        text-align: right;
        padding-right: 10px;
    }
}

::v-deep .el-dialog__body {
    padding: 0px 20px !important;
}

.edit-person {
    .el-form-item--medium {
        ::v-deep.el-form-item__content {
            line-height: 30px;
        }

        ::v-deep.el-input--medium .el-input__inner {
            height: 20px;
            line-height: 30px;
        }
    }
}

.selectinput {
    ::v-deep.el-input--medium .el-input__inner {
        height: 30px;
        margin-top: 5px;
        line-height: 30px;
        width: 150px;
    }
}

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

.app-container {}

::v-deep .el-card__body {
    padding: 10px;
}

::v-deep .fullbox {
    background-color: #f2f8ff;
}

::v-deep.el-dialog:not(.is-fullscreen) {
    margin-top: 2vh !important;
}

::v-deep .el-divider__text {
    font-weight: 550;
    color: #1890ff;
    font-size: 18px;
    background-color: #f2f8ff;
}

::v-deep .el-divider {
    background-color: #1890ff;
}

::v-deep .el-table__empty-block {
    // background-color: #e7f1fd !important
}

::v-deep .el-empty__description {
    display: none;
}

.userInfo_box {
    width: 99%;
    margin: 0 auto;
    background: linear-gradient(180deg, #a9c2ff 0%, #ffffff 100%);
    box-shadow: 0px 3px 4.7px 0px #004aff26;
    border-radius: 4px;

    .userInfo_div {
        margin: 0 20px 0 15px;
        padding-left: 15px;
        border-left: 2px solid #f1f1f1;
        font-size: 16px;
        color: #333333;
        font-weight: 500;

        .userInfo_div_1 {
            display: flex;
            align-items: center;

            .userInfo_name {
                font-size: 18px;
                font-weight: 700;
            }

            .userInfo_sex {
                margin: 0 25px;
            }
        }

        .userInfo_div_2 {
            margin-top: 8px;
        }
    }

    .yibaoInfo_div {
        display: flex;
        flex-direction: column;

        .yibaoInfo_div_1 {
            width: max-content;
            border-radius: 3px;
            border: 1px solid #004aff;
            padding: 3px 5px;
            font-size: 12px;
            color: #004aff;
        }

        .yibaoInfo_div_2 {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-top: 8px;
        }
    }
}

.footer_div {
    width: 100%;
    height: 56px;
    background: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 40px;

    .footer_total {
        font-size: 20px;
        font-weight: 700;
    }

    .jiesuan_btn {
        width: 80px;
        height: 32px;
        margin-left: 100px;
        font-size: 14px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #004aff;
    }
}

.form_item {
    display: flex;
    margin-right: 20px;

    .label {
        width: 170px;
        color: #333333;
        text-align: center;
    }
}

.box-card {
    background: #fff;
    border-radius: 5px;

    .box_card_title {
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
        font-weight: bold;
    }
}
</style>
