<template>
  <div class="doctor-phrase-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-select v-model="searchScope" placeholder="范围" style="width: 120px;">
        <el-option label="个人" value="个人"></el-option>
        <el-option label="科室" value="科室"></el-option>
        <el-option label="全院" value="全院"></el-option>
      </el-select>
      <el-input
        v-model="searchKeyword" 
        placeholder="请输入名称"
        style="width: 240px; margin-left: 10px;"
      ></el-input>
      <el-button style="margin-left: 10px;"><el-icon><Search /></el-icon> 查询</el-button>
      <el-button type="primary" style="margin-left: 10px;"><el-icon><Plus /></el-icon> 增加</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="serialNo" label="排序号" width="200"></el-table-column>
      <el-table-column prop="name" label="名称" width="250"></el-table-column>
      <el-table-column prop="content" label="内容"></el-table-column>
      <el-table-column prop="scope" label="范围" width="250"></el-table-column>
      <el-table-column prop="businessType" label="业务分类" width="200"></el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small">编辑</el-button>
          <el-button type="danger" size="small" style="margin-left: 5px;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper, sizes"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'

// 搜索条件
const searchScope = ref('个人')
const searchKeyword = ref('')

// 表格数据
const tableData = ref([
  { serialNo: 1, name: '主诉', content: '阵发性腹痛2小时', scope: '个人', businessType: '主诉' },
  { serialNo: 2, name: '主诉', content: '反复咳嗽、咳痰3年，加重1周', scope: '个人', businessType: '主诉' },
  { serialNo: 3, name: '主诉', content: '发现血糖升高1月', scope: '个人', businessType: '现病史' },
  { serialNo: 4, name: '主诉', content: '右侧肢体无力4小时', scope: '个人', businessType: '术后' },
  { serialNo: 5, name: '主诉', content: '外伤致右踝疼痛30分钟', scope: '个人', businessType: '术前' }
])

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(5)

const handleSizeChange = (val) => {
  pageSize.value = val
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped>
.doctor-phrase-container {
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>