<template>
  <div>
	<i-page-header :title="pageTitle"></i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <el-form ref="formData" :model="formData" label-width="120px">
      	<el-tabs v-model="formActiveName">
      		<el-tab-pane label="基础信息" name="tab_base" style="min-height:600px">
				<el-divider content-position="left">审核信息</el-divider>
				<Row :gutter="24">
					<Col span="6">
					  <el-form-item label="审核状态">
					    <el-tag v-if="data.status=='0'" effect="dark" size="mini" >待审核</el-tag>
						<el-tag v-if="data.status=='1'" effect="dark" size="mini" type="success">已通过</el-tag>
						<el-tag v-if="data.status=='-1'" effect="dark" size="mini" type="danger">已驳回</el-tag>
					  </el-form-item>
					</Col>
					<Col span="6" v-if="data.status!=0">
					  <el-form-item label="审核时间">
						<el-input v-model="data.admin_time" :readonly="true" ></el-input>
					  </el-form-item>
					</Col>
					<Col span="6" v-if="data.status!=0">
					  <el-form-item label="审核人">
						<el-input v-model="data.admin_name" :readonly="true" ></el-input>
					  </el-form-item>
					</Col>
				</Row>
				<Row :gutter="24" v-if="data.admin_mono">
					<Col span="12">
					  <el-form-item label="审核内容">
					    <el-input type="textarea"  :autosize="{ minRows: 6, maxRows: 30}" v-model="data.admin_mono" :readonly="true"></el-input>
					  </el-form-item>
					</Col>
				</Row>
				<!-- <el-divider content-position="left">基本数据</el-divider> -->
				<!-- <Row :gutter="24">
				  <Col span="6">
				    <el-form-item label="真实姓名">
				      <el-input v-model="data.name" :readonly="true"></el-input>
				    </el-form-item>
				  </Col>
				  <Col span="6">
				    <el-form-item label="职业名称">
				      <el-tag effect="dark"> {{data.user_work_type_title?data.user_work_type_title:"普通用户" }}</el-tag>
				    </el-form-item>
				  </Col>
				  <Col span="8">
				    <el-form-item label="身份证">
				      <el-input v-model="data.idcard" :readonly="true"></el-input>
				    </el-form-item>
				  </Col>
				</Row> -->
				<!-- <Row :gutter="24">
				  <Col span="6">
				    <el-form-item label="手机号码">
				      <el-input v-model="data.mobile" :readonly="true"></el-input>
				    </el-form-item>
				  </Col>
				  <Col span="6">
				    <el-form-item label="籍贯">
				      <el-input v-model="data.ancestral_place" :readonly="true"></el-input>
				    </el-form-item>
				  </Col>
				  <Col span="6">
				    <el-form-item label="学历">
				      <el-input v-model="data.education" :readonly="true"></el-input>
				    </el-form-item>
				  </Col>
				</Row> -->
				<!-- <Row :gutter="24">
				  <Col span="6">
				    <el-form-item label="出生日期">
				      <el-input v-model="data.birthday" :readonly="true"></el-input>
				    </el-form-item>
				  </Col>
				  <Col span="6">
				    <el-form-item label="从业时长">
				      <el-input v-model="data.work_year" :readonly="true"><template slot="append">年</template></el-input>
				    </el-form-item>
				  </Col>
				</Row> -->
				<!-- <Row :gutter="24">
					<Col span="6">
					  <el-form-item label="名族">
					    <el-input v-model="data.minority" :readonly="true"></el-input>
					  </el-form-item>
					</Col>
					<Col span="6">
					  <el-form-item label="星座">
					    <el-input v-model="data.constellation" :readonly="true"></el-input>
					  </el-form-item>
					</Col>
					<Col span="6">
					  <el-form-item label="生肖">
					    <el-input v-model="data.twelve" :readonly="true"></el-input>
					  </el-form-item>
					</Col>
					
				</Row> -->
				
				
				<el-divider content-position="left">认证信息</el-divider>
				<!-- <Row :gutter="24">
				  <Col span="6">
				    <el-form-item label="收费类型">
				      <el-input v-model="data.service_time_type_title" :readonly="true"></el-input>
				    </el-form-item>
				  </Col>
				  <Col span="6">
				    <el-form-item label="最低服务价格">
				      <el-input v-model="data.service_min_price" :readonly="true"><template slot="append">元</template></el-input>
				    </el-form-item>
				  </Col>
				  <Col span="6">
				    <el-form-item label="最高服务价格">
				      <el-input v-model="data.service_max_price" :readonly="true"><template slot="append">元</template></el-input>
				    </el-form-item>
				  </Col>
				</Row> -->
				<!-- <Row :gutter="24">
				  <Col span="24">
				    <el-form-item label="服务区域">
				      <el-tag effect="dark" v-for="(item,index) in data.service_area_all" :key="index" size="mini" style="margin-right: 10px;margin-bottom: 10px;">
				      	{{item[0].name+'-'+(item[1]?item[1].name:'')+'-'+(item[2]?item[2].name:'')}}
				      </el-tag>
				    </el-form-item>
				  </Col>
				</Row>
				<Row :gutter="24">
				  <Col span="24">
				    <el-form-item label="服务内容">
				      <el-tag effect="dark" v-for="(item,index) in data.service_project_ar" :key="index" size="mini" style="margin-right: 10px;margin-bottom: 10px;">
				      	{{item.title}}
				      </el-tag>
				    </el-form-item>
				  </Col>
				</Row>
				<Row :gutter="24">
				  <Col span="12">
				    <el-form-item label="自我评定">
				      <el-input type="textarea"  :autosize="{ minRows: 6, maxRows: 30}" v-model="data.service_intro_content" :readonly="true"></el-input>
				    </el-form-item>
				  </Col>
				</Row>
				<Row :gutter="24">
				  <Col span="24">
				    <el-form-item label="介绍标签">
				      <el-tag effect="dark" v-for="(item,index) in data.service_label_ar" :key="index" size="mini" style="margin-right: 10px;margin-bottom: 10px;">
				      	{{item}}
				      </el-tag>
				    </el-form-item>
				  </Col>
				</Row> -->
				<!-- <Row :gutter="24">
				  <Col span="24">
				    <el-form-item label="介绍图片">
						<div class="clearfix" style="width: 100%;">
							<div class="upimg-item fx-r fx-bc fx-ac" style="" v-for="(item,index) in data.service_intro_imgs" :key="index">
								<img v-lazy="item" :src="item" v-image-preview/>
							</div>
						</div>
				    </el-form-item>
				  </Col>
				</Row>
				<Row :gutter="24">
				  <Col span="24">
				    <el-form-item label="服务照片">
						<div class="clearfix" style="width: 100%;">
							<div class="upimg-item fx-r fx-bc fx-ac" style="" v-for="(item,index) in data.service_imgs" :key="index">
								<img v-lazy="item" :src="item" v-image-preview/>
							</div>
						</div>
				    </el-form-item>
				  </Col>
				</Row> -->
				<!-- <Row :gutter="24">
				  <Col span="24">
				    <el-form-item label="我的证书">
						<div class="clearfix" style="width: 100%;">
							<div class="upimg-item fx-r fx-bc fx-ac" style="" v-for="(item,index) in data.service_audit_imgs" :key="index">
								<img v-lazy="item" :src="item" v-image-preview/>
							</div>
						</div>
				    </el-form-item>
				  </Col>
				</Row> -->
				
				<Row :gutter="24">
				  <Col span="24">
				    <el-form-item label="认证截图">
						<div class="clearfix" style="width: 100%;">
							<div class="upimg-item fx-r fx-bc fx-ac" style="" v-for="(item,index) in data.service_audit_imgs" :key="index">
								<img v-lazy="item" :src="item" v-image-preview/>
							</div>
						</div>
				    </el-form-item>
				  </Col>
				</Row>
      		</el-tab-pane>
      	</el-tabs>
		
		<el-form-item v-if="data.status=='0'">
			<el-button type="primary"  @click="tapOk(1)">审核通过</el-button>
			<el-button type="danger"  @click="tapQr(-1)">审核驳回</el-button>
		</el-form-item>
      </el-form>
      
    </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>
  </div>

</template>
<script>
	import IPageHeader from "../../../layouts/system/page-header/index";
	import {SystemTypeAuditItem,SystemTypeAuditSub} from "../../../api/system/audit";
	import UiLoading from "../../../ui/loading/index";
    export default {
        name: "SystemTypeAuditItem",
        components: {UiLoading, IPageHeader},
        computed: {},
        data() {
            return {
				pageTitle:'审核详情',
				upHeaders:{},
				data:{},
				formActiveName:"tab_base",
				formData:{id:""},
				title:"",
				dialogVisible:false,
				form:{
				    id   : "",
				    mono : "",
					type : 0,
				},
			}
        },
        created() {
			if(this.$route.query.title){
				this.pageTitle = this.$route.query.title;
			}
			if(this.$route.query.id){
				this.form.id = parseInt(this.$route.query.id);
			}
			this.initView();
        },
        mounted(){

        },

        methods: {
			initView:function(){
				
				if(this.form.id){
					this.getData();
				}
			},
			getData: function () {
			   var post = {};
			   this.$utils.loading(this,"loading..");
			   post.id     = this.form.id;
			   let loading = this.$loading('获取数据中..');
			   SystemTypeAuditItem(post).then(res=>{
			       loading.close();
			       if(res.code == 200) {
			           this.data = res.data;
			       } else {
			           this.$alert(res.msg, '系统提示');
			       }
			   }).catch(err=>{
			   	loading.close();
			       this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
			   });
			},
			/**
			 * 确认审核通过
			 */
			tapOk:function(type){
			    this.form.id = this.data.id;
			    this.title = "审核通过";
			    this.form.mono = '';
				this.form.type = type;
			    this.dialogVisible = true;
			},
			tapQr:function(type){
			    this.form.id = this.data.id;
			    this.title = "审核拒绝";
			    this.form.mono = '';
				this.form.type = type;
			    this.dialogVisible = true;
			},
			/**
			 * ！提交 ！
			 */
			auditSub:function(){
			    let loading = this.$loading('提交数据中..');
			    SystemTypeAuditSub({
			        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("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
			    });
			},
        }
    }
</script>
<style scoped>
iframe.videoIframe{border: 0px;padding: 0px;}
.el-dialog__body{padding: 0px;}
.el-dialog__body iframe body{padding: 0px;}

	.muser-tab-continer{border: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}
	
	.upimg-item{width: 82px;height: 82px;margin-right: 12px;overflow: hidden;float: left;margin-bottom: 12px;position: relative;border: 1px solid grey;}
	.upimg-item img{width: 82px;cursor: pointer;}
	.img-remove-btn{position: absolute;top: 0px;right: 0px;font-size: 24px;}
	
	.upvideo-item{width: 300px;margin-right: 5px;overflow: hidden;float: left;margin-bottom: 5px;position: relative;padding-right: 30px;}
	.upvideo-item video{width: 100%;}
	.upvideo-item audio{width: 100%;}
	
	

	
</style>
