<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
               @change="linkDevice()"
            >
              <el-option
                v-for="site in store.state.siteList"
                :key="site"
                :label="site.siteName"
                :value="site.id"
              ></el-option>
            </el-select>
          </div>

          <div class="filter-item" style="margin-right: 20px">
            选择设备:
            <el-select
              v-model="deviceCode"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option
                v-for="device in deviceList"
                :key="device"
                :label="device.deviceName"
                :value="device.deviceCode"
              ></el-option>
            </el-select>
          </div>
          数据刷新时间：{{ nowTime }}

          <el-button
            type="primary"
            class="search-button"
            style="margin-left: 30px;cursor:pointer!important"
            @click="realScore()"
          >
            刷新
          </el-button>
        </div>
      </div>
      <div class="right descIcon " @click="descripDialog()">
        <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 :getTableData="getData[0]" v-loading="loading"></radar-chart>
          <div class="totalScore">
            总评分：{{ getData[0].score }}
            <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>
        <!-- 评分 end -->

        <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>
        <!-- 回路统计 end -->
      </el-col>

      <el-col :md="24" :lg="17">
        <!-- 表格start -->
        <el-table
          :data="getData"
          style="width: 100%"
          :header-cell-style="headCellStyle"
           :cell-style="cellStyle"
           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')">
                <i
                  class="smallSquare"
                  :style="{ background: scope.row.cosQ ? 'green' : 'red' }"
                ></i>
                {{ scope.row.cos }}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="不平衡度">
            <el-table-column label="电流" width="" align="center">
              <template #default="scope">
                <div @click="oneClick('elBalun')">
                  <i
                    class="smallSquare"
                    :style="{
                      background: scope.row.elBalunQ ? 'green' : 'red',
                    }"
                  ></i>
                  {{ scope.row.elBalun }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="电压" align="center">
              <template #default="scope">
                <div @click="oneClick('vtBalun')">
                  <i
                    class="smallSquare"
                    :style="{
                      background: scope.row.vtBalunQ ? 'green' : 'red',
                    }"
                  ></i>
                  {{ scope.row.vtBalun }}
                </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')">
                  <i
                    class="smallSquare"
                    :style="{ background: scope.row.uaQ ? 'green' : 'red' }"
                  ></i>
                  {{ scope.row.ua }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相" align="center">
              <template #default="scope">
                <div @click="oneClick('ub')">
                  <i
                    class="smallSquare"
                    :style="{ background: scope.row.ubQ ? 'green' : 'red' }"
                  ></i>
                  {{ scope.row.ub }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相" align="center">
              <template #default="scope">
                <div @click="oneClick('uc')">
                  <i
                    class="smallSquare"
                    :style="{ background: scope.row.ucQ ? 'green' : 'red' }"
                  ></i>
                  {{ scope.row.uc }}
                </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')">
                  <i
                    class="smallSquare"
                    :style="{ background: scope.row.iaLoadQ ? 'green' : 'red' }"
                  ></i>
                  {{ scope.row.iaLoad }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="B相" align="center">
              <template #default="scope">
                <div @click="oneClick('ibLoad')">
                  <i
                    class="smallSquare"
                    :style="{ background: scope.row.ibLoadQ ? 'green' : 'red' }"
                  ></i>
                  {{ scope.row.ibLoad }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="city" label="C相" align="center">
              <template #default="scope">
                <div @click="oneClick('icLoad')">
                  <i
                    class="smallSquare"
                    :style="{ background: scope.row.icLoadQ ? 'green' : 'red' }"
                  ></i>
                  {{ scope.row.icLoad }}
                </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"
      :echartsTitle="echartsTitle"
    ></dialog-chartOne>
    <!--弹框组件结束-----------------------end-->


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


  </div>
</template>

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

export default defineComponent({
  name: 'RealScore',
  components: {
    radarChart,
    pieChart,
    dialogChartOne,
    descripDialog
  },
   props: {
    activeName: String,
  },
  setup(props) {
    const store = useStore()
    const loading=ref(false)
    const num = ref(1)
    const nowTime = ref(parseTime(new Date()))
    const value4 = ref('')
    const getData = ref([
      {
        loop: '',
        cos: '0%',
        elBalun: '100%',
        vtBalun: '0%',
        name: '0%',
        city: '0%',
        score: '0',
      },
    ])
    const deviceList = ref([])
    const deviceCode = ref('')

    const dialogTitle = ref('')
    const showDialog = ref(false)
    const showDialog2 = ref(false)

    const echartsAllData = ref([])
    const echartsTitle = ref('')

    //自定义表头列样式
    function headCellStyle({ row, column, rowIndex, columnIndex }) {
      row, column
      if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
        return `text-align:center`
      } else {
        return ''
      }
    }
     //自定义列样式
    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
      row, column, rowIndex,columnIndex
      // console.log(row, column, rowIndex)
      if (rowIndex === 0&&columnIndex!=0) {
        return `cursor:pointer`
      }
    }

    function linkDevice(){
      deviceSelect()
    }

    //设备下拉请求
    async function deviceSelect() {
     await api.deviceListOne({ siteId: store.state.siteId }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          deviceList.value = requset.data
          // deviceCode.value = requset.data[0].deviceCode
          deviceCode.value = requset.data[0]?requset.data[0].deviceCode:''
          // realScore()
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    //主页面数据请求
    function realScore() {

      if(!deviceCode.value){
        
          ElNotification({
          title: '提示',
          message: '请选择左侧设备信息',
          type: 'warning',
        })
        return
      }
       loading.value=true
      api.realScore({ deviceCode: deviceCode.value }).then((requset) => {
        loading.value=false
        
        if (requset.status === 'SUCCESS') {
          getData.value[0] = requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })
      nowTime.value = parseTime(new Date())
    }

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

      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)
      api
        .rtRealScore({
          deviceCode: 'DA00021026',
          startTime: start,
          endTime: end,
        })
        .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 = deviceCode.value
      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') {
         setTimeout(function(){
        realScore()
      },400)
        }
      }
    )

    onMounted(() => {
      deviceSelect()
      setTimeout(function(){
        realScore()
      },500)
      
    })
    return {
      store,
      num,
      oneClick,
      value4,
      getData,
      headCellStyle,
      cellStyle,
      deviceSelect,
      deviceList,
      realScore,
      nowTime,
      deviceCode,
      closeDialog,
      showDialog,
      showDialog2,
      dialogTitle,
      echartsAllData,
      echartsTitle,
      rtRealScore,
      linkDevice,
      loading,

      descripDialog
    }
  },
})
</script>
 
<style scoped lang="scss">

.descripDialog{
  
}

.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;
}
.el-button{
  cursor:default!important
}
</style>