<template>
	<view class="containers">
		<view class="noResident">
			<!-- 个人信息 -->
			<view class="noCardWarp">
				<view class="flex flex-direction">
					<view class="text-xl text-bold">
						个人信息
					</view>
					<view class="flex margin-top justify-between">
						<view class="cardWarp flex flex-direction" @click="upload(0,'fSfzrxy')">
							<view class="flex justify-center margin-bottom-xl" style="position: relative;">
                  <u-image v-if="picture[0]?picture[0].temp:''"  :src="picture[0].temp" width="180rpx" height="108rpx"
                           @click="previewPicture(picture[0].temp)"></u-image>
								<u-image v-else src="@/static/images/gas-icon/front.png" width="180rpx"
									height="108rpx"></u-image>
                <u-icon v-if="(!this.optionsInfo.fRzzt||this.optionsInfo.fRzzt ==''||this.optionsInfo.fRzzt == '待认证' || this.optionsInfo.fRzzt == '认证未通过') && picture[0]?picture[0].temp:''" @click="deleteImg(0)" style="position: absolute; top:-10px;right: 22px;" name="close-circle-fill" color="red" size="14"></u-icon>
							</view>
							<view class="cardBar">
								<view class="flex justify-center">
									<view class="requiredCss">*</view>
									<view class="cardBarText">上传身份证人像面</view>
								</view>
							</view>
						</view>
						<view class="cardWarp flex flex-direction" @click="upload(1,'fSfzghy')">
							<view class="flex justify-center margin-bottom-xl"  style="position: relative;">
								<u-image v-if="picture[1]?picture[1].temp:''"  :src="picture[1].temp" width="180rpx" height="108rpx"
									@click="previewPicture(picture[1].temp)"></u-image>
								<u-image v-else src="@/static/images/gas-icon/back.png" width="180rpx"
									height="108rpx"></u-image>
                <u-icon v-if="(!this.optionsInfo.fRzzt||this.optionsInfo.fRzzt ==''||this.optionsInfo.fRzzt == '待认证' || this.optionsInfo.fRzzt == '认证未通过') && picture[1]?picture[1].temp:''" @click="deleteImg(1)" style="position: absolute; top:-10px;right: 22px;" name="close-circle-fill" color="red" size="14"></u-icon>
              </view>
							<view class="cardBar">
								<view class="flex justify-center">
									<view class="requiredCss">*</view>
									<view class="cardBarText">上传身份证国徽面</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex margin-top-sm">
						<u-icon name="error-circle"></u-icon>
						<view class="text-gray margin-left-xs">
							以上传图片信息为准，请仔细核对您提交的信息
						</view>
					</view>
				</view>
			</view>
			<!-- 企业信息 -->
			<view class="noCardWarp">
				<view class="flex flex-direction">
					<view class="text-xl text-bold">
						企业信息
					</view>
					<view class="flex margin-top flex-direction">
						<view class="flex justify-between">
							<view class="cardWarp flex flex-direction" @click="upload(2,'fYyzz')">
								<view class="flex justify-center margin-bottom-xl" style="position: relative;">
                  <u-image  v-if="picture[2]?picture[2].temp:''"  :src="picture[2].temp" width="180rpx"
                            @click="previewPicture(picture[2].temp)" height="108rpx"></u-image>
									<u-image v-else  src="@/static/images/gas-icon/front.png" width="180rpx"
										height="108rpx"></u-image>
                  <u-icon v-if="(!this.optionsInfo.fRzzt||this.optionsInfo.fRzzt ==''||this.optionsInfo.fRzzt == '待认证' || this.optionsInfo.fRzzt == '认证未通过') &&picture[2]?picture[2].temp:''" @click="deleteImg(2)" style="position: absolute; top:-10px;right: 22px;" name="close-circle-fill" color="red" size="14"></u-icon>
                </view>
								<view class="cardBar">
									<view class="flex justify-center">
										<view class="requiredCss">*</view>
										<view class="cardBarText">上传营业执照</view>
									</view>
								</view>
							</view>
							<view class="cardWarp flex flex-direction" @click="upload(3,'fKhxkz')">
								<view class="flex justify-center margin-bottom-xl" style="position: relative;">
                  <u-image  v-if="picture[3]?picture[3].temp:''"  :src="picture[3].temp"  width="180rpx"
                            @click="previewPicture(picture[3].temp)" height="108rpx"></u-image>
									<u-image  v-else src="@/static/images/gas-icon/back.png" width="180rpx"
										height="108rpx"></u-image>
                  <u-icon v-if="(!this.optionsInfo.fRzzt||this.optionsInfo.fRzzt ==''||this.optionsInfo.fRzzt == '待认证' || this.optionsInfo.fRzzt == '认证未通过') &&picture[3]?picture[3].temp:''" @click="deleteImg(3)" style="position: absolute; top:-10px;right: 22px;" name="close-circle-fill" color="red" size="14"></u-icon>
                </view>
								<view class="cardBar">
									<view class="flex justify-center">
										<view class="requiredCss">*</view>
										<view class="cardBarText">上传开户许可证</view>
									</view>
								</view>
							</view>
						</view>
						<view class="flex justify-between margin-top">
							<view class="cardWarp flex flex-direction" @click="upload(4,'fFrsfzrxy')">
								<view class="flex justify-center margin-bottom-xl" style="position: relative;">
                  <u-image v-if="picture[4]?picture[4].temp:''" :src="picture[4].temp" width="180rpx" height="108rpx"
                           @click="previewPicture(picture[4].temp)"></u-image>
									<u-image v-else src="@/static/images/gas-icon/front.png" width="180rpx"
										height="108rpx"></u-image>
                  <u-icon v-if="(!this.optionsInfo.fRzzt||this.optionsInfo.fRzzt ==''||this.optionsInfo.fRzzt == '待认证' || this.optionsInfo.fRzzt == '认证未通过') &&picture[4]?picture[4].temp:''" @click="deleteImg(4)" style="position: absolute; top:-10px;right: 22px;" name="close-circle-fill" color="red" size="14"></u-icon>
                </view>
								<view class="cardBar">
									<view class="flex justify-center">
										<view class="requiredCss">*</view>
										<view class="cardBarText">上传法人身份证正面</view>
									</view>
								</view>
							</view>
							<view class="cardWarp flex flex-direction" @click="upload(5,'fFrsfzghy')">
								<view class="flex justify-center margin-bottom-xl" style="position: relative;">
                  <u-image v-if="picture[5]?picture[5].temp:''" :src="picture[5].temp" width="180rpx" height="108rpx"
                           @click="previewPicture(picture[5].temp)"></u-image>
									<u-image v-else src="@/static/images/gas-icon/back.png" width="180rpx"
										height="108rpx"></u-image>
                  <u-icon v-if="(!this.optionsInfo.fRzzt||this.optionsInfo.fRzzt ==''||this.optionsInfo.fRzzt == '待认证' || this.optionsInfo.fRzzt == '认证未通过') &&picture[5]?picture[5].temp:''" @click="deleteImg(5)" style="position: absolute; top:-10px;right: 22px;" name="close-circle-fill" color="red" size="14"></u-icon>
                </view>
								<view class="cardBar">
									<view class="flex justify-center">
										<view class="requiredCss">*</view>
										<view class="cardBarText">上传法人身份证反面</view>
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="flex margin-top-sm">
						<u-icon name="error-circle"></u-icon>
						<view class="text-gray margin-left-xs">
							以上传图片信息为准，请仔细核对您提交的信息
						</view>
					</view>
				</view>
			</view>
			<!-- 认证信息 -->
			<view class="noCardWarp">
				<view class="flex flex-direction">
					<view class="text-xl text-bold flex">
						认证信息<view class="text-grey">(必填)</view>
					</view>
					<u-form labelPosition="left" :model="enterpriseObj" :rules="rules" ref="uForm">
						<view class="flex justify-between">
							<u-form-item class="w50">
								<u-input placeholder="经营者姓名" :disabled="canEditBtn" disabledColor="#fff" v-model="enterpriseObj.name" border="none"></u-input>
							</u-form-item>
							<u-form-item class="w50">
								<u-input placeholder="经营者联系电话" :disabled="canEditBtn" disabledColor="#fff" v-model="enterpriseObj.phone" border="none"></u-input>
							</u-form-item>
						</view>
						<view class="flex justify-between">
							<u-form-item class="w50">
								<u-input placeholder="经营者性别"  disabledColor="#fff" v-model="enterpriseObj.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" disabledColor="#fff" v-model="enterpriseObj.age" border="none"></u-input>
							</u-form-item>
						</view>
						<u-form-item>
							<u-input placeholder="经营者身份证号" :disabled="canEditBtn" disabledColor="#fff" v-model="enterpriseObj.idcard" border="none"></u-input>
						</u-form-item>
            <u-form-item>
              <u-input placeholder="有效期" :disabled="canEditBtn" disabledColor="#fff" v-model="enterpriseObj.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="工/商业名称(填工商已有注册名称)" disabledColor="#fff" :disabled="canEditBtn" v-model="enterpriseObj.industryAndCommerce"
								border="none">
							</u-input>
						</u-form-item>
						<u-form-item>
							<u-input placeholder="统一社会信用代码(纳税人识别号)" :disabled="canEditBtn" disabledColor="#fff" v-model="enterpriseObj.socialUnifiedCreditCode"
								border="none">
<!--								<view slot="suffix">清空</view>-->
							</u-input>
						</u-form-item>
            <u-form-item>
              <u-input placeholder="认证气站" v-model="enterpriseObj.fSsczmc"  disabledColor="#fff" 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: {

		},
    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.optionsInfo.fRzzt)
      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();
    },
		watch: {},
		data() {
			return {
        pickShow: false,
        dateShow: false,
        canEditBtn:false,
        date: Number(new Date()),
				enterpriseObj: {
					name: "",
					phone: "",
					sex: "",
					age: "",
					idcard: "",
					industryAndCommerce: "",
					socialUnifiedCreditCode: "",
          termOfValidity:'',
          fSsczmc:'',
          fSsczID:'',
					front: [],
					back: [],
					yyzz: [],
					khxkz: [],
					frsfzzm: [],
					frsfzfm: [],
				},
        formData: {
          current: 1,
          size: -1,
          // jd: "114.347455", //PC无法定位调试使用
          // wd: "30.504396", //PC无法定位调试使用
          jd: "",
          wd: "",
        },
				rules: {},
				columns: [],
        sexColumns:[['男', '女']],
				picture: [],
        storeList:[],
        pickType:''
			}
		},
		onLoad(data) {

		},
		methods: {
      //获取审核详细信息
      async getRealNameDetail(){
        const reseult = await this.$api.realNameAuthApi.realNameDetailInfoPort(this.optionsInfo.id);
        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)
          });
        }
        if(value.fYyzz){
          let yyzzImg  = JSON.parse(value.fYyzz);
          let yyzzImgUrl = await this.$getPhotoUrl(yyzzImg[0].response.fileId);
          this.$set(this.picture,2,{
            temp:yyzzImgUrl,
            fileId:yyzzImg[0].response.fileId,
            fileObj: JSON.stringify(yyzzImg)
          });
        }
        if(value.fKhxkz){
          let khxkzImg  = JSON.parse(value.fKhxkz);
          let khxkzImgUrl = await this.$getPhotoUrl(khxkzImg[0].response.fileId);
          this.$set(this.picture,3,{
            temp:khxkzImgUrl,
            fileId:khxkzImg[0].response.fileId,
            fileObj: JSON.stringify(khxkzImg)
          });
        }
        if(value.fFrsfzrxy){
          let frsfzrxImg  = JSON.parse(value.fFrsfzrxy);
          let frsfzrxImgUrl = await this.$getPhotoUrl(frsfzrxImg[0].response.fileId);
          this.$set(this.picture,4,{
            temp:frsfzrxImgUrl,
            fileId:frsfzrxImg[0].response.fileId,
            fileObj: JSON.stringify(frsfzrxImg)
          });
        }
        if(value.fFrsfzghy){
          let frsfzghImg  = JSON.parse(value.fFrsfzghy);
          let frsfzghImgUrl = await this.$getPhotoUrl(frsfzghImg[0].response.fileId);
          this.$set(this.picture,5,{
            temp:frsfzghImgUrl,
            fileId:frsfzghImg[0].response.fileId,
            fileObj: JSON.stringify(frsfzghImg)
          });
        }
        this.enterpriseObj.fSsczmc = value.fSsczmc;
        this.enterpriseObj.name = value.fXm;
        this.enterpriseObj.age = value.fNl;
        this.enterpriseObj.sex = value.fXb;
        this.enterpriseObj.phone = value.fSjh;
        this.enterpriseObj.idcard = value.fSfzh;
        this.enterpriseObj.industryAndCommerce = value.fSymc;
        let date = value.fSfzhyxq?value.fSfzhyxq.substring(0,10):'';
        console.log('打印date',date);
        this.enterpriseObj.termOfValidity = date;
        this.enterpriseObj.socialUnifiedCreditCode = value.fShtysbm;
        this.enterpriseObj.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)));
        }
      },
      //选择选择器的数据
      selectPickCloums(type){
        this.pickType = type;
        this.pickShow = true;
        switch (type){
          case 'sex':
            this.columns = this.sexColumns;
            break;
          case 'rzqz':
            // let storeArry = [];
            // this.storeList.map((item)=>{
            //   storeArry.push({
            //     fSsczID:item.id,
            //     fSsczmc:item.fCzmc
            //   })
            // });
            let mcArrayList = this.storeList.map((item)=>item.fCzmc);
            this.columns = [mcArrayList];
            console.log('打印this.c',this.columns);
            break;
        }
      },
      //选择器确认的事件
			sexConfirm(e) {
				console.log(e);
        console.log(this.enterpriseObj.sex);
        let value = e.value[0];
        switch (this.pickType){
          case "sex":
            this.enterpriseObj.sex = value;
            break;
          case 'rzqz':
            this.enterpriseObj.fSsczmc = value;
            let choseObj = this.storeList.filter((item)=> item.fCzmc == value);
            this.enterpriseObj.fSsczID = choseObj[0]?choseObj[0].id:'';
            console.log('打印choseObj',choseObj);
            break;
        }
				this.pickShow = false;
			},
      //日期选择的确认事件
      dateConfirm(e) {
        console.log(e);
        let date = this.$u.timeFormat(e.value, 'yyyy-mm-dd')
        this.enterpriseObj.termOfValidity = date;
        this.dateShow = false;
      },
      //上传图片
			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);
					}
				});
			},
      //预览图片
			previewPicture(url) {
				this.$previewPicture(url);
			},
      //删除图片
      deleteImg(index){
			  this.$set(this.picture,index,undefined);
        console.log('打印this.picture',this.picture);
			  // this.picture[index] =empty//删除索引为index的元素
      }
		}
	}
</script>

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


	.idCardWarp {
		background: #F4F5F8;
		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>