<template>
  <view class="hcd-page" v-if="info.id">
    <view class="hcd-card">
      <view class="hcd-status" :class="'st' + info.status">{{ statusText(info.status) }}</view>
      <view class="hcd-name">{{ info.contract_name }}</view>
      <view class="hcd-no">合同编号：{{ info.contract_no }}</view>
    </view>
    <view class="hcd-block">
      <view class="hcd-item"><text class="hcd-label">月薪</text><text class="hcd-val amount">¥{{ info.month_amount }}</text></view>
      <view class="hcd-item"><text class="hcd-label">账单日</text><text class="hcd-val">每月 {{ info.pay_day }} 号</text></view>
      <view class="hcd-item"><text class="hcd-label">结算方式</text><text class="hcd-val">{{ info.settle_mode === 1 ? '平台月账单' : '线下自付' }}</text></view>
      <view class="hcd-item"><text class="hcd-label">合同开始</text><text class="hcd-val">{{ fmtDate(info.start_date) }}</text></view>
      <view class="hcd-item"><text class="hcd-label">合同结束</text><text class="hcd-val">{{ fmtDate(info.end_date) }}</text></view>
      <view class="hcd-item"><text class="hcd-label">联系人</text><text class="hcd-val">{{ info.contact_name || '-' }}</text></view>
      <view class="hcd-item"><text class="hcd-label">联系电话</text><text class="hcd-val">{{ info.contact_phone || '-' }}</text></view>
      <view class="hcd-item"><text class="hcd-label">服务地址</text><text class="hcd-val">{{ info.service_address || '-' }}</text></view>
      <view class="hcd-item" v-if="info.remark"><text class="hcd-label">备注</text><text class="hcd-val">{{ info.remark }}</text></view>
    </view>
    <view class="hcd-block" v-if="info.file_url">
      <view class="hcd-file" @tap="openFile">查看已签合同</view>
    </view>
  </view>
</template>

<script>
import { request, picUrl } from '@/utils'
import { apiArr } from '@/api/homeService'

export default {
  data() {
    return { picUrl, id: 0, info: {} }
  },
  onLoad(options) {
    this.id = Number(options.id)
    this.loadInfo()
  },
  methods: {
    loadInfo() {
      const userId = uni.getStorageSync('userId')
      request(apiArr.contractInfo, 'POST', { id: this.id, user_id: userId }, {}, false).then(res => {
        this.info = res || {}
      })
    },
    statusText(s) {
      const map = { 1: '待签署', 2: '生效中', 3: '已到期', 4: '已解除', 5: '线下结算' }
      return map[s] || ''
    },
    fmtDate(v) {
      return v ? String(v).slice(0, 10) : '-'
    },
    openFile() {
      const url = this.info.file_url.startsWith('http') ? this.info.file_url : this.picUrl + this.info.file_url
      uni.downloadFile({
        url,
        success: (d) => {
          uni.openDocument({ filePath: d.tempFilePath, showMenu: true })
        },
        fail: () => uni.showToast({ title: '打开失败', icon: 'none' })
      })
    }
  }
}
</script>

<style scoped>
.hcd-page { background: #f5f5f5; min-height: 100vh; padding: 20rpx; }
.hcd-card { background: #fff; border-radius: 16rpx; padding: 28rpx; margin-bottom: 20rpx; }
.hcd-status { font-size: 26rpx; color: #FF370B; margin-bottom: 12rpx; }
.hcd-status.st2 { color: #07c160; }
.hcd-status.st3, .hcd-status.st4 { color: #999; }
.hcd-name { font-size: 34rpx; color: #222; font-weight: 600; }
.hcd-no { font-size: 26rpx; color: #888; margin-top: 10rpx; }
.hcd-block { background: #fff; border-radius: 16rpx; padding: 8rpx 28rpx; margin-bottom: 20rpx; }
.hcd-item { display: flex; justify-content: space-between; padding: 22rpx 0; border-bottom: 1rpx solid #f2f2f2; }
.hcd-label { font-size: 28rpx; color: #888; }
.hcd-val { font-size: 28rpx; color: #222; max-width: 460rpx; text-align: right; }
.hcd-val.amount { color: #FF370B; font-weight: 600; }
.hcd-file { text-align: center; color: #2b6cff; font-size: 28rpx; padding: 24rpx 0; }
</style>
