<script lang="ts" setup>
import ReadMore from "@/pages-sub/components/read-more/index.vue"

const props = defineProps({
  schoolDetail: {
    type: Object,
    default: () => ({
      schoolName: '',
      tags: '',
      region: '',
      schoolNature: "",
      overview: "",
      admissionOfficePhone: "",
      officialWebsite: ""
    })
  }
})

const officePhoneList = computed(() => {
  return JSON.parse(props.schoolDetail.admissionOfficePhone || '[]')
})

const contacts = computed(() => {
 
  const phone = officePhoneList.value.length > 0 ? officePhoneList.value[0]["phone"] : '暂无电话' 
  return [
  {
    title: '招办电话', msg: phone, type: 'phone', typeLabel: '拨打', eventClick: () => {
      visible.value = true;
      renderType.value = 'phone';
    }
  },
  {
    title: '学校官网', msg: props.schoolDetail.officialWebsite, type: 'view', typeLabel: '复制', eventClick: () => {
      uni.setClipboardData({
        data: props.schoolDetail.officialWebsite
      })
    }
  },
  {
    title: '就读地址', msg: props.schoolDetail.address, type: 'navigation', typeLabel: '导航', eventClick: () => {
      uni.openLocation({
        longitude: Number.parseFloat(props.schoolDetail.lng),
        latitude: Number.parseFloat(props.schoolDetail.lat),
        address: props.schoolDetail.address,
        name: props.schoolDetail.address,
        scale: 5
      })
    }
  },
  {
    title: '公众号', msg: props.schoolDetail.schoolName, type: 'gzh', typeLabel: '查看', eventClick: () => {
      visible.value = true;
      renderType.value = 'gzh';
    }
  }
]
})

const visible = ref(false)

const onOverlayClick = () => {
  visible.value = false
}

const renderType = ref("phone")

const makePhoneCall = (val: string) => {
  uni.makePhoneCall({ phoneNumber: val })
}
</script>

<template>
  <view class="bg-[#f8f8f8]">
    <view class="bg-white flex flex-col px-[30rpx] py-[20rpx]">
      <view class="text-[#000] font-500 text-[30rpx] mb-[10rpx]">学校概况</view>
      <ReadMore :paragraph="schoolDetail.overview" />
    </view>
    <view class="px-[30rpx] pt-[20rpx] bg-white mt-[20rpx]">
      <view class="text-[30rpx] text-black font-500">联系方式</view>
      <view
        class="flex items-center text-[26rpx] text-[#333] border-b-[2rpx] border-b-solid border-b-[#ededed] py-[22rpx]"
        v-for="(val, index) in contacts" :key="index">
        <view class="min-w-max">{{ val.title }}:</view>
        <view>{{ val.msg }}</view>
        <view
          class="ml-auto border-[2rpx] border-solid text-[#1580FF] border-[#1580FF] rounded-[8rpx] px-[12rpx] py-[8rpx] text-[22rpx] min-w-max"
          @click="val.eventClick">{{ val.typeLabel }}</view>
      </view>
    </view>

    <sar-popup :visible="visible" effect="slide-bottom" @overlay-click="onOverlayClick">
      <view class="bg-white pb-safe rounded-[24rpx_24rpx_0_0]" v-if="renderType === 'phone'">
        <view
          class="text-[#1580FF] py-[32rpx] text-center not-last:border-b-1 not-last:border-b-[#eaeaea] not-last:border-b-solid"
          v-for="value in officePhoneList" :key="value" @click="makePhoneCall(value.phone)">
          {{ value.name }}:{{ value.phone }}
        </view>
        <view class="bg-[#F2F2F2] h-[16rpx]"></view>
        <view class="text-[34rpx] text-[#000] text-center pt-[32rpx]" @click="onOverlayClick">取消</view>
      </view>


      <view class="bg-white pb-safe rounded-[24rpx_24rpx_0_0]" v-if="renderType === 'gzh'">
        <view class="text-[34rpx] font-500 flex items-center justify-between p-[30rpx]">
          <view>官方微信公众号</view>
          <view class="w-[36rpx] h-[36rpx] flex items-center" @click="onOverlayClick">
            <image src="https://lwzk.ycymedu.com/img/tianbao/tb_guanbi.png" mode="scaleToFill"
              class="w-[36rpx] h-[36rpx]" />
          </view>
        </view>
        <view class="h-[560rpx] flex flex-col justify-center">
          <view class="flex items-center justify-center">
            <view class="border-[2rpx] border-solid border-[#3b9df4]">
              <view class="w-[292rpx] h-[292rpx]">
                <image :src="schoolDetail.wechatQrcode" mode="scaleToFill" :show-menu-by-longpress="true"
                  class="w-[292rpx] h-[292rpx]" />
              </view>
            </view>
          </view>
          <view class="flex justify-center mt-[20rpx]">
            <view class="w-[28rpx] h-[34rpx] flex items-center">
              <image src="https://lwzk.ycymedu.com/img/qt/wd_zhiwen.png" mode="scaleToFill"
                class="w-[28rpx] h-[34rpx]" />
            </view>
            <view class="text-[28rpx]">长按识别二维码关注公众号</view>
          </view>
        </view>
      </view>
    </sar-popup>
  </view>
</template>

<style lang="scss" scoped></style>
