<!--
 * @Author: Devin
 * @Date: 2021-07-29 11:57:53
 * @LastEditTime: 2021-07-30 17:05:49
 * @LastEditors: Devin
 * @Description: 表格检查页面
 * email: das.devin@outlook.com
-->
<template>
  <div class="apaas-custom-model-check custom-page">
    <div class="page-header">
      <div class="header-left">
        <el-button
          type="text"
          icon="el-icon-arrow-left"
          class="back-button"
          @click.stop="handleBack"
        >
        </el-button>
        <div class="header-item">
          <span class="label">页面标题:</span>
          <span class="value">{{ pageTitle || '表格检查' }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleAdd">
          新增
        </el-button>
      </div>
    </div>

    <div class="page-search-panel">
      <el-form class="search-list">
        <el-form-item label="搜索条件1:" class="search-component">
          <el-input v-model="searchPanelValue.field1" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="搜索条件2:" class="search-component">
          <el-input v-model="searchPanelValue.field2" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="搜索条件3:" class="search-component">
          <el-input v-model="searchPanelValue.field3" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div class="search-button-group">
        <el-button @click="resetSearch">
          重置
        </el-button>
        <el-button type="primary" @click="handleSearch">
          查询
        </el-button>
      </div>
    </div>

    <div class="page-data-list">
      <x-vxe-table
        ref="vxeTable"
        :border="true"
        :seqWidth="40"
        :colConfigs="tableConfig.colConfigs"
        :tableData="tableData"
        :rowDraggable="tableConfig.rowDraggable"
        :seqType="tableConfig.seqType"
        :pagination="pagination"
        :layout="tableConfig.layout"
        :seqConfig="tableConfig.seqConfig"
        :autoSize="tableConfig.autoSize"
        :pageConfig="tableConfig.pageConfig"
        class="block-table"
        @table-row-click="rowClickEvent"
        @size-change="pageSizeChange"
        @current-page-change="currentChange"
      >
        <template
          v-for="(colConfig, index) in tableConfig.colConfigs"
          v-slot:[colConfig.customSlot]="{ row, rowIndex }"
        >
          <div v-if="colConfig.customSlot === 'options'" :key="index + '' + rowIndex" class="operation-links">
            <a
              href="javascript:void(0)"
              class="el-link el-link--primary"
              @click.stop="handleRowEdit(row)"
            >修改</a>
            <span class="link-separator"></span>
            <a
              href="javascript:void(0)"
              class="el-link el-link--primary"
              @click.stop="handleRowDelete(row, rowIndex)"
            >删除</a>
          </div>
        </template>
        <template slot="empty">
          <div class="table-empty">
            <x-empty-page></x-empty-page>
          </div>
        </template>
      </x-vxe-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApaasCustomModelCheck',
  data: function() {
    return {
      pageTitle: '表格检查',
      searchPanelValue: {
        field1: '',
        field2: '',
        field3: ''
      },
      tableData: [],
      pagination: { currentPage: 1, pageSize: 10, total: 0 }
    }
  },
  computed: {
    tableConfig() {
      const baseColConfigs = [
        {
          prop: 'seq',
          label: '序号',
          width: '80',
          align: 'center'
        },
        {
          prop: 'field1',
          label: '字段1',
          showOverflowTooltip: true,
          minWidth: '150',
          align: 'center'
        },
        {
          prop: 'field2',
          label: '字段2',
          showOverflowTooltip: true,
          minWidth: '150',
          align: 'center'
        },
        {
          prop: 'field3',
          label: '字段3',
          showOverflowTooltip: true,
          minWidth: '150',
          align: 'center'
        }
      ]

      // 添加操作列
      baseColConfigs.push({
        prop: 'options',
        label: '操作',
        customSlot: 'options',
        align: 'center',
        width: '120',
        fixed: 'right'
      })

      return {
        rowDraggable: false,
        colConfigs: baseColConfigs,
        seqType: 'seq',
        seqConfig: {
          fixed: true
        },
        layout: 'total, prev, pager, next, sizes, jumper'
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    handleBack() {
      console.log('handleBack called')
      this.$emit('back')
    },
    pageSizeChange(size) {
      this.pagination.pageSize = size
      this.loadData()
    },
    rowClickEvent(row) {
      console.warn(row)
    },
    currentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.loadData()
    },
    selectDataChange(data) {
      this.$emit('select-data-change', data)
    },
    resetSearch() {
      this.searchPanelValue = {
        field1: '',
        field2: '',
        field3: ''
      }
      this.handleSearch()
    },
    handleSearch() {
      this.pagination.currentPage = 1
      this.loadData()
    },
    handleAdd() {
      this.$message.info('新增功能')
    },
    handleRowEdit(row) {
      this.$message.info('修改功能')
    },
    handleRowDelete(row, rowIndex) {
      this.$confirm('确定要删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 从数据列表中删除
        const index = this.tableData.findIndex(item => item === row)
        if (index !== -1) {
          this.tableData.splice(index, 1)
        }
        this.loadData()
        // this.$message.success('删除成功')
      }).catch(() => {
        // 取消删除
      })
    },
    loadData() {
      // 模拟数据
      const mockData = []
      for (let i = 1; i <= 10; i++) {
        mockData.push({
          seq: i,
          field1: `数据${i}`,
          field2: `内容${i}`,
          field3: `信息${i}`
        })
      }

      // 根据搜索条件过滤
      let filteredData = mockData
      if (this.searchPanelValue.field1) {
        filteredData = filteredData.filter(item =>
          item.field1.includes(this.searchPanelValue.field1)
        )
      }
      if (this.searchPanelValue.field2) {
        filteredData = filteredData.filter(item =>
          item.field2.includes(this.searchPanelValue.field2)
        )
      }
      if (this.searchPanelValue.field3) {
        filteredData = filteredData.filter(item =>
          item.field3.includes(this.searchPanelValue.field3)
        )
      }

      // 分页处理
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const end = start + this.pagination.pageSize
      this.tableData = filteredData.slice(start, end)

      // 更新序号
      this.tableData.forEach((item, index) => {
        item.seq = start + index + 1
      })

      this.pagination.total = filteredData.length
    }
  }
}
</script>

<style lang="scss">
.back-button {
  padding: 0 !important;
}
.header-item {
  .label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #303133 !important;
  }
  .value {
    font-size: 14px !important;
    font-weight: 300 !important;
  }
}
.custom-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    position: relative;
    width: 100%;
    min-height: 56px;
    background: #fff;
    border-bottom: 1px solid #ebeef5;
    padding: 0 20px;
    flex-shrink: 0;
    z-index: 10;

    .header-left {
      display: flex;
      align-items: center;
      gap: 20px;

      .back-button {
        padding: 0;
        margin-right: 8px;
        font-size: 14px;
        color: #409EFF;
        cursor: pointer;
        pointer-events: auto;

        &:hover {
          color: #66B1FF;
        }

        i {
          margin-right: 4px;
        }
      }

      .header-item {
        display: flex;
        align-items: center;
        gap: 8px;

        .label {
          color: #303133;
          font-size: 12px;
        }

        .value {
          color: #303133;
          font-size: 12px;
          font-weight: 500;
        }
      }
    }

    .header-right {
      display: flex;
      gap: 8px;
    }
  }

  .page-search-panel {
    display: flex;
    background: white;
    padding: 8px 20px 24px 20px;
    position: relative;
    flex-shrink: 0;

    .search-list {
      display: flex;
      flex: 1;
      max-width: calc(100% - 140px);
      flex-wrap: wrap;

      .search-component {
        width: calc(25% - 32px);
        padding: 24px 0;
        padding-right: 32px;
        padding-bottom: 0;
        .el-form-item {
          margin-bottom: 0;
          .el-form-item__label {
            font-size: 12px;
            line-height: unset;
            margin-bottom: 8px;
          }
        }

        .el-form-item__content {
          font-size: 12px;
          line-height: 32px;
        }
      }
    }

    .search-button-group {
      position: absolute;
      bottom: 24px;
      right: 20px;
    }
  }

  .page-data-list {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;

    .x-empty-page {
      top: 0;
    }
  }

  .operation-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    .el-link {
      font-size: 14px;
    }

    .link-separator {
      width: 4px;
      display: inline-block;
    }
  }
}
</style>
