<template>
  <page-layer>
    <template #header>
      <el-input v-model="searchContent" placeholder="在此输入科室名称" style="width: 300px" clearable>
        <template #prepend> 搜索科室 </template>
      </el-input>
    </template>
    <template #main>
      <el-table :data="cptRoomIps" stripe highlight-current-row :height="tableHeight">
        <el-table-column prop="deptName" label="科室名称" width="200"></el-table-column>
        <el-table-column prop="roomName" label="诊室名称" width="220"></el-table-column>
        <el-table-column prop="roomNo" label="诊室号" width="80"></el-table-column>
        <el-table-column prop="ip" label="ip地址" width="130"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button text icon="Edit" @click="editRoomIp(scope.row)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button text icon="Refresh" @click="refreshDoorScreen(scope.row)">刷新门口屏显</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="editVisible" title="诊室IP编辑" width="300px">
        <div id="crtRoomIp">
          <div>科室名称：{{ currentRoomIp.deptName }}</div>
          <div>诊室名称：{{ currentRoomIp.roomName }}</div>
          <div>诊室号：{{ currentRoomIp.roomNo }}</div>
          <div>
            ip地址：
            <el-input v-model="currentRoomIp.ip" style="width: 160px"></el-input>
          </div>
          <div style="margin: 10px 0 0 0; width: 100%; text-align: center">
            <el-button type="primary" icon="Check" @click="saveRoomIpChange">保存更改</el-button>
          </div>
        </div>
      </el-dialog>
    </template>
  </page-layer>
</template>

<script>
import { ref } from '@vue/reactivity'
import store from '@/store'
import { computed, onMounted } from 'vue'
import { getAllRoomIp, pushMsg, updateRoomIp } from '@/api/triage/triage'
import { clone } from '@/utils/clone'
import { ElMessage } from 'element-plus'
import PageLayer from "@/layout/PageLayer";
export default {
  components: {PageLayer},
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 10
    const searchContent = ref('')
    const roomIps = ref([])
    const cptRoomIps = computed(() => {
      return roomIps.value.filter((item) => {
        return item.deptName.indexOf(searchContent.value) !== -1
      })
    })
    const currentRoomIp = ref({})
    const editVisible = ref(false)
    const editRoomIp = (row) => {
      currentRoomIp.value = clone(row)
      editVisible.value = true
    }
    const refreshDoorScreen = (row) => {
      const param = { action: 3, roomCode: row.roomCode }
      pushMsg(param).then((res) => {
        ElMessage({
          message: res,
          type: 'success',
          duration: 2000,
          showClose: true,
        })
      })
    }

    const saveRoomIpChange = () => {
      updateRoomIp(currentRoomIp.value).then((res) => {
        getAllRoomIp().then((res2) => {
          roomIps.value = res2
          editVisible.value = false
          ElMessage({
            message: res,
            type: 'success',
            duration: 2000,
            showClose: true,
          })
        })
      })
    }

    onMounted(() => {
      getAllRoomIp().then((res) => {
        roomIps.value = res
      })
    })

    return {
      tableHeight,
      searchContent,
      cptRoomIps,
      currentRoomIp,
      editVisible,
      editRoomIp,
      refreshDoorScreen,
      saveRoomIpChange,
    }
  },
}
</script>

<style scoped>
#crtRoomIp > div {
  height: 36px;
  line-height: 36px;
}
</style>
