<template>
    <div class="container areaCenter form-table">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>当前位置</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.name[0]}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="assetsContent">
            <div class="formDiv">
                <el-form :inline="true" :model="formInline" class="search-form-inline">
                    <el-form-item label="用户ID">
                        <el-input v-model="formInline.userId" placeholder="精确查询" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div class="btn-group marginL10">
                            <button class="vpnButton primary" type="button" @click="search" size="mini">查询</button >
                            <button class="vpnButton cancel" type="button" @click="cancel" size="mini">清空</button>
                        </div>
                    </el-form-item>
                    <!--<el-form-item class="pull-right">-->
                        <!--<div class="btn-group marginL10">-->
                            <!--<button class="vpnButton primary" type="button" @click="newApplication">新建</button>-->
                            <!--<button class="vpnButton cancel" type="button" @click="delSelect">批量删除</button>-->
                        <!--</div>-->
                    <!--</el-form-item>-->
                </el-form>
            </div>
            <div class="assetsList">
                <el-scrollbar>
                        <el-table :data="tableData" style="width: 100%" size="mini" class="commonTable" >
                        <!--<el-table-column prop="checked" align="center" min-width="6%">-->
                            <!--<template slot="header" slot-scope="scope">-->
                                <!--<a ref="javasctipt" style="cursor: pointer"  @click="toggleSelection()">全选</a>-->
                                <!--<a ref="javasctipt" style="cursor: pointer"  @click="toggleSelect()">/反选</a>-->
                            <!--</template>-->
                            <!--<template  slot-scope="scope">-->
                                <!--<input type='checkbox'  v-model="scope.row.checked"  >-->
                            <!--</template>-->
                        <!--</el-table-column>-->
                        <el-table-column prop="userId" label="用户ID" align="center" min-width="6%"></el-table-column>
                        <el-table-column prop="normalUserNum" label="普通用户数量" align="center" min-width="6%"></el-table-column>
                        <el-table-column prop="seedlingNum" label="幼苗数量" align="center" min-width="6%"></el-table-column>
                        <el-table-column prop="bronzeTreeNum" label="青铜树数量" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="silverTreeNum" label="白银树数量" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="goldTreeNum" label="黄金树数量" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="farmerNum" label="农场主数量" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="forestStartNum" label="森林之星数量" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="partnerNum" label="西田森合伙人数量" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="monthyCount" label="用户当月消费金额" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="historyCount" label="用户累计消费金额" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间" align="center" min-width="8%"  :show-overflow-tooltip="true"></el-table-column>
                    </el-table>
                </el-scrollbar>
            </div>
            <el-pagination background class="alignc" @current-change="handleCurrentChange"  @size-change ="sizeChange" :current-page="page.currentPage" :page-size="page.pageSize" layout="total, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </div>
        <!--<el-dialog class="appFormCommon"  :close-on-click-modal="false" :visible.sync="dialogDataDetail"  @close="resetForm('formDataApp')" >-->
            <!--<div class="managerInfo">-->
                <!--<div class="message-box">-->
                    <!--<div class="message-box-header">-->
                        <!--<div class="message-box-title">-->
                            <!--<span>新建</span>-->
                        <!--</div>-->
                        <!--<i class="icon icon-close" @click="dialogDataDetail = false"></i>-->
                    <!--</div>-->
                    <!--<div class="message-box-content">-->
                        <!--<el-form :model="formDataApp"  ref="formDataApp" :rules="rules" label-width="100px">-->
                            <!--<el-form-item label="区域名称："  prop="areaName">-->
                                <!--<el-input type="text" v-model="formDataApp.areaName" ></el-input>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item label="核心IP1："  prop="areaIP1">-->
                                <!--<el-input  type="textarea" v-model="formDataApp.areaIP1" id="txt"></el-input>-->
                                <!--<p id="IPlist_lab" style="display: none;" class="error checkIPStyle"  >请输入正确的IP字段</p>-->
                                <!--<p class="cuo" id="textP"></p>-->
                            <!--</el-form-item>-->
                        <!--</el-form>-->
                    <!--</div>-->
                    <!--<div class="message-box-footer" slot="footer">-->
                        <!--<div class="message-box-btn btn-group">-->
                            <!--<button  class="vpnButton primary" @click="submitForm('formDataApp')" type="button">确定</button>-->
                            <!--<button  class="vpnButton cancel" @click="resetForm('formDataApp')" type="button">取消</button>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</el-dialog>-->
        <!--<dialog-del :show.sync="visible"  @isSure="handleSure"></dialog-del>-->
    </div>
</template>
<script>
    import $ from 'jquery'
    import "../../../style/table.scss"
    //删除弹框
    import dialogDel from '../../../components/dialog/dialogDel'
    import workService from '../../../services/fos/work.service'
    let workHttps = new workService()
    export default {
        data() {
            return {
                dialogDataDetail:false,
                delShow: false,                //删除确认框
                visible: false,
                delArr:[],
                multipleSelection: [],
                routeList: [],
                page: {currentPage: 1, pageSize: 14, total: 1},
                formInline: {
                    userId: ''
                },
                region: '',
                tableData:[],
                checked:'checked',
            }
        },
        components: {},
        mounted() {
            this.search()
        },
        methods: {

            // cellClick(row, column, cell, event){
            //     this.curEditId = row.id
            // },
            //
            // rowClickOne(row){
            //     if(row.areaCode){
            //         row.checked = true
            //     }
            //     this.checkArr = row
            // },
/*
            checkIP(){
                let obj = {}
                Object.defineProperty(obj, 'txt', {
                    get: function () {
                        return obj
                    },
                    set: function (newValue) {
                        document.getElementById('txt').value = newValue
                        let  wbval = newValue
                        let  wbvalen = wbval.length;
                        let textw='';
                        for(let y=0;y<wbvalen;y++){
                            if(wbval[y]=='，'){
                                textw+=",";
                            }else{
                                textw+=wbval[y]
                            }
                        }
                        $(".cuo").html('')
                        let text = textw.split(",");
                        let len = text.length;
                      //  let re =/^(((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))+\/([0-9]{1,3})))|((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))))$/;
                        let re =/^(((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))+\/([0-9]{1,3})))|((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))))\/([1-9]{1}|1[0-9]{1}|2[0-9]{1}|30|31)(,(((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))+\/([0-9]{1,3})))|((?:(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(?:25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))))\/([1-9]{1}|1[0-9]{1}|2[0-9]{1}|30|31))*$/;
                        for(var i=0;i<len;i++){
                            var result=  re.test(text[i]);
                            if(i+1==len){
                                if(result){
                                    $(".cuo").append('<span>'+text[i]+"</span>")
                                }else{
                                    $(".cuo").append("<span style='color: red' class='z_cuo'>"+text[i]+"</span>")
                                }
                            }else{
                                if(result) {
                                    $(".cuo").append('<span>'+text[i]+",</span>")
                                }else{
                                    $(".cuo").append("<span style='color: red' class='z_cuo'>"+text[i]+",</span>")
                                }
                            }
                        }
                        if($('#textP').find('span').hasClass('z_cuo')){
                            $('#IPlist_lab').html('请输入正确的IP字段')
                            $('#IPlist_lab').show()
                        }else{
                            $('#IPlist_lab').hide()
                        }
                    }
                })
                document.addEventListener('keyup', function (e) {
                    obj.txt = e.target.value
                })
            },*/
            //
            // //全选
            // toggleSelection() {
            //     let vm = this
            //     if (vm.tableData) {
            //         for (let i = 0; i < vm.tableData.length; i++) {
            //             vm.$set(vm.tableData[i], 'checked', !vm.tableData[i].checked)
            //         }
            //         for (let i = 0; i < vm.tableData.length; i++) {
            //             if (vm.tableData[i].checked == true) {
            //                 vm.tableData = vm.tableData.map(i => {
            //                     vm.$set(i, vm.checked, true)
            //                     return i
            //                 })
            //             }
            //         }
            //     }
            // },
            // //反选
            // toggleSelect(){
            //     let vm = this
            //     for(let j =0;j<vm.tableData.length;j++){
            //         vm.$set(vm.tableData[j],'checked',!vm.tableData[j].checked)
            //     }
            // },


            //查询
            search(){
                let vm = this;
                let param = vm.getSearchQuery()
                vm.getDataDetail(param)
            },
            cancel(){
                this.formInline = {}
                this.search()
            },

            // //取消按钮
            // resetForm(formData){
            //     this.$refs[formData].resetFields();
            //     this.dialogDataDetail = false
            // },
            //
            // //关闭
            // closeQuery(formName){
            //     let vm = this;
            //     this.$refs[formName].resetFields();
            //     vm.formDataEditor = false
            // },

            //获取当前参数
            getSearchQuery(){
                let vm = this
                let searchObj = {
                    "pageNo":vm.page.currentPage,
                    "pageSize":vm.page.pageSize
                }
                for(let key in vm.formInline){
                    if(vm.formInline[key]){
                        //key是名称
                        searchObj[key] = vm.formInline[key]
                    }
                }
                return searchObj
            },

            sizeChange(val) {
                this.page.pageSize = val;
                this.search()
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                let param = this.getSearchQuery()
                this.getDataDetail(param)
            },

            //获取信息列表
            getDataDetail(param) {
                //请求接口的方法
                let vm = this;
                //请求接口的方法
                workHttps.getRecommend(param).then((res)=>{
                    vm.tableData = res.data.list
                    vm.page.total = Number(res.data.total)
                }).catch((err=>{
                    console.log(err)
                }))
            },
          //   //新建
          //   newApplication(){
          //       let vm = this;
          //       vm.formDataApp = {}
          //       vm.dialogDataDetail = true
          //   },
          //
          //   //新建 --确定按钮
          //   submitForm(formDataApp) {
          //       let vm = this
          //       vm.$refs[formDataApp].validate((valid) =>{
          //           if(valid) {
          //               if (!vm.curEditId) {
          //                   let obj = {
          //                       "areaName": vm.formDataApp.areaName,
          //                       "areaIP1": vm.formDataApp.areaIP1
          //                   }
          //                   workHttps.getAppareaCenter(obj).then((res) => {
          //                       if (res.code === 0) {
          //                           vm.dialogDataDetail = false
          //                           vm.search()
          //                           if(res.msg == "success"){
          //                               vm.$message.success("新建成功")
          //                           }
          //                       } else {
          //                           vm.$message.error(res.msg)
          //                       }
          //                   }).catch((err => {
          //                   }))
          //               }
          //           }
          //       })
          //   },
          //
          //   //批量操作
          //   delSelect(){
          //       let vm = this
          //       vm.delArr =[]
          //       for(let i =0;i<vm.tableData.length;i++){
          //           if(vm.tableData[i].checked == true){
          //               vm.delArr.push(vm.tableData[i].areaCode)
          //           }else {}
          //       }
          //       if(vm.delArr.length){
          //           vm.visible = true
          //       }else{
          //           vm.$message.error("请先勾选将要操作的数据")
          //       }
          //   },
          //
          // /*  //批量操作 拿到数据
          //   handleSelectionChange(val) {
          //       let vm = this;
          //       vm.multipleSelection = val;
          //       vm.delArr =[]
          //       if(vm.multipleSelection.length != 0){
          //           for(let i=0;i<=vm.multipleSelection.length-1;i++){
          //               vm.delArr.push(vm.multipleSelection[i].areaCode)
          //           }
          //       }else{}
          //   },*/
          //   //确定批量删除
          //   handleSure(value){
          //       if(value) {
          //           let vm = this
          //           workHttps.getAppAreaDelete({codes: vm.delArr}).then((res) => {
          //               if (res.code === 0) {
          //                   if(res.msg == "success"){
          //                       vm.$message.success("删除成功")
          //                   }
          //               } else {
          //                   vm.$message.error(res.msg)
          //               }
          //               vm.visible = false
          //               vm.search()
          //           }).catch((err => {
          //           }))
          //       }
          //   },

        },

    }
</script>


