<template>
  <div class="tab-content">
    <div class="info-section">
      <el-form :model="contractSearchParams" label-width="70px" style="margin-bottom: 20px">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-form-item label="合同编号">
              <el-input v-model="contractSearchParams.contractNo" placeholder="请输入合同编号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同名称">
              <el-input v-model="contractSearchParams.contractName" placeholder="请输入合同名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同类型">
              <el-select v-model="contractSearchParams.contractType" placeholder="请选择" clearable filterable style="width: 100%">
                <el-option v-for="item in contractTypeDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开始时间">
              <el-date-picker v-model="contractSearchParams.contractStartTime" type="date" placeholder="请选择" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="6">
            <el-form-item label="结束时间">
              <el-date-picker v-model="contractSearchParams.contractEndTime" type="date" placeholder="请选择" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同状态">
              <el-select v-model="contractSearchParams.contractStatus" placeholder="请选择" clearable filterable style="width: 100%">
                <el-option v-for="item in contractStatusDict" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="0">
              <el-button type="primary" icon="Search" @click="emit('search')">搜索</el-button>
              <el-button icon="Refresh" @click="emit('reset')">重置</el-button>
              <el-button v-if="!isViewMode" icon="Plus" type="primary" @click="emit('add')">添加合同</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div class="section-title">合同信息列表</div>

      <el-table :data="contractList" border style="width: 100%">
        <el-table-column prop="contractNo" label="合同编号" align="center" />
        <el-table-column prop="contractName" label="合同名称" align="center" />
        <el-table-column prop="contractType" label="合同类型" align="center">
          <template #default="scope">
            <span>{{ getContractTypeText(scope.row.contractType) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="contractAmount" label="金额（万）" align="center">
          <template #default="scope">
            <span>{{ scope.row.contractAmount || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="contractStartTime" label="起始时间" align="center">
          <template #default="scope">
            <span>{{ scope.row.contractStartTime ? formatDate(scope.row.contractStartTime) : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="contractEndTime" label="截止时间" align="center">
          <template #default="scope">
            <span>{{ scope.row.contractEndTime ? formatDate(scope.row.contractEndTime) : '-' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="createTime" label="上传时间" align="center">
          <template #default="scope">
            <span>{{ scope.row.createTime ? formatDate(scope.row.createTime) : '-' }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="contractAttachment" label="附件管理" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.contractAttachment" link type="primary" @click="emit('viewAttachment', scope.row)">查看附件</el-button>
            <span v-else>-</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="contractStatus" label="状态" align="center">
          <template #default="scope">
            <span>{{ getContractStatusText(scope.row.contractStatus) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template #default="scope">
            <el-button link type="primary" @click="emit('view', scope.row)">查看</el-button>
            <el-button v-if="!isViewMode" link type="primary" @click="emit('edit', scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px; display: flex; justify-content: flex-end">
        <el-pagination
          v-model:current-page="contractPagination.pageNum"
          v-model:page-size="contractPagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="contractPagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="emit('sizeChange', $event)"
          @current-change="emit('currentChange', $event)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  contractSearchParams: any;
  contractList: any[];
  contractPagination: { pageNum: number; pageSize: number; total: number };
  isViewMode: boolean;
  contractTypeDict: any[];
  contractStatusDict: any[];
  formatDate: (date: any) => string;
  getContractTypeText: (type: any) => string;
  getContractStatusText: (status: any) => string;
}>();

const emit = defineEmits<{
  (e: 'search'): void;
  (e: 'reset'): void;
  (e: 'add'): void;
  (e: 'viewAttachment', row: any): void;
  (e: 'view', row: any): void;
  (e: 'edit', row: any): void;
  (e: 'sizeChange', size: number): void;
  (e: 'currentChange', page: number): void;
}>();
</script>
