<template>
  <div class="modern-page-container">
    <div class="page-wrapper">
      <!-- 搜索表单卡片 -->
      <el-card v-show="showSearch" class="search-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">
              <el-icon class="title-icon"><Search /></el-icon>
              筛选条件
            </span>
          </div>
        </template>
        <el-form :model="searchForm" ref="searchFormRef" :inline="true" @keyup.enter="handleSearch" class="search-form">
          <el-form-item label="异动类型编码" prop="turnoverType">
            <el-input
              v-model="searchForm.turnoverType"
              placeholder="请输入异动类型编码"
              clearable
              style="width: 200px" />
          </el-form-item>
          <el-form-item label="异动类型名称" prop="turnoverTypeName">
            <el-input
              v-model="searchForm.turnoverTypeName"
              placeholder="请输入异动类型名称"
              clearable
              style="width: 200px" />
          </el-form-item>
          <el-form-item label="是否流失" prop="isLoss">
            <el-select
              v-model="searchForm.isLoss"
              placeholder="请选择"
              clearable
              style="width: 200px">
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain icon="Search" @click="handleSearch">查询</el-button>
            <el-button icon="Refresh" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 内容卡片 -->
      <el-card class="content-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">
              <el-icon class="title-icon"><Setting /></el-icon>
              异动流失配置列表
            </span>
            <div class="header-actions">
              <el-button
                icon="Plus"
                type="primary"
                @click="handleAdd">
                新增配置
              </el-button>
              <right-toolbar
                v-model:showSearch="showSearch"
                class="ml10"
                @queryTable="getDataList">
              </right-toolbar>
            </div>
          </div>
        </template>

        <!-- 表格 -->
        <el-table
          :data="state.dataList"
          v-loading="state.loading"
          stripe
          :cell-style="tableStyle.cellStyle"
          :header-cell-style="tableStyle.headerCellStyle"
          class="modern-table">
          <el-table-column type="index" label="序号" width="70" align="center">
            <template #default="{ $index }">
              {{ $index + 1 + ((state.pagination?.current || 1) - 1) * (state.pagination?.size || 10) }}
            </template>
          </el-table-column>
          <el-table-column prop="turnoverType" label="异动类型编码" align="center" show-overflow-tooltip />
          <el-table-column prop="turnoverTypeName" label="异动类型名称" align="center" show-overflow-tooltip />
          <el-table-column prop="isLoss" label="是否流失" align="center" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.isLoss === '1' ? 'danger' : 'success'" size="small">
                {{ scope.row.isLoss === '1' ? '是' : '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" align="center" show-overflow-tooltip min-width="150" />
          <el-table-column prop="createTime" label="创建时间" align="center" width="180">
            <template #default="scope">
              {{ scope.row.createTime || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160" align="center" fixed="right">
            <template #default="scope">
              <el-button
                icon="Edit"
                link
                type="primary"
                @click="handleEdit(scope.row)">
                编辑
              </el-button>
              <el-button
                icon="Delete"
                link
                type="danger"
                @click="handleDelete(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-wrapper">
          <pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            v-bind="state.pagination" />
        </div>
      </el-card>
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
      :close-on-click-modal="false">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px">
        <el-form-item label="异动类型编码" prop="turnoverType">
          <el-input v-model="formData.turnoverType" placeholder="请输入异动类型编码" />
        </el-form-item>
        <el-form-item label="异动类型名称" prop="turnoverTypeName">
          <el-input v-model="formData.turnoverTypeName" placeholder="请输入异动类型名称" />
        </el-form-item>
        <el-form-item label="是否流失" prop="isLoss">
          <el-radio-group v-model="formData.isLoss">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="formData.remarks" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="StuTurnoverLossConfig">
import { reactive, ref } from 'vue'
import { BasicTableProps, useTable } from "/@/hooks/table";
import { fetchList, addObj, editObj, delObj } from "/@/api/stuwork/stuturnoverlossconfig";
import { useMessage, useMessageBox } from "/@/hooks/message";
import { Search, Setting, Plus, Edit, Delete } from '@element-plus/icons-vue'

// 定义变量
const searchFormRef = ref()
const formRef = ref()
const showSearch = ref(true)
const dialogVisible = ref(false)
const dialogTitle = ref('新增配置')
const submitLoading = ref(false)
const isEdit = ref(false)

// 搜索表单
const searchForm = reactive({
  turnoverType: '',
  turnoverTypeName: '',
  isLoss: ''
})

// 表单数据
const formData = reactive({
  id: '',
  turnoverType: '',
  turnoverTypeName: '',
  isLoss: '0',
  remarks: ''
})

// 表单验证规则
const formRules = {
  turnoverType: [{ required: true, message: '请输入异动类型编码', trigger: 'blur' }],
  turnoverTypeName: [{ required: true, message: '请输入异动类型名称', trigger: 'blur' }],
  isLoss: [{ required: true, message: '请选择是否流失', trigger: 'change' }]
}

// 配置 useTable
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: searchForm,
  pageList: fetchList,
  props: {
    item: 'records',
    totalCount: 'total'
  },
  createdIsNeed: true
})

// table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  tableStyle
} = useTable(state)

// 查询
const handleSearch = () => {
  getDataList()
}

// 重置
const handleReset = () => {
  searchFormRef.value?.resetFields()
  searchForm.turnoverType = ''
  searchForm.turnoverTypeName = ''
  searchForm.isLoss = ''
  getDataList()
}

// 新增
const handleAdd = () => {
  isEdit.value = false
  dialogTitle.value = '新增配置'
  resetForm()
  dialogVisible.value = true
}

// 编辑
const handleEdit = (row: any) => {
  isEdit.value = true
  dialogTitle.value = '编辑配置'
  resetForm()
  formData.id = row.id
  formData.turnoverType = row.turnoverType
  formData.turnoverTypeName = row.turnoverTypeName
  formData.isLoss = row.isLoss
  formData.remarks = row.remarks || ''
  dialogVisible.value = true
}

// 重置表单
const resetForm = () => {
  formData.id = ''
  formData.turnoverType = ''
  formData.turnoverTypeName = ''
  formData.isLoss = '0'
  formData.remarks = ''
  formRef.value?.resetFields()
}

// 提交
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    submitLoading.value = true
    if (isEdit.value) {
      await editObj(formData)
      useMessage().success('修改成功')
    } else {
      await addObj(formData)
      useMessage().success('新增成功')
    }
    dialogVisible.value = false
    getDataList()
  } catch (err: any) {
    if (err?.msg) {
      useMessage().error(err.msg)
    }
  } finally {
    submitLoading.value = false
  }
}

// 删除
const handleDelete = async (row: any) => {
  try {
    await useMessageBox().confirm('确定要删除该配置吗？')
    await delObj([row.id])
    useMessage().success('删除成功')
    getDataList()
  } catch (err: any) {
    if (err !== 'cancel') {
      useMessage().error(err.msg || '删除失败')
    }
  }
}
</script>

<style scoped lang="scss">
@import '/@/assets/styles/modern-page.scss';
</style>