<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="warn-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <div class="header-left">
          <span :class="['htab', { active: activeTab === 'trigger' }]" @click="activeTab = 'trigger'">触发器设置</span>
          <span :class="['htab', { active: activeTab === 'config' }]" @click="activeTab = 'config'">配置</span>
        </div>
        <div class="header-right">
          <span class="device-select">{{ device?.name || '能耗设备2' }} <el-icon><ArrowDown /></el-icon> 返回</span>
        </div>
      </div>
    </template>

    <div class="warn-body">
      <!-- 触发器Tab -->
      <div v-if="activeTab === 'trigger'" class="tab-content">
        <div class="toolbar">
          <div v-for="t in subTabs" :key="t" :class="['sub-tab', { active: activeSub === t }]"
               @click="activeSub = t">{{ t }}</div>
          <div style="flex:1"></div>
          <el-input v-model="searchKey" placeholder="输入人/机料号" size="small" style="width:180px">
            <template #prefix><el-icon><Search /></el-icon></template>
          </el-input>
        </div>

        <div class="table-wrap">
          <el-table :data="warningList" size="small" stripe border style="width:100%;font-size:12px;" empty-text="暂无数据">
            <el-table-column prop="name" label="触发器名称" min-width="140">
              <template #default="{ row }"><span class="link-text">{{ row.name }}</span></template>
            </el-table-column>
            <el-table-column prop="condition" label="触发条件" min-width="130" />
            <el-table-column prop="threshold" label="值域间隔" width="90">
              <template #default="{ row }">
                {{ row.threshold }} <el-icon :size="12" color="#409eff" style="cursor:pointer;"><EditPen /></el-icon>
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="预警时间" width="110">
              <template #default="{ row }">
                <el-icon :size="12" color="#67c23a" style="margin-right:2px;"><Clock /></el-icon>{{ row.duration }}
              </template>
            </el-table-column>
            <el-table-column prop="receiver" label="接收人岗" width="80">
              <template #default="{ row }">
                <el-icon :size="12" color="#409eff" style="margin-right:2px;"><User /></el-icon>{{ row.receiver }}
              </template>
            </el-table-column>
            <el-table-column prop="sendTime" label="推送时间" width="110" />
            <el-table-column prop="method" label="接收方式" width="90" />
            <el-table-column prop="action" label="操作" width="70" align="center">
              <template #default><el-icon :size="14" color="#409eff" style="cursor:pointer;"><Edit /></el-icon></template>
            </el-table-column>
            <el-table-column prop="group" label="联系组" width="110" />
            <el-table-column prop="settings" label="设置" min-width="200">
              <template #default="{ row }">
                <span v-for="(s, i) in row.settings" :key="i" :class="'tag-'+s.color">{{ s.text }}</span>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-footer">
            <span>共 {{ warningList.length }} 条</span>
            <el-pagination :current-page="1" :page-size="10" layout="prev, pager, next" :total="warningList.length" small />
          </div>
        </div>
      </div>

      <!-- 配置Tab -->
      <div v-else class="tab-content config-view">
        <p style="color:#999;padding:20px;text-align:center;">配置内容</p>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { Search, ArrowDown, EditPen, Clock, User, Edit } from '@element-plus/icons-vue'

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

const activeTab = ref('trigger')
const activeSub = ref('全部')
const searchKey = ref('')
const subTabs = ['全部', '相电压', '线电压', '电流', '温度', '有功功率', '无功功率', '电能', '功率因数']

const warningList = ref([
  {
    name: 'C相电压区间报警',
    condition: '>C相电压< 20A',
    threshold: '0分',
    duration: '00:00-24:00',
    receiver: '',
    sendTime: '',
    method: '',
    group: '',
    settings: [
      { text: '启用', color: 'blue' }, { text: '禁用', color: 'gray' },
      { text: '解除', color: 'red' }, { text: '添加联系人', color: '' },
      { text: '编辑联系组', color: '' }
    ]
  },
  {
    name: 'B相电压区间报警',
    condition: '>B相电压< 20A',
    threshold: '0分',
    duration: '00:00-24:00',
    receiver: '',
    sendTime: '',
    method: '',
    group: '',
    settings: [
      { text: '启用', color: 'blue' }, { text: '禁用', color: 'gray' },
      { text: '', color: '' },
      { text: '', color: '' },
      { text: '', color: '' }
    ]
  },
  {
    name: 'A相电压区间报警',
    condition: '>A相电压< 20A',
    threshold: '0分',
    duration: '00:00-24:00',
    receiver: '',
    sendTime: '',
    method: '',
    group: '',
    settings: [
      { text: '启用', color: 'blue' }, { text: '禁用', color: 'gray' },
      { text: '解除', color: 'red' }, { text: '添加联系人', color: '' },
      { text: '编辑联系组', color: '' }
    ]
  },
  {
    name: '总各功功率高',
    condition: '>20kW',
    threshold: '0分',
    duration: '00:00-24:00',
    receiver: '',
    sendTime: '',
    method: '',
    group: '',
    settings: [
      { text: '启用', color: 'blue' }, { text: '禁用', color: 'gray' },
      { text: '解除', color: 'red' }, { text: '添加联系人', color: '' },
      { text: '编辑联系组', color: '' }
    ]
  },
  {
    name: 'A相电电流低',
    condition: '<5A',
    threshold: '0分',
    duration: '00:00-24:00',
    receiver: '',
    sendTime: '',
    method: '',
    group: '',
    settings: [
      { text: '启用', color: 'blue' }, { text: '禁用', color: 'gray' },
      { text: '解除', color: 'red' }, { text: '添加联系人', color: '' },
      { text: '编辑联系组', color: '' }
    ]
  }
])
</script>

<style scoped>
.warn-dialog :deep(.el-dialog){max-height:92vh;display:flex;flex-direction:column;}
.warn-dialog :deep(.el-dialog__header){padding:8px 16px;border-bottom:1px solid #e8e8e8;margin:0;flex-shrink:0;}
.warn-dialog :deep(.el-dialog__body){overflow-y:auto;flex:1;padding:0;display:flex;flex-direction:column;}
.dialog-header{display:flex;align-items:center;justify-content:space-between;}
.header-left{display:flex;gap:4px;}
.htab{padding:6px 18px;font-size:13px;cursor:pointer;color:#666;border-bottom:2px solid transparent;}
.htab.active{color:#409eff;font-weight:bold;border-bottom-color:#409eff;}
.header-right{font-size:13px;color:#409eff;cursor:pointer;display:flex;align-items:center;gap:4px;}
.device-select{}

.warn-body{display:flex;flex-direction:column;flex:1;overflow:hidden;}
.tab-content{display:flex;flex-direction:column;flex:1;}

.toolbar{background:#fff;padding:10px 16px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #eee;}
.sub-tab{padding:5px 14px;font-size:12px;cursor:pointer;color:#666;border-radius:3px;}
.sub-tab.active{background:#409eff;color:#fff;font-weight:bold;}

.table-wrap{flex:1;background:#fff;margin:12px 16px;border-radius:6px;overflow:hidden;}
.link-text{color:#409eff;cursor:pointer;}
.tag-blue{background:#ecf5ff;color:#409eff;padding:1px 6px;border-radius:2px;font-size:11px;margin:1px 2px;}
.tag-gray{background:#f4f4f5;color:#909399;padding:1px 6px;border-radius:2px;font-size:11px;margin:1px 2px;}
.tag-red{background:#fef0f0;color:#f56c6c;padding:1px 6px;border-radius:2px;font-size:11px;margin:1px 2px;}

.pagination-footer{padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #f0f0f0;font-size:12px;color:#999;}
.config-view{background:#fff;margin:12px 16px;border-radius:6px;}
</style>