<template>
  <div>
    <!-- 筛选start -->
    <div class="filter-container">
      <div class="left">
        <div>
          <div class="filter-item">
            选择站点:
            <el-select
              v-model="store.state.siteId"
              placeholder="请选择"
              style="width: 220px"
              clearable
              filterable
            >
              <el-option
                v-for="site in store.state.siteList"
                :key="site"
                :label="site.siteName"
                :value="site.id"
              ></el-option>
            </el-select>
          </div>

          <el-radio-group
            v-model="listTabPosition"
            @change="listTabsChange(listTabPosition)"
            style="display: inline-block; position: relative; top: -3px"
          >
            <el-radio-button label="dayValue">按日</el-radio-button>
            <el-radio-button label="monthValue">按月</el-radio-button>
          </el-radio-group>

          <el-date-picker
            v-model="dateTime"
            :type="dateType"
            placeholder="请选择"
            style="width: 150px; margin-left: 20px"
            :clearable="false"
            :editable="false"
          ></el-date-picker>

          <el-button
            type="primary"
            class="search-button"
            @click="evaluationReport()"
          >
            搜索
          </el-button>
        </div>
      </div>
      <div class="right descIcon" @click="descripDialog()">
        <img src="@/assets/images/descIcon.png" alt="" />
        指标说明
      </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 :getTableData="getData[0]" v-if="getData[0]" v-loading="loading"></radar-chart>
          <div class="totalScore">
            总评分：{{ getData[0].score?getData[0].score:0 }}
            <el-button
              :type="
                getData[0].score > 80
                  ? 'success'
                  : getData[0].score >= 60
                  ? 'warning'
                  : 'danger'
              "
            >
              {{
                getData[0].score > 80
                  ? '优秀'
                  : getData[0].score >= 60
                  ? '合格'
                  : '不合格'
              }}
            </el-button>
          </div>
        </div>
        <br />
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>回路统计</span>
          </div>
          <div>
            <pie-chart :getTableData="getData[0]" v-loading="loading"></pie-chart>
          </div>
        </div>
      </el-col>
      <el-col :md="24" :lg="17">
        <!-- 表格start -->
        <el-table
          :data="getData"
          style="width: 100%"
          :header-cell-style="headCellStyle"
          v-loading="loading"
        >
          <el-table-column label="回路" width="" align="center">
            <template #default="scope">
              {{ scope.row.loop ? scope.row.loop : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="功率因数" width="" align="center">
            <template #default="scope">
              <div @click="oneClick('cos')">
                <el-button
                  size="mini"
                  round
                  :type="scope.row.cosQ ? 'success' : 'danger'"
                >
                  {{ scope.row.cosQ ? '合格' : '不合格' }}
                </el-button>
              </div>
            </template>
          </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 label="电流" width="" align="center">
              <template #default="scope">
                <div @click="oneClick('elBalun')">
                  <el-button
                    size="mini"
                    round
                    :type="scope.row.elBalunQ ? 'success' : 'danger'"
                  >
                    {{ scope.row.elBalunQ ? '合格' : '不合格' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="电压" align="center">
              <template #default="scope">
                <div @click="oneClick('vtBalun')">
                  <el-button
                    size="mini"
                    round
                    :type="scope.row.vtBalunQ ? 'success' : 'danger'"
                  >
                    {{ scope.row.vtBalunQ ? '合格' : '不合格' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column label="电压">
            <el-table-column prop="name" label="A相" width="" align="center">
              <template #default="scope">
                <div @click="oneClick('ua')">
                  <el-button
                    size="mini"
                    round
                    :type="scope.row.uaQ ? 'success' : 'danger'"
                  >
                    {{ scope.row.uaQ ? '合格' : '不合格' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相" align="center">
              <template #default="scope">
                <div @click="oneClick('ub')">
                  <el-button
                    size="mini"
                    round
                    :type="scope.row.ubQ ? 'success' : 'danger'"
                  >
                    {{ scope.row.ubQ ? '合格' : '不合格' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相" align="center">
              <template #default="scope">
                <div @click="oneClick('uc')">
                  <el-button
                    size="mini"
                    round
                    :type="scope.row.ucQ ? 'success' : 'danger'"
                  >
                    {{ scope.row.ucQ ? '合格' : '不合格' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="电流负载率">
            <el-table-column prop="name" label="A相" width="" align="center">
              <template #default="scope">
                <div @click="oneClick('iaLoad')">
                  <el-button
                    size="mini"
                    round
                    :type="scope.row.iaLoadQ ? 'success' : 'danger'"
                  >
                    {{ scope.row.iaLoadQ ? '合格' : '不合格' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相" align="center">
              <template #default="scope">
                <div @click="oneClick('ibLoad')">
                  <el-button
                    size="mini"
                    round
                    :type="scope.row.ibLoadQ ? 'success' : 'danger'"
                  >
                    {{ scope.row.ibLoadQ ? '合格' : '不合格' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相" align="center">
              <template #default="scope">
                <div @click="oneClick('icLoad')">
                  <el-button
                    size="mini"
                    round
                    :type="scope.row.icLoadQ ? 'success' : 'danger'"
                  >
                    {{ scope.row.icLoadQ ? '合格' : '不合格' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="评分" width="" align="center">
            <template #default="scope">
              <el-button
                size="mini"
                :type="
                  scope.row.score > 80
                    ? 'success'
                    : getData[0].score >= 60
                    ? 'warning'
                    : 'danger'
                "
                style="cursor: defalut"
              >
                {{ scope.row.score }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格end -->
      </el-col>
    </el-row>

    <!--弹框组件开始-----------------------start-->
    <dialog-chartOne
      :dialogTitle="dialogTitle"
      @closeDialog="closeDialog"
      :flag="showDialog"
      :echartsAllData="echartsAllData"
   
    ></dialog-chartOne>
    <!--弹框组件结束-----------------------end-->

    <!--指标说明弹框组件开始-----------------------start-->
    <descrip-dialog
      :dialogTitle="dialogTitle"
      @closeDialog="closeDialog"
      :flag="showDialog2"
      class="descripDialog"
    ></descrip-dialog>
    <!--指标说明弹框组件结束-----------------------end-->
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref,watch  } from 'vue'
import radarChart from './scoreReportComponent/radarChart.vue'
import pieChart from './scoreReportComponent/pieChart.vue'
import dialogChartOne from './scoreReportComponent/dialogChartOne'
import descripDialog from './scoreReportComponent/descripDialog'
import * as api from '@/api/powerQuality/scoreReport.js'
import { ElMessage } from 'element-plus'
import { parseTime } from '@/utils'

export default defineComponent({
  name: 'ScoreReport',
  components: {
    radarChart,
    pieChart,
    dialogChartOne,
    descripDialog,
  },
   props: {
    activeName: String,
  },
  setup(props) {
    const store = useStore()
     const loading=ref(false)
    const listTabPosition = ref('dayValue')
    const dateType = ref('date')
    const dateTime = ref(new Date())
    const deviceCode=ref('')
    const getData = ref([
      {
        loop: '',
        cos: '0%',
        elBalun: '100%',
        vtBalun: '0%',
        name: '0%',
        city: '0%',
        score: '0',
      },
    ])
    const dialogTitle = ref('')
    const showDialog = ref(false)
    const showDialog2 = ref(false)
    const echartsAllData = ref([])

    function headCellStyle({ row, column, rowIndex, columnIndex }) {
      row, column
      if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
        return `text-align:center`
      } else {
        return ''
      }
    }
    const listTabsChange = (value) => {
      value == 'dayValue'
        ? (dateType.value = 'date')
        : (dateType.value = 'month')
    }
    //主页面数据请求
    function evaluationReport() {
       loading.value=true
      let list = {}

      if (listTabPosition.value == 'dayValue') {
        store.commit('getNowFormatDate', dateTime.value)
        console.log(store.state.dateList)
        list = {
          // siteId: 6,
          // time: '2021-11-01 00:00:00',
          type: dateType.value == 'date' ? 1 : 2,
          siteId: store.state.siteId,
          time: store.state.dateList,
        }
      } else {
        store.commit('getCurrentMonthLast', dateTime.value)
        list = {
          // siteId: 6,
          // time: '2021-11-01 00:00:00',
          type: dateType.value == 'date' ? 1 : 2,
          siteId: store.state.siteId,
          time: store.state.monthList[0].substring(0, 7),
        }
      }

      api.evaluationReport(list).then((requset) => {
        setTimeout(()=>{
          loading.value=false
        },200)
        if (requset.status === 'SUCCESS') {
          
          if(requset.data[0]){
            getData.value[0] = requset.data[0]
            deviceCode.value= requset.data[0].deviceCode
     
          }else{
              ElMessage.warning('暂无数据')
          }
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    // 折线图详情总数据请求
    function rtRealScore(params) {
      parseTime

      // var start = parseTime(new Date().setHours(0, 0, 0, 0))
      // var end=nowTime.value

      // var start = '2021-12-01 00:00:00'
      // var end = '2021-12-01 09:07:31'

      store.state.chartType = params
      // alert(store.state.chartType)

      let list = {}

      if (listTabPosition.value == 'dayValue') {
        store.commit('getNowFormatDate', dateTime.value)
        list = {
          // deviceCode: 'DA00021026',
          deviceCode:deviceCode.value,
          startTime: store.state.dateList + ' ' + '00:00:00',
          endTime: store.state.dateList + ' ' + '23:59:59',
        }
      } else {
        store.commit('getCurrentMonthLast', dateTime.value)
        list = {
          // deviceCode:'DA00021026',
          deviceCode:deviceCode.value,
          startTime: store.state.monthList[0] + ' ' + '00:00:00',
          endTime: store.state.monthList[1] + ' ' + '23:59:59',
        }
      }

      api
        .rtRealScore(list)
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            echartsAllData.value = requset.data

            // 处理数据
            var arrOld = requset.data
            let dataTime = arrOld.map((item) => {
              return item.dataTime
            })
            //功率因数
            let cos = arrOld.map((item) => {
              return item.cos
            })

            //电压
            let ua = arrOld.map((item) => {
              return item.ua
            })
            let ub = arrOld.map((item) => {
              return item.ub
            })
            let uc = arrOld.map((item) => {
              return item.uc
            })

            //电流
            let ia = arrOld.map((item) => {
              return item.ia
            })
            let ib = arrOld.map((item) => {
              return item.ib
            })
            let ic = arrOld.map((item) => {
              return item.ic
            })

            // 电流不平衡度
            let elBalun = arrOld.map((item) => {
              return item.elBalun * 100
            })
            // 电压不平衡度
            let vtBalun = arrOld.map((item) => {
              return item.vtBalun * 100
            })
            //电流负载率
            let iaLoad = arrOld.map((item) => {
              return item.iaLoad
            })
            let ibLoad = arrOld.map((item) => {
              return item.ibLoad
            })
            let icLoad = arrOld.map((item) => {
              return item.icLoad
            })

            var echartsObj = []
            var echartsObj2 = []
            var lineName
            var lineName2

            ia
            ib
            ic

            switch (params) {
              case 'cos':
                echartsObj = [{ name: '功率因数 ( 实时数据 )', data: cos }]
                lineName = ''
                break
              case 'ua':
                echartsObj = [{ name: 'A相电压 ( 实时数据 )', data: ua }]
                lineName = 'kV'
                break
              case 'ub':
                echartsObj = [{ name: 'B相电压 ( 实时数据 )', data: ub }]
                lineName = 'kV'
                break
              case 'uc':
                echartsObj = [{ name: 'c相电压 ( 实时数据 )', data: uc }]
                lineName = 'kV'
                break
              case 'elBalun':
                echartsObj = [
                  { name: '电流不平衡度 ( 实时数据 )', data: elBalun },
                ]
                lineName = '%'
                echartsObj2 = [
                  { name: 'A相电流', data: ia },
                  { name: 'B相电流', data: ib },
                  { name: 'C相电流', data: ic },
                ]
                lineName2 = 'A'
                break
              case 'vtBalun':
                echartsObj = [
                  { name: '电压不平衡度 ( 实时数据 )', data: vtBalun },
                ]
                lineName = '%'

                echartsObj2 = [
                  { name: 'A相电压', data: ua },
                  { name: 'B相电压', data: ub },
                  { name: 'C相电压', data: uc },
                ]
                lineName2 = 'V'
                break
              case 'iaLoad':
                echartsObj = [
                  { name: 'A相电流负载率 ( 实时数据 )', data: iaLoad },
                ]
                lineName = '%'
                echartsObj2 = [{ name: 'A相电流', data: ia }]
                lineName2 = 'A'
                break
              case 'ibLoad':
                echartsObj = [
                  { name: 'B相电流负载率 ( 实时数据 )', data: ibLoad },
                ]
                lineName = '%'
                echartsObj2 = [{ name: 'B相电流', data: ib }]
                lineName2 = 'A'
                break
              case 'icLoad':
                echartsObj = [
                  { name: 'C相电流负载率 ( 实时数据 )', data: icLoad },
                ]
                lineName = '%'
                echartsObj2 = [{ name: 'C相电流', data: ic }]
                lineName2 = 'A'
                break
              default:
            }

            dataTime.value = dataTime

            store.state.realScoreLineDataTime = dataTime
            store.state.realScoreLineObj = echartsObj
            store.state.realScoreLineObj2 = echartsObj2
            store.state.realScoreLineName = lineName
            store.state.realScoreLineName2 = lineName2
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

    // 点击表格弹框图表
    function oneClick(params) {
      dialogTitle.value = params
      showDialog.value = true
      rtRealScore(params)
    }
    // 查看指标说明
    const descripDialog = () => {
      dialogTitle.value = '指标说明'
      showDialog2.value = true
    }

    // 关闭操作
    const closeDialog = () => {
      showDialog.value = false
      showDialog2.value = false
    }

    watch(
      () => props.activeName,
      (newVal) => {
        if (newVal == 'first') {
          evaluationReport()
        }
      }
    )

    onMounted(() => {
        evaluationReport()
      
      
    })
    return {
      store,
      headCellStyle,
      listTabPosition,
      num: 0,
      value4: '',
      listTabsChange,
      dateType,
      dateTime,
      tableData: [
        {
          huilv: '/HZ183',
          gongLv: '合格',
          dianLiu: '不合格',
          dianYa: '合格',
          name: '合格',
          city: '不合格',
        },
      ],
      evaluationReport,
      getData,
      oneClick,
      showDialog,
      showDialog2,
      dialogTitle,
      rtRealScore,
      echartsAllData,
      closeDialog,
      descripDialog,
      deviceCode,
      loading
    }
  },
})
</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>