<template>
  <div class="contract-list">
    <!-- 筛选区和按钮操作区合并 -->
    <div class="filter-section" style="padding: 10px; border-bottom: 1px solid #e4e7ed;">
      <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
        <div style="display: flex; align-items: center; gap: 10px;">
          <el-input 
            v-model="queryParams.contractName" 
            placeholder="请输入合同名称" 
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 200px;"
          />
          <el-button 
            icon="el-icon-search" 
            size="mini" 
            @click="toggleMoreFilter"
            :type="showMoreFilter ? 'primary' : 'default'"
          >
            {{ showMoreFilter ? '收起' : '更多' }}
          </el-button>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="$emit('add')">新增</el-button>
        </div>
      </div>
      
      <!-- 更多筛选条件 -->
      <div v-show="showMoreFilter" class="more-filter" style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e4e7ed;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
          <el-form-item label="合同编号" prop="contractNo">
            <el-input v-model="queryParams.contractNo" placeholder="请输入合同编号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="供方" prop="supplier">
            <el-input v-model="queryParams.supplier" placeholder="请输入供方" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="需方" prop="customer">
            <el-input v-model="queryParams.customer" placeholder="请输入需方" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="签订时间" prop="signTime">
            <el-date-picker clearable v-model="queryParams.signTime" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择签订时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="交货日期" prop="deliveryDate">
            <el-date-picker clearable v-model="queryParams.deliveryDate" type="date" value-format="yyyy-MM-dd"
              placeholder="请选择交货日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="签订地点" prop="signLocation">
            <el-input v-model="queryParams.signLocation" placeholder="请输入签订地点" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="合同状态" prop="contractStatus">
            <el-select v-model="queryParams.contractStatus" placeholder="请选择合同状态">
              <el-option label="草稿" value="0" />
              <el-option label="已生效" value="1" />
              <el-option label="已作废" value="2" />
              <el-option label="已完成" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="custom-list" v-loading="loading">
      <div class="list-body">
        <div 
          v-for="row in contractList" 
          :key="row.contractId"
          class="list-item" 
          style="padding: 10px; border-bottom: 2px solid #dddddd; cursor: pointer;"
          :class="{ 'list-item-active': selectedRow === row }"
          @click="handleRowClick(row)"
        >
          <!-- 合同名称和编号 -->
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <div style="font-weight: bold;">{{ row.contractName }}</div>
            <div style="font-size: 12px; color: #606266;">{{ row.contractNo }}</div>
          </div>
          
          <!-- 供方和需方 -->
          <div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
            <span>供方: {{ row.supplier }}</span>
            <span style="margin-left: 20px;">需方: {{ row.customer }}</span>
          </div>
          
          <!-- 签订时间和交货日期 -->
          <div style="font-size: 12px; color: #909399; margin-bottom: 6px;">
            <span>签订时间: {{ parseTime(row.signTime, '{y}-{m}-{d}') }}</span>
            <span style="margin-left: 20px;">交货日期: {{ parseTime(row.deliveryDate, '{y}-{m}-{d}') }}</span>
          </div>
          
          <!-- 签订地点和状态 -->
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
            <div style="font-size: 12px; color: #909399;">
              签订地点: {{ row.signLocation }}
            </div>
            <el-tag
              :type="row.status == 0 ? 'info' : row.status == 1 ? 'success' : row.status == 2 ? 'danger' : 'primary'"
              size="small">
              {{ row.status == 0 ? '草稿' : row.status == 1 ? '已生效' : row.status == 2 ? '已作废' : '已完成' }}
            </el-tag>
          </div>
          
          <!-- 操作按钮独占一行 -->
          <div style="display: flex; gap: 10px; padding-top: 8px; border-top: 1px dashed #f0f0f0;">
            <el-button size="mini" type="text" icon="el-icon-download"
              @click.stop="$emit('exportContract', row)">导出</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="$emit('update', row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="$emit('delete', row)">删除</el-button>
          </div>
        </div>
        <div v-if="contractList.length === 0" style="padding: 40px; text-align: center; color: #909399;">
          暂无合同数据
        </div>
      </div>
    </div>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" style="padding: 10px; margin-bottom: 10px !important;" />
  </div>
</template>

<script>
import { listContract, updateContract } from "@/api/crm/contract";

export default {
  name: "ContractList",
  data() {
    return {
      // 合同信息表格数据
      contractList: [],
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 选中的行
      selectedRow: null,
      // 是否显示更多筛选
      showMoreFilter: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        contractName: undefined,
        contractNo: undefined,
        supplier: undefined,
        customer: undefined,
        signTime: undefined,
        deliveryDate: undefined,
        signLocation: undefined,
        status: undefined,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询合同信息列表 */
    getList() {
      this.loading = true;
      listContract(this.queryParams).then(response => {
        this.contractList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 状态变更 */
    handleChangeStatus(row) {
      updateContract(row).then(response => {
        this.$message({
          message: "状态变更成功",
          type: "success"
        });
        this.getList();
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.handleQuery();
    },

    // 行点击事件
    handleRowClick(row) {
      this.selectedRow = row;
      this.$emit('rowClick', row);
    },
    // 切换更多筛选显示/隐藏
    toggleMoreFilter() {
      this.showMoreFilter = !this.showMoreFilter;
    }
  }
};
</script>

<style scoped>
.contract-list {
  height: 100%;
  overflow-y: auto;
}

.custom-list {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.list-item:hover {
  background-color: #f5f7fa;
}

.list-item-active {
  background-color: #ecf5ff;
  border-left: 3px solid #409eff;
}

@media screen and (max-width: 1200px) {
  .list-header {
    font-size: 12px;
  }
  
  .list-item {
    font-size: 12px;
  }
  
  .list-item .el-button {
    font-size: 10px;
  }
}
</style>