<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="手机号：" label-for="mobile">
					        <Input  placeholder="请输入提交的手机号" v-model="formValidate.mobile"/>
					    </FormItem>
					</Col>
                    <Col>
                        <FormItem label="姓名：" label-for="keyword">
                            <Input  placeholder="请输入提交的姓名" v-model="formValidate.keyword"/>
                        </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('')">全部 ({{ all }})</a>
                    <a class="muser-tab-a" :class="status=='0'  ? 'active':''" @click="statusChange('0')">待审核({{ wait }})</a>
                    <a class="muser-tab-a" :class="status=='1'  ? 'active':''" @click="statusChange('1')">已通过({{ ok }})</a>
                    <a class="muser-tab-a" :class="status=='-1'  ? 'active':''" @click="statusChange('-1')">已驳回({{ no }})</a>
                </div>
                <el-table :data="listData" height="500px" v-loading="isLoad" @selection-change="tapSelectChange">
                    <el-table-column prop="id"                      label="ID" align="center" width="80"></el-table-column>
                    <el-table-column prop="uid"                     label="用户UID" align="center" width="80"></el-table-column>
                    <el-table-column prop="name"                    label="真实姓名" width="100"></el-table-column>
					<el-table-column prop="mobile"                  label="手机号码" width="100"></el-table-column>
					<el-table-column prop="idcard"                  label="身份证号" width="150"></el-table-column>
					<el-table-column prop="birthday"                label="出生日期" width="100"></el-table-column>
					
					<el-table-column prop="user_work_type_id" align="center" label="申请职称" width="100">
					    <template slot-scope="scope">
					        <div v-if="scope.row.user_work_type_id == 0" style="color: #9B9B9B">普通用户</div>
					        <div v-if="scope.row.user_work_type_id>0" style="color: #00ac1c">{{scope.row.user_work_type_title}}</div>
					    </template>
					</el-table-column>
					
					
					
					<el-table-column prop="service_time_type_title" label="收费类型" width="100"></el-table-column>
					<el-table-column prop="service_min_price"       label="最低服务价格" width="120"></el-table-column>
					<el-table-column prop="service_max_price"       label="最高服务价格" width="120"></el-table-column>
					<el-table-column prop="service_area"            label="服务区域" width="150">
						<template slot-scope="scope">
							<el-tag v-for="(item,index) in scope.row.service_area_all" :key="index" type="warning" size="mini">
								{{item[0].name+'-'+(item[1]?item[1].name:'')+'-'+(item[2]?item[2].name:'')}}
							</el-tag>
						</template>
						
					</el-table-column>
					<el-table-column prop="service_project"            label="服务内容" width="200">
						<template slot-scope="scope">
							<el-tag v-for="(item,index) in scope.row.service_project_ar" :key="index" type="warning" size="mini">
								{{item.title}}
							</el-tag>
						</template>
						
					</el-table-column>
					<!-- <el-table-column prop="service_intro_content"      label="自我评定" width="200"></el-table-column> -->
					<el-table-column prop="service_label_ar" label="介绍标签" width="80" align="center">
					     <template slot-scope="scope">
							<el-tag v-for="(item,index) in scope.row.service_label_ar" :key="index" style="margin-right: 5px;margin-bottom: 5px;">{{item}}</el-tag>
					     </template>
					 </el-table-column>
					<!-- <el-table-column prop="service_intro_imgs"         label="评定图片" width="200">
						<template slot-scope="scope">
							<img v-for="(item,index) in scope.row.service_intro_imgs" :key="index" v-lazy="item" :src="item" v-image-preview style="width: 60px;cursor: pointer;"/>
						</template>
						
					</el-table-column> -->
					<!-- <el-table-column prop="service_audit_imgs"         label="服务认证" width="200">
						<template slot-scope="scope">
							<img v-for="(item,index) in scope.row.service_audit_imgs" :key="index" v-lazy="item" :src="item" v-image-preview style="width: 60px;cursor: pointer;"/>
						</template>
						
					</el-table-column> -->
					<el-table-column prop="status" align="center" label="状态" 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="150"></el-table-column>
                    <el-table-column prop="admin_time" label="处理时间" width="150"></el-table-column>
                    <el-table-column prop="handle"     label="操作" width="200" fixed="right" align="right">
                        <template slot-scope="scope">
							<div v-if="scope.row.status == 0">
								<el-button type="primary" size="mini"  @click="tapOk(scope.row,1)" >审核通过</el-button>
								<el-button type="danger" size="mini"  @click="tapQr(scope.row,-1)">审核驳回</el-button>
							</div>
							<div style="margin-top: 12px;">
								<i-link :to="'/system/audit/infoAuditItem?id=' + scope.row.id + '&title=[' + scope.row.user_nickname + ']资料审核详情' "><el-button size="mini">审核详情</el-button></i-link>
							</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="操作说明">
                    <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="auditSub">确 定</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 {SystemInfoAuditList, SystemInfoAuditSub,SystemInfoAuditInit} 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: "AuditInfoAudit",
        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: {
                    keyword     : '',
                    uid         : '',
					mobile      : '',
                    time    	: [],
                },
                // 搜索区域
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                status : "",
                all    : 0,
                no     : 0,
                ok     : 0,
                wait   : 0,
                //订单分页
                page : {
                    count : 0,
                    pageSize : 0,
                    page : 1
                }
            }
        },

        created() {
            this.initView();
        },
        methods: {
            initView:function(){
                SystemInfoAuditInit().then(res=>{
                    if(res.code == 200) {
                        this.all = res.data.all;
                        this.no  = res.data.no;
                        this.ok  = res.data.ok;
                        this.wait= res.data.wait;
                    }
                });
                this.getData();
            },
            getData:function () {
                var post = {...this.formValidate, page : this.page.page};
                post.status = this.status;
                this.isLoad = true;
                SystemInfoAuditList(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;
            },
            /**
             * ！提交 ！
             */
            auditSub:function(){
                let loading = this.$loading('提交数据中..');
                SystemInfoAuditSub({
                    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.initView();
                    } else {
                        this.$alert(res.msg, '系统提示');
                    }
                }).catch(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()
            },
            tapSelectChange:function(ev){
               this.tableSelect = ev;
            },
        }
    }
</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>
