<!--
 * @LastEditors: gcz
-->
<template>
  <div class="numerical" ref="numericalRef">
    <div class="ntitle">{{$store.state.addr.selectAddr}}{{ntitle}}</div>
    <!-- <div class="ntitle">
            <span v-if="$store.state.addr.mapLevel=='province'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
            <span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
            <span v-if="$store.state.addr.mapLevel=='district'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
            <span v-if="$store.state.addr.mapLevel=='street'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
    </div>-->
    <!-- <div class="addr">{{$store.state.addr.selectAddr}}</div> -->
    <div class="item-wrap">
      <div class="inner u-flex u-flex-wrap">
        <div
          class="numerical-item"
          v-for="(item,index) in data"
          @mouseenter="showDetails(item)"
          @mouseleave="unShowDetails"
          :key="item.name+index"
        >
          <div class="cell name">{{item.name}}</div>
          <span class="cell number">{{item.number}}</span>
          <span class="cell unit">{{item.unit}}</span>
        </div>
      </div>
    </div>
    <div
      class="detail-wrap"
      @mouseenter="isShowDetails=true"
      @mouseleave="isShowDetails=false"
      v-show="isShowDetails"
      ref="detailRef"
    >
      <el-table
        :key="hotKey"
        :data="detailsData"
        empty-text="该区域暂无数据"
        style="width: 100%;overflow-y: auto;"
        height="240"
      >
        <el-table-column
          :label="item.title"
          :prop="item.value"
          v-for="(item, index) in headerList"
          :key="index"
          align="center"
        >
          <template slot-scope="scope">{{scope.row[item.value]||'-'}}</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  forestFarmDetail,
  treeListDetail,
  baseItemDetail
} from '@/service/index';
export default {
  name: '',
  props: {
    data: {
      type: Array,
      default: null
    },
    ntitle: {
      type: String,
      default: '数据概况'
    },
    pageName: {
      type: String,
      default: ''
    }
  },
  components: {},
  data() {
    return {
      isShowDetails: false,
      headerList: [],
      detailsData: [],
      hotKey: Date.now()
    };
  },
  created() {
    // console.log('data',this.data);
  },
  mounted() {
    document.addEventListener('click', this.outClick);
  },
  destroyed() {
    document.removeEventListener('click', this.outClick);
  },
  methods: {
    showDetails(item) {
      // console.log('pageName',this.pageName);
      let param={
        cityId: this.$store.state.addr.selectCity.areaId,
        countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      };

      //排除触发字段
      let excludeArr = ['优势树种'];
      if (excludeArr.includes(item.name)) {
        this.isShowDetails = false;
        return;
      }
      let page = {
        forest: this.getForestData,
        treeSpecies: this.getTreeSpeciesData,
        economics: this.getEconomicsData
      };
      page[this.pageName] && page[this.pageName](param);
    },
    unShowDetails() {
      this.isShowDetails = false;
    },
    getForestData(param) {
      this.isShowDetails = true;
      forestFarmDetail(param)
        .then((res) => {
          let resData = res.rows;
          this.detailsData = resData;
          // console.log('forestFarmDetail res',this.detailsData);

          resData.length>0 ? this.getHeaderList(resData):this.headerList=[];
        })
        .catch((err) => {
          console.log('forestFarmDetail err', err);
        });
    },
    getTreeSpeciesData(param) {
      this.isShowDetails = true;
      treeListDetail(param)
        .then((res) => {
          let resData = res.data;
          this.detailsData = resData;
          // console.log('treeListDetail res',this.detailsData);
         resData.length>0 ? this.getHeaderList(resData):this.headerList=[];
        })
        .catch((err) => {
          console.log('treeListDetail err', err);
        });
    },
    getEconomicsData(param) {
      this.isShowDetails = true;
      baseItemDetail(param)
        .then((res) => {
          let resData = res.rows;
          this.detailsData = resData;
          console.log('baseItemDetail res', this.detailsData);
          resData.length>0 ? this.getHeaderList(resData):this.headerList=[];
        })
        .catch((err) => {
          console.log('baseItemDetail err', err);
        });
    },
    getHeaderList(data) {
      let data1 = Object.keys(data[0]).map((key) => {
        console.log('pageName', this.pageName);
        let titles = {};
        if (this.pageName == 'forest') {
          titles = {
            forestName: '林场名称',
            smallClassStock: '蓄积量(m³)',
            landArea: '占地面积(亩)',
            smallClassCount: '小班数量'
          };
        } else if (this.pageName == 'treeSpecies') {
          titles = {
            treeName: '树种名称',
            treeStock: '树种蓄积(m³)',
            treeCount: '树种株数(株)'
          };
        } else if (this.pageName == 'economics') {
          titles = {
            baseName: '基地名称',
            baseNumber: '基地数量',
            baseArea: '基地面积(亩)',
            corpNumber: '作物数量',
            corpName: '作物名称',
            outputValue: '预估产值(万元)'
          };
        }

        return { title: titles[key], value: key };
      });

      let newData = JSON.parse(JSON.stringify(data1));

      if (this.pageName == 'economics') {
        newData.splice(1, 1); //删除基地数量
        newData.splice(2, 1); //删除作物数量
      }

      this.headerList = newData;
      // console.log('this.headerList',this.headerList);
      this.hotKey = Date.now();
    },
    outClick(e) {
      let detailRef = this.$refs.numericalRef;
      if (!detailRef.contains(e.target) && this.isShowDetails) {
        this.isShowDetails = false;
      }
    }
  }
};
</script>

<style lang='scss' scoped>
// @import url('https://fonts.font.im/css?family=Rubik');
.numerical {
  // box-sizing: border-box;
  // margin-bottom: 2vh;
  // border-radius: 10px;
  // padding: 20px 24px;
  // border: 1px solid var(--main-color);
  .item-wrap {
    height: calc(100% - 48px);
    display: flex;
    align-items: center;
    .inner {
      width: 100%;
    }
    .numerical-item {
      padding: 0 15px 15px 15px;
      box-sizing: border-box;
      width: 50%;
      text-align: center;
      .name {
        font-size: 18px;
        color: #a6b7bf;
        margin-bottom: 5px;
      }
      .number {
        color: var(--main-color);
        font-size: 35px;
        margin-right: 5px;
        font-family: 'Rubik', sans-serif;
      }
      .unit {
        font-size: 17px;
        color: var(--main-color);
      }
    }
  }
  .detail-wrap {
    position: absolute;
    top: 0;
    right: -115%;
    z-index: 99;
    width: 115%;
    overflow: hidden;
    border-radius: 10px;
    // border: 1px solid rgb(2, 238, 255);
    ::-webkit-scrollbar {
      width: 0.3rem;
      height: 0.625rem;
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba($color: rgba(4, 175, 206, 0.884), $alpha: 0.6);
      border-radius: 2em;
    }
    /deep/ .el-table{
        background: url('../assets/img/hoverbac.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
   /deep/ .el-table th {
      background-color: transparent !important;
      color: #fff;
    }

    /deep/ .el-table tr {
      background-color: transparent !important;
      color: #fff;
    }
    /deep/ .el-table--enable-row-transition .el-table__body td,
    .el-table .cell {
      background-color: transparent;
    }
    /deep/ .el-table::before {
      //去除底部白线
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }
    /deep/ .el-table td.el-table__cell, /deep/ .el-table th.el-table__cell.is-leaf{
        border-bottom:none;
    }
  }
   
}

@media only screen and (max-width: 1280px) {
  //概况
  .numerical {
    .item-wrap {
      .numerical-item {
        padding: 0 0 15px 5px;
        .name {
          font-size: 16px;
        }
        .number {
          font-size: 24px;
        }
        .unit {
          font-size: 16px;
        }
      }
    }
  }
}
</style>