<template>
  <GiPageLayout>
    <div class="standard-info-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">标准信息库</h2>
        <div class="page-actions">
          <a-button type="primary" @click="handleAddStandard">
            <template #icon><icon-plus /></template>
            新增标准
          </a-button>
          <a-button @click="handleRefresh">
            <template #icon><icon-refresh /></template>
            刷新
          </a-button>
        </div>
      </div>

      <!-- 搜索表单 -->
      <a-card class="search-card" :bordered="false">
        <a-form :model="searchForm" layout="inline">
          <a-form-item label="标准名称">
            <a-input 
              v-model="searchForm.name"
              placeholder="请输入标准名称"
              style="width: 200px"
              allow-clear
              @press-enter="handleSearch"
            />
          </a-form-item>
          <a-form-item label="标准类型">
            <a-select 
              v-model="searchForm.type"
              placeholder="请选择标准类型"
              style="width: 150px"
              allow-clear
            >
              <a-option value="national">国家标准</a-option>
              <a-option value="industry">行业标准</a-option>
              <a-option value="enterprise">企业标准</a-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="handleReset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!-- 数据表格 -->
      <a-card class="table-card" :bordered="false">
        <a-table 
          :columns="columns" 
          :data="tableData"
          :pagination="pagination"
          :loading="loading"
          row-key="id"
          @page-change="handlePageChange"
          @page-size-change="handlePageSizeChange"
        >
          <template #type="{ record }">
            <a-tag 
              :color="record.type === 'national' ? 'blue' : record.type === 'industry' ? 'green' : 'orange'"
            >
              {{ record.type === 'national' ? '国家标准' : record.type === 'industry' ? '行业标准' : '企业标准' }}
            </a-tag>
          </template>

          <template #status="{ record }">
            <a-tag 
              :color="record.status === 'active' ? 'green' : record.status === 'draft' ? 'orange' : 'red'"
            >
              {{ record.status === 'active' ? '有效' : record.status === 'draft' ? '草稿' : '失效' }}
            </a-tag>
          </template>

          <template #action="{ record }">
            <a-button 
              type="text" 
              size="small" 
              @click="handleView(record)"
            >
              查看
            </a-button>
            <a-button 
              type="text" 
              size="small" 
              @click="handleEdit(record)"
            >
              编辑
            </a-button>
            <a-button 
              type="text" 
              size="small" 
              status="danger"
              @click="handleDelete(record)"
            >
              删除
            </a-button>
          </template>
        </a-table>
      </a-card>

      <!-- 新增/编辑标准弹窗 -->
      <a-modal
        v-model:visible="modalVisible"
        :title="isEdit ? '编辑标准' : '新增标准'"
        width="800px"
        @ok="handleModalOk"
        @cancel="handleModalCancel"
      >
        <a-form :model="formData" layout="vertical">
          <a-form-item label="标准名称" required>
            <a-input v-model="formData.name" placeholder="请输入标准名称" />
          </a-form-item>
          <a-form-item label="标准编号" required>
            <a-input v-model="formData.code" placeholder="请输入标准编号" />
          </a-form-item>
          <a-form-item label="标准类型" required>
            <a-select v-model="formData.type" placeholder="请选择标准类型">
              <a-option value="national">国家标准</a-option>
              <a-option value="industry">行业标准</a-option>
              <a-option value="enterprise">企业标准</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="状态">
            <a-select v-model="formData.status" placeholder="请选择状态">
              <a-option value="active">有效</a-option>
              <a-option value="draft">草稿</a-option>
              <a-option value="inactive">失效</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="发布日期">
            <a-date-picker v-model="formData.publishDate" style="width: 100%" value-format="YYYY-MM-DD" />
          </a-form-item>
          <a-form-item label="标准描述">
            <a-textarea v-model="formData.description" placeholder="请输入标准描述" />
          </a-form-item>
        </a-form>
      </a-modal>

      <!-- 查看详情弹窗 -->
      <a-modal
        v-model:visible="detailModalVisible"
        title="标准详情"
        width="800px"
        footer=""
      >
        <div class="detail-content" v-if="selectedRecord">
          <div class="detail-item">
            <span class="detail-label">标准名称：</span>
            <span class="detail-value">{{ selectedRecord.name }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">标准编号：</span>
            <span class="detail-value">{{ selectedRecord.code }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">标准类型：</span>
            <span class="detail-value">
              {{ selectedRecord.type === 'national' ? '国家标准' : selectedRecord.type === 'industry' ? '行业标准' : '企业标准' }}
            </span>
          </div>
          <div class="detail-item">
            <span class="detail-label">状态：</span>
            <span class="detail-value">
              {{ selectedRecord.status === 'active' ? '有效' : selectedRecord.status === 'draft' ? '草稿' : '失效' }}
            </span>
          </div>
          <div class="detail-item">
            <span class="detail-label">发布日期：</span>
            <span class="detail-value">{{ selectedRecord.publishDate }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">标准描述：</span>
            <span class="detail-value">{{ selectedRecord.description }}</span>
          </div>
        </div>
      </a-modal>
    </div>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import { 
  IconPlus, 
  IconRefresh, 
  IconSearch
} from '@arco-design/web-vue/es/icon'

// 搜索表单数据
const searchForm = reactive({
  name: '',
  type: ''
})

// 表格列定义
const columns = [
  { title: '标准名称', dataIndex: 'name', width: 200 },
  { title: '标准编号', dataIndex: 'code', width: 150 },
  { title: '标准类型', dataIndex: 'type', slotName: 'type', width: 120 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
  { title: '发布日期', dataIndex: 'publishDate', width: 120 },
  { title: '创建时间', dataIndex: 'createTime', width: 160 },
  { title: '操作', slotName: 'action', width: 150 }
]

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: 'GB/T 19001-2016 质量管理体系 要求',
    code: 'GB/T 19001-2016',
    type: 'national',
    status: 'active',
    publishDate: '2016-12-30',
    description: '质量管理体系的要求和指南',
    createTime: '2023-01-15 10:30:00'
  },
  {
    id: 2,
    name: 'NB/T 31004-2011 风力发电机组 验收规范',
    code: 'NB/T 31004-2011',
    type: 'industry',
    status: 'active',
    publishDate: '2011-06-01',
    description: '风力发电机组的验收标准和规范',
    createTime: '2023-01-15 11:20:00'
  },
  {
    id: 3,
    name: 'Q/ABC 001-2023 叶片检测技术规范',
    code: 'Q/ABC 001-2023',
    type: 'enterprise',
    status: 'draft',
    publishDate: '2023-03-01',
    description: '企业内部叶片检测技术规范',
    createTime: '2023-02-20 14:45:00'
  }
])

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
  showTotal: true,
  showJumper: true,
  showPageSize: true
})

// 加载状态
const loading = ref(false)

// 弹窗状态
const modalVisible = ref(false)
const detailModalVisible = ref(false)
const isEdit = ref(false)

// 表单数据
const formData = reactive({
  id: null as number | null,
  name: '',
  code: '',
  type: '',
  status: 'active',
  publishDate: undefined as string | undefined,
  description: ''
})

// 选中的记录
const selectedRecord = ref<any>(null)

// 搜索
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    Message.success('查询成功')
  }, 1000)
}

// 重置
const handleReset = () => {
  searchForm.name = ''
  searchForm.type = ''
  handleSearch()
}

// 刷新
const handleRefresh = () => {
  handleSearch()
}

// 分页改变
const handlePageChange = (current: number) => {
  pagination.current = current
  handleSearch()
}

const handlePageSizeChange = (pageSize: number) => {
  pagination.pageSize = pageSize
  handleSearch()
}

// 新增标准
const handleAddStandard = () => {
  isEdit.value = false
  modalVisible.value = true
  Object.assign(formData, {
    id: null,
    name: '',
    code: '',
    type: '',
    status: 'active',
    publishDate: '',
    description: ''
  })
}

// 编辑标准
const handleEdit = (record: any) => {
  isEdit.value = true
  modalVisible.value = true
  Object.assign(formData, record)
}

// 查看详情
const handleView = (record: any) => {
  selectedRecord.value = record
  detailModalVisible.value = true
}

// 删除标准
const handleDelete = (record: any) => {
  Message.success(`删除标准 ${record.name} 成功`)
}

// 弹窗确认
const handleModalOk = () => {
  if (isEdit.value) {
    Message.success('编辑标准成功')
  } else {
    Message.success('新增标准成功')
  }
  modalVisible.value = false
}

// 弹窗取消
const handleModalCancel = () => {
  modalVisible.value = false
}

// 初始化
onMounted(() => {
  handleSearch()
})
</script>

<style scoped>
.standard-info-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin: 0;
}

.page-actions {
  display: flex;
  gap: 12px;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-content {
  padding: 20px;
}

.detail-item {
  display: flex;
  margin-bottom: 16px;
  align-items: flex-start;
}

.detail-label {
  font-weight: 600;
  width: 100px;
  flex-shrink: 0;
  color: #1d2129;
}

.detail-value {
  color: #4e5969;
  word-break: break-word;
}
</style> 