// var baseURL = 'https://yq.vchangyi.com/party/phpapi';
//var baseURL = 'http://dsc-b.vchangyi.com/party/phpapi';
 var baseURL = 'phpapi'

let imgTimer = null;
let nameTimer = null;
let prizeNoTimer = null;
let prizeList = ['五等奖', '四等奖', '三等奖', '二等奖', '一等奖']
// 抽奖页面
let action = {
    prizeId: '', // 奖项ID
    userList: [ // 用户列表
        {
            "id": "1",
            "realname": "张三",
            "headimg": "./img/mobile/logo.png",
            "prize_no": "001"
        },
        {
            "id": "2",
            "realname": "李四",
            "headimg": "./img/mobile/dialog_close.png",
            "prize_no": "002"
        },
        {
            "id": "3",
            "realname": "王麻子",
            "headimg": "./img/mobile/vote_active.png",
            "prize_no": "003"
        },
        {
            "id": "4",
            "realname": "路人甲",
            "headimg": "./img/mobile/icon_seat.png",
            "prize_no": "004"
        }
    ],
    currentUser: null, // 当前显示的用户
    // 初始化数据
    init: function() {
        let self = this;

        this.togglePage(true);

        $('.radio-group .radio-item').on('click', function() {
            $('.radio-group .radio-item').removeClass('active');
            $(this).addClass('active');
            self.prizeId = $(this).index() + 1;
        });
    },
    // 切换显示页面
    togglePage(isInit = true) {
        let self = this;
        if (isInit) {
            $('.select-page').show();
            $('.result-page').hide();
        } else {
            $('.select-page').hide();
            $('.result-page').css('display', 'flex');

            $('.avatar-img, .user-info .scroll-wrap').show();
            $('.winner, .winner-name, .winner-no, .result-item').hide();
            this.initUserList();

            $('.start-btn').show();
            $('.stop-btn, .continue-btn').hide();

            $('.result-title').html(prizeList[self.prizeId - 1]);
        }
    },
    // 进入抽奖页面
    goLottery: function() {
        if (!this.prizeId) {
            this.switchDialog(true);
            return;
        }
        this.togglePage(false);
    },
    // 控制显示弹框
    switchDialog: function(isShow) {
        if (isShow) {
            $('.dialog').show();
        } else {
            $('.dialog').hide();
        }
    },
    initUserList() {
        let imgStr = '';
        let nameStr = '';
        let noStr = '';
        this.userList.map((user) => {
            imgStr += '<img class="avatar-item" src="' + user.headimg + '">';
            nameStr += '<span class="scroll-item">' + user.realname + '</span>';
            noStr += '<span class="scroll-item">' + user.prize_no + '</span>';
        });
        $('.avatar-list').html(imgStr);
        $('.user-name .scroll-list').html(nameStr);
        $('.user-no .scroll-list').html(noStr);
        let imgListWidth = parseInt($('.avatar-list .avatar-item').css('width')) * this.userList.length + 'px';
        $('.avatar-list').css('width', imgListWidth);
        let nameListWidth = parseInt($('.user-name .scroll-item').css('width')) * this.userList.length + 'px';
        $('.user-name .scroll-list').css('width', nameListWidth);
        let noListWidth = parseInt($('.user-no .scroll-item').css('width')) * this.userList.length + 'px';
        $('.user-no .scroll-list').css('width', noListWidth);
    },
    // 开始
    start: function(e) {
        if (this.userList.length === 0) {
            alert('暂无数据');
            return;
        }
        $('.start-btn').hide();
        $('.continue-btn').hide();
        $('.stop-btn').show();

        // 开始抽奖动画
        imgTimer = this.lotteryAnimation($('.avatar-list'), '.avatar-item', 244);
        nameTimer = this.lotteryAnimation($('.user-name .scroll-list'), '.scroll-item', 146);
        prizeNoTimer = this.lotteryAnimation($('.user-no .scroll-list'), '.scroll-item', 146);
        
        // 请求抽奖接口
        // let award = $('.user-award select').val();
        // let url = "/apicp.lottery.php";
        // baseRquest.post(url, {award : award}, data =>{
        //     console.log(data);
        //     if (data.length == 0) {
        //         alert('没有多余的号码可以抽出');
        //         location.reload();
        //     }
        //     // 绑定数据到页面
        //     this.bindData.winner.realname = data.realname;
        //     this.bindData.winner.number = data.user_id;
        //     this.bindData.winner.headimg = data.headimg;
        // });
        
    },
    // 停止
    stop: function(e){
        // 按钮效果
        $('.start-btn').hide();
        $('.stop-btn').hide();
        $('.continue-btn').show();
        
        // 停止抽奖动画
        clearInterval(imgTimer);
        clearInterval(nameTimer);
        clearInterval(prizeNoTimer);
        // 重置位置
        $('.winner').show();
        $('.avatar-list').css('left', '0');
        $('.avatar-img').hide();

        $('.winner-name').show();
        $('.user-name .scroll-list').css('left', '0');
        $('.user-name .scroll-wrap').hide();

        $('.winner-no').show();
        $('.user-no .scroll-list').css('left', '0');
        $('.user-no .scroll-wrap').hide();
        this.currentUser = {
            "id": "1",
            "realname": "张三",
            "headimg": "./img/mobile/logo.png",
            "prize_no": "001"
        };
        // 展示中奖用户
        $('.winner .avatar-item').attr('src', this.currentUser.headimg);
        $('.winner-name').html(this.currentUser.realname);
        $('.winner-no').html(this.currentUser.prize_no);
        $('.result-item').show();
        // 中奖名单列表重置
    },
    // 抽奖动画，speed: 每次移动多少像素
    lotteryAnimation: function(dom, child, speed) {
        var i = 0;
        var interval = 100; // 定时器的速度
        dom.append(dom.find(child).eq(0).clone());
        var size = dom.find(child).size();
        var itemWidth = parseInt($(child).css('width'));
        dom.css('width', itemWidth * size + 'px');
        var timer = setInterval(() => {
            var left = speed * i;
            if (left >= itemWidth * (size - 1)) {
                i = 0;
            }
            dom.css('left', -left + 'px');
            i += 1;
        }, interval);
        return timer;
    },
    // 继续抽奖
    reset: function() {
        $('.radio-group .radio-item').removeClass('active');
        this.prizeId = '';
        this.currentUser = null;
        this.togglePage(true);
    },
    winnerListData : null,
    // 删除中奖用户
    delWinner: function(row){
        console.log(action.winnerListData);
        let item = action.winnerListData[row];
        let url = "/apicp.DelLottery.php";
        baseRquest.post(url, {id : item.id}, data => {
            action.winnerList();
        });
    },
    // 中奖名单,传入参数：中奖类型(一等，二等)，type=2是中奖名单
    winnerList:function(){
        // 获取中奖者名单，
        let url = "/apicp.GetUserList.php";
        let award = $('.user-award select').val();
        baseRquest.get(url, {award : award, type : 2}, data => {
            this.bindData.lottery.winnerCount = data.length;
            this.bindData.lottery.award = $('.user-award select').val();
            for (let i = 1; i <= data.length; i++) {
                data[i-1].no = i;
            }
            action.winnerListData = data;
            console.log(data);
            dataListBind('winner-bind', 'winner', data);
        });
    }
}
// 系统设置动作
let setting = {
    //用户数据
    userData: null,
    // 登录
    login: function(){
        let pwd = $('#pwd').val();
        let url = "/apicp.AdminLogin.php";
        baseRquest.get(url, {id : pwd}, data => {
            localStorage['token'] = data.token;
            alert('登录成功');
        });
    },
    // 登录
    loginOut: function(){
        localStorage['token'] = '';
        alert('已退出');
    },
    // 用户列表
    userList: function(){
        let url = "/apicp.GetUserList.php";
        baseRquest.get(url, {}, data => {
            this.userData = data;
            dataListBind('user-bind', 'user', data);
        });
    },
    // 删除用户
    delUser: function(row){
        console.log(this.userData);
        let item = this.userData[row];
        let url = "/apicp.DelUser.php";
        baseRquest.post(url, {id : item.id}, data => {
            this.userList();
        });
    },
    // 组织更变
    editDep: function(row){
        console.log(this.userData);
        let item = this.userData[row];
        let url = "/apicp.DelUser.php";
        baseRquest.post(url, {id : item.id,dep: 1}, data => {
            this.userList();
        });
    },
    // 开始签到
    startSign: function(row){
        let url = "/apicp.Setting.php";
        baseRquest.post(url, {flag : 'isStopSign',value: 2}, data => {
            alert('设置成功');
        });
    },
    // 结束签到
    stopSign: function(row){
        let url = "/apicp.Setting.php";
        baseRquest.post(url, {flag : 'isStopSign',value: 1}, data => {
            alert('设置成功');
        });
    },
    // 开启投票
    startVote: function(row){
        let url = "/apicp.Setting.php";
        baseRquest.post(url, {flag : 'isStartVote',value: 1}, data => {
            alert('设置成功');
        });
    },
    // 结束投票
    stopVote: function(row){
        let url = "/apicp.Setting.php";
        baseRquest.post(url, {flag : 'isStartVote',value: 2}, data => {
            alert('提交成功');
        });
    },
    // 重置数据
    resetUser: function(row){
        let user = $('#user-id').val();
        if (user == '') {
            return;
        }
        let url = "/apicp.ResetUser.php";
        baseRquest.post(url, {id : user}, data => {
            alert('提交成功');
        });
    }
}

// 山寨dom数据列表绑定控件，没有实现事件callback
// 要求设置容器名称z-for-container，设置循环列数据模板z-for-item
// 参数1：容器名称，存放列表数据的容器 2：设置的数据模板 3：json数据
let dataListBind = (container, itemName, data)=>{
    let trs = '';
    // 获取模板
    $('*[z-for-item="'+ itemName +'"]').show();
    let trTemplate = $('*[z-for-item="'+ itemName +'"]').prop("outerHTML");
    $('*[z-for-item="'+ itemName +'"]').hide();
    let trTemplateHide = $('*[z-for-item="'+ itemName +'"]').prop("outerHTML");
    for(let i = 0; data.length > i; i++) {
        // 创建一行dom
        let tr = trTemplate;
        // 模板需要赋值项
        let forDataItem = $(tr).find("*[z-for-data]");
        for(let j = 0; forDataItem.length > j; j++) {
            let item = $(forDataItem).eq(j).prop("outerHTML");
            // 获取dom标签绑定的映射名称
            let column = $(forDataItem).eq(j).attr("z-for-data");
            let tagName = $(forDataItem)[j].tagName.toLowerCase();
            // 列表中的img和input支持直接赋值，其他标签赋值到标签中间
            if (tagName == 'img') {
                $(forDataItem).eq(j).attr('src', data[i][column]);
            } else if (tagName == 'input') {
                $(forDataItem).eq(j).val(data[i][column]);
            } else {
                $(forDataItem).eq(j).html(data[i][column]);
            }
            tr = tr.replace(item,$(forDataItem).eq(j).prop("outerHTML"));
        }
        // 事件回调，默认返回当前行对象
        let forClickItem = $(tr).find("*[z-for-click]");
        for(let x = 0; forClickItem.length > x; x++) {
            let clickItem = $(forClickItem).eq(x).prop("outerHTML");
            let click = $(forClickItem).eq(x).attr("z-for-click");
            $(forClickItem).eq(x).attr('onClick', click + "("+ i +")");
            tr = tr.replace(clickItem,$(forClickItem).eq(x).prop("outerHTML"));
        }
        trs += $(tr).removeAttr('z-for-item').prop("outerHTML");
    }
    $('*[z-for-container="'+ container +'"]').html(trTemplateHide + trs);
}

// 山寨版双向数据绑定
let doubleBind = ()=>{
    // 页面监听,改变的数据写入对象
    $(()=>{
        $('*[z-for-item]').hide();
        $('*[z-bind]').change(function(){
            dataBind.bindToData($this);
        })
    })
    // 动态数据自动绑定,bindData中的值必须是对象
    Object.keys(action.bindData).forEach((key)=>{
        Object.keys(action.bindData[key]).forEach((keyKey)=>{
            // bind初始值
            dataBind.bindToPage(key + '.' + keyKey, action.bindData[key][keyKey]);
            // 监听这个对象的每个值变化，动态改变页面数据
            let value = action.bindData[key][keyKey];
            Object.defineProperty(action.bindData[key], keyKey ,{
                enumerable: true,
                configurable: true,
                get:function (){
                    //当获取值的时候触发的函数
                    return value;
                },
                set:function(newValue){
                    if(value != newValue) {
                        value = newValue
                    }
                    let propertyValue = key + '.' + keyKey;
                    dataBind.bindToPage(propertyValue, newValue);
                },
            });
        })
    })
}

// 双向数据绑定事件
let dataBind = {
    // 数据动态绑定到页面
    bindToPage: (propertyValue, value)=>{
        let tag = $('*[z-bind="'+ propertyValue +'"]')[0];
        if ($('*[z-bind="'+ propertyValue +'"]').length == 0) {
            return;
        }
        let tagName = $('*[z-bind="'+ propertyValue +'"]')[0].tagName.toLowerCase();
        if (tagName == 'img') {
            $('*[z-bind="'+ propertyValue +'"]').attr('src', value);
        } else if (tagName == "select" || tagName == "input") {
            $('*[z-bind="'+ propertyValue +'"]').val(value);
        } else {
            $('*[z-bind="'+ propertyValue +'"]').html(value);
        }
    },
    // 页面数据动态绑定
    bindToData: (e)=>{
        let dataName = $(e).attr('z-bind');
        // 数据格式 z-bind = lottery.winnerCount
        // lottery为对象名，区分数据组，winnerCount为对象键
        let prop = dataName.split('.');
        if (prop.length != 2) {
            console.log('z-data数据格式不正确');
            return;
        }
        let tagName = $(e)[0].tagName.toLowerCase();
        if (tagName == 'img') {
            action.bindData[prop[0]][prop[1]] = $(e).attr('src');
        } else if (tagName == "select" || tagName == "input") {
            action.bindData[prop[0]][prop[1]] = $(e).val();
        } else {
            action.bindData[prop[0]][prop[1]] = $(e).html();
        }
    }
}
// 启动双向绑定监听
// $(()=>{doubleBind()});

// api接口数据请求，数据交互引用的axios
let baseRquest = {
    // get请求
    get: function(url, params, callback) {
        let token = localStorage["token"];
        axios.defaults.baseURL = baseURL;
        axios.get(url, {
            params : params,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                 token: token
                }
        }).then(function (response) {
            if (response.status == 200)
            {
                data = response.data;
                if (!!data) {
                    // 过滤错误信息，统一抛出
                    if (data.errcode != 0 && data.errcode != 200) {
                        alert(data.errmsg);
                    } else {
                        callback(data.result);
                    }
                }
            }else {
                alert('get无法访问接口');
            }
            })
            .catch(function (error) {
            });
    },

     // post请求
     post: function(url, params, callback) {
        let token = localStorage["token"];
        axios.defaults.baseURL = baseURL;
        let data = new URLSearchParams();
        Object.keys(params).forEach(function(key){
            data.append(key, params[key]);
        });
        axios.post(url, data,{
            headers: { 
                'Content-Type': 'application/x-www-form-urlencoded',
                token: token
            }
        }).then(function (response) {
        if (response.status == 200)
        {
            data = response.data;
            if (!!data) {
                // 过滤错误信息，统一抛出
                if (data.errcode != 0 && data.errcode != 200) {
                    alert(data.errmsg);
                } else {
                    callback(data.result);
                }   
            }
        }else {
            alert('post无法访问接口');
        }
        })
        .catch(function (error) {
            console.log(error);
        });
    }
}