<template>
    <div class="consumer-info">
        <sum-head title="用户列表" text="总用户数" :sum="list.total" >
            有效用户：<span>{{ list.totalValidMember }}</span>
        </sum-head>

        <div class="filter-container">
            <span>所属区域：</span>
            <el-select v-model="listQuery.manageAreaId" size="small" placeholder="请选择" class="filter-item" style="width: 160px">
                <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <span>押金状态：</span>
            <el-select v-model="listQuery.ifPayDeposit" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in depositOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <span>实名认证：</span>
            <el-select v-model="listQuery.ifIdentityCardCertified" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in realOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <span>使用状态：</span>
            <el-select v-model="listQuery.ifDisenable" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in useOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <el-input placeholder="昵称/手机号码/真实姓名" v-model="listQuery.keyword" size="small" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="curPage(1)">搜索</el-button>
        </div>

        <el-table
            v-loading="listLoading"
            :data="list.resultList"
            element-loading-text="Loading"
            size="small"
            border
            fit>
            <el-table-column align="center" label="头像" width="90">
                <template slot-scope="scope">
                    <img :src="scope.row.headimg || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80'" width="50">
                </template>
            </el-table-column>
            <el-table-column prop="username" label="昵称" align="center"></el-table-column>
            <el-table-column prop="mobile" label="手机号码" align="center"></el-table-column>
            <el-table-column label="押金状态" align="center">
                <template slot-scope="scope">
                    {{ scope.row.ifPayDeposit | stateFilter }}
                </template>
            </el-table-column>
            <el-table-column label="实名认证" align="center">
                <template slot-scope="scope">
                    {{ scope.row.ifIdentityCardCertified | realFilter }}
                </template>
            </el-table-column>
            <el-table-column prop="truename" label="真实姓名" align="center"></el-table-column>
            <el-table-column prop="identityCardNumber" label="身份证号码" align="center" width="160"></el-table-column>
            <el-table-column prop="thirderType" label="第三方登录" align="center"></el-table-column>
            <el-table-column prop="manageAreaName" label="所属区域" align="center"></el-table-column>
            <el-table-column align="center" label="注册时间" width="160">
                <template slot-scope="scope">
                    <i class="el-icon-time"/>
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="使用状态" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.ifDisenable | useFilter">{{ scope.row.ifDisenable | textFilter }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="160">
                <template slot-scope="scope">
                  <!--<el-button type="success" size="mini" @click="checkInfo(scope.row)">详情</el-button>-->
                  <el-button type="primary" size="mini" @click="editInfo(scope.row)">设置</el-button>
                  <!--<el-button type="danger" size="mini" @click="delInfo(scope.row.id, scope.$index)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container" v-show="!listLoading">
            <el-pagination background layout="prev, pager, next" :page-size="10" :total="list.total" @current-change="curPage"></el-pagination>
        </div>
        <user-details ref="userDetails"></user-details>

        <user-edit ref="userEdit"  @getList="getList"></user-edit>
    </div>
</template>

<script>
import SumHead from '@/components/SumHead'
import userDetails from './components/userDetails'
import userEdit from './components/userEdit'

import api from '@/api/member'
export default {
    name: 'consumerInfo',
    components: {
        SumHead,
        userDetails,
        userEdit
    },
    filters: {
        useFilter: state => state ? 'danger' : 'success',
        textFilter: state => state ? '封号' : '正常',
        stateFilter(bol) {
            return bol ? '已交纳' : '未交纳'
        },
        realFilter(bol) {
            return bol ? '已认证' : '未认证'
        },
    },
    data() {
        return {
            listQuery: {
                pageNumber: '1',
                pageSize: '10',
                // orderDirection: 'desc',
                // orderProperty: 'create_time',
                ifPayDeposit: '',
                ifIdentityCardCertified: '',
                ifDisenable: '',
                manageAreaId: '',
                keyword: undefined
            },
            depositOptions: [
                { label: '全部', value: '' },
                { label: '已交纳', value: '1' },
                { label: '未交纳', value: '0' }
            ],
            realOptions: [
                { label: '全部', value: '' },
                { label: '已实名', value: '1' },
                { label: '未实名', value: '0' }
            ],
            useOptions: [
                { label: '全部', value: '' },
                { label: '正常', value: '0' },
                { label: '封号', value: '1' }
            ],
            list: {},
            listLoading: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formData: {},
        }
    },
    methods: {
        getList() {
            this.listLoading = true;
            api.getMemberList(this.listQuery).then(res => {
                this.list = res.results;
                this.listLoading = false;
            }).catch(err => {
                console.log(err)
            })
        },
        curPage(val) {
            console.log(val)
            this.listQuery.pageNumber = val
            this.getList()
        },
        checkInfo(data) {
            this.$refs.userDetails.open(data)
        },
        editInfo(data) {
            this.$refs.userEdit.open(data)
        },
        delInfo(id, index) {
            this.$confirm('你确定要删除这条用户信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.delMember({ id }).then(res => {
                    console.log(res)
                    this.list.resultList.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    created() {
        this.getList()
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.consumer-info {
    position: relative;
    padding: 5px 16px 0;
    margin-bottom: 30px;

    .filter-container {
        padding: 10px 0 10px 12px;
        .filter-item {
            width: 90px;
            margin-right: 20px;
        }
    }

    .pagination-container {
        margin: 20px 0 30px;
        float: right;
    }
}
</style>
