<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title=""
    width="calc(100vw - 40px)"
    :style="{ maxWidth: '1400px' }"
    top="3vh"
    destroy-on-close
    class="setting-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <div class="left-tabs">
          <span :class="['tab-item', { active: activeTab === 'trigger' }]" @click="activeTab = 'trigger'">触发器设置</span>
          <span :class="['tab-item', { active: activeTab === 'history' }]" @click="activeTab = 'history'">原因列表查看</span>
          <span :class="['tab-item', { active: activeTab === 'setting' }]" @click="activeTab = 'setting'">设置</span>
        </div>
        <div class="header-right">
          <span class="device-name">中速纸杯机24号机</span>
        </div>
      </div>
    </template>

    <div class="setting-body">
      <div class="sub-tabs">
        <span 
          v-for="st in subTabs" :key="st.key"
          :class="['sub-tab', { active: activeSub === st.key }]"
          @click="activeSub = st.key"
        >{{ st.label }}</span>
        <el-button size="small" type="primary" plain class="add-trigger-btn">添加触发条件</el-button>
      </div>

      <el-table :data="triggerTableData" size="small" stripe border style="width: 100%; font-size: 12px;">
        <el-table-column prop="name" label="触发器名称" min-width="120" fixed>
          <template #default="{ row }">
            <span class="link-text">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="condition" label="触发条件" min-width="100" />
        <el-table-column prop="threshold" label="静默阈值" min-width="100" />
        <el-table-column prop="duration" label="累管时间" min-width="110">
          <template #default="{ row }">
            <span class="link-text">{{ row.duration }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="接收人员" min-width="100" />
        <el-table-column prop="alertTime" label="触发时间" min-width="110">
          <template #default="{ row }">
            <span class="link-text">{{ row.alertTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="receiveMethod" label="接收方式" min-width="90" />
        <el-table-column prop="part" label="部件" min-width="80" />
        <el-table-column prop="contactGroup" label="联系组" min-width="90" />
        <el-table-column prop="config" label="配置" min-width="200" />
      </el-table>

      <div class="footer-bar">
        <span>共 1 条</span>
        <el-pagination layout="prev, pager, next" :total="1" :page-size="10" small />
        <span>前往 <el-input-number :min="1" :max="1" :controls="false" size="small" style="width: 46px;" /> 页</span>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
  visible: Boolean,
  device: Object
})
defineEmits(['update:visible'])

const activeTab = ref('trigger')
const activeSub = ref('light')

const subTabs = [
  { key: 'light', label: '绿灯' },
  { key: 'yellow', label: '黄灯' },
  { key: 'offline', label: '离线' },
  { key: 'lightOff', label: '灭灯' },
  { key: 'counter', label: '计数' },
  { key: 'blue', label: '蓝灯' },
  { key: 'reason', label: '原因码' },
  { key: 'safe', label: '安灯' },
]

const triggerTableData = [
  { name: '红灯即时', condition: '>6秒', threshold: '0分', duration: '00:00:24:00', operator: '', alertTime: '', receiveMethod: '', part: '', contactGroup: '', config: '启用 / 禁用 / 删除 / 添加联系人 / 编辑联系组' }
]
</script>

<style scoped>
.setting-dialog :deep(.el-dialog) {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.setting-dialog :deep(.el-dialog__header) {
  padding: 0;
  margin: 0;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}
.setting-dialog :deep(.el-dialog__body) {
  overflow-y: auto;
  flex: 1;
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 20px;
}
.left-tabs {
  display: flex;
  gap: 0;
  height: 100%;
  align-items: center;
}
.tab-item {
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.tab-item.active {
  color: #409eff;
  font-weight: bold;
  border-bottom-color: #409eff;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.device-name {
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

.setting-body {
  padding: 0;
}
.sub-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
}
.sub-tab {
  padding: 6px 18px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.sub-tab:hover {
  color: #409eff;
}
.sub-tab.active {
  background: #409eff;
  color: #fff;
  font-weight: bold;
}
.add-trigger-btn {
  margin-left: auto;
}

.link-text {
  color: #409eff;
  cursor: pointer;
}
.link-text:hover {
  text-decoration: underline;
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
  font-size: 12px;
  color: #999;
  gap: 16px;
}
</style>