<template>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <div id="toolbar">
                    <div class="col-sm-12">
                        <button id="addBtn" class="btn btn-default">
                            <i class="glyphicon glyphicon-plus"></i>添加
                        </button>
                    </div>
                </div>
            </div>

            <!-- .content -->
            <div id="table"></div>

        </div>
    </section>

    <div class="modal fade" id="addCapModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel">添加</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="addForm">
                        <input type="hidden" name="id" id="id" />
                        <div class="form-group">
                            <label class="col-sm-3 control-label">魅力值区间<font color="red">*</font>:</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control validate[required]" name="charmValueMin"
                                    id="modal_charmMin" placeholder="请输入最小值">
                            </div>
                            <div class="col-sm-3">
                                <input type="text" class="form-control validate[required]" name="charmValueMax"
                                    id="modal_charmMax" placeholder="请输入最大值">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">帽子名称:<font color="red">*</font>:</label>
                            <div class="col-sm-6">
                                <input type="text" class="input-sm form-control datetime validate[required]" name="title"
                                    id="modal_capTitle" placeholder="请输入">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">性别:<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <select id="modal_gender" name="gender" class="input-sm">
                                    <option value="MALE">男</option>
                                    <option value="FEMALE">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">配置图片<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <img src="" id="picImage" style="width:250px;height:90px;" alt="">
                                <input type="file" id="picUploadFile" name="file">
                                <button class="btn btn-success" type="button" id="picUploadBtn">上传</button>
                                <input type="hidden" id="picUrl" name="picUrl" class="form-control validate[required]" />
                                <span id="picImgInfo" style="color:red;"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="add-cap">确定</button>
                </div>

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

    <div class="modal fade" id="updateCapModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="updateModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="updateForm">
                        <input type="hidden" name="id" id="e_id" />
                        <div class="form-group">
                            <label class="col-sm-3 control-label">魅力值区间<font color="red">*</font>:</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control validate[required]" name="charmValueMin"
                                    id="e_modal_charmMin" placeholder="请输入最小值">
                            </div>
                            <div class="col-sm-3">
                                <input type="text" class="form-control validate[required]" name="charmValueMax"
                                    id="e_modal_charmMax" placeholder="请输入最大值">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">帽子名称:<font color="red">*</font>:</label>
                            <div class="col-sm-6">
                                <input type="text" class="input-sm form-control datetime validate[required]" name="title"
                                    id="e_modal_capTitle" placeholder="请输入">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">性别:<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <select id="e_modal_gender" name="gender" class="input-sm">
                                    <option value="MALE">男</option>
                                    <option value="FEMALE">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">配置图片<font color="red">*</font>:</label>
                            <div class="col-sm-9">
                                <img src="" id="e_picImage" style="width:250px;height:90px;" alt="">
                                <input type="file" id="e_picUploadFile" name="file">
                                <button class="btn btn-success" type="button" id="e_picUploadBtn">上传</button>
                                <input type="hidden" id="e_picUrl" name="picUrl" class="form-control validate[required]" />
                                <span id="e_picImgInfo" style="color:red;"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="updateCap">确定</button>
                </div>

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

<script>
import TableHelper from '@/utils/bootstrap-table-helper';

export default {
    name: "BlindDateCapAdminView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'id', title: 'id', align: 'center', width: '5%' },
                        { field: 'charmValueMin', title: '魅力值下限', align: 'center', width: '5%', },
                        { field: 'charmValueMax', title: '魅力值上限', align: 'center', width: '5%', },
                        { field: 'title', title: '帽子名称', align: 'center', width: '5%' },
                        {
                            field: 'gender', title: '性别', align: 'center', width: '5%',
                            formatter: function (val) {
                                if (val == 'MALE') {
                                    return '男';
                                } else {
                                    return '女'
                                }
                            }
                        },
                        {
                            field: 'picUrl', title: '图片', align: 'center', width: '5%',
                            formatter: function (val, row, index) {
                                return "<img src='" + val + "' width='40' height='40'>";
                            }
                        },
                        {
                            field: 'id',
                            title: '操作',
                            align: 'center',
                            width: '10%',
                            formatter: function (val, row, index) {
                                const capId = row.id
                                const charmValueMin = row.charmValueMin
                                const charmValueMax = row.charmValueMax
                                const title = row.title
                                const gender = row.gender
                                const picUrl = row.picUrl
                                console.log('capId·········', capId)
                                return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" capId=' + capId + ' charmValueMin=' + charmValueMin + ' charmValueMax=' + charmValueMax +
                                    ' title=' + title + ' gender=' + gender + ' picUrl=' + picUrl + '>' +
                                    '<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
                                    '<button class="btn btn-sm btn-danger opt-remove" capId=' + capId +
                                    '><i class="glyphicon glyphicon-remove"></i>删除</button>';
                            }
                        }
                    ],
                    undefinedText: 0,
                    cache: false,
                    striped: true,
                    showRefresh: false,
                    pageSize: 20,
                    pagination: true,
                    pageList: [20, 50, 100, 200, 300, 500],
                    search: false,
                    sidePagination: "server", //表示服务端请求
                    queryParamsType: "undefined",
                    queryParams: function queryParams(params) {   //设置查询参数
                        var param = {
                            pageNum: params.pageNumber,
                            pageSize: params.pageSize,
                        };
                        return param;
                    },
                    toolbar: '#toolbar',
                    url: '/admin/blindDate/listCap.action',
                    onLoadSuccess: function (res) {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                });

                // 查询刷新
                $('#btnSearch').on('click', function () {
                    TableHelper.doRefresh('#table');
                });


                //新建标签
                $("#addBtn").click(function () {
                    $("#modal_charmMin").val("");
                    $("#modal_charmMax").val("");
                    $('#modal_capTitle').val("");
                    $("#modal_gender").val('');
                    $("#picUrl").val("");
                    $('#picImage').attr("src", '');
                    $("#picImgInfo").html('');
                    $("#picUploadFile").val('');
                    $("#addCapModal").modal('show');
                });

                //编辑
                $('#table').on('click', '.opt-edit', function () {
                    const capId = $(this).attr('capId');
                    const charmValueMin = $(this).attr('charmValueMin');
                    const charmValueMax = $(this).attr('charmValueMax');
                    const title = $(this).attr('title');
                    const gender = $(this).attr('gender');
                    const picUrl = $(this).attr('picUrl');
                    console.log("param======", capId, charmValueMin, charmValueMax, title, gender, picUrl)
                    $("#e_id").val(capId);
                    $("#e_modal_charmMin").val(charmValueMin);
                    $("#e_modal_charmMax").val(charmValueMax);
                    $('#e_modal_capTitle').val(title);
                    $("#e_modal_gender").val(gender);
                    // 设置图片
                    $("#e_picUploadFile").val('');
                    $('#e_picUrl').val(picUrl);
                    $('#e_picImage').attr("src", picUrl);
                    if (picUrl != '') {
                        $("#e_picImgInfo").html('已上传');
                    } else {
                        $("#e_picImgInfo").html('未上传');
                    }
                    $("#updateCapModal").modal('show');
                });


                // 编辑
                $("#updateCap").click(function () {
                    console.log("id", $("#e_id").val());
                    $.ajax({
                        type: "post",
                        url: "/admin/blindDate/addOrUpdateCap.action",
                        data: $('#updateForm').serialize(),
                        dataType: "json",
                        success: function (json) {
                            if (json.success) {
                                $("#tipMsg").text("保存成功");
                                $("#tipModal").modal('show');
                                TableHelper.doRefresh("#table");
                                $("#updateCapModal").modal('hide');
                            } else {
                                $("#tipMsg").text("保存失败." + json.message);
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                });


                //删除
                $('#table').on('click', '.opt-remove', function () {
                    const capId = $(this).attr('capId');
                    console.log("id=======", capId)
                    if (confirm("你确认删除该帽子吗?")) {
                        $.ajax({
                            type: "get",
                            url: "/admin/blindDate/delCap.action",
                            data: {
                                id: capId,
                            },
                            dataType: "json",
                            success: function (json) {
                                if (json.success) {
                                    console.log(json.data)
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("删除帽子失败." + json.message);
                                }
                            }
                        })
                    }
                });

                // 新增
                $("#add-cap").click(function () {
                    $.ajax({
                        type: "post",
                        url: "/admin/blindDate/addOrUpdateCap.action",
                        data: $('#addForm').serialize(),
                        dataType: "json",
                        success: function (json) {
                            if (json.success) {
                                $("#tipMsg").text("保存成功");
                                $("#tipModal").modal('show');
                                TableHelper.doRefresh("#table");
                                $("#addCapModal").modal('hide');
                            } else {
                                $("#tipMsg").text("保存失败." + json.message);
                                $("#tipModal").modal('show');
                            }
                        }
                    });
                });

                $('#picUploadBtn').on('click', function () {
                    $.ajaxFileUpload({
                        fileElementId: 'picUploadFile',    //需要上传的文件域的ID，即<input type="file">的ID。
                        url: '/admin/blindDate/upload', //后台方法的路径
                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                        secureuri: false,   //是否启用安全提交，默认为false。
                        async: true,   //是否是异步
                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            if (json.path) {
                                $('#picUrl').val(json.path);
                                $('#picImage').attr("src", json.path);
                                if (json.path != '') {
                                    $("#picImgInfo").html('已上传成功');
                                } else {
                                    $("#picImgInfo").html('未上传成功');
                                }
                                console.log(json.path);
                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
                            console.error(e);
                        }
                    });
                })

                $('#e_picUploadBtn').on('click', function () {
                    $.ajaxFileUpload({
                        fileElementId: 'e_picUploadFile',    //需要上传的文件域的ID，即<input type="file">的ID。
                        url: '/admin/blindDate/upload', //后台方法的路径
                        type: 'post',   //当要提交自定义参数时，这个参数要设置成post
                        dataType: 'json',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                        secureuri: false,   //是否启用安全提交，默认为false。
                        async: true,   //是否是异步
                        success: function (json) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                            if (json.path) {
                                $('#e_picUrl').val(json.path);
                                $('#e_picImage').attr("src", json.path);
                                if (json.path != '') {
                                    $("#picImgInfo").html('已上传成功');
                                } else {
                                    $("#picImgInfo").html('未上传成功');
                                }
                                console.log(json.path);

                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                            }
                        },
                        error: function (data, status, e) {  //提交失败自动执行的处理函数。
                            console.error(e);
                        }
                    });
                })


            });
        }
    },

};
</script>

<style scoped></style>