<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>症状管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="icon" th:href="@{image/sgl.png}" sizes="32x32">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/rules.js}"></script>
    <!--    <script th:src="@{/ueditor/ueditor.config.js}"></script>-->
    <!--    <script th:src="@{/ueditor/ueditor.all.min.js}"></script>-->
    <!--    <script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>-->
    <script th:src="@{/js/compressor.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<style>
    .btn:hover {
        color: #555;
    }

    .layui-table-view {
        margin: 0;
    }

    .layui-tab-card {
        box-shadow: none;
        border-radius: 0px;
    }

    .layui-tab {
        margin: 0;
    }

    .layui-tab-content {
        padding: 0;
    }

    .layui-form-radio {
        margin: 0;
    }

    .tdBackground-color {
        background-color: #ff0000;
    }
</style>

<body class="layui-layout-body">

<div class="toolbar">
    <div class="layui-inline">
        <span>症状：</span>
        <input type="text" id="symptom" placeholder="症状关键字" autocomplete="off" class="layui-input formWidth"/>
    </div>
    <div class="layui-inline">
        <span>身体部位：</span>
        <input type="text" id="bodyArea" placeholder="身体部位" autocomplete="off" class="layui-input formWidth"/>
    </div>
    <div class="layui-inline">
        <span>性别：</span>
        <input type="text" id="gender" placeholder="性别" autocomplete="off" class="layui-input formWidth"/>
    </div>
    <div class="layui-inline">
        <span>成人或幼儿：</span>
        <input type="text" id="adultOrChild" placeholder="成人或幼儿" autocomplete="off" class="layui-input formWidth"/>
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-sm" data-type="search" id="search"><i class="layui-icon">&#xe615;</i>查询
        </button>
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="add" id="add"><i
                class="layui-icon">&#xe654;</i>添加
        </button>
    </div>
</div>

<table id="demo" lay-filter="test"></table>

<!-- 表格操作栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
</script>


<!-- 增加和修改 -->
<div id="Hospital" style="display:none;">
    <form id="zjHospital" class="layui-form" style="margin-top:20px;">

        <div class="layui-form-item" id="isShowAdult">
            <label class="layui-form-label">年龄:</label>
            <div class="layui-input-inline">
                <select id="is_adult" class="layui-select formWidthTwo">
                    <option value="">-请选择-</option>
                    <option value="1">成人</option>
                    <option value="0">儿童</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="isShowSex">
            <label class="layui-form-label">性别:</label>
            <div class="layui-input-inline">
                <select id="sex" class="layui-select formWidthTwo" lay-filter="sexSelectChange">
                    <option value="">-请选择-</option>
                    <option value="0">女</option>
                    <option value="1">男</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="isShowBodyArea">
            <label class="layui-form-label">身体部位:</label>
            <div class="layui-input-inline">
                <select id="bodyAreaType" class="layui-select formWidthTwo">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">症状:</label>
            <div class="layui-input-block">
                <input type="text" id="symptomName" required lay-verify="required" autocomplete="off"
                       placeholder="请输入症状名称"
                       class="layui-input" style="width: 230px">
            </div>
        </div>
    </form>
</div>

</body>
</html>
<script th:inline="javascript">


</script>
<script>
    //修改、启用禁用
    var content = "";
    // var ue = UE.getEditor('editor');
    var element,
        table,
        laydate,
        layer,
        form,
        tree,
        upload;
    var tHeight = $(".toolbar").height() + 6;
    layui.use(['element', 'table', 'laydate', 'layer', 'form', 'tree', 'upload'], function () {
        element = layui.element;
        table = layui.table;
        laydate = layui.laydate;
        layer = layui.layer;
        form = layui.form;
        tree = layui.tree;
        upload = layui.upload;
        //表格加载
        table.render({
            elem: '#demo',
            height: 'full-' + tHeight,
            url: '/symptom/findAllSymptom', //数据接口
            title: '用户表',
            page: true,//开启分页
            limit: 20,
            limits: [20, 30, 50],
            //toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
            defaultToolbar: [],
            id: 'test',
            cols: [
                [ //表头
                    {field: 'ID', title: '序号', width: 50},
                    {field: 'BODY_AREA', title: '身体部位', width: 100, totalRow: true},
                    {
                        field: 'SYMPTOM', title: '症状', width: 100,
                    },
                    {
                        field: 'CHILD_ID', title: '关联id', width: 100, hide: true,
                    },
                    {
                        field: 'SEX_NAME', title: '性别', width: 100,
                    },
                    {
                        field: 'IS_ADULT_NAME', title: '是否成年', width: 100,
                    },
                    {fixed: 'right', title: '操作', align: 'center', width: 240, toolbar: '#barDemo'}
                ]
            ]
        });

        //时间控件
        laydate.render({
            elem: '#date', //指定元素
            eventElem: '.date-input-icon',
            trigger: 'click',
        });

        form.on('select(sexSelectChange)', function (data) {
            let isAdult = $('#is_adult').val();
            let sex = $('#sex').val();
            if (isAdult === null || isAdult === '') {
                layer.msg("请选择年龄！");
                return;
            }
            if (sex === null || sex === '') {
                layer.msg("请选择性别！");
                return;
            }
            var param = {};
            param.isAdult = isAdult;
            param.sex = sex;
            var url = '/symptom/getAreaTypeBySexAdult';
            AjaxPostJson(url, param, function (res) {
                var result = res.data
                console.log(result)
                $('#bodyAreaType').empty();
                $('#bodyAreaType').append('<option value="" disabled>请选择</option> ');
                $.each(result, function (i, item) {
                    $('#bodyAreaType').append(new Option(item.body_AREA, item.body_AREA_TYPE));
                });
                form.render("select");//重新渲染 固定写法
            })

        });

        //查询
        $("#search").on('click', function () {
            findAllSymptom();
        });

        //新增
        $("#add").on('click', function () {
            $('#isShowAdult').show();
            $('#isShowSex').show();
            $('#isShowBodyArea').show();
            $('#is_adult').val("");
            $('#sex').val("");
            $("#bodyAreaType").val("");
            $("#symptomName").val("");
            form.render("select");
            layer.open({
                type: 1,
                title: "新增内容",
                shade: 0,
                zIndex: 5,
                area: ['500px', '80%'],
                offset: 'auto',
                content: $("#Hospital"),
                btn: ['保存', '取消'],
                btnAlign: 'c',
                yes: function (index, layero) {
                    //获取值
                    var bodyAreaType = $("#bodyAreaType").val();
                    if (bodyAreaType === "") {
                        layer.msg("请选择身体部位！");
                        return;
                    }
                    var symptomName = $("#symptomName").val();
                    if (symptomName === "") {
                        layer.msg("请填写症状名称！");
                        return;
                    }
                    var param = {};
                    param.bodyAreaType = bodyAreaType;
                    param.symptomName = symptomName;
                    var url = '/symptom/addSymptom';
                    AjaxPostJson(url, param, function (data) {
                        if (data.errCode == "0") {
                            layer.close(index);
                            layer.msg('添加成功', {time: 1000});
                            findAllSymptom();
                        } else {
                            layer.msg(data.errMsg, {time: 1000});
                        }
                    });
                },
                btn2: function () {
                }
            });
        })

        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                $('#isShowAdult').hide();
                $('#isShowSex').hide();
                $('#isShowBodyArea').hide();

                $("#symptomName").val(data.SYMPTOM);
                layer.open({
                    type: 1,
                    title: "修改",
                    shade: 0,
                    zIndex: 5,
                    area: ['500px', '80%'],
                    offset: 'auto',
                    content: $("#Hospital"),
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                        var symptomName = $("#symptomName").val();
                        if (symptomName === "") {
                            layer.msg("请填写症状名称！");
                            return;
                        }
                        var param = {};
                        param.id = data.ID;
                        param.symptomName = symptomName;
                        var url = '/symptom/modifySymptom';
                        AjaxPostJson(url, param, function (data) {
                            if (data.errCode == "0") {
                                layer.close(index);
                                layer.msg('修改成功', {time: 1000});
                                findAllSymptom();
                            } else {
                                layer.msg(data.errMsg, {time: 1000});
                            }
                        });
                    },
                    btn2: function () {
                    }
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定要删除吗？', function (index) {
                    var url = "/symptom/delSymptom";
                    var param = {};
                    param.id = data.ID;
                    AjaxPostJson(url, param, function (data) {
                        if (data.errCode == "0") {
                            layer.msg('删除成功', {time: 1000});
                            findAllSymptom();
                        } else {
                            layer.msg(data.errMsg, {time: 2000});
                        }
                    });
                })
            }
        });
    });

    function findAllSymptom() {
        var symptom = $("#symptom").val();
        var bodyArea = $("#bodyArea").val();
        var gender = $("#gender").val();
        var adultOrChild = $("#adultOrChild").val();
        table.reload('test', {
            method: 'get',
            url: '/symptom/findAllSymptom',
            where: {
                'symptom': symptom,
                'bodyArea': bodyArea,
                'gender': gender,
                'adultOrChild': adultOrChild
            },
            page: {
                curr: 1
            }
        });
    }
</script>