<template>
  <ComPanel v-if="data && data.jcxx" :title="data.jcxx.name || '---'" :icon="data.jcxx.icon" :subTitle="data.jcxx.ddmc || '---'"
    :color="data.jcxx.color">
    <table class="panel-table">
      <tbody>
        <tr>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">有功设定限制</span>
              <span class="data-item-count">{{data.jcxx.AGC002}}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">实发有功</span>
              <span class="data-item-count">{{data.jcxx.SSZGL}}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">AGC可调上限</span>
              <span class="data-item-count">{{data.jcxx.AGC003}}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">理论功率</span>
              <span class="data-item-count">{{data.jcxx.ZZSGL}}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">AGC可调下限</span>
              <span class="data-item-count">{{data.jcxx.AGC004}}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
          <td colspan="2">
            <div class="data-item">
              <span class="data-item-name">预测功率</span>
              <span class="data-item-count">{{data.jcxx.ycgl || 0}}</span>
              <span class="data-item-unit">MW</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="data-item">
              <span class="data-item-name">AGC投入</span>
              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC004 === 1 ? 'green' : 'red')"></i>
            </div>
          </td>
          <td>
            <div class="data-item">
              <span class="data-item-name">AGC远方</span>
              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC005 === 1 ? 'green' : 'red')"></i>
            </div>
          </td>
          <td>
            <div class="data-item">
              <span class="data-item-name">有功增闭锁</span>
              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC008 === 1 ? 'green' : 'red')"></i>
            </div>
          </td>
          <td>
            <div class="data-item">
              <span class="data-item-name">有功减闭锁</span>
              <i :class="'data-item-icon fa fa-chrome ' + (data.jcxx.AGC007 === 1 ? 'green' : 'red')"></i>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 查看默认实例去除末尾参数 :list 即可 -->
    <DoubleLineChart v-if="chartType=== 'double'" height="13.889vh" :list="chartData"></DoubleLineChart>
    <MultipleLineChart v-if="chartType=== 'multiple'" height="13.889vh" :list="chartData"></MultipleLineChart>
  </ComPanel>
</template>

<script>
import ComPanel from "@com/coms/panel/panel2.vue";
import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
import MultipleLineChart from "@com/chart/line/multiple-line-chart.vue";
export default {
  // 名称
  name: "AgcPanel",
  // 使用组件
  components: {
    ComPanel,
    DoubleLineChart,
    MultipleLineChart
  },
  // 传入参数
  props: {
    data: Object,
    chartType: {
      type: String,
      default: "double"
    },
    chartData: {
      type: Array,
      default: []
    }
  },
  // 自定义事件
  emits: {},
  // 数据
  data () {
    return {};
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate () {
    // 创建前
  },
  created () {
    // 创建后
  },
  beforeMount () {
    // 渲染前
  },
  mounted () {
    // 渲染后
  },
  beforeUpdate () {
    // 数据更新前
  },
  updated () {
    // 数据更新后
  },
};
</script>

<style lang="less">
.panel-table {
  width: 100%;

  .data-item {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.278vh;
    font-size: 1.204vh;
    display: flex;
    flex-direction: row;

    .data-item-name {
      color: @gray;
    }

    .data-item-count {
      color: @green;
      margin-left: auto;
      margin-right: 0.556vh;
    }

    .data-item-unit {
      color: @gray;
    }

    .data-item-icon {
      margin-left: auto;
      font-size: 1.667vh;
    }
  }
}

.green {
  color: @green;
}

.red {
  color: @red;
}
</style>
