<template>
  <view class="hsc-page">
    <view class="hsc-list">
      <view class="hsc-card" v-for="c in contracts" :key="c.id" @tap="toDetail(c)">
        <view class="hsc-head">
          <text class="hsc-no">{{ c.contract_no }}</text>
          <text class="hsc-status" :class="'st' + c.status">{{ statusText(c.status) }}</text>
        </view>
        <view class="hsc-body">
          <view class="hsc-name">{{ c.contract_name }}</view>
          <view class="hsc-row">月薪：<text class="hsc-amount">¥{{ c.month_amount }}</text></view>
          <view class="hsc-row">结算：{{ c.settle_mode === 1 ? '平台月账单' : '线下自付' }}</view>
          <view class="hsc-row">合同期：{{ fmtDate(c.start_date) }} ~ {{ fmtDate(c.end_date) }}</view>
        </view>
      </view>
      <view v-if="contracts.length === 0" class="hsc-empty">暂无家政合同</view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return { contracts: [] }
  },
  onShow() {
    this.loadContracts()
  },
  methods: {
    loadContracts() {
      const userId = uni.getStorageSync('userId')
      request(apiArr.contractList, 'POST', { user_id: userId, page_num: 1, page_size: 50 }, {}, false).then(res => {
        this.contracts = res.rows || []
      })
    },
    statusText(s) {
      const map = { 1: '待签署', 2: '生效中', 3: '已到期', 4: '已解除', 5: '线下结算' }
      return map[s] || ''
    },
    fmtDate(v) {
      return v ? String(v).slice(0, 10) : ''
    },
    toDetail(c) {
      NavgateTo('/packages/homeService/contractDetail/index?id=' + c.id)
    }
  }
}
</script>

<style scoped>
.hsc-page { background: #f5f5f5; min-height: 100vh; padding: 20rpx; }
.hsc-card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; }
.hsc-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #f2f2f2; padding-bottom: 16rpx; }
.hsc-no { font-size: 26rpx; color: #888; }
.hsc-status { font-size: 26rpx; color: #FF370B; }
.hsc-status.st2 { color: #07c160; }
.hsc-status.st3, .hsc-status.st4 { color: #999; }
.hsc-body { padding-top: 16rpx; }
.hsc-name { font-size: 30rpx; color: #222; font-weight: 600; margin-bottom: 12rpx; }
.hsc-row { font-size: 26rpx; color: #555; margin-top: 8rpx; }
.hsc-amount { color: #FF370B; font-weight: 600; }
.hsc-empty { text-align: center; color: #999; font-size: 28rpx; padding-top: 120rpx; }
</style>
