(function () {
    Vue.prototype.$echarts = echarts;
    Vue.prototype.$layui = layui;

    let vm = new Vue({
        el: '#app',
        data() {
            return {
                zbjsmx: ['全部', '基础指标', '推荐指标'],
                table: null,
                layer: null,
                laytpl: null
            }
        },
        mounted() {
            this.$layui.use(['table', 'layer', 'laytpl','form'], () => {
                this.table = this.$layui.table;
                this.layer = this.$layui.layer;
                this.laytpl = this.$layui.laytpl;
                this.form = this.$layui.form;
                this.initTable();
            })
        },
        methods: {
            initTable() {
                this.table.render({
                    elem: '#mxlbTable',
                    data: [
                        { "id": '1', "rwxh": '1', "rwbs": 'task1231', "mxmc": '道路网密度', "rwjssj": '2020-03-12 15:09:12', "rwzt": '激活',"yxzt":'成功',"zxzq":"月度","cz":'操作' },
                        { "id": '2', "rwxh": '2', "rwbs": 'task1231', "mxmc": '道路网密度', "rwjssj": '2020-03-12 15:09:12', "rwzt": '停止',"yxzt":'失败',"zxzq":"年度","cz":'操作' },
                        { "id": '3', "rwxh": '3', "rwbs": 'task1231', "mxmc": '道路网密度', "rwjssj": '2020-03-12 15:09:12', "rwzt": '执行中',"yxzt":'---',"zxzq":"每日","cz":'操作' },
                        { "id": '4', "rwxh": '4', "rwbs": 'task1231', "mxmc": '道路网密度', "rwjssj": '2020-03-12 15:09:12', "rwzt": '激活',"yxzt":'失败',"zxzq":"月度","cz":'操作' },
                        { "id": '5', "rwxh": '5', "rwbs": 'task1231', "mxmc": '道路网密度', "rwjssj": '2020-03-12 15:09:12', "rwzt": '停止',"yxzt":'成功',"zxzq":"月度","cz":'操作' }
                    ],
                    cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    cols: [[
                        {
                            field: 'rwxh',
                            width: "10%",
                            title: '任务序号'
                        },
                        {
                            field: 'rwbs',
                            width: "15%",
                            title: '任务标识'
                        },
                        {
                            field: 'mxmc',
                            width: "15%",
                            title: '模型名称'
                        },
                        {
                            field: 'rwjssj',
                            width: "15%",
                            title: '任务接收时间',
                        },
                        {
                            field: 'rwzt',
                            title: '任务状态',
                            width: "15%"
                        },
                        {
                            field: 'zxzq',
                            title: '执行周期',
                            width: "15%"
                        },
                        {
                            field: 'cz',
                            title: '操作',
                            width: "15%",
                            templet: '#titleTpl'
                        },
                    ]],
                    done: (res, curr, count) => {
                        this.table.on('tool(test)', function (obj) {
                            var data = obj.data; //获得当前行数据
                            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                           if (layEvent === 'stop') { //编辑

                                //同步更新缓存对应的值
                                obj.update({
                                    username: '123'
                                    , title: 'xxx'
                                });
                            } else if (layEvent === 'start') { //启动
                               
                            }else if (layEvent === 'del') { //删除
                                layer.confirm('真的删除行么', function (index) {
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    //向服务端发送删除指令
                                });
                            }
                        });
                    },
                });
            },
            initYxrzTable() {
                this.table.render({
                    elem: '#mxlbYxrzTable',
                    data: [
                        { "id": '1', "rwxh": '1', "rwbs": 'task1231', "mxmc": '道路网密度', "rwjssj": '2020-03-12 15:09:12', "rwzt": '激活',"yxzt":'成功',"xq":"详情说明"},
                        { "id": '2', "rwxh": '2', "rwbs": 'task1231', "mxmc": '道路网密度', "rwjssj": '2020-03-12 15:09:12', "rwzt": '停止',"yxzt":'失败',"xq":"详情说明"},
                        { "id": '3', "rwxh": '3', "rwbs": 'task1231', "mxmc": '道路网密度', "rwjssj": '2020-03-12 15:09:12', "rwzt": '执行中',"yxzt":'---',"xq":"详情说明"},
                        { "id": '4', "rwxh": '4', "rwbs": 'task1231', "mxmc": '道路网密度', "rwjssj": '2020-03-12 15:09:12', "rwzt": '激活',"yxzt":'失败',"xq":"详情说明"},
                    ],
                    cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    cols: [[
                        {
                            field: 'rwxh',
                            width: "10%",
                            title: '任务序号'
                        },
                        {
                            field: 'rwbs',
                            width: "15%",
                            title: '任务标识'
                        },
                        {
                            field: 'mxmc',
                            width: "15%",
                            title: '模型名称'
                        },
                        {
                            field: 'rwjssj',
                            width: "15%",
                            title: '任务接收时间',
                        },
                        {
                            field: 'rwzt',
                            title: '任务状态',
                            width: "15%"
                        },
                        {
                            field: 'yxzt',
                            title: '运行状态',
                            width: "15%"
                        },
                        {
                            field: 'xq',
                            title: '详情',
                            width: "15%",
                        },
                    ]],
                    done: (res, curr, count) => {
                    },
                });
            },
            regModel() {
                layui.layer.open({
                    type: 1,
                    title: "算法注册",
                    area: ['474px', '501px'],
                    content: layui.laytpl($("#iFrame_addModel").html()).render(function () {
                        $('#iFrame_addMod').html()
                    }),
                    btn: ['确定', '取消']
                });
            }
        }
    });

    $('.container-top button').on('click', function () {
        var $this = $(this);
        var _index = $this.index();
        if (_index == 0) {
            $('.container-content-right-content-mxlb,#start,#stop').css('display', 'inline-block');
            $('.container-content-right-content-yjgz').css('display', 'none');
            $('#zqrw').css({
                'color': '#0096EB',
                "border": "1px solid #0096EB"
            });
            $('#yxr').css({
                'color': ' rgba(0,0,0,0.60)',
                "border": "1px solid #000"
            });
        }
        if (_index == 1) {
            vm.initYxrzTable();
            $('.container-content-right-content-mxlb,#start,#stop').css('display', 'none');
            $('.container-content-right-content-yjgz').css('display', 'inline-block');
            $('#zqrw').css({
                'color': ' rgba(0,0,0,0.60)',
                "border": "1px solid #000"
            });
            $('#yxr').css({
                'color': '#0096EB',
                "border": "1px solid #0096EB"
            });
        }
    });
})()