<template>
  <d2-container >
    <headerLayout active="0"></headerLayout>
    <div class="enterpriseSize">
      <div class="news-title d-flex jc-between">
        <label>公司规模</label>
        <span @click="goBack">&lt; 返回</span>
      </div>
      <div class="section">
        <div class="leftBlock">
          <el-table :show-header="false" :data="tableData" stripe style="width: 100%">
              <el-table-column prop="type" width="100">
                <template slot-scope="scope">
                  <span v-if="scope.row.type==0">母公司</span>
                  <span v-else-if="scope.row.type==1">子公司</span>
                  <span v-else>办事处</span>
                </template>
              </el-table-column>
              <el-table-column prop="name"></el-table-column>
          </el-table>
        </div>
        <div class="centerBlock">
          <mapChina :message="mapChina" idstr="mapChinaCompany" class="mapChina"></mapChina>
        </div>
      </div>
    </div>

  </d2-container>
</template>

<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import mapChina from './mainPageEcharts/mapChina' // 地图
import * as API_BASIC from '@/api/sys.basic.js'

export default {
  components: { headerLayout, mapChina },
  data () {
    return {
      mapChina: [],
      tableData: []
    }
  },
  mounted () {
    this.getTableData()
    this.GET_MapChina()
  },
  methods: {
    // 获取表格
    getTableData () {
      const param = {
        _index: 1,
        _size: 30
      }
      API_BASIC.getScalePageList(param).then(res => {
        if (res.status === 200) {
          this.tableData = res.data.records
        }
      })
    },
    GET_MapChina () {
      API_BASIC.getScaleList().then(res => {
        this.newData = res.data
        this.newData.forEach(e => {
          var arr = { province: e.areaName, number: e.number }
          this.mapChina.push(arr)
        })
      })
    },
    goBack () {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/style/mainPage.scss';
</style>
<style  lang="scss">
  .enterpriseSize{
    padding: .5rem 1rem;
    .news-title {
      width: 100%;
      height: .54rem;
      font-size: .24rem;
      line-height: 1.5;
      color: $color-primary;
      border-bottom: .02rem solid $color-primary;
      margin-bottom: .5rem;
      span {
        cursor: pointer;
      }
    }
    .section {
      padding:0;
    }
    .leftBlock {
      height: calc(100vh - 2.8rem);
      padding: .24rem;
      border: 1px solid $color-primary;
      border-radius: .2rem;
      box-sizing: border-box;
      overflow-y: auto;
    }
    .section {
      .centerBlock {
          width: calc(100vw - 6rem);
          height: calc(100vh - 2.8rem);
      }
      .mapChina {
          height: calc(100vh - 3rem);
      }
    }
    .el-table {
        font-size: .16rem;
        color: #fff;
        background-color: rgba(47, 219, 243, 0.05);
        &::before {
            height: 0;
        }
        td {
            border-bottom: none;
        }
        tr {
            background-color: $color-bg;
            cursor: pointer;
            &.is-leaf {
                border-bottom: none;
            }
            &.el-table__row--striped td {
                background-color: rgba(47, 219, 243, 0.15);
            }
        }
        .el-table__body tr:hover>td {
            background-color: $color-primary;
        }
    }
  }
</style>