<template>
  <div>
    <!-- 筛选start -->
    <div class="filter-container">
      <div class="left">
        <div>
          数据刷新时间：2021-10-11 15:00:00

          <el-button
            type="primary"
            class="search-button"
            style="margin-left: 30px"
          >
            刷新
          </el-button>
        </div>
      </div>
      <div class="right descIcon">
        <img src="@/assets/images/descIcon.png" alt="" />
        指标说明
      </div>
    </div>
    <!-- 筛选end -->

    <el-row :gutter="20" class="mt-20">
      <el-col  :md="24" :lg="7" >
        <!-- 评分 -->
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>评分</span>
          </div>
          <radar-chart></radar-chart>
          <div class="totalScore">
            总评分：40
            <el-button type="danger">不合格</el-button>
          </div>
        </div>
        <!-- 评分 end -->

        <br />

        <!-- 回路统计 -->
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>回路统计</span>
          </div>
          <div>
            <pie-chart></pie-chart>
          </div>
        </div>
        <!-- 回路统计 end -->
      </el-col>

      <el-col :md="24" :lg="17">
        <!-- 表格start -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="headCellStyle"
        >
          <el-table-column prop="huilv" label="回路" width=""></el-table-column>
          <el-table-column
            prop="gongLv"
            label="功率因数"
            width=""
          ></el-table-column>

          <el-table-column label="不平衡度">
            <el-table-column label="电流" width="">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.dianLiu }}
              </template>
            </el-table-column>
            <el-table-column label="电压">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.dianYa }}
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="电压">
            <el-table-column prop="name" label="A相" width="">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.city }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.city }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="电流负载率">
            <el-table-column prop="name" label="A相" width="">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.city }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.city }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="电流谐波畸变率">
            <el-table-column prop="name" label="A相" width="">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相">
              <template #default="scope">
                <i class="smallSquare green"></i>
                {{ scope.row.city }}
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相">
              <template #default="scope">
                <i class="smallSquare"></i>
                {{ scope.row.city }}
              </template>
            </el-table-column>
          </el-table-column>
          ]

          <el-table-column label="评分" width="">
            <template #default="scope">
              <el-button size="mini" type="warning">
                {{ scope.row.score }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格end -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import radarChart from './realScoreComponent/radarChart.vue'
import pieChart from './realScoreComponent/pieChart.vue'
// import scoreReport from "./scoreReport";
export default {
  name: 'RealScore',
  components: {
    radarChart,
    pieChart,
  },

  data() {
    return {
      num: 0,
      value4: '',
      tableData: [
        {
          huilv: '/HZ183',
          gongLv: '2%',
          dianLiu: '100%',
          dianYa: '0.67%',
          name: '5%',
          city: '7%',
          score: '60',
        },
      ],
    }
  },
  methods: {
    // 表头行的 style 的回调方法
    headCellStyle({ row, column, rowIndex, columnIndex }) {
      row, column
      if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
        return `text-align:center`
      } else {
        return ''
      }
    },
  },
}
</script>
 
<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  border: 1px solid #99a9bf;
}
.bg-purple {
  border: 1px solid #d3dce6;
}
.bg-purple-light {
  border: 1px solid #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  border: 1px solid #f9fafc;
}
</style>