<template>
  <view class="contract-container">
    <view class="contract-list">
      <view class="contract-item" v-for="(item, index) in contractList" :key="index" @click="viewContract(item)">
        <view class="contract-header">
          <image src="/static/images/微信图片_20250806143327_217.png" class="contract-icon"></image>
          <text class="contract-title">{{ item.title }}</text>
        </view>
        <view class="contract-info">
          <view class="info-item">
            <text class="label">合同编号：</text>
            <text class="value">{{ item.contractNo }}</text>
          </view>
          <view class="info-item">
            <text class="label">签订日期：</text>
            <text class="value">{{ item.signDate }}</text>
          </view>
          <view class="info-item">
            <text class="label">合同状态：</text>
            <text class="value">{{ item.status }}</text>
          </view>
        </view>
        <view class="contract-footer">
          <u-button type="primary" size="mini" @click.stop="downloadContract(item)">下载合同</u-button>
        </view>
      </view>
      <u-empty v-if="contractList.length === 0" text="暂无合同数据"></u-empty>
    </view>
    <view class="footer">
      <view class="p-30">
        <u-button type="success" shape="circle">上传合同</u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contractList: [
        {
          title: '售电服务合同',
          contractNo: 'SD2025080601',
          signDate: '2025-08-06',
          status: '已生效',
          url: ''
        }
      ]
    }
  },
  methods: {
    viewContract(contract) {
      // 查看合同详情
      console.log('查看合同:', contract)
    },
    downloadContract(contract) {
      // 下载合同
      uni.showToast({
        title: '开始下载合同',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contract-container {
  padding: 20px;

  .contract-list {
    .contract-item {
      background: #fff;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

      .contract-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .contract-icon {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }

        .contract-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }
      }

      .contract-info {
        .info-item {
          display: flex;
          margin-bottom: 8px;

          .label {
            color: #666;
            width: 80px;
          }

          .value {
            color: #333;
            flex: 1;
          }
        }
      }

      .contract-footer {
        margin-top: 15px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>
