<template>
  <view :class="{ 'lock-scroll': popupShow }">
    <view v-if="showDirectly&&directUnderFlag==0">
      <view class="flexbox">
        <view>
          有效日期至
          <text class="text-primary">{{ form?.validityDate?.slice(0, 10) }}</text>
        </view>
        <view>
          <text v-if="activeStatus==0&&authenticationStatusa" class="text-danger">未激活</text>
          <text v-else>
            <text v-if="authenticationStatusa == 0 ||!authenticationStatusa" class="text-danger">未认证</text>
            <text v-if="authenticationStatusa == 1" class="text-success">认证中</text>
            <text v-if="authenticationStatusa == 2" class="text-success">已认证</text>
            <text v-if="authenticationStatusa == 3" class="text-danger">认证未通过</text>
            <text v-if="authenticationStatusa == 4" class="text-danger">即将过期</text>
            <text v-if="authenticationStatusa == 5" class="text-danger">已过期</text>
          </text>
        </view>
      </view>
      <view class="flexbox" style="justify-content: flex-end;padding: 0 30rpx 40rpx;">
        <button v-if="activeStatus==0&&authenticationStatusa" class="btn-red" size="mini"
                style="margin: 0 20rpx 0 0;" @click="payTheFees">激活
        </button>
        <view v-else>
          <button :disabled="auditStatus==1||auditStatus==2||form.isPoints==0" class="btn-red" size="mini"
                  style="margin: 0 20rpx 0 0;"
                  @click="showApplyDialog">考点申请
          </button>
          <button :disabled="btn" class="btn-red" size="mini" style="margin: 0 20rpx 0 0;"
                  @click="payTheFees">去缴费
          </button>
          <button v-if="form.deptType!=1" class="btn-red-kx" size="mini" style="margin: 0 20rpx 0 0;"
                  @click="auditEditFN">审核详情
          </button>
        </view>
      </view>
    </view>
    <view class="mainbox">
      <uni-list>
        <uni-list-item v-if="authenticationStatusa != 1&&authenticationStatusa != 0&&authenticationStatusa != 3"
                       :rightText="form.aname" title="所属协会">
        </uni-list-item>
        <uni-list-item v-if="form.menCode" :rightText="form.menCode" title="会员编号"/>
        <uni-list-item :rightText="form.name" title="机构名称"/>
        <uni-list-item title="所属省份">
          <template v-slot:footer>
            <view class="frrr">
              <uni-data-picker v-model="form.belongProvinceId" :clear-icon="false" :localdata="options"
                               readonly>
              </uni-data-picker>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item
          v-if="authenticationStatusa != 1&&authenticationStatusa != 0&&authenticationStatusa != 3&&newResult||form.associateId&&form.associateId>0||activeStatus==1"
          :rightText="form.creditCode"
          title="社会信用代码"/>
        <uni-list-item v-if="form.certSiteContact" :rightText="form.certSiteContact" title="联系人"/>
        <uni-list-item v-else :rightText="form.contact" title="联系人"/>
        <uni-list-item v-if="form.certSiteTel" :rightText="form.certSiteTel" title="联系方式"/>
        <uni-list-item v-else :rightText="form.phone" title="联系方式"/>
        <uni-list-item title="认证地址">
          <template v-slot:footer>
            <view class="frrr">
              <uni-data-picker v-if="form.certRegionId" v-model="form.certRegionId" :clear-icon="false"
                               :localdata="options" readonly>
              </uni-data-picker>
              <uni-data-picker v-else-if="form.certCityId" v-model="form.certCityId" :clear-icon="false"
                               :localdata="options" readonly>
              </uni-data-picker>
              <uni-data-picker v-else-if="form.certProvinceId" v-model="form.certProvinceId" :clear-icon="false"
                               :localdata="options" readonly>
              </uni-data-picker>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item :rightText="form.certAddress" title="认证详细地址"/>
        <uni-list-item :rightText="form.certLegal||'--'" title="法人姓名"/>
        
        <uni-list-item v-if="form.deptType==6" :rightText="form.isPoints==0?'是':'否'" title="是否为考点"/>
        <uni-list-item clickable title="法人身份证">
          <template v-slot:footer>
            <view v-if="form.legalIdcPhotoArr&&form.legalIdcPhotoArr?.length>0" class="frrr">
              <image v-for="(item,index) in form.legalIdcPhotoArr" :key="item" :src="item"
                     class="ylImage" mode="aspectFit" @click="showImage(form.legalIdcPhotoArr,index)">
              </image>
            </view>
          </template>
        </uni-list-item>
        
        <uni-list-item clickable title="营业执照">
          <template v-slot:footer>
            <view v-if="form.businessLicenseArr&&form.businessLicenseArr?.length>0" class="frrr"
                  @click="download(form.businessLicenseArr[0]?.url)">
              <text class="text-primary">{{ form.businessLicenseArr[0]?.name }}</text>
            </view>
          </template>
        </uni-list-item>
        <uni-list-item clickable title="机构照片">
          <template v-slot:footer>
            <view class="frrr">
              <view v-if="form.picturesArr&&form.picturesArr?.length>0" class="photoBook"
                    @click="showImage(form.picturesArr,0)">
                <image :src="form.picturesArr[0]" class="ylImage" mode="aspectFit">
                </image>
                <text>共{{ form.picturesArr?.length }}张</text>
              </view>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <!-- 弹窗添加触摸事件拦截 -->
    <uni-popup ref="applyPopup" type="center" @close="onPopupClose" @open="onPopupOpen"
               @touchmove.stop.prevent="() => {}">
      <view class="apply-dialog" @touchmove.stop.prevent="() => {}">
        <view class="dialog-title">考点申请</view>
        <view class="dialog-content">
          <text class="remind">友情提示：非考点无法申请级位考试</text>
        </view>
        <view class="dialog-buttons">
          <button class="btn-cancel" @click="closeApplyDialog">暂不申请</button>
          <button class="btn-confirm" @click="goToApplyPage">立即申请</button>
        </view>
      </view>
    </uni-popup>
    <view class="height1"></view>
  </view>
</template>

<script setup>
import * as api from '@/common/api.js'
import config from '@/config.js'
import * as loginServer from '@/common/login.js';

import _ from 'underscore'
import {
  ref,
  onUnmounted
} from 'vue'
import {
  onLoad,
  onShow
} from '@dcloudio/uni-app'

const app = getApp()
const form = ref({
  type: 1
})
const userType = ref()
const activeStatus = ref(0)
const directUnderFlag = ref(0)
const showDirectly = ref(true)
const authenticationStatusa = ref()
const result = ref(false)
const resultNoProvince = ref(false)
const newResult = ref(false)
const btn = ref(false)
const type = ref(true)
const flag = ref(false)
const pr = ref({})
const applicationForMembership1 = ref({})
const options = ref([])
const applyPopup = ref(null)
// 新增：控制弹窗显示状态（用于锁定滚动）
const popupShow = ref(false)
// 考点审核状态  0 未提交 1 审核中 2 审核成功 3 审核失败
const auditStatus = ref(0)

onShow(() => {
  init()
  if (form.value.deptType != 1) { // 修复：原代码deptType未定义，改为form.value.deptType
    getMyStatusAPI()
  }
})

// 页面卸载时恢复滚动（防止异常锁死）
onUnmounted(() => {
  uni.setPageScrollEnabled({
    enabled: true
  })
  popupShow.value = false
})

function init() {
  api.regionsList().then(res => {
    options.value = res.data
  })
  api.getMyOwnMemberInfo().then(res => {
    console.log(res)
    userType.value = app.globalData.userType
    newResult.value = res.data.newResult
    result.value = res.data.result
    resultNoProvince.value = res.data.resultNoProvince2
    authenticationStatusa.value = res.data.authenticationStatus
    showDirectly.value = !res.data.memberInfo.associateId
    activeStatus.value = res.data.memberInfo.activeStatus
    pr.value = res.data.pr
    directUnderFlag.value = res.data.memberInfo.directUnderFlag
    if (authenticationStatusa.value == 0) {
      btn.value = false
    } else if (authenticationStatusa.value == 1) {
      btn.value = true
    } else {
      // btn.value = !result.value
      btn.value = !resultNoProvince.value
    }
    // 认证信息
    if (authenticationStatusa.value == 0 || authenticationStatusa.value == 3) {
      type.value = false
    }
    // 至少审核通过一次
    if (authenticationStatusa.value != 0) {
      if (newResult.value) {
        // 至少认证过一次
        flag.value = true
      }
    }
    if (!res.data.memberInfo) {
      res.data.memberInfo = {}
    }
    if (!res.data.dept) {
      res.data.dept = {}
    }
    form.value = {
      ...res.data.dept,
      ...res.data.memberInfo
    }
    // 入会材料
    if (form.value.materials) {
      form.value.materials1 = JSON.parse(form.value.materials)
    }
    // 入会申请书
    if (form.value.applicationForMembership) {
      form.value.applicationForMembership1 = JSON.parse(form.value.applicationForMembership)
    }
    applicationForMembership1.value = form.value.applicationForMembership || []
    form.value.deptType = res.data.dept.deptType
    
    if (form.value.businessLicense) {
      form.value.businessLicenseArr = []
      try {
        form.value.businessLicenseArr = JSON.parse(form.value.businessLicense) || []
      } catch (e) {
        form.value.businessLicenseArr = [{
          url: form.value.businessLicense,
          name: '营业执照'
        }]
      }
      console.log('营业执照', form.value.businessLicenseArr)
    }
    if (form.value.certLegalIdcPhoto && form.value.certLegalIdcPhoto != null) {
      form.value.legalIdcPhotoArr = []
      var arr = form.value.certLegalIdcPhoto?.split(',') || []
      if (arr.length > 0) {
        arr = _.map(arr, (p) => {
          if (p.indexOf('http') == -1) {
            console.log(p)
            p = config.baseUrl_api + p
          }
          return p
        })
        form.value.legalIdcPhotoArr = arr
      }
      console.log('法人身份证', form.value.legalIdcPhotoArr)
    }
    if (form.value.certPictures) {
      form.value.picturesArr = []
      var arr = form.value.certPictures.split(',') || []
      if (arr.length > 0) {
        arr = _.map(arr, (p) => {
          if (p.indexOf('http') == -1) {
            p = config.baseUrl_api + p
          }
          return p
        })
        form.value.picturesArr = arr
      }
      console.log(form.value.picturesArr)
    }
  })
}

async function getMyStatusAPI() {
  const {
    data
  } = await api.getMyStatus()
  if (data && data.auditStatus) {
    auditStatus.value = data.auditStatus
  } else {
    auditStatus.value = 0
  }
}

// 新增：弹窗打开时锁定滚动
function onPopupOpen() {
  popupShow.value = true
  // 1. 小程序API锁定页面滚动
  uni.setPageScrollEnabled({
    enabled: false
  })
  // 延时兜底（防止API生效延迟）
  setTimeout(() => {
    uni.setPageScrollEnabled({
      enabled: false
    })
  }, 100)
}

// 新增：弹窗关闭时恢复滚动
function onPopupClose() {
  popupShow.value = false
  // 恢复页面滚动
  uni.setPageScrollEnabled({
    enabled: true
  })
  setTimeout(() => {
    uni.setPageScrollEnabled({
      enabled: true
    })
  }, 100)
}

function showApplyDialog() {
  applyPopup.value.open()
}

// 关闭申请弹窗
function closeApplyDialog() {
  applyPopup.value.close()
}

// 跳转到考点申请页面
function goToApplyPage() {
  closeApplyDialog()
  uni.navigateTo({
    url: `/myCenter/examPointApply?memId=${form.value.memId}`
  })
}

function auditEditFN() {
  uni.navigateTo({
    url: `/myCenter/reviewList`
  })
}

function showImage(arr, index) {
  uni.previewImage({
    urls: arr,
    current: index,
    success: function (res) {
    }
  })
}

function download(url) {
  console.log(url)
  if (url.indexOf('.png') > -1 || url.indexOf('.jpg') > -1) {
    if (url.indexOf('http') > -1) {
      uni.previewImage({
        urls: [url],
        success: function (res) {
        }
      })
    } else {
      uni.previewImage({
        urls: [config.baseUrl_api + url],
        success: function (res) {
        }
      })
    }
  } else {
    if (url.indexOf('http') > -1) {
      goWebView(url)
    } else {
      goWebView(config.baseUrl_api + url)
    }
  }
}

function goWebView(url) {
  url = url.replace("http://", "https://")
  uni.showLoading({
    title: '下载中'
  });
  uni.downloadFile({
    url: url,
    success: function (res) {
      uni.hideLoading();
      var filePath = res.tempFilePath;
      uni.showLoading({
        title: '正在打开'
      });
      uni.openDocument({
        filePath: filePath,
        showMenu: true,
        success: function (res) {
          uni.hideLoading();
        },
        fail: function (err) {
          uni.hideLoading();
          uni.showToast({
            title: err,
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    fail: function (error) {
      uni.hideLoading();
      uni.showToast({
        title: `下载失败`,
        icon: 'none',
        duration: 2000
      });
    }
  });
}

function payTheFees() {
  if (!form.value.name) {
    uni.showToast({
      title: `请先完善单位信息`,
      icon: 'none'
    });
    return; // 新增：防止无名称时跳转
  }
  uni.navigateTo({
    url: `/myCenter/perfect`
  })
}
</script>

<style lang="scss" scoped>
// 新增：锁定滚动的核心样式
.lock-scroll {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden !important;
  height: 100vh !important;
}

.height1 {
  height: 100rpx;
}

.photobox {
  position: relative;
  margin: 30rpx auto;
  
  .photo {
    width: 210rpx;
    height: 280rpx;
    background-color: #f4f4f4;
    display: block;
    margin: auto;
  }
}

.ylImage {
  width: 300rpx;
  height: 200rpx;
  display: block;
  box-shadow: 0 0 10rpx #ddd;
  border-radius: 8rpx;
}

.photoBook {
  position: relative;
  border-radius: 10rpx;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  }
  
  text {
    position: absolute;
    z-index: 1;
    font-size: 24rpx;
    color: #fff;
    bottom: 4rpx;
    right: 8rpx;
  }
}

.frrr {
  width: 100%;
  text-align: right;
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

:deep(.selected-list) {
  font-size: 32rpx;
  padding: 0;
}

:deep(.input-value) {
  padding: 0;
}

:deep(.uni-list-item__extra-text) {
  font-size: 32rpx;
  color: #000;
}

:deep(.uni-list-item__extra) {
  flex: 1 1 auto;
}

:deep(.uni-list-item__content) {
  flex: 0 0 auto;
}

:deep(.uni-list-item__content-title) {
  color: #999;
}

.flexbox {
  padding: 30rpx;
  background-color: #fff;
  justify-content: space-between;
}

.mainbox {
  margin: 30rpx;
}

.apply-dialog {
  width: 530rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  // 新增：禁止弹窗内部滚动
  touch-action: none;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.dialog-content {
  margin: 40rpx;
}

.remind {
  color: #FF8124;
  font-size: 26rpx;
  margin-top: 40rpx;
}

.dialog-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.btn-cancel {
  width: 225rpx;
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 40rpx;
  background: #fff;
  color: #333;
  text-align: center;
  font-size: 14px;
}

.btn-confirm {
  width: 225rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  background: #C4121B;
  font-size: 14px;
  color: #fff;
  text-align: center;
}

// 新增：给uni-popup蒙版添加禁止滚动样式
:deep(.uni-popup__mask) {
  touch-action: none !important;
}
</style>