<!-- 未来社区 - 便民电话 -->
<template>
  <view class="cp-page">
    <view class="fc-nav" :style="{ paddingTop: statusBarTop + 'px' }">
      <view class="fc-nav-bar">
        <view class="fc-back" @tap="goBack"><u-icon name="arrow-left" color="#1a1a1a" size="38"></u-icon></view>
        <text class="fc-nav-title">便民电话</text>
      </view>
    </view>

    <view class="cp-body">
      <view class="cp-tip"><u-icon name="info-circle" color="#f53d42" size="28"></u-icon><text>{{ phoneTip }}</text></view>

      <view class="cp-card" v-for="item in phoneList" :key="item.id">
        <view class="cp-icon" :style="{ background: item.iconBg }"><u-icon :name="item.icon" color="#fff" size="44"></u-icon></view>
        <view class="cp-main">
          <text class="cp-name">{{ item.name }}</text>
          <text class="cp-phone">{{ item.phone }}</text>
          <text class="cp-time">{{ item.time }}</text>
        </view>
        <view class="cp-dial" @tap="onDial(item)"><u-icon name="phone" color="#f53d42" size="40"></u-icon></view>
      </view>
      <view class="fc-spacer"></view>
    </view>
  </view>
</template>

<script>
import { phoneTip, phoneList } from '../data.js'

export default {
  data() { return { statusBarTop: 20, phoneTip, phoneList } },
  onLoad() {
    const sys = uni.getSystemInfoSync()
    this.statusBarTop = sys.statusBarHeight || 20
  },
  methods: {
    goBack() { uni.navigateBack({ delta: 1 }) },
    onDial(item) {
      const tel = item.phone.replace(/\s/g, '')
      uni.makePhoneCall({ phoneNumber: tel, fail: () => uni.showToast({ title: '拨打 ' + item.name + '：' + item.phone, icon: 'none' }) })
    }
  }
}
</script>

<style scoped>
page { background: #f5f6f7; }
.cp-page { min-height: 100vh; background: #f5f6f7; }
.fc-nav { position: sticky; top: 0; z-index: 100; background: #fff; padding: 0 24rpx 16rpx; }
.fc-nav-bar { position: relative; display: flex; align-items: center; justify-content: center; height: 88rpx; }
.fc-back { position: absolute; left: 0; top: 0; height: 88rpx; display: flex; align-items: center; }
.fc-nav-title { font-size: 34rpx; font-weight: 700; color: #1a1a1a; }

.cp-body { padding: 20rpx; }
.cp-tip { display: flex; align-items: center; background: #fff2ee; border-radius: 25rpx; padding: 22rpx 28rpx; }
.cp-tip text { margin-left: 12rpx; font-size: 24rpx; color: #676c74; }
.cp-card { display: flex; align-items: center; background: #fff; border-radius: 20rpx; border: 1rpx solid #eeeef0; box-shadow: 0 5rpx 16rpx rgba(0,0,0,0.055); padding: 28rpx; margin-top: 20rpx; }
.cp-icon { flex-shrink: 0; width: 96rpx; height: 96rpx; border-radius: 22rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; }
.cp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-name { font-size: 30rpx; font-weight: 700; color: #111; }
.cp-phone { font-size: 26rpx; color: #666b72; margin-top: 8rpx; }
.cp-time { font-size: 22rpx; color: #9098a0; margin-top: 8rpx; }
.cp-dial { flex-shrink: 0; width: 84rpx; height: 84rpx; border-radius: 999rpx; background: #fff0f0; display: flex; align-items: center; justify-content: center; }
.fc-spacer { height: 40rpx; }
</style>
