<template>
    <div>


        <div class="i-layout-page-header" style="margin-bottom: 20px;">
            <i-page-header title="照片墙审核" ></i-page-header>
        </div>

        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate">
                <Row type="flex" :gutter="24">
                    <Col >
                        <FormItem label="会员UID：" label-for="uid">
                            <Input  placeholder="请输入会员UID" v-model="formValidate.uid"/>
                        </FormItem>
                    </Col>
                    <Col >
                        <FormItem label="会员UUID：" label-for="uuid">
                            <Input  placeholder="请输入会员UUID" v-model="formValidate.uuid"/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem label="手机账号：" label-for="mobile">
                            <Input  placeholder="请输入手机账号" v-model="formValidate.mobile"/>
                        </FormItem>
                    </Col>
					<Col>
						<FormItem label="性别：">
							<RadioGroup v-model="formValidate.sex" type="button">
								<Radio label="">全部</Radio>
								<Radio label="0">保密</Radio>
								<Radio label="1">男</Radio>
								<Radio label="2">女</Radio>
							</RadioGroup>
						</FormItem>
					</Col>
                    <Col>
                        <FormItem style="width: 280px" label="选择时间：" label-for="user_time">
                            <div style="width: 280px;height: 33px;"></div>
                            <div>
                                <el-col >
                                    <DatePicker style="width: 100%" format="yyyy-MM-dd HH:mm:ss" v-model="formValidate.time" type="datetimerange" placement="bottom-start" placeholder="自定义时间" :options="options"></DatePicker>
                                </el-col>
                            </div>
                        </FormItem>
                    </Col>
                    <Col class="ivu-text-right userFrom">
                        <FormItem style="margin-top: 30px">
                            <Button type="primary" icon="ios-search" label="default" class="mr15"  @click="getSearch">搜索</Button>
                        </FormItem>
                    </Col>


                </Row>
            </Form>

            <Col class="fx-r">
                <Button type="success" @click="handleOpen()" style="margin-right: 10px">审核通过</Button>
            </Col>


            <div class="muser-order-container clearfix">
                <div class="muser-tab-continer">
                    <a class="muser-tab-a" :class="status==''   ? 'active':''" @click="statusChange('')">全部 ({{ allCount }})</a>
                    <a class="muser-tab-a" :class="status=='0'  ? 'active':''" @click="statusChange('0')">待审核({{ waitCount }})</a>
                    <a class="muser-tab-a" :class="status=='1'  ? 'active':''" @click="statusChange('1')">已通过({{ yesCount }})</a>
                    <a class="muser-tab-a" :class="status=='-1'  ? 'active':''" @click="statusChange('-1')">已驳回({{ noCount }})</a>
                </div>

                <el-table
                        :data="listData"
                        height="500px"
                        v-loading="isLoad"
                        @selection-change="tapSelectChange"
                >

                    <el-table-column
                            type="selection"
                            align="center"
                            width="55">
                    </el-table-column>

                    <el-table-column
                            label="序号"
                            align="center"
                            width="80">
                        <template slot-scope="scope">
                            {{ (page.page - 1) * page.pageSize + scope.$index + 1 }}
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="会员"
                            align="center"
                            width="150">
                        <template slot-scope="scope">
                            <div>【{{scope.row.uuid}}】</div>
                            <div v-if="scope.row.mobile">tel:{{ scope.row.mobile }}</div>
							<div v-if="scope.row.sex == 0"><el-tag type="info">保密</el-tag></div>
							<div v-if="scope.row.sex == 1"><el-tag>男</el-tag></div>
							<div v-if="scope.row.sex == 2"><el-tag type="danger">女</el-tag></div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="nickname"
                            label="昵称"
                            width="150">
                    </el-table-column>
					<el-table-column
					        prop="type_name"
							align="center"
					        label="类型"
					        width="100">
					</el-table-column>
					<el-table-column
					        prop="resources"
					        label="资源信息"
							align="center"
					        width="200">
							<template slot-scope="scope">
								<el-image style="height: 80px;" fit="contain" :preview-src-list="[scope.row.resources]" :src="scope.row.resources"></el-image>
							</template>
					</el-table-column>
					<el-table-column
					        prop="coverimg"
					        label="封面图"
							align="center"
					        width="200">
							<template slot-scope="scope">
								<el-image v-if="scope.row.coverimg" style="height: 80px;" fit="contain" :preview-src-list="[scope.row.coverimg]" :src="scope.row.coverimg"></el-image>
							</template>
					</el-table-column>
					<el-table-column
					        prop="batch"
							align="center"
					        label="批次"
					        width="100">
					</el-table-column>
					<el-table-column
                            prop="status"
                            align="center"
                            label="状态"
                            fixed="right"
                            width="100">
                        <template slot-scope="scope">
                            <div v-if="scope.row.status == 0">待审核</div>
                            <div v-if="scope.row.status == 1" style="color: #00ac1c">已通过</div>
                            <div v-if="scope.row.status == -1" style="color: #9B9B9B">已驳回</div>

                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="time"
                            label="提交时间"
                            width="200">
                    </el-table-column>

                    <el-table-column
                            prop="audit_time"
                            label="处理时间"
                            width="200">
                    </el-table-column>

                    <el-table-column
                            prop="handle"
                            label="操作"
                            width="100"
                            fixed="right"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <div v-if="scope.row.status == 0">
                                <a @click="tapOk(scope.row,1)">通过</a>
                                <Divider type="vertical"></Divider>
                                <a @click="tapQr(scope.row,-1)">拒绝</a>
                            </div>
                            <div v-else>
                                操作员:{{scope.row.admin_name }}
                                <span v-if="scope.row.audit_msg != ''">({{ scope.row.audit_msg}})</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 10px;">
                    <Page :total="page.count" :page-size="page.pageSize" show-total show-elevator @on-change="pageChange"/>
                </div>
            </div>
        </Card>

        <!--审核确认、审核拒绝-->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="40%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="用户">
                    {{ user.mobile}}[uuid:{{user.uuid}}]
                </el-form-item>

                <el-form-item label="资源信息">
					<div>
						<el-image style="height: 80px;" fit="contain" :z-index="2001" :preview-src-list="[user.resources?user.resources:'']" :src="user.resources?user.resources:''"></el-image>
					</div>
                </el-form-item>
				<el-form-item label="封面图">
				    <div>
				    	<el-image v-if="user.coverimg" style="height: 80px;" fit="contain" :z-index="2001" :preview-src-list="[user.coverimg?user.coverimg:'']" :src="user.coverimg?user.coverimg:''"></el-image>
				    </div>
				</el-form-item>

                <el-form-item label="操作说明">
                    <el-input placeholder="请输入操作说明！" v-model="form.mono"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="tapTransmatic">确 定</el-button>
      </span>
        </el-dialog>
        <ui-loading :text="loadText" v-if="isLoading"></ui-loading>
    </div>
</template>


<script>
    import IPageHeader from "../../../layouts/system/page-header/index";
    import {SystemUserWallList, SystemUserWallSub,SystemUserWallInit} from "../../../api/system/audit";
    import UiLoading from "../../../ui/loading/index";
    import {export_json_to_excel, export_read_to_excel} from "../../../libs/Export2Excel";
    export default {
        name: "user_Wall",
        components: {UiLoading, IPageHeader},
        computed: {},
        data() {
            return {
                listData:[],
                tableSelect:[],
                dialogVisible:false,
                dialogVisible2:false,
                isLoad : true,
                loadText:"",
                isLoading:false,
                tempXls:[],
                isXlsType:false,
                title:"",
				options: {
				    shortcuts: [
				        {
				            text: '今天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
				                return [start, end];
				            }
				        },
				        {
				            text: '昨天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)));
				                end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
				                return [start, end];
				            }
				        },
				        {
				            text: '最近7天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)));
				                return [start, end];
				            }
				        },
				        {
				            text: '最近30天',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));
				                return [start, end];
				            }
				        },
				        {
				            text: '本月',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
				                return [start, end];
				            }
				        },
				        {
				            text: '本年',
				            value() {
				                const end = new Date();
				                const start = new Date();
				                start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
				                return [start, end];
				            }
				        }
				    ]
				},
                exportsType:0,
                form:{
                    id   : "",
                    mono : "",
					type : 0,
                },
                user:{},
                formValidate: {
                    mobile     : '',
                    type        : '',
                    uid         : '',
					uuid        : '',
					sex         : '',
                    time    	: [],
                    // regtime     : [],
                    // postime     : "",
                    // day1        : "",
                    // day2        : ""
                },
                // 搜索区域
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                status : "",
                allCount    : 0,
                waitCount     : 0,
                yesCount    : 0,
                noCount    : 0,
                //订单分页
                page : {
                    count : 0,
                    pageSize : 0,
                    page : 1
                }
            }
        },

        created() {
            this.initView();
        },
        methods: {
            initView:function(){
                SystemUserWallInit()
                    .then(res=>{
                        if(res.code == 200) {
                            this.allCount = res.data.allCount;
                            this.waitCount = res.data.waitCount;
                            this.yesCount = res.data.yesCount;
                            this.noCount = res.data.noCount;
                        }
                    });
                this.getData();
            },
            getData:function () {
                var post = {...this.formValidate, page : this.page.page};
                post.status = this.status;
                this.isLoad = true;
                SystemUserWallList(post)
                    .then(res=>{
                        this.isLoad = false;
                        if(res.code == 200) {
                            this.listData = res.data.list;
                            this.page.pageSize = res.data.pageSize;
                            this.page.count = res.data.pageCount;
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        this.isLoad = false;
                        this.listData = [];
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            /**
             * 确认审核通过
             */
            tapOk:function(row,type){
                this.form.id = row.id;
                this.title = "审核通过";
                this.user = JSON.parse(JSON.stringify(row));
                this.form.mono = '';
				this.form.type = type;
                this.dialogVisible = true;
            },
            tapQr:function(row,type){
                this.form.id = row.id;
                this.title = "审核拒绝";
                this.user = JSON.parse(JSON.stringify(row));
                this.form.mono = '';
				this.form.type = type;
                this.dialogVisible = true;
            },
            /**
             * ！提交 ！
             */
            tapTransmatic:function(){
                let loading = this.$loading('提交数据中..');
                SystemUserWallSub({
                    mono : this.form.mono,
                    id   : this.form.id,
					type : this.form.type,
                })
                    .then(res=>{
                        loading.close();
                        if(res.code == 200) {
							this.$message({message: res.msg,type: 'success'});
                            this.dialogVisible = false;
                            this.getData();
                        } else {
                            this.$alert(res.msg, '系统提示');
                        }
                    })
                    .catch(err=>{
                        console.log(err);
                        this.isLoad = false;
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            pageChange: function (index) {
                this.page.page = index;
                this.getData();
            },

            // 表格搜索
            getSearch () {
                this.page.page = 1;
                this.getData();
            },

            statusChange: function (status) {
                this.status = status;
                this.page.page = 1
                this.getData()
            },

            tapUserItem: function (uid) {
                this.openEl(uid);
            },


            tapSelectChange:function(ev){
               this.tableSelect = ev;
            },

            handleOpen:function(){
                let idsAr = [];
                for(var i in this.tableSelect) {
                    idsAr.push(this.tableSelect[i].id);
                }
                if(idsAr.length <= 0) {
                    this.$Message.error('请选择栏目');
                    return;
                }
                this.$confirm('批量审核成功吗?, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.isLoading = true;
                    this.loadText = "执行1/" + this.tableSelect.length  ;
                    this.handleOk(0,()=>{
                        this.getData();
                    });
                });
            },
			//批量通过
            handleOk:function(index,fn) {
                if(index >= this.tableSelect.length) {
                    this.isLoading = false;
                    fn();
                    return;
                }
                SystemUserWallSub({
                    id: this.tableSelect[index].id,
                    mono:"",
                    type:1
                    })
                    .then(res => {
                        if(res.code == 200) {
                            var id = this.tableSelect[index].id;
                            index++;
                            this.loadText = "执行" + (index + 1) + "/" + this.tableSelect.length;
                            this.handleOk(index, fn);
                        } else {
                            this.isLoading = false;
                            this.$alert(res.msg, '系统提示');
                        }
                    })
                    .catch(err => {
                        this.isLoading = false;
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },

            /**
             *  格式数据
             *  @filterVal  格式头
             *  @tableData  用来格式的表格数据
             */
            formatJson (filterVal, tableData) {
                return tableData.map(v => {
                        return filterVal.map(j => {
                            return v[j]
                        })
                    }
                )
            },
        }
    }
</script>
<style scoped>
    .muser-order-container{background: #ffffff;padding: 20px;margin-bottom: 20px;}

    .muser-order-count-nav{padding: 0px 50px;width:30%;position: relative;}
    .muser-order-count-nav-name{font-size: 14px;color:#9B9B9B;height:20px;line-height: 20px;}
    .muser-order-count-nav-val{display: inline-block;height:42px;line-height: 42px;font-size: 32px;color:#333333;font-weight: 700;}
    .muser-order-count-nav-unit{display: inline-block;height:20px;line-height: 20px;font-size: 14px;color:#333333;}
    .muser-order-count-line{height:72px;width:1px;background: #EEEEEE;}
    a.muser-order-count-a{display: block;position: absolute;top:20px;right:50px;height:32px;line-height: 32px;padding: 0px 20px;border:1px solid #FFB300;border-radius: 20px;color:#FFB300;font-size: 14px;}
    a.muser-order-count-a.muser-afull{background: #FFB300;color:#ffffff}
    .user-show{background: #ffffff;padding: 0px 15px;}
    .user-show-title{height:32px;line-height: 32px;padding-left: 7px;position: relative;font-size: 16px;color:#333333}
    .user-show-title .sline{width: 3px;height: 14px;background: #EA312B;border-radius: 2px;position: absolute;top:9px;left:0px}
    .user-show-content{}

    table.muser-order-table{width:100%;border:1px solid #f0f0f0}
    table.muser-order-table tr:nth-child(odd){background: #F7F7F7;}
    table.muser-order-table tr th{padding: 12px 0px;font-size: 13px;color:#848484;text-align: center;}
    table.muser-order-table tr td{padding: 16px 0px;font-size: 12px;color:#333333;text-align: center;border-top:1px solid #f0f0f0}
    a.muser-order-table-a{font-size: 12px;color:#1492E6;}
    .muser-order-table-line{display: inline-block;height:10px;background: rgba(112,112,112,0.31);width:1px;margin: 0px 4px;}

    .spping{ position: absolute; width: 100%;height: 100%;z-index: 9;top: 0;left: 0; background: rgba(255,255,255,0.5);}

    .muser-tab-continer{border-bottom:1px solid #EEEEEE}
    a.muser-tab-a{display: inline-block;padding: 0px 28px;height:42px;line-height: 42px;border-bottom:3px solid transparent;font-size: 17px;color:#595959;}
    a.muser-tab-a.active{border-bottom:3px solid #EA312B;color:#EA312B}
</style>
