<template>
  <!-- 样本库管理 -->
  <el-card class="sample-container">
    <div class="table-container">
      <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="sampleTableRef"
                  :columnsList="columnsList" :request-api="sampleListAPI" :handleColWidth="250">
        <template slot="tableTitle">
          <h3>数据列表</h3>
        </template>
        <template slot="tableActions">
          <el-button @click="handleAdd" v-hasPermi="['data:sample:add']" class="add-btn"><i
            class="el-icon-plus"></i> 新建样本库</el-button>
        </template>

        <template slot="sampleLibraryNum" slot-scope="{ data }">
          <span>{{ data.sampleLibraryNum }}</span>
        </template>
        <template slot="handle" slot-scope="{ data }">
          <el-button type="text" v-hasPermi="['data:sample:import']" class="action-btn"
                     style="color: #1f72ea" @click="openImportDialog(data)">
            导入
          </el-button>
          <el-button type="text" v-hasPermi="['data:sample:del']" class="action-btn"
                     style="color: #EAA819" @click="handleUpdate(data)">
            修改
          </el-button>
          <el-button type="text" v-hasPermi="['data:sample:del']" class="action-btn"
                     style="color: #DB3E29" @click="handleDelete(data)">
            删除
          </el-button>
        </template>
      </TableModel>
    </div>
    <!-- 新建/修改样本库弹窗 -->
    <SampleForm v-if="showSampleForm" :title="title" :rowData="row" :isAdd="isAdd" @closeDialog="showSampleForm = false"
                :width="600" @handleQuery="handleQuery" />

    <!-- 导入ZIP图片弹窗 -->
    <SampleImport
      :sampleLibraryId="currentSampleId"
      :visible="showImportDialog"
      @closeDialog="showImportDialog = false"
      @refreshList="handleQuery"
    />
  </el-card>
</template>

<script>
import TableModel from '@/components/TableModel2'
import { columnsList, formLabel } from './config'
import { sampleListAPI, delSampleDataAPI } from '@/api/data/sample'
import SampleForm from './components/SampleForm.vue'
import SampleImport from './components/SampleImport.vue'

export default {
  name: 'Sample',
  components: {
    TableModel,
    SampleForm,
    SampleImport // 注册导入弹窗组件
  },
  data() {
    return {
      formLabel,
      columnsList,
      sampleListAPI,
      showSampleForm: false,
      title: '',
      row: {},
      isAdd: '', // 新增/修改标识
      showImportDialog: false, // 控制导入弹窗显隐（初始false）
      currentSampleId: '' // 当前选中的样本库ID
    }
  },

  created() { },

  methods: {
    /** 新增按钮操作 */
    handleAdd() {
      this.title = '新建样本库'
      this.isAdd = 'add'
      this.showSampleForm = true
    },

    /** 修改操作 */
    handleUpdate(row) {
      this.title = '修改样本库'
      this.isAdd = 'edit'
      this.row = row
      this.showSampleForm = true
    },

    /** 打开导入ZIP弹窗 */
    openImportDialog(data) {
      this.currentSampleId = data.sampleLibraryId // 传递选中的样本库ID
      this.showImportDialog = true // 显示导入弹窗
    },

    /* 搜索/刷新列表操作 */
    handleQuery() {
      this.$refs.sampleTableRef.getTableList()
    },

    /** 删除操作 */
    handleDelete(row) {
      this.$confirm(
        `确定要删除"${row.sampleLibraryName}"吗？删除后将无法恢复！`,
        '操作提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true,
          customClass: 'delete-confirm-dialog',
        },
      ).then(() => {
        delSampleDataAPI({
          sampleLibraryId: row.sampleLibraryId,
        })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.handleQuery()
            } else {
              this.$message.error(res.msg || '删除失败')
            }
          })
          .catch((error) => {
            console.error('删除失败:', error)
          })
      })
    },
  },
}
</script>

<style scoped lang="scss">
.sample-container {
  height: calc(100vh - 84px);
  overflow: hidden;
  background: linear-gradient(180deg, #f1f6ff 20%, #e5efff 100%);
}

::v-deep .table-card {
  height: calc(100vh - 230px) !important;
}

.add-btn {
  width: 121px;
  height: 36px;
  background: #1f72ea;
  box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
  border-radius: 4px 4px 4px 4px;
  color: #fff;
  border: none;
  font-size: 14px;
  transition: all 0.3s;

  &:hover {
    background: #4a8bff;
    box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
  }
}

.action-btn {
  margin-right: 8px;

  &:last-child {
    margin-right: 0;
  }
}
</style>
