<template>
    <div ref="contractList" style="padding: 0 20px;">
      <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="支付表格配置">
        <div slot="content"></div>
        <slot>
            <!-- 搜索区域 -->
            <div class="search-wrapper">
                <div class="selects">
                    <div>
                    <span style="padding: 0 6px;word-break: keep-all;">表格名称</span>
                    <el-input v-model="searchForm.name" placeholder="请输入表格名称" style="width: 180px" />
                    </div>

                    <div>
                    <span style="padding: 0 6px;word-break: keep-all;">状态</span>
                    <el-select v-model="searchForm.status" placeholder="所有状态" style="width: 180px">
                        <el-option label="所有状态" value=""></el-option>
                        <el-option label="草稿" value="draft"></el-option>
                        <el-option label="已发布" value="published"></el-option>
                        <el-option label="已禁用" value="disabled"></el-option>
                    </el-select>
                    </div>

                    <div>
                    <span style="padding: 0 6px;word-break: keep-all;">类型</span>
                    <el-select v-model="searchForm.type" placeholder="所有类型" style="width: 180px">
                        <el-option label="所有类型" value=""></el-option>
                        <el-option label="HTML" value="html"></el-option>
                        <el-option label="DOCX" value="docx"></el-option>
                    </el-select>
                    </div>

                    <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
                    <el-button style="margin-left: 10px" type="primary" @click="handleSearch">查询</el-button>
                </div>
                
                <!-- 新增按钮 -->
                <div class="operation-wrapper">
                    <el-button type="primary" @click="handleCreate">新增</el-button>
                </div>
            </div>
        </slot>
       </lx-header>


    <!-- 表格区域 -->
    <div class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="表格名称"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)" effect="plain">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="scenes" label="已使用场景"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" @click="handlePreview(scope.row)">预览</el-button>
            <el-button 
              size="small" 
              :type="scope.row.status === 'disabled' ? 'success' : 'danger'"
              @click="handleStatusChange(scope.row)"
            >
              {{ scope.row.status === 'disabled' ? '启用' : '禁用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PayFormConfig',
  data() {
    return {
      searchForm: {
        name: '',
        status: '',
        type: ''
      },
      tableData: [
        {
          name: '项目采购支付表格',
          type: 'HTML',
          status: 'published',
          scenes: '项目采购、设备采购',
          createTime: '2024-03-01 10:00',
          updateTime: '2024-03-05 15:30'
        },
        {
          name: '差旅报销表格',
          type: 'DOCX',
          status: 'draft',
          scenes: '差旅报销、交通费报销',
          createTime: '2024-03-02 14:20',
          updateTime: '2024-03-02 14:20'
        },
        {
          name: '会议费用报销表格',
          type: 'DOCX',
          status: 'disabled',
          scenes: '会议费用、培训费用',
          createTime: '2024-02-28 09:15',
          updateTime: '2024-03-03 11:45'
        }
      ],
      total: 30,
      currentPage: 1
    }
  },
  methods: {
    handleCreate() {
      this.$router.push('/payment-form-config/create')
    },
    handleSearch() {
      // 实现搜索逻辑
      console.log('Search with:', this.searchForm)
    },
    resetSearch() {
      this.searchForm = {
        name: '',
        status: '',
        type: ''
      }
    },
    handleEdit(row) {
      this.$router.push(`/payment-form-config/edit/${row.id}`)
    },
    handlePreview(row) {
      // 实现预览逻辑
      this.$message.info(`预览：${row.name}`)
    },
    handleStatusChange(row) {
      const action = row.status === 'disabled' ? '启用' : '禁用'
      this.$confirm(`确定要${action}该表格吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实现状态变更逻辑
        this.$message.success(`${action}成功`)
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },
    handlePageChange(page) {
      this.currentPage = page
      // 实现分页加载逻辑
    },
    getStatusType(status) {
      const types = {
        published: 'success',
        draft: 'info',
        disabled: 'danger'
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        published: '已发布',
        draft: '草稿',
        disabled: '已禁用'
      }
      return texts[status] || status
    }
  }
}
</script>

<style lang="scss" scoped>
.search-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  margin-top: 16px;
}

.selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  & > div {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    margin-right: 10px;

    span {
      white-space: nowrap;
      color: #606266;
    }
  }

  :deep(.el-input__inner) {
    height: 32px;
    line-height: 32px;
  }

  :deep(.el-button) {
    height: 32px;
    padding: 0 15px;
  }
}

.operation-wrapper {
  margin-left: 16px;
  white-space: nowrap;
}

.table-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.w-100 {
  width: 100%;
}

:deep(.el-table) {
  margin-top: 20px;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}
</style>



