<template>
  <div>
    <!-- 筛选start -->
    <div class="filter-container">
      <div class="left">
        <div>
          <el-button
            class="search-button timeTab"
            @click="num = 0"
            :type="num == 0 ? 'primary' : ''"
            >按日</el-button
          >
          <el-button
            class="search-button timeTab"
            @click="num = 1"
            :type="num == 1 ? 'primary' : ''"
            style="margin-left: 0 !important; margin-right: 20px"
            >按月</el-button
          >

          <div class="filter-item">
            日期：
            <el-date-picker
              v-model="value4"
              type="dates"
              placeholder="请选择"
              style="width: 200px"
            >
            </el-date-picker>
          </div>

          <el-button type="primary" class="search-button">搜索</el-button>
        </div>
      </div>
    </div>
    <!-- 筛选end -->

    <el-row :gutter="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>
        <br />
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>回路统计</span>
          </div>
          <div>
            <pie-chart></pie-chart>
          </div>
        </div>
      </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">
                <el-button size="mini" round type="danger">{{ scope.row.dianLiu }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="电压">
              <template #default="scope">
                <el-button size="mini" round type="success">{{ scope.row.dianYa }}</el-button>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="电压">
            <el-table-column prop="name" label="A相" width="">
              <template #default="scope">
                <el-button size="mini" round>{{ scope.row.name }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相">
              <template #default="scope">
                <el-button size="mini" round>{{ scope.row.city }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相">
              <template #default="scope">
                <el-button size="mini" round>{{ scope.row.city }}</el-button>
              </template></el-table-column
            >
          </el-table-column>
          <el-table-column label="电流负载率">
             <el-table-column prop="name" label="A相" width="">
              <template #default="scope">
                <el-button size="mini" round>{{ scope.row.name }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相">
              <template #default="scope">
                <el-button size="mini" round>{{ scope.row.city }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相">
              <template #default="scope">
                <el-button size="mini" round>{{ scope.row.city }}</el-button>
              </template></el-table-column
            >
          </el-table-column>
          <el-table-column label="电流谐波畸变率">
            <el-table-column prop="name" label="A相" width="">
              <template #default="scope">
                <el-button size="mini" round>{{ scope.row.name }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相">
              <template #default="scope">
                <el-button size="mini" round>{{ scope.row.city }}</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相">
              <template #default="scope">
                <el-button size="mini" round>{{ scope.row.city }}</el-button>
              </template></el-table-column
            >
          </el-table-column>
        </el-table>
        <!-- 表格end -->
      </el-col>
    </el-row>
  </div>
</template>

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

  data() {
    return {
      num: 0,
      value4: "",
      tableData: [
        {
          huilv: "/HZ183",
          gongLv: "合格",
          dianLiu: "不合格",
          dianYa: "合格",
          name: "合格",
          city: "不合格",
        },
      ],
    };
  },
  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>