<template>
  <div class="team-build">
    <div>
      <!-- <m-chart :data="data" :config="config"/> -->
      <div v-for="item in data" :key="item.name">
        <span>{{item.name}}:</span>
        <m-count :value="item.value" :decimal="0" :color="item.color"/> 人
      </div>
    </div>
    <div class="chart-wrapper" v-if="showChart">
      <p>能力建设</p>
      <span>单位：次</span>
      <div>
        <m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/>
      </div>
    </div>
    <Select v-model="area" @on-change="handleChange" class="custom-select" size="small" transfer>
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
  </div>
</template>

<script>
const mock = [
  {area: '华北地区', name: '北京', value: 14},
  {area: '华北地区', name: '天津', value: 15},
  {area: '华北地区', name: '河北', value: 10},
  {area: '华北地区', name: '山西', value: 6},
  {area: '华东地区', name: '上海', value: 21},
  {area: '华东地区', name: '江苏', value: 24},
  {area: '华东地区', name: '浙江', value: 20},
  {area: '华东地区', name: '安徽', value: 19},
  {area: '华东地区', name: '江西', value: 16},
  {area: '华东地区', name: '福建', value: 18},
  {area: '华东地区', name: '山东', value: 16},
  {area: '华南地区', name: '广东', value: 26},
  {area: '华南地区', name: '广西', value: 13},
  {area: '华南地区', name: '海南', value: 10},
  {area: '华西地区', name: '新疆', value: 8},
  {area: '华西地区', name: '内蒙古', value: 7},
  {area: '华西地区', name: '青海', value: 9},
  {area: '华西地区', name: '甘肃', value: 6},
  {area: '华西地区', name: '宁夏', value: 6},
  {area: '华西地区', name: '陕西', value: 8},
  {area: '华西地区', name: '西藏', value: 0},
  {area: '华西地区', name: '四川', value: 12},
  {area: '华西地区', name: '重庆', value: 18},
  {area: '华西地区', name: '云南', value: 10},
  {area: '华中地区', name: '河南', value: 12},
  {area: '华中地区', name: '湖北', value: 24},
  {area: '华中地区', name: '湖南', value: 20},
]
export default {
  name: 'TeamBuild',
  data() {
    return {
      showChart: false,
      area: '华北地区',
      options: ['华北地区', '华东地区', '华南地区', '华西地区', '华中地区'],
      data: [
        {name: '执业人员', value: 168, color: '#535af1'},
        {name: '乡村兽医', value: 1585, color: '#39d655'},
        {name: '官方兽医', value: 23654, color: '#ffd825'},
      ],
      config2: {
        colors: ['#00d2ff'],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'bar', barWidth: '30%', key: 'value', label: {show: true, position: 'top', color: '#fff'}},
        ],
        xAxis: {
          key: 'name',
        },
        yAxis: {
          axisLabel: {show: false},
          axisLine: {show: false},
          max: 30,
        }
      },
      data2: [],
    }
  },
  mounted() {
    this.data2 = mock.filter(item => item.area === this.area)
    setTimeout(() => this.showChart = true, 0)
  },
  methods: {
    handleChange(area) {
      this.data2 = mock.filter(item => item.area === area)
    }
  }
}
</script>

<style lang="stylus" scoped>
.team-build
  width 100%
  height 100%
  display flex
  flex-direction column
  overflow hidden
  >div
    &:first-child
      display flex
      align-items center
      justify-content space-around
      border-bottom .1rem solid #175d83
      line-height 2.5
    &.chart-wrapper
      flex 1
      position relative
      >div
        width 100%
        height calc(100% - 3rem)
      p
        text-align center
        margin .5rem 0
        font-weight bold
      span
        position absolute
        top .5rem
        left .5rem
        font-size .9rem
</style>
