<template>
  <div>
    <table class="tableTitle">
      <tr>
        <td style="width:40.5%;border-right: 1px solid #dce1e6">场站名称</td>
        <td style="width: 60%">信息</td>
      </tr>
    </table>
    <div class="itemTableBox">
      <!--      <div class="TItemUL" :class="{'animate-up': animateUp}" @mouseenter="Stop()" @mouseleave="Up()">-->
      <!--        <div class="TItem" v-for="(Fitem,index) in fdata" :key="index">-->
      <!--          <div class="TI_Dwidth">-->
      <!--            <span>{{ Fitem.stationCode }}</span></div>-->
      <!--          <el-tooltip placement="top">-->
      <!--            <div slot="content" v-html="Fitem.info"></div>-->
      <!--            <div class="TI_info" v-html="Fitem.info"></div>-->
      <!--          </el-tooltip>-->
      <!--        </div>-->
      <!--        <div class="emptyItem" v-if="this.fdata.length==0">-->
      <!--          <div class="empty_default" style="width:100%">暂无数据</div>-->
      <!--        </div>-->
      <dv-scroll-ranking-board :config="config" style="width:95%;height:300px"/>
      <!--      </div>-->
    </div>
  </div>
</template>

<script>

import {homePageUltraShortAccuracy} from "@/api/accuracyCalculation";
export default {
  name: 'tableAutoScroll',
  props: {
    electricfield1: Array
  },
  watch: {
    electricfield1: {
      immediate: true,
      handler(value) {
        this.electricfieldInfo1 = value
        this.init()
      }
    }
  },
  data() {
    return {
      electricfieldInfo1: [],
      config: {
        data: [],
      },
    }
  },
  mounted() {

  },
  methods: {
    init() {
      homePageUltraShortAccuracy().then(res => {
        // console.log(res.data.data)
        //     this.fdata = []
        //     const data = res.data.data
        //     for (let info of data) {
        //       let stationName = this.formatStationCode1(info)
        //       let type = info.type === 'day' ? '天' : '单点平均值'
        //       let ultraShortTermAccuracy = info.ultraShortTermAccuracy === '无可用数据计算' || info.ultraShortTermAccuracy === '无可用数计算' || info.ultraShortTermAccuracy === '无计算公式' || info.ultraShortTermAccuracy === null ? info.ultraShortTermAccuracy : info.ultraShortTermAccuracy + '%'
        //       let ultraShortTermPass = info.ultraShortTermPass === '无可用数据计算' || info.ultraShortTermPass === '无可用数计算' || info.ultraShortTermPass === '无计算公式' || info.ultraShortTermPass === null ? info.ultraShortTermPass : info.ultraShortTermPass + '%'
        //       if (info.type === 'day') {
        //         if (ultraShortTermAccuracy.includes("%"))
        //           ultraShortTermAccuracy = ultraShortTermAccuracy.substring(0, ultraShortTermAccuracy.length - 1)
        //         if (ultraShortTermPass.includes("%"))
        //           ultraShortTermPass = ultraShortTermPass.substring(0, ultraShortTermPass.length - 1)
        //       }
        //       let infoText = '计算类型:' + type +'<br/>超短期准确率:' + ultraShortTermAccuracy + '<br/>超短期合格率:' + ultraShortTermPass
        //       this.fdata.push({stationCode: stationName, info: infoText})
        //     }
        //     this.scrollAnimate()// 真实数据，请求数据，清除定时器，赋值给本地数组fdata，启动定时器--scrollAnimate
        //   }).catch(e => {
        //     console.log('获取场站超短期准确率异常：+' + e)
        //   })
        // },
        var newArr = [];
        res.data.data.map((item, index) => {
          var sevm = {};
          let stationName = this.formatStationCode(item);
          sevm['name'] = stationName
          sevm['value'] = item.ultraShortTermAccuracy;
          newArr.push(sevm)
        })
        this.config = {
          data: newArr.reverse(),
          sort: false
        }
        // this.scrollAnimate()// 真实数据，请求数据，清除定时器，赋值给本地数组fdata，启动定时器--scrollAnimate
      }).catch(e => {
        console.log('获取场站短期准确率异常：+' + e)
      })
    },
    // scrollAnimate() {
    //   // 超出范围在后再进行滚动
    //   if (this.fdata.length > 5) {
    //     this.timer = setInterval(() => {
    //       this.animateUp = true
    //       setTimeout(() => {
    //         this.fdata.push(this.fdata[0])
    //         this.fdata.shift()
    //         this.animateUp = false
    //       }, 500)
    //     }, 1500)
    //   }
    // },
    // 鼠标移上去停止
    Stop() {
      clearInterval(this.timer)
    },
    // 鼠标离开继续滚动
    Up() {
      this.scrollAnimate()
    },
    formatStationCode(row) {
      const electricfield = this.electricfieldInfo1.find(w => w.stationCode === row.stationCode)
      return electricfield !== null && electricfield !== undefined ? electricfield.name : row.stationCode
    },
  },
  destroyed() {
    clearInterval(this.timer)
  }
}

</script>

//<style lang="scss" scoped>
//.tableTitle {
//  width: 98%;
//  background-color: transparent;
//  border: 1px solid #dce1e6;
//  text-align: center;
//  line-height: 28px
//}
//
//.itemTableBox /deep/ .dv-scroll-ranking-board .ranking-info .rank {
//  font-size: 16px;
//}
//
//.itemTableBox /deep/ .dv-scroll-ranking-board .ranking-info .info-name {
//  font-size: 16px;
//}
//
//$TItemHeight: 65.5px;
//.emptyItem {
//  width: 98%;
//  height: calc(34vh);
//  border: 1px solid #f0f0f0;
//  border-top: 0px;
//
//  .empty_default {
//    height: calc(34vh);
//    float: left;
//    font-size: 14px;
//    font-weight: 200;
//    line-height: calc(34vh);
//    text-align: center;
//    color: #b7b7b7;
//  }
//}
//
//.itemTableBox {
//  height: calc(34vh);
//  background: transparent;
//  overflow: hidden;
//
//  .TItem {
//    width: 98%;
//    height: $TItemHeight;
//    background: transparent;
//    padding: .5%;
//    border: 1px solid #f0f0f0;
//    border-top: 0px;
//
//    .TI_default {
//      height: $TItemHeight;
//      float: left;
//      font-size: 14px;
//      font-weight: 200;
//      line-height: $TItemHeight;
//      text-align: center;
//      color: #fff;
//    }
//
//    .TI_Dwidth {
//      width: 40%;
//      line-height: 20px;
//      display: flex;
//      align-items: center;
//      justify-content: center;
//      @extend .TI_default;
//    }
//
//    .TI_info {
//      width: 60%;
//      text-align: left;
//      border-left: 1px solid #f0f0f0;
//      padding-left: 1%;
//      @extend .TI_default;
//    }
//
//    @media screen and (max-width: 1600px) {
//      /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
//      .TI_info {
//        font-size: 12px;
//        line-height: 12px;
//      }
//    }
//    /*当屏幕尺寸大于900px时，应用下面的CSS样式*/
//    @media screen and (min-width: 1600px) {
//      .TI_info {
//        line-height: 17px;
//        padding-top: 1%;
//      }
//    }
//  }
//
//  .animate-up {
//    transition: all 0.5s ease-in-out;
//    transform: translateY(-110px);
//  }
//}
</style>
