<!--
  @description: 统计报表-供应商地区分布
  @Modifier：杨胜国
  @routerPath:
  @date：  2021/03/06
-->
<template>
  <dl class="reportChart_crud" :style="{'height':height}">
    <dt>
      合格供应商地区分布
      <p class="right">
        <span @click="openDialog">更多</span>
        <span style="margin-left:10px">
          <i class="iconfont icon-icon--" style="font-size:20px" @click="openFangda" />
        </span>
      </p>
    </dt>
    <dd class="echarts-dd">
      <!--  reportchart="reportChart" -->
      <supplierAreaMapCharts :search-data="searchData" :height="height" />
    </dd>
    <!-- 报表统计-供应商地区分布-更多 -->
    <supplierAreaMapList ref="tenderDetail" />
    <!-- 地图放大 -->
    <!-- reportchart="reportChart" -->
    <supplierAreaMapBigDialog ref="bigDetail" :search-data="searchData" />
  </dl>
</template>

<script>
/* 組件 */
import MyEcharts from '@/components/common/echarts/myEcharts.vue'// 图表
import supplierAreaMapBigDialog from './supplierAreaMapBig-dialog.vue'// 地图放大
import supplierAreaMapList from './supplierAreaMapList-dialog.vue' // 报表统计-供应商地区分布-更多
import supplierAreaMapCharts from './supplierAreaMapCharts.vue' // 报表统计-供应商地区分布-更多

export default {
  name: 'SupplierAreaMapCard',
  components: {
    MyEcharts, // 图表
    supplierAreaMapList, // 报表统计-供应商地区分布-更多
    supplierAreaMapBigDialog, // 弹框地图放大
    supplierAreaMapCharts // 地图
  },
  props: {
    // 高度
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 图表配置
      chartOption: {},
      searchData: {},
      searchForm: {}
    }
  },
  methods: {
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.searchData = searchData
    },
    // 更多明细弹框
    openDialog() {
      this.$refs.tenderDetail.open(this.searchData)
    },
    // 地图放大
    openFangda() {
      this.$refs.bigDetail.open(this.searchData)
    }
  }

}
</script>
<style lang="less" scoped>
.echarts-dd{
  &>div{
    height: calc(100% - 0);
  }
}
</style>
