<!--
  @description: 统计报表-招采地图
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/28
-->
<template>
  <dl class="reportChart_crud" :style="{'height':height}">
    <dt>
      招采地图
      <p class="right">
        <span style="margin-right:10px">
          <i class="iconfont icon-icon--" style="font-size:20px" @click="openDialog" />
        </span>
      </p>
    </dt>
    <dd class="echarts-dd">
      <!--  reportchart="reportChart" -->
      <bidAndProcMapCharts :height="height" :search-data="searchData" :map-id="'mapSCatterChart'+randomId" />
    </dd>
    <!-- 地图放大 -->
    <!-- reportchart="reportChart" -->
    <bidAndProcMapChartsDialog ref="tenderDetail" :search-data="searchData" :map-id="'mapDialog'+randomId" />
  </dl>
</template>

<script>
/* 組件 */
import bidAndProcMapChartsDialog from './bidAndProcMapCharts-dialog.vue'// 图表
import bidAndProcMapCharts from './bidAndProcMapCharts.vue'// 图表
// api
export default {
  components: {
    bidAndProcMapChartsDialog, // 弹框
    bidAndProcMapCharts // 地图
  },
  props: {
    // 高度
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      searchData: {}
    }
  },
  computed: {
    // 随机
    randomId() {
      var Num = ''
      for (var i = 0; i < 6; i++) {
        Num += Math.floor(Math.random() * 10)
      }
      return Num
    }
  },
  methods: {
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.searchData = searchData
    },
    // 弹框
    openDialog() {
      this.$refs.tenderDetail.open()
    }
  }
}
</script>
<style lang="less" scoped>
.echarts-dd{
  &>div{
    height: calc(100% - 0);
  }
}
</style>
