<template>
  <div class="data-wrapper" v-if="showData">
    <el-table
      :data="tableData"
      style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2)"
      border
    >
      <el-table-column
        v-for="item in tableColums"
        :key="item.label"
        :label="item.label"
        :width="item.widthsty"
        :min-width="item.minwidthsty"
        align="center"
      >
        <template #header>
          <span>{{ item.label }}</span>
        </template>
        <template slot-scope="{row}">
          <span v-if="item.key === 'Unit' && lang === 'ch'">{{ row.Unit }}</span>
          <span v-else-if="item.key === 'Unit' && lang !== 'ch' && row.Unit==='无'"></span>
          <span 
            v-else-if="item.key === 'Unit' && lang !== 'ch' && row.Unit!=='无'" 
            :style="!row.UnitEn && 'color: #999'"
            @click="changeEnOptions"
          >
            {{ row.UnitEn || '英文单位' }}
          </span>
          <span v-else-if="item.key === 'Frequency'">{{ lang === 'ch' ? row.Frequency : row.FrequencyEn }}</span>
          <span v-else>{{ row[item.key] }}</span>
        </template>
      </el-table-column>
      <div slot="empty" style="padding: 50px 0 320px">
        <img
          src="~@/assets/img/data_m/table_no.png"
          alt=""
          style="
            display: block;
            width: 135px;
            height: 90px;
            margin: 20px auto 10px;
          "
        />
        <span>暂无数据</span>
      </div>
    </el-table>
    <ul
      class="value-ul"
      ref="valueUl"
      @scroll="scrollHandle"
      v-show="dataList.length"
    >
      <li
        class="value-item"
        v-for="item in dataList"
        :key="item.EdbDataId"
      >
        <span class="value-label">
          <i class="new-tag" v-if="tableData[0].LatestDate===item.DataTime"></i>
          {{ item.DataTime }}
        </span>
        <span
          :class="['value-label',{'predict-act': item.isPredic}]"
          style="min-width: 200px; text-align: center"
          >{{ item.Value }}</span
        >
      </li>
      <li class="nodata value-item" v-if="!dataList.length">暂无数据</li>
    </ul>
  </div>
</template>

<script>
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
export default {
  props: {
    id: Number,
    lang: String
  },
  watch: {
    id(newval) {
      this.getData()
    },
    lang(newval) {
      this.$emit('updateTit',{
        edb_name: this.tableData[0].EdbName,
        edb_nameEn: this.tableData[0].EdbNameEn,
        userid: this.tableData[0].SysUserId})
    }
  },
  data() {
    return {
      tableColums: [
				{
					label: '指标ID',
					key: 'EdbCode',
					minwidthsty: '150px'
				},
				{
					label: '频度',
					key: 'Frequency',
					widthsty: '80px'
				},
				{
					label: '单位',
					key: 'Unit',
					widthsty: '80px'
				},
				{
					label: '起始时间',
					key: 'StartDate',
					widthsty: '160px'
				},
				{
					label: '预测截止日期',
					key: 'EndDate',
					widthsty: '160px'
				},
				{
					label: '更新时间',
					key: 'ModifyTime',
					widthsty: '160px'
				},
				{
					label: '添加人',
					key: 'SysUserRealName',
					widthsty: '100px'
				},
			],
      showData: false,
      tableData: [],
      page_no: 1,
      dataList: [],
    };
  },
  methods: {
    /* 获取数据 */
    getData() {
      preDictEdbInterface.edbDataInfo({
        EdbInfoId: this.id,
        CurrentIndex: this.page_no
      }).then(res => {
        this.showData = true;
        if(res.Ret !== 200) return
        const { Item } = res.Data;
        this.tableData = [Item] || [];
        Item.PredictDataList && Item.PredictDataList.forEach(_ => {
          _.isPredic = true;
        })
        this.haveMore =  this.page_no < res.Data.Paging.Pages;
        this.dataList = this.page_no === 1 ? [...Item.PredictDataList,...Item.DataList] : [...this.dataList,...Item.DataList];

        this.$emit('updateTit',{
          edb_name: Item.EdbName,
          edb_nameEn: Item.EdbNameEn,
          userid: Item.SysUserId
        })

      })
    },

    changeEnOptions() {
      this.$emit('openEnNameDia',this.tableData[0])
    },

    /* 滚动加载 */
    scrollHandle: _.throttle(function() {
			let scrollTop = this.$refs.valueUl.scrollTop;
      let clientHeight = this.$refs.valueUl.clientHeight;
      let scrollHeight = this.$refs.valueUl.scrollHeight;
			if(scrollTop + clientHeight >= scrollHeight-10 && this.haveMore){
				this.page_no ++;
				this.getData();
			}
		},200),

  },
  mounted() {
    this.getData()
  },
};
</script>
<style scoped lang="scss">
.data-wrapper {
  padding-top: 40px;
  .value-ul {
    margin-top: 10px;
    border-bottom: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
    /* max-height: 520px; */
    max-height: calc(100vh - 450px);
    overflow-y: auto;
    .value-item {
      /* width: 100%; */
      padding: 14px 0;
      border: 1px solid #dcdfe6;
      border-bottom: none;
      display: flex;
      justify-content: space-around;
      &:first-child { border-top: none; }
      .value-label {
        position: relative;
        color: #666;
      }
      .predict-act {
        color: orange;
      }
      .new-tag {
        width: 6px;
        height: 6px;
        display: inline-block;
        position: absolute;
        left: -12px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 50%;
        background: #f00;
      }
    }
    .nodata {
      text-align: center;
      padding: 40px 0;
      color: #999;
    }
  }
}
</style>
