<template>
    <view v-html="svgHtml" class="svg-container"></view>
</template>

<script>
export default {
    props: {
        // 父组件传递的参数
        devType: {
            type: String,
            default: 'Direct_Connected_Device',
        },
        runStatus: {
            type: [String, Number],
        },
       alarmStatus: {
            type: [String, Number],
        },
        
    },
    data() {
        return {
            // 动态颜色
            powerColor: '#10b981',
            // alarmStatus==1?'#f59e0b':'#10b981': '#f59e0b', //告警
            // commColor: '#10B981', //在线离线
            // 动态数据
        }
    },
    computed: {
        svgHtml() {
            if (this.devType == 'Direct_Connected_Device') {
                return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <!-- 设备主体 - 治理设备主题色（绿色） -->
  <rect x="2" y="2" width="96" height="96" rx="6" ry="6" fill="#007aff30" stroke="#007aff" stroke-width="2"/>
  
  <!-- 屏幕区域 -->
  <rect x="6" y="6" width="88" height="52" rx="3" ry="3" fill="#FFFFFF" stroke="#007aff" stroke-width="1.5"/>
  
  <!-- 屏幕标题栏 - 调整高度以容纳14px文字 -->
  <rect x="10" y="9" width="80" height="14" rx="2" ry="2" fill="#007aff30" stroke="#CCC" stroke-width="0.8"/>
  <text x="50" y="20" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#007aff" text-anchor="middle">治理设备</text>

  <!-- 下降趋势折线（从高到低，拉满宽度） -->
  <polyline points="14,28 22,34 30,32 38,40 46,38 54,46 62,44 70,50 78,48 86,52" 
            fill="none" stroke="#007aff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
  
  <!-- 趋势填充区域（完全覆盖屏幕下方） -->
  <polygon points="14,28 22,34 30,32 38,40 46,38 54,46 62,44 70,50 78,48 86,52 86,54 14,54" 
           fill="#007aff15"/>
  
  <!-- 数据节点圆点（增强数据感） -->
  <circle cx="14" cy="28" r="1.5" fill="#007aff"/>
  <circle cx="30" cy="32" r="1.5" fill="#007aff"/>
  <circle cx="46" cy="38" r="1.5" fill="#007aff"/>
  <circle cx="62" cy="44" r="1.5" fill="#007aff"/>
  <circle cx="78" cy="48" r="1.5" fill="#007aff"/>
  <circle cx="86" cy="52" r="1.5" fill="#007aff"/>

  <!-- 下降箭头（增强趋势指向） -->
  <polygon points="88,48 86,52 84,48" fill="#007aff" opacity="0.7"/>
  
  <!-- 指示灯区域分隔线 -->
  <line x1="6" y1="62" x2="94" y2="62" stroke="#999" stroke-width="1" stroke-dasharray="2,2"/>
  
  <!-- 告警指示灯 -->
  <circle cx="28" cy="70" r="6" fill="${this.alarmStatus==1?'#f59e0b':'#10b981'}" stroke="${this.alarmStatus==1?'#f59e0b':'#10b981'}" stroke-width="1"/>
  <text x="28" y="92" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">告警</text>
  
  <!-- 通讯指示灯 -->
  <circle cx="70" cy="70" r="6" fill="${this.runStatus == 1 ? '#ff3b30' : '#10b981'}" stroke="${this.runStatus == 1 ? '#ff3b30' : '#10b981'}" stroke-width="1"/>
  <text x="70" y="92" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">通讯</text>
</svg>`
            } else {
                return `
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <style>
    text { font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
  </style>
  
  <!-- 设备主体 -->
  <rect x="2" y="2" width="96" height="96" rx="6" ry="6" fill="#007aff30" stroke="#007aff" stroke-width="2"/>
  
  <!-- 屏幕区域 -->
  <rect x="6" y="6" width="88" height="52" rx="3" ry="3" fill="#FFFFFF" stroke="#007aff" stroke-width="1.5"/>
  
  <!-- 屏幕标题栏 - 调整高度 -->
  <rect x="10" y="9" width="80" height="14" rx="2" ry="2" fill="#007aff30" stroke="#CCC" stroke-width="0.8"/>
  <text x="50" y="20" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">监测设备</text>

  <!-- 左侧电压数据 - 调整Y位置 -->
  <text x="10" y="34" font-size="7" fill="#007aff">Ua: 220.5V</text>
  <text x="10" y="43" font-size="7" fill="#007aff">Ub: 219.8V</text>
  <text x="10" y="52" font-size="7" fill="#007aff">Uc: 220.1V</text>

  <!-- 竖向分隔线 -->
  <line x1="52" y1="26" x2="52" y2="55" stroke="#CCC" stroke-width="0.8" stroke-dasharray="1.5,1.5"/>
  
  <!-- 右侧电流数据 -->
  <text x="58" y="34" font-size="7" fill="#007aff">Ia: 125.3A</text>
  <text x="58" y="43" font-size="7" fill="#007aff">Ib: 124.7A</text>
  <text x="58" y="52" font-size="7" fill="#007aff">Ic: 125.1A</text>

  <!-- 指示灯区域分隔线 -->
  <line x1="6" y1="62" x2="94" y2="62" stroke="#999" stroke-width="1" stroke-dasharray="2,2"/>

  <!-- 告警指示灯 -->
  <circle cx="28" cy="70" r="6" fill="${this.alarmStatus==1?'#f59e0b':'#10b981'}" stroke="${this.alarmStatus==1?'#f59e0b':'#10b981'}" stroke-width="1"/>
  <text x="28" y="92" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">告警</text>
  
  <!-- 通讯指示灯 -->
  <circle cx="70" cy="70" r="6" fill="${this.runStatus == 1 ? '#ff3b30' : '#10b981'}" stroke="${this.runStatus == 1 ? '#ff3b30' : '#10b981'}" stroke-width="1"/>
  <text x="70" y="92" font-size="13" font-weight="bold" fill="#007aff" text-anchor="middle">通讯</text>
</svg>
      `
            }
        },
    },
    methods: {},
}
</script>

<style scoped>
.svg-container {
    width: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
