<template>
  <div class="asset-tree-page">
    <div class="asset-container">
      <!-- 左侧资产类型树 -->
      <div class="asset-tree">
        <el-card class="tree-card">
          <template #header>
            <div class="tree-header">
              <span>资产类型</span>
              <el-button type="primary" size="small" @click="showAssetTypeDialog = true">管理</el-button>
            </div>
          </template>
          <el-input
            v-model="treeKeyword"
            placeholder="搜索资产类型"
            clearable
            class="tree-search"
          />
          <el-tree
            ref="treeRef"
            :data="typeTreeData"
            :props="{ label: 'assetTypeName', children: 'childrenList' }"
            node-key="id"
            highlight-current
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span class="node-count" v-if="data.count">({{ data.count }})</span>
              </span>
            </template>
          </el-tree>
        </el-card>
      </div>

      <!-- 右侧资产列表 -->
      <div class="asset-list">
        <el-card class="table-card">
          <el-form :inline="true" :model="filters" size="small" class="filter-form">
            <el-form-item label="关键词">
              <el-input v-model="filters.keyword" placeholder="请输入关键词" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="fetchList">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="openAddDialog(null)">新增资产</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="showMarkTypeDialog = true">资产分类管理</el-button>
            </el-form-item>
          </el-form>
        
          <el-table
            :data="tableData"
            row-key="id"
            border
            style="width: 100%;"
            height="calc(100% - 120px)"
          >
            <el-table-column prop="assetName" label="资产名称" min-width="120" />
            <el-table-column prop="assetNumber" label="资产编号" min-width="100" />
            <el-table-column 
              prop="markType" 
              label="资产分类" 
              min-width="100"
            >
              <template #default="{ row }">
                {{ markTypeOptions.find(opt => opt.value === row.markType)?.label || row.markType }}
              </template>
            </el-table-column>
            <el-table-column 
              prop="assetTypeId" 
              label="资产类型" 
              min-width="100"
            >
              <template #default="{ row }">
                {{ assetTypeOptions.find(opt => opt.value == row.assetTypeId)?.label || row.assetTypeId }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" min-width="120" />
            <el-table-column label="操作" min-width="180" fixed="right">
              <template #default="{ row }">
                <el-button size="small" type="warning" @click="openEditDialog(row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin: 16px 0 0; text-align: right"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 50, 100]"
          />
        </el-card>
      </div>
    </div>

    <!-- 弹窗集成 -->
    <el-dialog v-model="showMarkTypeDialog" title="资产分类管理" width="900px" top="5vh" :close-on-click-modal="false">
      <AssetCategoryView />
    </el-dialog>
    <!-- 弹窗集成 -->
    <el-dialog v-model="showAssetTypeDialog" title="资产类型管理" width="900px" top="5vh" :close-on-click-modal="false" @closed="fetchTypeTree">
      <AssetTypeView />
    </el-dialog>
    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="showDialog" :title="dialogType==='add'?'新增资产':'编辑资产'" width="500px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="资产名称" required>
          <el-input v-model="form.assetName" />
        </el-form-item>
        <el-form-item label="资产编号">
          <el-input v-model="form.assetNumber" />
        </el-form-item>
        <el-form-item label="资产分类">
          <el-select v-model="form.markType" placeholder="请选择资产分类" filterable clearable>
            <el-option v-for="item in markTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="资产类型">
          <el-select v-model="form.assetTypeId" placeholder="请选择资产类型" filterable clearable>
            <el-option v-for="item in assetTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog=false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import rpc from '../utils/rpc'
import AssetTypeView from './AssetTypeView.vue'
import AssetCategoryView from './AssetCategoryView.vue'

const treeRef = ref()
const treeKeyword = ref('')
const typeTreeData = ref<any[]>([])
const tableData = ref<any[]>([])
const showDialog = ref(false)
const dialogType = ref<'add'|'edit'>('add')
const form = reactive<any>({})
const filters = reactive({ 
  keyword: '',
  assetTypeId: null as number | null
})
const total = ref(0)
const pageSize = ref(20)
const currentPage = ref(1)
const markTypeOptions = ref<{label:string,value:number}[]>([])
const assetTypeOptions = ref<{label:string,value:number}[]>([])
const showMarkTypeDialog = ref(false)
const showAssetTypeDialog = ref(false)

// 监听树形搜索关键词
watch(treeKeyword, (val) => {
  treeRef.value?.filter(val)
})

// 树形过滤方法
const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.assetTypeName.includes(value)
}

// 获取资产类型树
const fetchTypeTree = async () => {
  const res = await rpc.post('/assetType/tree', {})
  typeTreeData.value = (res as any) || []
}

// 获取资产列表
const fetchList = async () => {
  const res = await rpc.post('/asset/list', {
    ...filters,
    pageSize: pageSize.value,
    currentPage: currentPage.value
  })
  const data = res as any
  tableData.value = data.rows || []
  total.value = data.total || 0
}

// 获取资产分类选项
const fetchMarkTypeOptions = async () => {
  const res = await rpc.post('/markType/list', {})
  const rows = (res as any)?.rows || []
  markTypeOptions.value = rows.map((item:any) => ({ label: item.markTypeName, value: item.markTypeId }))
}

// 获取资产类型选项
const fetchAssetTypeOptions = async () => {
  const res = await rpc.post('/assetType/list', {})
  const rows = (res as any)?.rows || []
  assetTypeOptions.value = rows.map((item:any) => ({ label: item.assetTypeName, value: item.id }))
}

// 点击树节点
const handleNodeClick = (data: any) => {
  filters.assetTypeId = data.id
  currentPage.value = 1
  fetchList()
}

const openAddDialog = (parent: any) => {
  dialogType.value = 'add'
  showDialog.value = true
  Object.assign(form, {
    id: null,
    assetName: '',
    assetNumber: '',
    markType: '',
    assetTypeId: filters.assetTypeId || '',
    remark: ''
  })
}

const openEditDialog = (data: any) => {
  dialogType.value = 'edit'
  showDialog.value = true
  Object.assign(form, { ...data })
}

const handleDelete = (data: any) => {
  ElMessageBox.confirm('确定删除该资产吗？', '提示', { type: 'warning' })
    .then(async () => {
      await rpc.post('/asset/delete', { id: data.id })
      ElMessage.success('删除成功')
      fetchList()
    })
    .catch(() => {})
}

const submitForm = async () => {
  if (!form.assetName) {
    ElMessage.error('请输入资产名称')
    return
  }
  if (dialogType.value === 'add') {
    await rpc.post('/asset/create', form)
    ElMessage.success('新增成功')
  } else {
    await rpc.post('/asset/update', form)
    ElMessage.success('编辑成功')
  }
  showDialog.value = false
  fetchList()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  fetchList()
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  fetchList()
}

onMounted(() => {
  fetchTypeTree()
  fetchMarkTypeOptions()
  fetchAssetTypeOptions()
  fetchList()
})
</script>

<style scoped>
.asset-tree-page {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #041236 0%, #02081A 100%);
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-sizing: border-box;
}

.asset-container {
  display: flex;
  gap: 20px;
  height: 100%;
}

.asset-tree {
  width: 280px;
  flex-shrink: 0;
}

.asset-list {
  flex: 1;
  min-width: 0;
}

.tree-card {
  height: 100%;
  background: rgba(4, 26, 71, 0.7);
  border-radius: 8px;
  box-shadow: 0 0 20px #0003;
}

.tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6eeaff;
  font-size: 16px;
  font-weight: bold;
}

.tree-search {
  margin-bottom: 16px;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-count {
  color: #00c3ff;
  font-size: 12px;
}

.table-card {
  height: 100%;
  background: rgba(4, 26, 71, 0.7);
  border-radius: 8px;
  box-shadow: 0 0 20px #0003;
  display: flex;
  flex-direction: column;
}

.filter-form {
  padding: 0 0 8px 0;
}

.el-table {
  background: transparent;
  color: #e6f7ff;
}

.el-table th {
  background: #002140;
  color: #6eeaff;
  font-weight: bold;
  font-size: 15px;
}

.el-table .el-button {
  box-shadow: 0 0 8px #00c3ff88;
  border-radius: 4px;
}

.el-pagination {
  margin-top: 16px;
}

:deep(.el-tree) {
  background: transparent;
  color: #e6f7ff;
}

:deep(.el-tree-node__content:hover) {
  background: rgba(0, 195, 255, 0.1);
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background: rgba(0, 195, 255, 0.2);
  color: #00c3ff;
}

:deep(.el-input__wrapper) {
  background: rgba(0, 33, 64, 0.5);
  box-shadow: 0 0 0 1px rgba(0, 195, 255, 0.2);
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px rgba(0, 195, 255, 0.4);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #00c3ff;
}

:deep(.el-select .el-input__wrapper) {
  background: rgba(0, 33, 64, 0.5);
}
</style> 