<template>
	<view class="containers">
		<view class="resident">
			<view class="text-xl text-bold">
				请扫描身份证的正反面
			</view>
			<view class="margin-top-sm" style="color:#ea5504;">
				正面为国徽面 反面为头像面
			</view>
			<!-- 反面 -->
			<view class="idCardWarp margin-top">
				<view class="flex justify-between">
					<view class="margin-top-xl">
						<view class="text-xl text-bold">
							头像面
						</view>
						<view class="text-gray margin-top-xs">
							上传您身份证头像面
						</view>
					</view>
					<view class=""  style="position: relative;">
            <view  @click="upload(0,'fSfzrxy')">
              <u-image v-if="picture[0]?picture[0].temp:''" :src="picture[0].temp" width="366rpx" height="236rpx"
                       @click="previewPicture(picture[0].temp)"></u-image>
              <u-image v-else src="@/static/images/gas-icon/front.png" width="366rpx"
                       height="236rpx"></u-image>
            </view>
            <u-icon v-if="(this.optionsInfo.fRzzt ==''||this.optionsInfo.fRzzt == '待认证' || this.optionsInfo.fRzzt == '认证未通过') && picture[0]?picture[0].temp:''" @click="deleteImg(0)" style="position: absolute; top:0px;right: 0px;" name="close-circle-fill" color="red" size="14"></u-icon>
            <!--						<u-image src="" width="366rpx" height="236rpx" v-if="!idCardObj.back.length"></u-image>-->
<!--						<u-image :src="idCardObj.back[0]" width="366rpx" height="236rpx" v-else></u-image>-->
					</view>
				</view>
			</view>
			<!-- 正面 -->
			<view class="idCardWarp margin-top">
				<view class="flex justify-between">
					<view class="margin-top-xl">
						<view class="text-xl text-bold">
							国徽面
						</view>
						<view class="text-gray margin-top-xs">
							上传您身份证国徽面
						</view>
					</view>
					<view class="" style="position: relative;">
            <view @click="upload(1,'fSfzghy')" >
              <u-image v-if="picture[1]?picture[1].temp:''"  :src="picture[1].temp" width="366rpx" height="236rpx"
                       @click="previewPicture(picture[1].temp)"></u-image>
              <u-image v-else src="@/static/images/gas-icon/back.png" width="366rpx"
                       height="236rpx"></u-image>
            </view>
            <u-icon v-if="(this.optionsInfo.fRzzt ==''||this.optionsInfo.fRzzt == '待认证' || this.optionsInfo.fRzzt == '认证未通过') && picture[1]?picture[1].temp:''" @click="deleteImg(1)" style="position: absolute; top:0px;right: 0px;" name="close-circle-fill" color="red" size="14"></u-icon>


            <!--						<u-image src="" width="366rpx" height="236rpx" v-if="!idCardObj.front.length"></u-image>-->
<!--						<u-image :src="idCardObj.front[0]" width="366rpx" height="236rpx" v-else></u-image>-->
					</view>
				</view>
			</view>

			<view class="idCardWarp margin-top">
				<view class="flex flex-direction">
					<view class="text-xl text-bold margin-tb flex">
						请填写身份证信息<view class="text-grey">(必填)</view>
					</view>
					<u-form labelPosition="left" :model="idCardObj" :rules="rules" ref="uForm">
						<view class="flex justify-between">
							<u-form-item class="w50">
								<u-input placeholder="姓名" :disabled="canEditBtn" v-model="idCardObj.name" border="none"></u-input>
							</u-form-item>
							<u-form-item class="w50">
								<u-input placeholder="联系电话" :disabled="canEditBtn"  v-model="idCardObj.phone" border="none"></u-input>
							</u-form-item>
						</view>
						<view class="flex justify-between">
							<u-form-item class="w50">
								<u-input placeholder="性别"  v-model="idCardObj.sex" disabled  border="none">
									<u-icon name="arrow-down" slot="suffix" @click="canEditBtn?'':selectPickCloums('sex')"></u-icon>
								</u-input>
							</u-form-item>
							<u-form-item class="w45">
								<u-input placeholder="年龄" :disabled="canEditBtn"  v-model="idCardObj.age" border="none"></u-input>
							</u-form-item>
						</view>
						<u-form-item>
							<u-input placeholder="身份证号" :disabled="canEditBtn" v-model="idCardObj.idcard" border="none"></u-input>
						</u-form-item>
						<u-form-item>
							<u-input placeholder="有效期" :disabled="canEditBtn"  v-model="idCardObj.termOfValidity" border="none">
								<u-icon name="calendar" slot="suffix" @click="canEditBtn?'':dateShow = true"></u-icon>
							</u-input>
						</u-form-item>
            <u-form-item>
              <u-input placeholder="认证气站" v-model="idCardObj.fSsczmc"  disabled border="none">
                <u-icon name="arrow-down" slot="suffix" @click="canEditBtn?'':selectPickCloums('rzqz')"></u-icon>
              </u-input>
            </u-form-item>
					</u-form>
				</view>
			</view>
		</view>
		<!-- 性别 -->
		<u-picker ref="Sex" :show="pickShow" @close="pickShow=false" closeOnClickOverlay :columns="columns"
			@cancel="pickShow=false" @confirm="sexConfirm"></u-picker>
		<!-- 有效期 -->
		<u-datetime-picker :show="dateShow" @close="dateShow=false" closeOnClickOverlay v-model="date" mode="date"
			@cancel="dateShow=false" @confirm="dateConfirm"></u-datetime-picker>
			
	</view>
</template>

<script>
  import {
    mapState
  } from 'vuex';
	export default {
		props: {
      optionsInfo:{
        type:Object,
        default:{}
      }
		},
		components: {

		},
		watch: {},
		data() {
			return {
        canEditBtn:false,
        picture:[],
				idCardObj: {
					name: "",
					phone: "",
					sex: "",
					age: "",
					idcard: "",
					termOfValidity: "",
					front: [],
					back: [],
          fSsczmc:'',
          fSsczID:''
				},
				date: Number(new Date()),
				rules: {},
        pickShow: false,
				dateShow: false,
				columns: [],
        sexColumns:[
          ['男', '女']
        ],
        formData: {
          current: 1,
          size: -1,
          // jd: "114.347455", //PC无法定位调试使用
          // wd: "30.504396", //PC无法定位调试使用
          jd: "",
          wd: "",
        },
        storeList:[],
        pickType:''
			}
		},
    computed: {
      // 使用 mapState 辅助函数将 Vuex state 中的 adsJd 和 adsWd 映射到当前组件的计算属性中
      ...mapState({
        adsJd: state => state.user.adsJd,
        adsWd: state => state.user.adsWd
      })
    },
    async mounted() {
      console.log(this.$store);
      // 如果未选择地址则获取当前定位
      if (!this.adsJd && !this.adsWd) {
        await this.getLocation();
      }
      console.log('打印this.options',this.optionsInfo);
      if(this.optionsInfo.fRzzt == '已认证'||this.optionsInfo.fRzzt =='认证中' || this.optionsInfo.fRzzt == '认证未通过'){
        this.getRealNameDetail();
        this.canEditBtn = true;
        if(this.optionsInfo.fRzzt == '认证未通过'){
          this.canEditBtn = false;
        }
      }
      console.log('打印是否出阿飞this.addJd',this.adsJd,this.adsWd)
      await this.getStoreList();
    },
		onLoad(data) {

		},
		methods: {
      //获取审核详细信息
      async getRealNameDetail(){
        const reseult= await this.$api.realNameAuthApi.realNameDetailInfoPort(this.optionsInfo.id);
        console.log('打印Result',reseult);
        const { value } = reseult;
        if(value.fSfzghy){
          let sfzghImg  = JSON.parse(value.fSfzghy);
          console.log('打印Result',sfzghImg);
          let sfzghImgUrl = await this.$getPhotoUrl(sfzghImg[0].response.fileId);
          this.$set(this.picture,1,{
            temp:sfzghImgUrl,
            fileId:sfzghImg[0].response.fileId,
            fileObj: JSON.stringify(sfzghImg)
          });
        }
        if(value.fSfzrxy){
          let sfzrxImg  = JSON.parse(value.fSfzrxy);
          let sfzrxImgUrl = await this.$getPhotoUrl(sfzrxImg[0].response.fileId);
          this.$set(this.picture,0,{
            temp:sfzrxImgUrl,
            fileId:sfzrxImg[0].response.fileId,
            fileObj: JSON.stringify(sfzrxImg)
          });
        }
        this.idCardObj.name = value.fXm;
        this.idCardObj.phone = value.fSjh;
        this.idCardObj.sex = value.fXb;
        this.idCardObj.age = value.fNl;
        this.idCardObj.idcard = value.fSfzh;
        let date = value.fSfzhyxq?value.fSfzhyxq.substring(0,10):'';
        this.idCardObj.termOfValidity = date;
        this.idCardObj.fSsczmc = value.fSsczmc;
        this.idCardObj.fSsczID = value.fSsczID;
      },
      //获取当前的定位
      getLocation() {
        let that = this;
        return new Promise((resolve, reject) => {
          uni.getLocation({
            type: 'gcj02',
            success: (res) => {
              console.log('无地址,定位获取', JSON.parse(JSON.stringify(res)));
              that.formData.jd = res.longitude;
              that.formData.wd = res.latitude;
              resolve(); // 成功获取经纬度后 resolve
            },
            fail: (error) => {
              uni.$u.toast("定位失败");
              console.log("定位失败",error);
              reject(error); // 获取经纬度失败时 reject
            }
          });
        });
      },
      //获取当前的订气站
      async getStoreList() {
        // 如果有选择的地址经纬度
        if(this.adsJd && this.adsWd){
          this.formData.jd = this.adsJd;
          this.formData.wd = this.adsWd;
        }
        console.log('门店列表查询条件', JSON.parse(JSON.stringify(this.formData)));
        const result = await this.$api.memberApi.getwCzxxList(this.formData);
        let {
          code,
          value
        } = result;
        if (code === 200) {
          const newlist = value.records;
          this.storeList = newlist;
          console.log('门店列表', JSON.parse(JSON.stringify(newlist)));
        }
      },
		  //上传图片
      async upload(index,fileType) {
        console.log("上传图片", index);
        if(this.picture[index]){
          return;
        }
        uni.chooseImage({
          success: async (chooseImageRes) => {
            console.log(chooseImageRes);
            const tempFilePaths = chooseImageRes.tempFilePaths;
            const result = await this.$api.fileApi.uploadFile(tempFilePaths[0]);
            console.log('result=====>',result,this.picture);
            this.$set(this.picture,index,{
              temp:result.url,
              fileId:result.response.fileId,
              type:fileType,
              fileObj: JSON.stringify(result)
            });
            // this.$set(this.picture,'temp',result.url);
            console.log(this.picture);
          }
        });
      },
      //删除图片
      deleteImg(index){
        this.$set(this.picture,index,undefined);
        console.log('打印this.picture',this.picture);
        // this.picture[index] =empty//删除索引为index的元素
      },
		  //预览图片
      previewPicture(url) {
        this.$previewPicture(url);
      },
      //选择选择器的数据
      selectPickCloums(type){
        this.pickShow = true;
        this.pickType = type;
        switch (type){
          case 'sex':
            this.columns = this.sexColumns;
            break;
          case 'rzqz':
            let mcArrayList = this.storeList.map((item)=>item.fCzmc);
            this.columns = [mcArrayList];
            console.log('打印this.c',this.columns)
        }
      },
			sexConfirm(e) {
				console.log(e);
				let value = e.value[0];
        switch (this.pickType){
          case "sex":
            this.idCardObj.sex = value;
            break;
          case 'rzqz':
            this.idCardObj.fSsczmc = value;
            let choseObj = this.storeList.filter((item)=> item.fCzmc == value);
            this.idCardObj.fSsczID = choseObj[0]?choseObj[0].id:'';
            console.log('打印choseObj',choseObj);
            break;
        }
				console.log(this.idCardObj.sex);
				this.pickShow = false;
			},

			dateConfirm(e) {
				console.log(e);
				let date = this.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.idCardObj.termOfValidity = date;
				this.dateShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.containers {}

	.resident {
		margin-top: 63rpx;
		padding: 0 24rpx;
	}

	.idCardWarp {
		background: #F4F5F8;
    //background: #ffffff;
		border-radius: 10rpx;
		padding: 0 24rpx;
	}

	.noCardWarp {
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		padding: 24rpx;
		margin: 24rpx;
	}

	.cardWarp {
		position: relative;
		width: 306rpx;
		height: 226rpx;
		display: flex;
		justify-content: center;
		background: #F0F3F7;
		border-radius: 14rpx;
	}

	.cardBar {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 56rpx;
		background: #DEE8F8;
		line-height: 56rpx;
		background-color: #dee8f8;
		border-radius: 0 0 14rpx 14rpx;
	}

	.cardBarText {
		text-align: center;
		color: #536CAA;
		font-weight: bold;
	}
</style>