<script setup name="ProjectManageList">
import { getCurrentInstance, reactive, ref, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import { useRouter } from 'vue-router'
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
import { changeRoute } from '@/utils/switchRoute'

import QueryForm from './QueryForm.vue'
import AddStrategyDialog from './modules/AddStrategyDialog.vue'
import StrategyDetailDialog from './modules/StrategyDetailDialog.vue' // 引入详情组件
import EditStrategyDialog from './modules/EditStrategyDialog.vue' // 引入编辑策略组件

const appStore = useAppStore()
const permissionStore = usePermissionStore()
const router = useRouter()
const emit = defineEmits(['page'])
const { proxy } = getCurrentInstance()

// 新增策略弹窗引用
const addStrategyDialogRef = ref()

function onReset(formQuery) {
  console.log('onReset')
  formQuery.resetFields()
  handleQuery()
}

function onQuery() {
  handleQuery()
}

// 搜索按钮操作
function handleQuery() {
  console.log('queryParams',queryParams.value)
  queryParams.value.pageNum = 1
  getList()
}

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 8
  }
})

// 表格数据
const { queryParams } = toRefs(data)
const total = ref(3)
const loading = ref(false)

// 查询列表
function getList() {
  loading.value = true
  setTimeout(() => {
      loading.value = false
  }, 3000)
}

function pageProjectManage() {
  changeRoute()

  router.push({
    path: '/project/Project'
  })
}

/**
 * 新增策略
 */
function handleAdd(){
  addStrategyDialogRef.value.openDialog()
}

const tableData = ref([
  {
    index: 1,
    id: '1',
    name: '测试',
    remark: '123',
    createTime: '2025-08-21 16:55:30',
    creator: 'admin',
    status: '1'
  }
])
const strategyDetailDialogRef = ref()
const showDetail = (row) => {
  strategyDetailDialogRef.value.openDialog(row)
}
// 编辑策略弹窗引用
const editStrategyDialogRef = ref()
const editStrategy = (row) => {
 console.log('编辑策略:', row)
  editStrategyDialogRef.value.openDialog(row)
}

const deleteStrategy = (row) => {
  ElMessageBox.confirm(
    `确定删除【${row.name}】策略吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          // 这里调用实际删除API
          setTimeout(() => {
            done()
            // 删除成功后刷新数据或从tableData中移除
            tableData.value = tableData.value.filter(item => item.index !== row.index)
          }, 1000)
        } else {
          done()
        }
      }
    }
  ).then(() => {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  }).catch(() => {
    // 用户取消删除
  })
}

const toggleStatus = (row) => {
  console.log('启用/禁用:', row)
  // changeRoleStatus(row.roleId, row.status).then(() => {
  //   ElMessage({
  //     type: 'success',
  //     message: '操作成功',
  //   })
  // })
}
</script>

<template>
  <div class="app-container scroller">
    <PageTitle :back="true" @back="pageProjectManage">
      <template #title>
        返回项目管理
      </template>
      <template #buttons>
        <el-button
          type="primary"
          @click="handleAdd"
        > 
          新增策略
        </el-button>
      </template>
    </PageTitle>
    
    <div class="app-container__body">
      <div>
        <query-form
          ref="QueryFormRef"
          v-model="queryParams"
          @query="onQuery"
          @reset="onReset"/>
       <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        >
          <el-table-column prop="index" label="序号" width="80" align="center" />
          <el-table-column prop="name" label="策略名称" min-width="120" />
          <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
          <el-table-column prop="createTime" label="创建时间" min-width="180" />
          <el-table-column prop="creator" label="创建人" width="120" />
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="row.status === '1' ? 'success' : 'info'">
                {{ row.status === '1' ? '已启用' : '未启用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280" align="center">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="showDetail(row)">详情</el-button>
              <el-divider direction="vertical" />
              <el-button link type="primary" size="small" @click="editStrategy(row)">编辑策略</el-button>
              <el-divider direction="vertical" />
              <el-button link type="danger" size="small" @click="deleteStrategy(row)">删除</el-button>
              <el-divider direction="vertical" />
              <el-button link type="success" size="small" @click="toggleStatus(row)">
                {{ row.status === '1' ? '禁用' : '启用' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
          
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 新增策略弹窗 -->
    <AddStrategyDialog ref="addStrategyDialogRef" />
     <!-- 详情弹窗 -->
    <StrategyDetailDialog ref="strategyDetailDialogRef" />

     <!-- 编辑策略弹窗 -->
    <EditStrategyDialog ref="editStrategyDialogRef" />
  </div>
</template>

<style lang="scss" scoped>
.table-item {
  margin-top: var(--container-pd);
  margin-bottom: 20px;
}

.item-content {
  margin: 8px 0;
  .label {
    width: 80px;
    color: #888;
  }
}

.flex-container { 
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.flex1 {
  flex: 1;
}
.flex-wrap {
  flex-direction: wrap;
}
</style>