<!doctype html>
<html>

<head>
    <title></title>

    <vt:include file="inc/meta_api.inc" />
    <script src="/Utility/ElementUi/index.js"></script>
    <style>
        .box-card {
            width: 500px;
            margin-bottom: 20px;
        }

        .item {
            height: 50px;
            line-height: 50px;
        }

        .item>span {
            display: block;
            width: 60px;
            text-align: right;
            float: left;
        }

        .item .el-input {
            width: auto;
            width: calc(100% - 100px);
            float: left;
            margin-left: 5px;
        }

        #log-box {
            width: calc(100% - 540px);
            position: absolute;
            right: 8px;
            top: 8px;
        }
    </style>
</head>

<body>
    <div id="vue-app">
        <!-- 查询框-->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>按名称或账号查询</span>
                <el-button style="float: right; padding: 8px 20px;margin-top: -5px;" type="primary"
                    @click="getAccountLogs">
                    查询
                </el-button>
            </div>
            <div class="item">
                <span>姓名：</span>
                <el-input placeholder="请输入内容" v-model="name" class="textbox"></el-input>
            </div>
            <div class="item">
                <span>账号：</span>
                <el-input placeholder="请输入内容" v-model="acc" class="textbox"></el-input>
            </div>
        </el-card>
        <!--学习记录的查询结果-->
        <el-card class="box-card" v-show="result.showBox">
            <div slot="header" class="clearfix">
                <span>来自学习记录（LogForStudentStudy)的查询结果</span>

            </div>
            <el-table :data="result.logs" v-loading="loading" stripe style="width: 100%">
                <el-table-column prop="Ac_ID" label="ID" width="100">
                </el-table-column>
                <el-table-column prop="Ac_Name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="Ac_AccName" label="账号" width="120">
                </el-table-column>
                <el-table-column label="学习记录" width="80" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="getStudyLog(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--账户表的学员信息-->
        <el-card class="box-card" v-show="result.showBox">
            <div slot="header" class="clearfix">
                <span>通过学习记录，反查账户（Accounts)</span>

            </div>
            <el-table :data="result.accounts" v-loading="loading" stripe style="width: 100%">
                <el-table-column prop="Ac_ID" label="ID" width="100">
                </el-table-column>
                <el-table-column prop="Ac_Name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="Ac_AccName" label="账号" width="120">
                </el-table-column>
                <el-table-column prop="Ac_LastTime" label="最后登录">
                </el-table-column>

            </el-table>
        </el-card>
        <el-card class="box-card" v-show="result.showBox">
            <div slot="header" class="clearfix">
                <span>通过学员姓名，反查账户（Accounts)</span>

            </div>
            <el-table :data="result.acc4name" v-loading="loading" stripe style="width: 100%">
                <el-table-column prop="Ac_ID" label="ID" width="100">
                </el-table-column>
                <el-table-column prop="Ac_Name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="Ac_AccName" label="账号" width="120">
                </el-table-column>
                <el-table-column prop="Ac_LastTime" label="最后登录">
                </el-table-column>

            </el-table>
        </el-card>
        <!-- 学习记录-->
        <el-card class="box-card" id="log-box" v-show="log.showBox">
            <div slot="header" class="clearfix">
                <span><b>{{log.name}}</b> 的学习记录</span>
                <template>
                    <el-select style="display: none" v-model="log.curr_Course" style="float: right" placeholder="课程"
                        @change="getCourse">
                        <el-option v-for="item in courses" :key="item.Cou_ID" :label="item.Cou_Name"
                            :value="item.Cou_ID">
                        </el-option>
                    </el-select>
                </template>
            </div>
            <el-table :data="log.logs" stripe style="width: 100%">
                <el-table-column prop="Ac_ID" label="ID" width="100">
                </el-table-column>
                <el-table-column prop="Ac_Name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="Ac_AccName" label="账号" width="120">
                </el-table-column>
                <el-table-column prop="Cou_ID" label="课程" :filters="coursesFilter" :filter-method="filterHandler">
                    <template slot-scope="scope">
                        {{scope.row.Org_ID}}
                    </template>
                </el-table-column>
                <el-table-column prop="Ol_ID" label="章节" width="60">
                </el-table-column>
                <el-table-column prop="Lss_IP" label="IP">
                </el-table-column>
                <el-table-column prop="Lss_LastTime" label="时间">
                </el-table-column>
            </el-table>
        </el-card>
    </div>

</body>

<script>
    var vm = new Vue({
        data: {
            name: '',    //学员姓名
            acc: '',     //学员账号
            loading: true,
            result: {
                accounts: new Array(), //查询到学员信息
                logs: new Array(), //查询到学员信息
                acc4name: new Array(),   //通过姓名查询来的账号
                success: false,
                showBox: false,
                showError: false
            },
            //学习记录
            log: {
                showBox: false,
                name: '',       //当学员名称
                acid: 0,     //当前学员id
                logs: new Array(),
                course: [],
                curr_Course: ''
            },
            courses: new Array(),
            //课程筛选
            coursesFilter: new Array()
        },
        methods: {
            //获取学员账户信息
            getAccountLogs: function () {
                $api.get('Account/ForLogs', { acc: this.acc, name: this.name }, function () {
                    vm.result.accounts = [];
                    vm.result.showBox = true;
                    vm.loading = true;
                }, function () {
                    vm.loading = false;
                }).then(function (response) {
                    var data = response.data;
                    if (data.Success) {
                        vm.result.logs = data.Data;
                    }
                    vm.result.acc4name = [];
                    for (var i = 0; i < vm.result.logs.length; i++) {
                        var acid = vm.result.logs[i].Ac_ID;
                        $api.get('Account/ForID', { id: acid }).then(function (d) {
                            var data = d.data;
                            if (data.Success) {
                                vm.result.accounts.push(data.Data);
                                var acname = data.Data.Ac_Name;
                                $api.get('Account/ForName', { name: acname }).then(function (d) {
                                    var data = d.data;
                                    if (data.Success) {
                                        for (var j = 0; j < data.Data.length; j++) {
                                            vm.result.acc4name.push(data.Data[j]);
                                        }
                                    }
                                });
                            }
                        });
                    }

                }).catch(function (error) {
                    console.log(error);
                });
            },
            //获取学员学习记录
            getStudyLog: function (acc) {
                vm.log.name = acc.Ac_Name;
                vm.log.acid = acc.Ac_ID;
                vm.log.showBox = true;
                $api.get('Account/StudyLog', { acid: acc.Ac_ID, couid: -1 }).then(function (response) {
                    var data = response.data;
                    if (data.Success) {
                        var courses = new Array();
                        for (var i = 0; i < data.Data.length; i++) {
                            if (courses.indexOf(data.Data[i].Cou_ID) > -1)
                                continue;
                            courses.push(data.Data[i].Cou_ID);
                        }
                        vm.courses = [];
                        vm.coursesFilter = [];
                        for (var j = 0; j < courses.length; j++) {
                            $api.get('Course/ForID', { id: courses[j] }).then(function (response) {
                                var data = response.data;
                                if (data.Success) {
                                    vm.courses.push(data.Data);
                                    vm.coursesFilter.push({ text: data.Data.Cou_Name, value: data.Data.Cou_ID });
                                }
                            });
                        }
                        vm.log.logs = data.Data;
                    }

                }).catch(function (error) {
                    console.log(error);
                });

            },
            getCourse: function (couid) {
                $api.get('Account/StudyLog', { acid: vm.log.acid, couid: couid }).then(function (response) {
                    var data = response.data;
                    if (data.Success) {
                        vm.log.logs = data.Data;
                    }
                });
            },
            //获取课程名称
            getCourName: function (log) {
                var couname = '';
                for (var j = 0; j < vm.courses.length; j++) {
                    if (vm.courses[j].Cou_ID == log.Cou_ID) {
                        couname = vm.Cou_Name;
                    }
                }
                return couname;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                var rowid = row[property];
                return row[property] === value;
            }
        },
        watch: {
            courses: function () {
                for (var i = 0; i < vm.courses.length; i++) {
                    for (var j = 0; j < vm.log.logs.length; j++) {
                        if (vm.courses[i].Cou_ID == vm.log.logs[j].Cou_ID) {
                            vm.log.logs[j].Org_ID = vm.courses[i].Cou_Name;
                        }
                    }
                }
            }
        }
    });
    vm.$mount('#vue-app');
</script>

</html>