<template>
  <view style="background-color: rgb(246, 247, 250); height: 100%">
	  <u-navbar  title="审核详情" ></u-navbar>
	 <view class="flex-col main">
		 <view class="justify-center headerImg">
			 <image class="image_1" :src="$u.http.config.imgUrl+form.head" mode=""></image>
		 </view>
		<view class="form">
		  <view class="flex-col group">
			<view class="flex-col section_2">
			  <!-- 教职工 -->
			  <view class="flex-col group_5">
				<view class="flex-row group_6">
				  <text class="text_15">学历</text>
				  <u-input
					class="input"
					:custom-style="inputStyle"
					:border="false"
					v-model="form.educationStr"
					placeholder=""
					disabled
				  />
				</view>
				<view class="group_9 flex-row">
				  <text class="text_15">学校</text>
				  <u-input
					class="input"
					:custom-style="inputStyle"
					:border="false"
					v-model="form.schoolName"
					placeholder=""
					disabled
				  />
				</view>
				<view class="justify-between group_7">
				  <view class="flex-row">
					<text class="text_15">学院</text>
					<u-input
					  class="input"
					  :custom-style="inputStyle"
					  :border="false"
					  placeholder=""
					  v-model="form.college"
					  disabled
					/>
				  </view>
				</view>
				<view class="justify-between group_7">
				  <view class="flex-row">
					<text class="text_15">专业</text>
					<u-input
					  class="input"
					  :custom-style="inputStyle"
					  :type="'text'"
					  :border="false"
					  placeholder=""
					  v-model="form.major"
					  @click="schoolPost = true"
					  disabled
					/>
				  </view>
				</view>
				<view class="justify-between group_13">
				  <view class="flex-row">
					<text class="text_15">时间</text>
					<u-input
					  class="input"
					  :custom-style="inputStyle"
					  :type="'text'"
					  :border="false"
					  placeholder=""
					  v-model="form.time"
					  disabled
					/>
				  </view>
				</view>
			  </view>
			  </view>
		  </view>
		</view>

		<view class="file" >
      <!-- v-if="vuex_user.isAttestationGLY" -->
		  <view v-if="[0,1].includes(this.vuex_glyType)" class="flex-col section_4">
			<text class="text_11">申请人证件:</text>
			<view class="flex-row equal-division">
			  <view class="flex-col equal-division-item">
				<view class="flex-col section_5">
			     <view class="top-section justify-center">
					<image :src="$u.http.config.imgUrl+form.imgUrl" class="image_6" @click="clickImg"/>
				  </view>
				</view>
			  </view>
			</view>
		  </view>
		  <view class="flex-row group_9 justify-between" v-if="type==0">
			  <view class="btn1" @click="turnFn">
				  <text>驳回</text>
			  </view>
			  <view class="btn2" @click="onExamine(1)">
				  <text>通过</text>
			  </view>
		  </view>
		</view>
	</view>
  <u-modal
      ref="uModal"
      title="驳回理由"
      v-model="turnShow"
      @confirm="turnSubmitFn"
      :show-cancel-button="true"
    >
      <view class="dialog">
        <u-input
          :custom-style="eachStyle"
          type="text"
          maxlength="100"
          v-model="cancleReason"
          placeholder="请输入驳回理由"
        />
      </view>
    </u-modal>
    <!-- 提示 -->
	<u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // input 样式
      inputStyle: {
        lineHeight: "0.5rem",
        height: "0.5rem",
        width: "2rem",
      },
      eachStyle: {
        lineHeight: "80rpx",
        height: "80rpx",
        width: "400rpx",
      },
	  form:{

	  },
	  type:0,
    // 驳回理由弹窗
    turnShow:false,
    // 驳回理由
    cancleReason:'',
    };
  },
  onLoad(e) {
	 this.getAuditDeatil(e.id)
	 this.type = e.type
  },
  created() {

  },
  methods: {
	getAuditDeatil(id){
		this.$u.apiList.AuditDeatil({id:id}).then((res)=>{
			this.form = res
			this.form.time = res.startYear + '年' +'————' + res.endYear + '年'
		})
	},
    // 提示
    tips(title, type, time) {
      this.$refs.uTips.show({
        title: title ? title : "",
        type: type ? type : "success",
        duration: time ? time + "" : "1000",
      });
    },
	onExamine(type){
		let ids = []
		ids[0] = this.form.id
		const data = {
			ids:ids,
			state:type,
      cancleReason:'',
		}
		this.$u.apiList.Audit(data).then((res)=>{
			this.$refs.uToast.show({
				title: type==1?'审核成功':'已驳回',
				type: 'success',
				// url: 'pages/my/examine/examine'
			})
      setTimeout(()=>{
        uni.redirectTo({
          url: "/pages/my/examine/examine",
        });
      },500)
		}).catch(e=>{
      this.$refs.uToast.show({
				title: e.error,
				type: 'error',
			})
    })
	},
  // 驳回
  turnFn(){
    this.cancleReason = '';
    this.turnShow = true;
  },
  // 确认驳回
  turnSubmitFn(){
    if(!this.cancleReason){
      this.$refs.uToast.show({
				title: '请填写驳回理由',
				type: 'error',
			})
      this.turnShow = true;
      return 
    }
    const data = {
			ids:[this.form.id],
			state:2,
      cancleReason:this.cancleReason,
		}
		this.$u.apiList.Audit(data).then((res)=>{
			this.$refs.uToast.show({
				title:'已驳回',
				type: 'success',
				// url: 'pages/my/examine/examine'
			})
      setTimeout(()=>{
        uni.redirectTo({
          url: "/pages/my/examine/examine",
        });
      },500)
		}).catch(e=>{
      this.$refs.uToast.show({
				title: e.error || '审核失败',
				type: 'error',
			})
    })
  },
	//图片预览
	clickImg(){
		var images = [];
		let img = this.$u.http.config.imgUrl + this.form.imgUrl;
		images.push(img);
		uni.previewImage({  // 图片路径必须是一个数组 => ['']
			current: 0,
			 urls: images,
		});
	},
	//返回上一级
	router(){
		// this.$u.route({
		// 	url: 'pages/my/examine/examine'
		// });
    uni.redirectTo({
      url: "/pages/my/examine/examine",
    })
	}
  },
};
</script>

<style lang="scss" scoped>
.main{
	background-color: #ffffff;
	.headerImg{
		margin: 0.2rem 0;
	}
	.image_1{
		width: 0.8rem;
		height: 0.8rem;
		border-radius: 50%;
		overflow: hidden;
	}
}
.file {
  .group_9 {
	margin-top: 0.2rem;
    padding: 0.14rem 0.25rem 0;
    background-color: rgb(246, 247, 250);
    padding-bottom: 0.2rem;
	.btn1{
		text-align: center;
		width: 1.3rem;
		margin: 0.14rem 0.07rem 0 0.08rem;
		padding: 0.12rem 0;
		color: rgb(255, 255, 255);
		font-size: 0.15rem;
		line-height: 0.16rem;
		letter-spacing: 0.03rem;
		white-space: nowrap;
		border-radius: 0.1rem;
		background-color: #E52D43;
	}
	.btn2{
		text-align: center;
		width: 1.3rem;
		margin: 0.14rem 0.07rem 0 0.08rem;
		padding: 0.12rem 0;
		color: rgb(255, 255, 255);
		font-size: 0.15rem;
		line-height: 0.16rem;
		letter-spacing: 0.03rem;
		white-space: nowrap;
		background-color: rgb(46, 155, 255);
		border-radius: 0.1rem;
	}
    .text_23 {
      color: rgb(46, 155, 255);
      font-size: 0.12rem;
      line-height: 0.16rem;
      white-space: nowrap;
    }
    .button {
	  text-align: center;
	  width: 1.3rem;
      margin: 0.14rem 0.07rem 0 0.08rem;
      padding: 0.12rem 0;
      color: rgb(255, 255, 255);
      font-size: 0.15rem;
      line-height: 0.16rem;
      letter-spacing: 0.03rem;
      white-space: nowrap;
      background-color: rgb(46, 155, 255);
      border-radius: 0.1rem;
    }
    .text_25 {
      margin-left: 0.025rem;
      margin-top: 0.21rem;
      color: rgb(164, 174, 183);
      font-size: 0.15rem;
      line-height: 0.14rem;
      letter-spacing: 0.03rem;
      white-space: nowrap;
    }
    .grid {
      margin: 0.1rem 0.03rem 0 0.02rem;
      height: 1.61rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-row-gap: 0.11rem;
      grid-column-gap: 0.11rem;
      .grid-item {
        padding: 0.26rem 0 0.27rem;
        background-color: rgb(176, 191, 205);
        border-radius: 0.05rem;
      }
      .grid-item_1 {
        padding: 0.23rem 0 0.29rem;
        background-color: rgb(176, 191, 205);
        border-radius: 0.05rem;
      }
      .image_14 {
        width: 0.29rem;
        height: 0.23rem;
      }
    }
  }
  .section_4 {
    margin-top: 0.06rem;
    padding: 0.17rem 0.17rem 0.07rem 0.17rem;
    background-color: rgb(255, 255, 255);
    .text_11 {
      color: rgb(73, 76, 87);
      font-size: 0.15rem;
      line-height: 0.16rem;
      white-space: nowrap;
    }
    .equal-division {
      margin-top: 0.13rem;
      color: rgb(46, 155, 255);
      font-size: 0.12rem;
      line-height: 0.16rem;
      white-space: nowrap;
      .equal-division-item {
        flex: 1;
        // max-width: 48.5%;
        .text_11 {
          margin-bottom: 0.13rem;
        }
        .section_5 {
          // padding: 0.17rem 0 0.14rem 0;
          // border-radius: 0.05rem;
          border: 10px solid #CCCCCC;
        }
        .text_16 {
          margin-top: 0.055rem;
          align-self: center;
        }
      }
      .equal-division-item_1 {
        max-width: 48.5%;
        margin-left: 0.14rem;
        flex: 1 1 1.6rem;
        .text_11 {
          margin-bottom: 0.13rem;
        }
        .section_6 {
          padding: 0.17rem 0.27rem 0.14rem 0.29rem;
          border-radius: 0.05rem;
          border: 1px dotted #66b5ff;
        }
        .text_19 {
          margin-top: 0.05rem;
          align-self: center;
        }
      }
      .top-section {
        // padding: 0.12rem 0 0.1rem;
        border-radius: 0.05rem;
        // background: #eff7ff;
        .image_6 {
          width: 3rem;
          height: 1rem;
        }
        .text_12 {
          margin-left: 0.075rem;
          margin-top: 0.015rem;
        }
      }
      .bottom-section {
        margin-top: 0.1rem;
        padding: 0.09rem 0.17rem 0.13rem;
        border-radius: 0.05rem;
        background: #eff7ff;
        .image_8 {
          margin-right: 0.08rem;
          width: 0.23rem;
          height: 0.17rem;
        }
        .text_14 {
          margin-top: 0.015rem;
        }
      }
    }
  }
}
.form {
  .headerImg {
    padding-bottom: 0.05rem;
  }
  .section_2 > view > view {
    margin-left: 0.21rem;
    padding: 0 !important;
    border-bottom: 0.01rem solid #edeeef;
    position: relative;
  }
  .section_2 > view > view .input,
  .section_2 > view > view text {
    line-height: 0.5rem;
  }
  .section_2 > view > view .input {
    padding-right: 0.2rem !important;
  }
  .section_2 > view > view text {
	  margin-right:.1rem;
    min-width: 0.91rem;
    white-space: nowrap;
  }

  .section_2 > view > view image {
    position: absolute;
    top: 50%;
    right: 0.14rem;
    transform: translateY(-50%);
  }

  .image_3 {
    width: 0.075rem;
    height: 0.13rem;
  }
  .group {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .section_2 {
    padding: 0.055rem 0 0 0;
    background-color: rgb(255, 255, 255);
  }

  .group_16 {
    margin-top: 0.21rem;
    padding: 0 0.02rem;
  }
  .button_1,
  .button {
    padding: 0.13rem 0;
    color: rgb(255, 255, 255);
    font-size: 0.15rem;
    line-height: 0.14rem;
    letter-spacing: 0.03rem;
    white-space: nowrap;
    background-color: rgb(46, 155, 255);
    border-radius: 0.1rem;
    width: 3.1rem;
    margin: 0 auto;
  }
  .button_1 {
    margin-top: 0.1rem;
    color: rgb(55, 59, 72);
    background-color: rgb(255, 255, 255);
    border: solid 0.01rem rgba(160, 162, 172, 0.33);
    margin-bottom: 0.2rem;
  }

  .view_1 {
    margin-left: 0.02rem;
  }

  .text_15 {
    color: rgb(55, 59, 72);
    font-size: 0.15rem;
    line-height: 0.16rem;
    white-space: nowrap;
  }
  .image_2 {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    overflow: hidden;
  }
  .image_4 {
    margin-right: 0.15rem;
    margin-top: 0.28rem;
  }
}
.dialog {
  // border: 1px solid red;
  padding-left: 30rpx;
  padding-right: 30rpx;
  margin-top: 50rpx;
  margin-bottom: 80rpx;
}
</style>
