<template>
  <view class="institution-page">
    <view class="loading-wrap" v-if="loading">
      <uni-load-more status="loading"></uni-load-more>
    </view>

    <view v-else>
      <!-- 基本信息 -->
      <view class="section">
        <view class="section-header">
          <uni-icons type="office" size="18" color="#AD181F"></uni-icons>
          <text class="section-title">基本信息</text>
        </view>
        <view class="info-card">
          <view class="info-row">
            <text class="label">所属协会</text>
            <text class="value">{{ form.parentDeptName || '-' }}</text>
          </view>
          <!-- <view class="info-row">
            <text class="label">会员编号</text>
            <text class="value">{{ form.menCode || '-' }}</text>
          </view> -->
          <view class="info-row">
            <text class="label">机构名称</text>
            <text class="value">{{ form.name || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">认证地址</text>
            <text class="value">{{ form.provinceStr + form.cityStr + form.regionStr   || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">详细地址</text>
            <text class="value">{{ form.adress || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">联系人</text>
            <text class="value">{{ form.siteContact || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">联系方式</text>
            <text class="value">{{ form.siteTel || '-' }}</text>
          </view>
          <view class="info-row" v-if="form.applyPoints !== undefined">
            <text class="label">是否为考点</text>
            <text class="value">{{ form.applyPoints == 1 ? '是' : '否' }}</text>
          </view>
    
        </view>
      </view>

      <!-- 营业执照 -->
      <view class="section" v-if="form.businessLicense">
        <view class="section-header">
          <uni-icons type="document" size="18" color="#AD181F"></uni-icons>
          <text class="section-title">营业执照</text>
        </view>
        <view class="info-card">
          <view class="info-row">
            <text class="label">营业执照名称</text>
            <text class="value">{{ form.companyName || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">社会信用代码</text>
            <text class="value">{{ form.creditCode || '-' }}</text>
          </view>
          <view class="info-row" v-if="form.validityDate">
            <text class="label">有效期</text>
            <text class="value">{{ form.validityDate }}</text>
          </view>
              <view class="info-row">
                <text class="label">营业执照</text>
                <view>
                <template v-slot:footer>
                  <view style="width: 50vw;word-break: break-all;text-align: right;" @click="download(form.businessLicense[0]?.url)" v-if="form.businessLicense&&form.businessLicense?.length>0">
                    <text class="text-primary">{{form.businessLicense[0]?.name}}</text>

                  </view>
                </template>
              </view>
          </view>
        </view>
      </view>

      <!-- 法人信息 -->
      <view class="section">
        <view class="section-header">
          <uni-icons type="person" size="18" color="#AD181F"></uni-icons>
          <text class="section-title">法人信息</text>
        </view>
        <view class="info-card">
          <view class="info-row">
            <text class="label">法人姓名</text>
            <text class="value">{{ form.legal || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">法人证件号</text>
            <text class="value">{{ form.legalIdcCode || '-' }}</text>
          </view>
        </view>
      </view>

      <!-- 证件照片 -->
      <view class="section" v-if="form.legalIdcPhoto && form.legalIdcPhoto.length > 0">
        <view class="section-header">
          <uni-icons type="photo" size="18" color="#AD181F"></uni-icons>
          <text class="section-title">法人证件照</text>
        </view>
        <view class="image-list">
          <image
            v-for="(img, index) in form.legalIdcPhoto"
            :key="index"
            class="preview-image"
            :src="getImageUrl(img)"
            mode="aspectFit"
            @click="previewImage(form.legalIdcPhoto, index)"
          />
        </view>
      </view>

      <!-- 机构照片 -->
      <view class="section" v-if="form.pictures && form.pictures.length > 0">
        <view class="section-header">
          <uni-icons type="image" size="18" color="#AD181F"></uni-icons>
          <text class="section-title">机构照片</text>
        </view>
        <view class="image-list">
          <image
            v-for="(img, index) in form.pictures"
            :key="index"
            class="preview-image"
            :src="getImageUrl(img)"
            mode="aspectFit"
            @click="previewImage(form.pictures, index)"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import * as api from '@/common/api.js'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// const config = require('@/config.js')
import config from '@/config.js'

const loading = ref(false)
const form = ref({})

onLoad((options) => {
  if (options.memId) {
    getInstitutionInfo(options.memId)
  }
})
	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) {
						console.log(res,[url],'111')
					}
				})
			} else {
				uni.previewImage({
					urls: [config.baseUrl_api + url],
					success: function(res) {
						console.log(url,'222')
					}
				})
			}
		} 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 getInstitutionInfo(memId) {
  loading.value = true
  api.getGroupMemberInfoById(memId).then(res => {
    loading.value = false
    if (res.data) {
      form.value = res.data
      form.value.businessLicense = JSON.parse((form.value.businessLicense))
      // 处理图片字段
      if (form.value.pictures && typeof form.value.pictures === 'string') {
        form.value.pictures = form.value.pictures.split(',').filter(Boolean)
      }
      if (form.value.legalIdcPhoto && typeof form.value.legalIdcPhoto === 'string') {
        form.value.legalIdcPhoto = form.value.legalIdcPhoto.split(',').filter(Boolean)
      }
    }
  }).catch(err => {
    loading.value = false
    console.error('获取机构资料失败', err)
    uni.showToast({
      title: '获取机构资料失败',
      icon: 'none'
    })
  })
}

function getImageUrl(path) {
  if (!path) return ''
  if (path.startsWith('http')) return path
  return config.baseUrl_api + path
}

function previewImage(images, currentIndex) {
  const urls = images.map(img => getImageUrl(img))
  uni.previewImage({
    urls: urls,
    current: currentIndex
  })
}
</script>

<style lang="scss" scoped>
.institution-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  padding-bottom: 40rpx;
}

.loading-wrap {
  padding: 100rpx 0;
  text-align: center;
}

.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;

  .section-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-left: 10rpx;
  }
}

.info-card {
  .info-row {
    display: flex;
    justify-content: space-between;
    padding: 16rpx 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .label {
      font-size: 26rpx;
      color: #999;
      flex-shrink: 0;
    }

    .value {
      font-size: 26rpx;
      color: #333;
      text-align: right;
      margin-left: 20rpx;
      flex: 1;
      word-break: break-all;
    }
  }
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;

  .preview-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    background-color: #f5f5f5;
  }
}
</style>