<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>
          <el-button
            type="primary"
            class="search-button"
            @click="realScoreOne()"
          >
            搜索
          </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="8">
        <div class="grid-content bg-purple loopUnbanlancePanel">
          <div class="blanceChartTit">
            <span>三项不平衡度</span>
          </div>
          <el-row
            :gutter="20"
            style="padding: 20px; border-bottom: 1px solid #d3dce6"
          >
            <el-col :span="12" class="loopUnbanlanceCard">
              <div class="grid-content" style="text-align: center">
                <loop-radarChart :getData="getData" v-loading="loading"></loop-radarChart>
              </div>
            </el-col>
            <el-col :span="12" class="loopUnbanlanceCard">
              <div
                style="
                  width: 90%;
                  background: #1187ff;
                  margin: 0px auto;
                  text-align: center;
                  color: #fff;
                  padding: 10px 0px;
                "
              >
                <div class="mb-10">电压不平衡度</div>
                <div>{{ getData.vtBalun ? getData.vtBalun * 100 : 0 }}%</div>
              </div>
              <ul>
                <li>
                  <div>A相电压</div>
                  <div>
                    <div class="mb-5">
                      幅值:{{ getData.ua ? getData.ua + ' V' : 0 }}
                    </div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>B相电压</div>
                  <div>
                    <div class="mb-5">
                      幅值:{{ getData.ub ? getData.ub + ' V' : 0 }}
                    </div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>C相电压</div>
                  <div>
                    <div class="mb-5">
                      幅值:{{ getData.uc ? getData.uc + ' V' : 0 }}
                    </div>
                    <div>相角:-</div>
                  </div>
                </li>
              </ul>
            </el-col>
          </el-row>

          <el-row
            :gutter="20"
            style="padding: 20px; border-bottom: 1px solid #d3dce6"
          >
            <el-col :span="12" class="loopUnbanlanceCard">
              <div class="grid-content" style="text-align: center">
                <loop-radarChart2 :getData="getData" v-loading="loading"></loop-radarChart2>
              </div>
            </el-col>
            <el-col :span="12" class="loopUnbanlanceCard">
              <div
                style="
                  width: 90%;
                  background: #1187ff;
                  margin: 0px auto;
                  text-align: center;
                  color: #fff;
                  padding: 10px 0px;
                "
              >
                <div class="mb-10">电流不平衡度</div>
                <div>{{ getData.elBalun ? getData.elBalun * 100 : 0 }}%</div>
              </div>
              <ul>
                <li>
                  <div>A相电流</div>
                  <div>
                    <div class="mb-5">
                      幅值:{{ getData.ua ? getData.ia + ' A' : 0 }}
                    </div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>B相电流</div>
                  <div>
                    <div class="mb-5">
                      幅值:{{ getData.ua ? getData.ib + ' A' : 0 }}
                    </div>
                    <div>相角:-</div>
                  </div>
                </li>
                <li>
                  <div>C相电流</div>
                  <div>
                    <div class="mb-5">
                      幅值:{{ getData.ua ? getData.ic + ' A' : 0 }}
                    </div>
                    <div>相角:-</div>
                  </div>
                </li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!-- 三项不平衡度 end -->

      <!-- 谐波 -->
      <el-col :md="24" :lg="16">
        <harmonic-panel v-loading="loading"></harmonic-panel>
      </el-col>
      <!-- 谐波 end -->
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <!-- 电压start -->
      <el-col :md="24" :lg="8" class="mb-20">
        <voltage-panel :getData="getData" v-loading="loading"></voltage-panel>
      </el-col>
      <!-- 电压end -->

      <!-- 频率 start-->
      <el-col :md="24" :lg="8" class="mb-20">
        <frequency-panel :getData="getData" v-loading="loading"></frequency-panel>
      </el-col>
      <!-- 频率 end -->

      <!-- 有功功率 -->
      <el-col :md="24" :lg="8">
        <power-panel :getData="getData" v-loading="loading"></power-panel>
      </el-col>
      <!-- 有功功率 end -->
    </el-row>

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

<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref} from 'vue'
import loopRadarChart from './loopMonitorComponent/loopRadarChart'
import loopRadarChart2 from './loopMonitorComponent/loopRadarChart2'
import harmonicPanel from './loopMonitorComponent/harmonicPanel'
import voltagePanel from './loopMonitorComponent/voltagePanel'
import frequencyPanel from './loopMonitorComponent/frequencyPanel'
import powerPanel from './loopMonitorComponent/powerPanel'
import descripDialog from './loopMonitorComponent/descripDialog'

import * as api from '@/api/powerQuality/loopMonitor.js'
import { ElMessage } from 'element-plus'
import { ElNotification } from 'element-plus'


export default defineComponent({
  name: 'LoopMonitor',
  components: {
    loopRadarChart,
    loopRadarChart2,
    harmonicPanel,
    voltagePanel,
    frequencyPanel,
    powerPanel,
    descripDialog,
  },
  props: {
    activeName: String,
  },
  setup(props) {
    const store = useStore()
     const loading=ref(false)
    const getData = ref({})
    const deviceList = ref([])
    const deviceCode = ref('')
    const showDialog = ref(false)
    const dialogTitle = ref('')
    const siteId = ref(0)

    function linkDevice() {
      deviceSelect()
    }

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

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

    // 查看指标说明
    const descripDialog = () => {
      siteId.value = store.state.siteId
      dialogTitle.value = '指标说明'
      showDialog.value = true
    }
    // 关闭操作
    const closeDialog = () => {
      showDialog.value = false
    }
    

    onMounted(() => {
        deviceSelect()
  
       if (props.activeName == 'second') {
          setTimeout(function () {
            realScoreOne()
           
          }, 1000)
        }
     
    })
    return {
      store,
      getData,
      deviceList,
      deviceCode,
      linkDevice,
      deviceSelect,
      realScoreOne,
      descripDialog,
      showDialog,
      dialogTitle,
      closeDialog,
      siteId,
      loading
    }
  },
})
</script>
 
<style lang="scss" scoped>
.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>