<template>
  <page-layer>
    <template #header>
      部位名称:
      <el-input v-model="shouShuBuWeiBianMa" clearable prefix-icon="Search" style="width: 120px"/>
      <el-divider direction="vertical"></el-divider>
      新增部位名称:
      <el-input v-model="newPart" :maxlength="16" clearable prefix-icon="Plus" show-word-limit
                style="width: 260px"></el-input>
      <el-button icon="Plus" type="success" @click="clickToAddPart">新增</el-button>
    </template>
    <template #main>
      <el-table :data="tempData.slice((shuJu.currentPage - 1) * 30, shuJu.currentPage * 30)"
                :height="windowSize.h - 120" highlight-current-row>
        <el-table-column label="编码" prop="code"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm
                cancel-button-text="取消"
                confirm-button-text="确认"
                icon="Info"
                iconColor="#F56C6C"
                title="是否删除该手术"
                @confirm="delPart(scope.$index, scope.row.code)"
            >
              <template #reference>
                <el-button icon="Delete" size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="shuJu.currentPage" :page-size="30" :total="shuJu.total" background
                     layout=" prev, pager, next,total" @current-change="fanYe"></el-pagination>
    </template>
  </page-layer>
</template>

<script name="ShouShuBuWeiWeiHu" setup>
import {addASurgicalSite, huoQuShouShuBuWei, removeSurgicalSite} from '@/api/zhu-yuan-yi-sheng/shou-shu-shen-qing'
import {computed} from 'vue'
import store from '@/store'
import {stringIsBlank} from '@/utils/blank-utils'
import {ElMessage} from 'element-plus'
import PageLayer from "@/layout/PageLayer";

let shouShuBuWeiBianMa = $ref('')
let shuJu = $ref({
  data: [],
  currentPage: 1,
  total: 0,
})

let newPart = $ref('')

const windowSize = computed(() => {
  return store.state.app.windowSize
})

const tempData = computed(() => {
  shuJu.total = shuJu.data.length
  return shuJu.data.filter((item) => {
    return item.name.toString().indexOf(shouShuBuWeiBianMa) > -1
  })
})

const fanYe = (val) => {
  shuJu.currentPage = val
}

const clickToAddPart = () => {
  if (stringIsBlank(newPart)) {
    ElMessage.error('请先输入部位名称')
    return
  }
  addASurgicalSite(newPart).then((res) => {
    shuJu.data.push({
      code: res,
      name: newPart,
    })
    newPart = ''
  })
}

const delPart = (index, code) => {
  removeSurgicalSite(code).then(() => {
    shuJu.data.splice(index, 1)
  })
}

onMounted(() => {
  huoQuShouShuBuWei(shouShuBuWeiBianMa).then((res) => {
    shuJu.data = res
    shuJu.total = shuJu.data.length
  })
})
</script>

<style scoped></style>
