<template>
  <div class="app-container board-screen-page">
    <el-form :model="queryParams" size="small" :inline="true" label-width="80px">
      <el-form-item label="看板编码">
        <el-input v-model="queryParams.screenCode" placeholder="请输入看板编码" clearable style="width: 180px" />
      </el-form-item>
      <el-form-item label="责任人">
        <el-input v-model="queryParams.ownerName" placeholder="请输入责任人" clearable style="width: 180px" />
      </el-form-item>
      <el-form-item label="所属车间">
        <el-select v-model="queryParams.workshopId" placeholder="请选择车间" clearable filterable style="width: 180px">
          <el-option v-for="item in workshopOptions" :key="item.workshopId" :label="item.workshopName" :value="item.workshopId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getScreenList">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="success" plain icon="el-icon-plus" size="mini" @click="openScreenDialog()">新增看板</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="16">
      <el-col :span="9">
        <el-card shadow="never" class="panel-card">
          <div slot="header" class="card-header">
            <span>看板列表</span>
          </div>
          <el-table
            v-loading="screenLoading"
            :data="screenList"
            border
            height="620"
            highlight-current-row
            row-key="screenId"
            @current-change="handleCurrentScreenChange"
          >
            <el-table-column label="看板编码" prop="screenCode" min-width="140" />
            <el-table-column label="车间" prop="workshopName" min-width="120" show-overflow-tooltip />
            <el-table-column label="责任人" prop="ownerName" min-width="100" />
            <el-table-column label="设备数" align="center" prop="deviceTotal" width="80" />
            <el-table-column label="操作" align="center" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click.stop="openScreenDialog(scope.row)">编辑</el-button>
                <el-button type="text" size="mini" @click.stop="removeScreen(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="15">
        <el-card shadow="never" class="panel-card">
          <div slot="header" class="card-header">
            <div>
              <div class="screen-title">{{ currentScreen ? currentScreen.screenCode : '请选择看板' }}</div>
              <div class="screen-subtitle">{{ currentScreenSummary }}</div>
            </div>
            <div v-if="currentScreen">
              <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="openDeviceDialog">添加设备</el-button>
              <el-button type="warning" plain size="mini" icon="el-icon-delete" @click="resetConfig">清空绑定</el-button>
              <el-button type="primary" plain size="mini" icon="el-icon-monitor" @click="openBoard">打开看板</el-button>
            </div>
          </div>

          <div v-if="!currentScreen" class="empty-block">
            请选择左侧看板，开始配置设备和点位绑定。
          </div>

          <template v-else>
            <el-collapse v-model="activeMachines">
              <el-collapse-item
                v-for="machine in machineConfigs"
                :key="machine.machineCode"
                :name="machine.machineCode"
              >
                <template slot="title">
                  <div class="machine-title-row">
                    <span>{{ machine.machineCode }}</span>
                    <span class="machine-name">{{ machine.machineName || '--' }}</span>
                    <el-button type="text" size="mini" class="machine-remove" @click.stop="removeMachine(machine.machineCode)">移除设备</el-button>
                  </div>
                </template>
                <el-table :data="machine.bindings" border>
                  <el-table-column label="字段名称" prop="fieldName" min-width="140" />
                  <el-table-column label="字段键" prop="bindingField" min-width="140" />
                  <el-table-column label="当前点位" min-width="220">
                    <template slot-scope="scope">
                      {{ getPointSummary(scope.row) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="预览值" min-width="160">
                    <template slot-scope="scope">
                      {{ getPreviewValue(scope.row) }}
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="120">
                    <template slot-scope="scope">
                      <el-button type="text" size="mini" @click="openBindingEditor(machine, scope.row)">配置点位</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog :title="screenDialogTitle" :visible.sync="screenDialogOpen" width="640px" append-to-body>
      <el-form ref="screenForm" :model="screenForm" :rules="screenRules" label-width="96px">
        <el-form-item label="看板编码" prop="screenCode">
          <el-input v-model="screenForm.screenCode" placeholder="请输入看板编码" :disabled="!!screenForm.screenId" />
        </el-form-item>
        <el-form-item label="责任人" prop="ownerName">
          <el-input v-model="screenForm.ownerName" placeholder="请输入责任人" />
        </el-form-item>
        <el-form-item label="所属车间" prop="workshopId">
          <el-select v-model="screenForm.workshopId" placeholder="请选择车间" filterable style="width: 100%" @change="handleWorkshopChange">
            <el-option v-for="item in workshopOptions" :key="item.workshopId" :label="item.workshopName" :value="item.workshopId" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="screenForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitScreenForm">确 定</el-button>
        <el-button @click="screenDialogOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加设备" :visible.sync="deviceDialogOpen" width="1000px" append-to-body>
      <el-form :model="deviceQuery" size="small" :inline="true" label-width="80px">
        <el-form-item label="设备编码">
          <el-input v-model="deviceQuery.machineryCode" placeholder="请输入设备编码，支持模糊搜索" clearable />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="deviceQuery.machineryName" placeholder="请输入设备名称，支持模糊搜索" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getDeviceList">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetDeviceQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="deviceLoading"
        :data="deviceList"
        border
        height="420"
        @selection-change="handleDeviceSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="设备编码" prop="machineryCode" min-width="140" />
        <el-table-column label="设备名称" prop="machineryName" min-width="160" />
        <el-table-column label="设备型号" prop="machinerySpec" min-width="160" />
        <el-table-column label="所属车间" prop="workshopName" min-width="140" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="appendSelectedDevices">确 定</el-button>
        <el-button @click="deviceDialogOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="配置点位" :visible.sync="editorOpen" width="760px" append-to-body>
      <el-form :model="editForm" label-width="96px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编码">
              <el-input :value="editMachine.machineCode" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段名称">
              <el-input :value="editForm.fieldName" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="测量点">
              <el-input :value="getPointSummary(editForm)" readonly placeholder="请选择测量点" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="0">
              <el-button icon="el-icon-search" @click="openPointDialog">选择点位</el-button>
              <el-button type="text" @click="clearPoint">清空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="当前预览">
              <el-input :value="getPreviewValue(editForm)" readonly />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBindingEdit">确 定</el-button>
        <el-button @click="editorOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择测量点" :visible.sync="pointDialogOpen" width="1000px" append-to-body>
      <el-form :model="pointQuery" size="small" :inline="true" label-width="84px">
        <el-form-item label="测量点编码">
          <el-input v-model="pointQuery.pointCode" placeholder="请输入测量点编码" clearable />
        </el-form-item>
        <el-form-item label="测量点名称">
          <el-input v-model="pointQuery.pointName" placeholder="请输入测量点名称" clearable />
        </el-form-item>
        <el-form-item label="设备编码">
          <el-input v-model="pointQuery.deviceCode" placeholder="请输入设备编码" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getPointList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetPointQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="pointLoading" :data="pointList" border height="420">
        <el-table-column label="测量点编码" prop="pointCode" min-width="130" />
        <el-table-column label="测量点名称" prop="pointName" min-width="160" />
        <el-table-column label="设备编码" prop="deviceCode" min-width="120" />
        <el-table-column label="最新值" min-width="140">
          <template slot-scope="scope">
            {{ formatPointLatest(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column label="最新时间" prop="latestTime" min-width="170" />
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="selectPoint(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { listMeasurePoint, getMeasurePointLatest } from '@/api/mes/md/measurepoint'
import { listAllWorkshop } from '@/api/mes/md/workshop'
import { listMachinery } from '@/api/mes/dv/machinery'
import {
  addBoardScreen,
  delBoardScreen,
  getBoardScreenConfig,
  listBoardScreen,
  resetBoardScreenConfig,
  saveBoardScreenConfig,
  updateBoardScreen
} from '@/api/mes/board/screen'

const FIELD_OPTIONS = [
  { bindingField: 'device_status', fieldName: '设备状态' },
  { bindingField: 'run_mode', fieldName: '运行模式' },
  { bindingField: 'today_run_time', fieldName: '今日开机时长' },
  { bindingField: 'today_piece_count', fieldName: '今日计件数' },
  { bindingField: 'batch_code', fieldName: '批次号' }
]

function buildFieldMap() {
  return FIELD_OPTIONS.reduce((result, item) => {
    result[item.bindingField] = item.fieldName
    return result
  }, {})
}

const FIELD_NAME_MAP = buildFieldMap()

function createBindingSkeleton(machine, field) {
  return {
    bindingId: null,
    screenId: null,
    screenCode: '',
    machineryId: machine.machineryId,
    machineryCode: machine.machineryCode,
    bindingField: field.bindingField,
    fieldName: field.fieldName,
    pointId: null,
    pointCode: '',
    pointName: '',
    sortNum: FIELD_OPTIONS.findIndex(item => item.bindingField === field.bindingField) + 1,
    enableFlag: 'Y'
  }
}

function createMachineConfig(machine) {
  return {
    machineryId: machine.machineryId,
    machineCode: machine.machineryCode,
    machineName: machine.machineryName || '',
    bindings: FIELD_OPTIONS.map(field => createBindingSkeleton(machine, field))
  }
}

function groupBindings(bindings, deviceNameMap) {
  const grouped = {}
  ;(bindings || []).forEach(item => {
    const machineCode = item.machineryCode
    if (!machineCode) {
      return
    }
    if (!grouped[machineCode]) {
      grouped[machineCode] = createMachineConfig({
        machineryId: item.machineryId,
        machineryCode: item.machineryCode,
        machineryName: deviceNameMap[item.machineryCode] || ''
      })
    }
    const target = grouped[machineCode].bindings.find(binding => binding.bindingField === item.bindingField)
    if (target) {
      Object.assign(target, item, {
        fieldName: FIELD_NAME_MAP[item.bindingField] || item.bindingField
      })
    }
  })
  return Object.keys(grouped).sort().map(key => grouped[key])
}

function collectPointCodes(machineConfigs) {
  const pointCodeMap = {}
  ;(machineConfigs || []).forEach(machine => {
    (machine.bindings || []).forEach(binding => {
      if (binding.pointCode) {
        pointCodeMap[binding.pointCode] = true
      }
    })
  })
  return Object.keys(pointCodeMap)
}

export default {
  name: 'ScreenBinding',
  data() {
    return {
      screenLoading: false,
      saveLoading: false,
      pointLoading: false,
      deviceLoading: false,
      screenDialogOpen: false,
      deviceDialogOpen: false,
      editorOpen: false,
      pointDialogOpen: false,
      workshopOptions: [],
      screenList: [],
      pointList: [],
      deviceList: [],
      selectedDeviceRows: [],
      currentScreen: null,
      machineConfigs: [],
      activeMachines: [],
      latestMap: {},
      deviceNameMap: {},
      queryParams: {
        screenCode: '',
        ownerName: '',
        workshopId: null
      },
      screenForm: {
        screenId: null,
        screenCode: '',
        ownerName: '',
        workshopId: null,
        workshopCode: '',
        workshopName: '',
        remark: ''
      },
      screenRules: {
        screenCode: [{ required: true, message: '看板编码不能为空', trigger: 'blur' }],
        ownerName: [{ required: true, message: '责任人不能为空', trigger: 'blur' }],
        workshopId: [{ required: true, message: '所属车间不能为空', trigger: 'change' }]
      },
      deviceQuery: {
        pageNum: 1,
        pageSize: 200,
        machineryCode: '',
        machineryName: ''
      },
      pointQuery: {
        pageNum: 1,
        pageSize: 200,
        pointCode: '',
        pointName: '',
        deviceCode: '',
        enableFlag: 'Y'
      },
      editMachine: {},
      editForm: {}
    }
  },
  computed: {
    currentScreenSummary() {
      if (!this.currentScreen) {
        return ''
      }
      const workshopName = this.currentScreen.workshopName || '--'
      const ownerName = this.currentScreen.ownerName || '--'
      return `车间：${workshopName}，责任人：${ownerName}`
    },
    screenDialogTitle() {
      return this.screenForm.screenId ? '编辑看板' : '新增看板'
    }
  },
  created() {
    this.getWorkshopOptions()
    this.getDeviceList()
    this.getScreenList()
  },
  methods: {
    getWorkshopOptions() {
      listAllWorkshop().then(response => {
        this.workshopOptions = Array.isArray(response) ? response : (response.data || [])
      })
    },
    getScreenList() {
      this.screenLoading = true
      listBoardScreen(this.queryParams).then(response => {
        this.screenList = response.rows || []
        if (!this.screenList.length) {
          this.currentScreen = null
          this.machineConfigs = []
          this.activeMachines = []
          return
        }
        const nextCurrent = this.currentScreen
          ? this.screenList.find(item => item.screenId === this.currentScreen.screenId)
          : this.screenList[0]
        this.handleCurrentScreenChange(nextCurrent)
      }).finally(() => {
        this.screenLoading = false
      })
    },
    resetQuery() {
      this.queryParams = {
        screenCode: '',
        ownerName: '',
        workshopId: null
      }
      this.getScreenList()
    },
    handleCurrentScreenChange(row) {
      if (!row || (this.currentScreen && this.currentScreen.screenId === row.screenId && this.machineConfigs.length)) {
        this.currentScreen = row || null
        return
      }
      this.currentScreen = row
      this.loadCurrentConfig()
    },
    loadCurrentConfig() {
      if (!this.currentScreen) {
        return
      }
      getBoardScreenConfig(this.currentScreen.screenId).then(response => {
        const bindings = response.data || []
        this.machineConfigs = groupBindings(bindings, this.deviceNameMap)
        this.activeMachines = this.machineConfigs.map(item => item.machineCode)
        this.refreshPreview()
      })
    },
    openScreenDialog(row) {
      if (this.$refs.screenForm) {
        this.$refs.screenForm.resetFields()
      }
      if (row) {
        this.screenForm = { ...row }
      } else {
        this.screenForm = {
          screenId: null,
          screenCode: '',
          ownerName: '',
          workshopId: null,
          workshopCode: '',
          workshopName: '',
          remark: ''
        }
      }
      this.screenDialogOpen = true
    },
    handleWorkshopChange(workshopId) {
      const workshop = this.workshopOptions.find(item => item.workshopId === workshopId)
      this.screenForm.workshopCode = workshop ? workshop.workshopCode : ''
      this.screenForm.workshopName = workshop ? workshop.workshopName : ''
    },
    submitScreenForm() {
      this.$refs.screenForm.validate(valid => {
        if (!valid) {
          return
        }
        const request = this.screenForm.screenId ? updateBoardScreen(this.screenForm) : addBoardScreen(this.screenForm)
        request.then(() => {
          this.screenDialogOpen = false
          this.$modal.msgSuccess(this.screenForm.screenId ? '修改成功' : '新增成功')
          this.getScreenList()
        })
      })
    },
    removeScreen(row) {
      this.$modal.confirm(`是否确认删除看板 ${row.screenCode}？`).then(() => {
        return delBoardScreen(row.screenId)
      }).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.getScreenList()
      }).catch(() => {})
    },
    getDeviceList() {
      this.deviceLoading = true
      listMachinery(this.deviceQuery).then(response => {
        this.deviceList = response.rows || []
        ;(response.rows || []).forEach(item => {
          this.deviceNameMap[item.machineryCode] = item.machineryName
        })
      }).finally(() => {
        this.deviceLoading = false
      })
    },
    resetDeviceQuery() {
      this.deviceQuery.machineryCode = ''
      this.deviceQuery.machineryName = ''
      this.getDeviceList()
    },
    openDeviceDialog() {
      this.selectedDeviceRows = []
      this.deviceDialogOpen = true
      this.getDeviceList()
    },
    handleDeviceSelectionChange(rows) {
      this.selectedDeviceRows = rows || []
    },
    appendSelectedDevices() {
      if (!this.selectedDeviceRows.length) {
        this.$modal.msgWarning('请先选择设备')
        return
      }
      const codeMap = {}
      let changed = false
      this.machineConfigs.forEach(item => {
        codeMap[item.machineCode] = true
      })
      this.selectedDeviceRows.forEach(item => {
        if (codeMap[item.machineryCode]) {
          return
        }
        this.deviceNameMap[item.machineryCode] = item.machineryName
        this.machineConfigs.push(createMachineConfig(item))
        changed = true
      })
      if (!changed) {
        this.$modal.msgWarning('所选设备已存在')
        return
      }
      this.machineConfigs.sort((a, b) => a.machineCode.localeCompare(b.machineCode))
      this.activeMachines = this.machineConfigs.map(item => item.machineCode)
      this.persistConfig({
        successMessage: '设备添加成功',
        onSuccess: () => {
          this.deviceDialogOpen = false
        }
      })
    },
    removeMachine(machineCode) {
      this.machineConfigs = this.machineConfigs.filter(item => item.machineCode !== machineCode)
      this.activeMachines = this.machineConfigs.map(item => item.machineCode)
      this.persistConfig({
        successMessage: '设备移除成功'
      })
    },
    openBindingEditor(machine, binding) {
      this.editMachine = { ...machine }
      this.editForm = JSON.parse(JSON.stringify(binding))
      this.editorOpen = true
    },
    openPointDialog() {
      this.pointDialogOpen = true
      this.getPointList()
    },
    getPointList() {
      this.pointLoading = true
      listMeasurePoint(this.pointQuery).then(response => {
        this.pointList = response.rows || []
      }).finally(() => {
        this.pointLoading = false
      })
    },
    resetPointQuery() {
      this.pointQuery.pointCode = ''
      this.pointQuery.pointName = ''
      this.pointQuery.deviceCode = ''
      this.getPointList()
    },
    selectPoint(row) {
      this.editForm.pointId = row.pointId
      this.editForm.pointCode = row.pointCode
      this.editForm.pointName = row.pointName
      this.pointDialogOpen = false
    },
    clearPoint() {
      this.editForm.pointId = null
      this.editForm.pointCode = ''
      this.editForm.pointName = ''
    },
    submitBindingEdit() {
      const machine = this.machineConfigs.find(item => item.machineCode === this.editMachine.machineCode)
      if (!machine) {
        return
      }
      const target = machine.bindings.find(item => item.bindingField === this.editForm.bindingField)
      if (target) {
        Object.assign(target, this.editForm)
      }
      this.editorOpen = false
      this.refreshPreview()
      this.persistConfig({
        successMessage: '点位配置已保存'
      })
    },
    persistConfig({ successMessage, onSuccess } = {}) {
      if (!this.currentScreen) {
        return
      }
      const bindings = []
      this.machineConfigs.forEach(machine => {
        machine.bindings.forEach(binding => {
          bindings.push({
            bindingId: binding.bindingId,
            screenId: this.currentScreen.screenId,
            screenCode: this.currentScreen.screenCode,
            machineryId: machine.machineryId,
            machineryCode: machine.machineCode,
            bindingField: binding.bindingField,
            pointId: binding.pointId,
            pointCode: binding.pointCode || '',
            pointName: binding.pointName || '',
            sortNum: binding.sortNum,
            enableFlag: 'Y'
          })
        })
      })
      this.saveLoading = true
      saveBoardScreenConfig({
        screenId: this.currentScreen.screenId,
        screenCode: this.currentScreen.screenCode,
        bindings
      }).then(response => {
        this.machineConfigs = groupBindings(response.data || [], this.deviceNameMap)
        this.activeMachines = this.machineConfigs.map(item => item.machineCode)
        this.refreshPreview()
        if (typeof onSuccess === 'function') {
          onSuccess()
        }
        this.$modal.msgSuccess(successMessage || response.msg || '保存成功')
        this.getScreenList()
      }).finally(() => {
        this.saveLoading = false
      })
    },
    resetConfig() {
      if (!this.currentScreen) {
        return
      }
      this.$modal.confirm('是否确认清空当前看板的设备绑定和点位配置？').then(() => {
        return resetBoardScreenConfig(this.currentScreen.screenId)
      }).then(() => {
        this.machineConfigs = []
        this.activeMachines = []
        this.latestMap = {}
        this.$modal.msgSuccess('已清空绑定配置')
        this.getScreenList()
      }).catch(() => {})
    },
    refreshPreview() {
      const pointCodes = collectPointCodes(this.machineConfigs)
      if (!pointCodes.length) {
        this.latestMap = {}
        return
      }
      Promise.all(pointCodes.map(pointCode => {
        return getMeasurePointLatest(pointCode).then(response => {
          const payload = response && response.data !== undefined ? response.data : response
          return {
            pointCode,
            value: payload.latestValue !== undefined ? payload.latestValue : payload.value,
            latestTime: payload.latestTime || payload.collectTime || payload.time || ''
          }
        }).catch(() => ({
          pointCode,
          value: '',
          latestTime: ''
        }))
      })).then(list => {
        this.latestMap = list.reduce((result, item) => {
          result[item.pointCode] = item
          return result
        }, {})
      })
    },
    getPointSummary(binding) {
      if (!binding.pointCode) {
        return '未配置测量点'
      }
      return `${binding.pointCode} / ${binding.pointName || '--'}`
    },
    getPreviewValue(binding) {
      if (!binding.pointCode) {
        return '--'
      }
      const latest = this.latestMap[binding.pointCode] || {}
      const value = latest.value
      return value === undefined || value === null || value === '' ? '--' : value
    },
    formatPointLatest(row) {
      const value = row.latestValue === undefined || row.latestValue === null || row.latestValue === '' ? '--' : row.latestValue
      if (!row.unit || value === '--') {
        return value
      }
      return `${value}${row.unit}`
    },
    openBoard() {
      if (!this.currentScreen) {
        return
      }
      const routeData = this.$router.resolve({
        path: '/board/workshop',
        query: {
          screenCode: this.currentScreen.screenCode
        }
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>

<style scoped>
.board-screen-page {
  min-width: 1200px;
}

.panel-card {
  min-height: 680px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.screen-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.screen-subtitle {
  margin-top: 6px;
  font-size: 13px;
  color: #909399;
}

.empty-block {
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.machine-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.machine-name {
  color: #909399;
}

.machine-remove {
  margin-left: auto;
  margin-right: 16px;
}
</style>
