<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="div member-auth">
      <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="实名认证" class="common-header" left-icon="back" @clickLeft="goBack()">
        </uni-nav-bar>
      </view>
      </view>
      <view class="div form main-content">
          <view class="div form-wrapper">
              <flex-line v-if="user.member_auth_state!=1 && user.member_auth_state!=3" class="field-line menu-item" :show-border="true"><text class="span field-name">真实姓名：</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="realname" /></view></flex-line>
              <flex-line v-else :show-border="true"><text class="span line-name">真实姓名：</text><text class="span" slot="right">{{realname}}</text></flex-line>
              <flex-line v-if="user.member_auth_state!=1 && user.member_auth_state!=3" class="field-line menu-item" :show-border="true"><text class="span field-name">身份证号：</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="idcard" /></view></flex-line>
              <flex-line v-else :show-border="true"><text class="span line-name">身份证号：</text><text class="span" slot="right">{{idcard}}</text></flex-line>
          </view>

        <view class="div idcard-wrapper pt-10">
            <view class="div title">手持身份证照片</view>
            <view class="div idcard-item">
                <view class="div img">
                    <view class="div user-avatar">
                      <uni-file-picker
                        class="common-avatar"
                        v-model="imageValue['member_idcard_image1']" 
                        fileMediatype="image" 
                        mode="grid" 
                        :readonly="user.member_auth_state==1 || user.member_auth_state==3"
                        :limit="1"
                        :auto-upload="false"
                        :image-styles="{
                        width:'200px',
                        height:'160px',
                        }"
                        @select="uploadInformPic('member_idcard_image1',$event)" 
                        @delete="dropImage('member_idcard_image1')"
                      >
                      </uni-file-picker>
                    </view>
                </view>

            </view>
            <view class="div title">身份证正面照片</view>
            <view class="div idcard-item">
                <view class="div img">
                    <view class="div user-avatar">
                      <uni-file-picker
                            class="common-avatar"
                            v-model="imageValue['member_idcard_image2']" 
                            fileMediatype="image" 
                            mode="grid" 
                            :readonly="user.member_auth_state==1 || user.member_auth_state==3"
                            :limit="1"
                            :auto-upload="false"
                            :image-styles="{
                            width:'200px',
                            height:'160px',
                            }"
                            @select="uploadInformPic('member_idcard_image2',$event)" 
                            @delete="dropImage('member_idcard_image2')"
                          >
                          </uni-file-picker>
                    </view>
                </view>

            </view>
            <view class="div title">身份证反面照片</view>
            <view class="div idcard-item">
                <view class="div img">
                    <view class="div user-avatar">
                      <uni-file-picker
                            class="common-avatar"
                            v-model="imageValue['member_idcard_image3']" 
                            fileMediatype="image" 
                            mode="grid" 
                            :readonly="user.member_auth_state==1 || user.member_auth_state==3"
                            :limit="1"
                            :auto-upload="false"
                            :image-styles="{
                            width:'200px',
                            height:'160px',
                            }"
                            @select="uploadInformPic('member_idcard_image3',$event)" 
                            @delete="dropImage('member_idcard_image3')"
                          >
                          </uni-file-picker>
                    </view>
                </view>

            </view>
        </view>
        <view class="div pb-10 pt-10">
            <view class="div common-btn ds-button-large" @click="submitInformation" v-if="user.member_auth_state!=1 && user.member_auth_state!=3">保存</view>
        </view>
      </view>
      <uni-popup background-color="#fff" ref="isshow" class="popup" >
        <image mode="aspectFit" class="img" :src="showimage" :style="getBannerStyle" @click="hidePopup('isshow')">
      </uni-popup>
        <tui-picture-cropper v-if="cropperOption.imgUrl" :width="cropperOption.autoCropWidth" :height="cropperOption.autoCropHeight" :imageUrl="cropperOption.img" @ready="cropReady" @cropper="useCrop" @back="cropBack"></tui-picture-cropper>
    </view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</member-base>
</template>
<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import tuiPictureCropper from "@/components/thorui/tui-picture-cropper/tui-picture-cropper"
import { mapState, mapMutations } from 'vuex'
import { uploadAuth, dropAuth, updateMemberAuth } from '../../../api/member'
import flexLine from '../../flexLine'
export default {
  name:'MemberProfileSet',
  data(){
    return {
      navHeight: 0,
      imageValue:{},
      dialog:{},
      screenWidth:0,
      screenHeight:0,
      cropperOption: {
        img: '',
        canMove: false,
        autoCrop: true,
        autoCropWidth: 100,
        autoCropHeight: 100,
        maxImgSize: 500,
        outputType: 'png'
      },
      cropType: '',
      if_confirm: false,
      showimage: '',
      realname: '',
      idcard: '',
      member_ww: ''
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    const res = uni.getSystemInfoSync()
    this.screenWidth = res.windowWidth
    this.screenHeight = res.windowHeight
  },
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    tuiPictureCropper
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      user: state => state.member.info
    }),
    getBannerStyle: function () {
      var width = this.screenWidth
      var height = this.screenHeight
      let itemWidth = width
      let itemHeight = height
      return "max-width:"+itemWidth +"px;max-height:"+itemHeight +"px"
    }
  },
  created: function () {
    if (this.user) {
      this.realname = this.user.member_truename
      this.idcard = this.user.member_idcard
        if(this.user.member_idcard_image1_url){
          this.imageValue['member_idcard_image1']=[{
            name:'member_idcard_image1',
            extname:'jpg',
            url:this.user.member_idcard_image1_url
          }]
        }
        if(this.user.member_idcard_image2_url){
          this.imageValue['member_idcard_image2']=[{
            name:'member_idcard_image2',
            extname:'jpg',
            url:this.user.member_idcard_image2_url
          }]
        }
        if(this.user.member_idcard_image3_url){
          this.imageValue['member_idcard_image3']=[{
            name:'member_idcard_image3',
            extname:'jpg',
            url:this.user.member_idcard_image3_url
          }]
        }
    }
  },

  methods:{
    closeDialog(){
    },
    confirmDialog(value){
      switch(this.dialog.condition){
        case 1:
          this.confirmSumit()
          break
        case 2:
          dropAuth(this.dialog.data).then(res => {
            this.user[this.dialog.data + '_url'] = ''
            var temp = {}
            temp[this.dialog.data + '_url'] = ''
            this.memberEdit(temp)
          }).catch(function (error) {
            uni.showToast({icon:'none',title: error.message})
          })
          break
      }
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapMutations({
      memberEdit: 'memberEdit'
    }),
    submitInformation () {
      if (!this.if_confirm) {
        this.confirmSumit()
        return
      }
      this.dialog={condition:1,content:'请仔细核对信息，确认上传后除非管理员审核否则无法再次上传'}
      this.$refs.confirm.open()
    },
    confirmSumit () {
      updateMemberAuth(this.realname, this.idcard, this.if_confirm).then(res => {
        if (this.if_confirm) {
          this.memberEdit({ member_truename: this.realname, member_idcard: this.idcard, member_auth_state: 1 })
          uni.showToast({icon:'none',title: res.message})
        } else {
          this.if_confirm = true
          this.submitInformation()
        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    openImage (src) {
      this.showimage = src
      this.showPopup('isshow')
    },
    dropImage (id) {
      this.dialog={content:'确定要删除该图片吗？',data:id}
      this.$refs.confirm.open()

    },
    useCrop (res) {
        let index = this.cropType
        var formdata={
          filePath:res.url,
          name:index,
          id:index
        }
        
        uploadAuth(formdata).then(res => {
          this.user[index + '_url'] = res.result.file_path
          this.imageValue[index]=[{
            name:index,
            extname:'jpg',
            url:res.result.file_path
          }]
          var temp = {}
          temp[index + '_url'] = res.result.file_path
          this.memberEdit(temp)
          this.cropperOption.imgUrl=''
          this.$forceUpdate()
          uni.hideLoading()
        }).catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
          uni.hideLoading()
          this.cropperOption.imgUrl=''
          this.$forceUpdate()
        })
      },
      cropReady(){
        this.cropperOption.img = this.cropperOption.imgUrl
      },
      cropBack(){
        this.cropperOption.imgUrl=''
        this.$forceUpdate()
      },
    uploadInformPic (index, event) {
        let that = this
        this.cropType = index
        let file = event.tempFiles[0]
          that.cropperOption.imgUrl = file.path
          that.cropperOption.autoCropWidth = uni.getSystemInfoSync().windowWidth
          that.cropperOption.autoCropHeight = uni.getSystemInfoSync().windowWidth
          that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
          that.$forceUpdate()
      }
  }
}
</script>
<style  lang="scss" scoped>
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .ds-button-large{margin:0 $pageSpace}
  .member-auth {
    background: #fff;
	  .main-content{padding:  0 $pageSpace;box-sizing: border-box;}
      .form{
          .form-wrapper{
              position: relative;
              box-shadow: 0px 4px 4px #f7f7f7;
              z-index: 2;
          }
          .title{
              font-size:$subFontSize;
              font-weight: 700;
          }
      }
    .idcard-wrapper{
        .idcard-item{
            background: #fff;
            padding: 1rem 0;
            .del-btn{
                    position: absolute;
                    font-size: 1.5rem;
                    top: -.75rem;
                    right: -.75rem;
            }

        }
    }
  }

</style>
<style lang="scss">
  .member-auth .mint-cell-title{flex:unset;width:7rem}
  .member-auth .mint-cell-value{flex:1}
</style>
