{% extends "info/layout.html" %}
{% load static %}
{% block script %}
{% comment %}
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script> {% endcomment %}
<script src="{% static 'axios.min.js' %}"></script>
<script src="{% static 'qs.js' %}"></script>
<script src="{% static 'react.production.min.js' %}"></script>
<script src="{% static 'react-dom.production.min.js' %}"></script>
<script src="{% static 'babel.min.js' %}"></script>
{% endblock script %}
{% block body %}
{% verbatim %}
<div id="main" class="container-fluid">
    <div id="message"></div>
    <div id="userTable"></div>
    <div id="button-area">
        <a href="/home/">返回</a>
    </div>
</div>
<script type="text/babel">
    var users = []

    class UserTable2 extends React.Component {
        constructor(props) {
            super(props);
            this.message = props.message
            this.state = { users: [] }
            // this.getUsers()
        }
        componentDidMount() {
            this.getUsers()
        }
        getUsers() {
            // var that = this
            axios
                .get("/home/company/api/user/list/")
                .then(function (response) {
                    if (response.data.code == 0) {
                        this.setState({ users: response.data.content })
                    } else {
                        alert("服务器连接错误")
                    }
                }.bind(this))
                .catch(function (error) {
                    console.log(error)
                })
        }
        isAdmin(value) {
            if (value == 1) {
                return true
                console.log(1)
            } else {
                return false
                console.log(0)
            }
        }
        adminChange(e, user_id, user_name) {
            console.log("checked status", e.currentTarget.getAttribute("checked"))
            if (e.currentTarget.getAttribute("checked") == null) {
                var admin_status_target = true
            }
            if (e.currentTarget.getAttribute("checked") == "") {
                var admin_status_target = false
            }
            var that = this
            var result = confirm("确认修改" + user_name + "管理员权限?")
            if (result == true) {
                axios({
                    method: "POST",
                    headers: { 'content-type': 'application/x-www-form-urlencoded' },
                    data: Qs.stringify({
                        target_user_id: user_id,
                        new_admin_status: admin_status_target
                    }),
                    url: "/home/company/api/user/admin/change/"
                })
                    .then(function (response) {
                        if (response.data.code == 0) {
                            alert("修改成功")
                        } else {
                            alert(response.data.content)
                            console.log(response.data.code)
                        }
                        that.getUsers()
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            }
        }
        deleteUser(user_id, user_name) {
            var that = this
            var result = confirm("确认删除用户" + user_name + "?")
            if (result == true) {

                // $.post("/home/company/api/user/delete/",
                //     {
                //         delete_user_id: user_id
                //     },
                //     function (response) {
                //         console.log(response)
                //         if (response.code == 0) {
                //             alert("删除成功")
                //             that.getUsers()
                //         } else {
                //             alert("服务器连接错误")
                //         }
                //     }
                // )
                axios({
                    method: "POST",
                    headers: { 'content-type': 'application/x-www-form-urlencoded' },
                    data: Qs.stringify({ delete_user_id: user_id }),
                    url: "/home/company/api/user/delete/"
                }).then(function (response) {
                    if (response.data.code == 0) {
                        alert("删除成功")
                        that.getUsers()
                    } else {
                        alert("服务器连接错误")
                    }
                })
                    .catch(function (error) {
                        console.log(error)
                    })
            }

        }
        render() {
            return (
                <div>
                    <table className="table table-striped">
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>手机号码</th>
                                <th>电子邮件</th>
                                <th>职位</th>
                                <th>是否管理员</th>
                                <th>删除</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.users.map((row, index) =>
                                <tr key={index}>
                                    <td>{row.name}</td>
                                    <td>{row.mobile}</td>
                                    <td>{row.email}</td>
                                    <td>{row.position}</td>
                                    <td>
                                        <div className="form-check form-switch">
                                            <input name="isAdmin" className="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" checked={this.isAdmin(row.admin)} onChange={(e) => this.adminChange(e, row.id, row.name)} />
                                            <label className="form-check-label" htmlFor="flexSwitchCheckDefault"></label>
                                        </div>
                                    </td>
                                    <td>{this.isAdmin(row.admin) ? "" : <div onClick={() => this.deleteUser(row.id, row.name)}>删除</div>}</td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            )

        }
    }
    // ReactDOM.render(
    //     <h1>Hello, world!</h1>,
    //     document.getElementById('message'));
    ReactDOM.render(
        <UserTable2 message={message} />,
        document.getElementById('userTable'))
</script>
<style type="text/css">
    #button-area {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
    }
</style>
{% endverbatim %}
{% endblock body %}