<template>
  <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
    <ChinaMap ref="map" :data="mapData" @select="handleMapSelect"/>
    <ThemeTitle style="width: 130%;margin-left:10%;">全国稻田综合种养驾驶舱</ThemeTitle>
    <div class="year-select">
      <Dropdown>
        <p>
          主显示
          <span class="year">
            2018
            <Icon type="md-arrow-dropdown"></Icon>
          </span>
        </p>
        <DropdownMenu slot="list">
          <DropdownItem>2018</DropdownItem>
          <DropdownItem>2017</DropdownItem>
        </DropdownMenu>
      </Dropdown>
      <Dropdown>
        <p>
          对比
          <span class="year">
            2017
            <Icon type="md-arrow-dropdown"></Icon>
          </span>
        </p>
        <DropdownMenu slot="list">
          <DropdownItem>2018</DropdownItem>
          <DropdownItem>2017</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <div class="area">
      <p>全国稻田综合种养面积</p>
      <b v-if="area"><m-flip :value="area"/></b>
      <span>公顷</span>
      <div>
        <p>淡水养殖产量<b><m-count :value="waterProduction" :decimal="0"/></b>吨</p>
        <p>稻田产量<b><m-count :value="farmProduction" :decimal="0"/></b>吨</p>
      </div>
    </div>
    <div class="box1">
      <m-card mode="2" :title="`${curCardIndex ? mapData[curCardIndex].name : '全国'}历年数据对比`">
        <div class="data-wrapper">
          <div>
            <p><span/>历年稻田综合种养面积变化（公顷）</p>
            <m-chart :options="options1" :data="data1" :showLegend="false"/>
          </div>
          <div>
            <p><span/>历年稻田综合种养产量变化（吨）</p>
            <m-chart :options="options2" :data="data2"/>
          </div>
          <div>
            <p><span/>历年稻田综合种养整体变化情况（吨/公顷）</p>
            <m-chart :options="options3" :data="data3"/>
          </div>
        </div>
      </m-card>
    </div>
    <div class="box2">
      <m-card mode="2" title="各地区稻田综合种养情况">
        <area-card ref="areaCard" @select="handleCardSelect" :list="mapData"/>
      </m-card>
    </div>
  </div>
</template>

<script>
import ThemeTitle from './components/title'
import ChinaMap from './components/map'
import AreaCard from './components/area-card'
export default {
  name: 'ChinaFarming',
  components: {
    ThemeTitle,
    ChinaMap,
    AreaCard,
  },
  data() {
    return {
      curCardIndex: null,
      area: 0,
      waterProduction: 0,
      farmProduction: 0,
      mapData: [],
      options1: {
        colors: [['#1FECFF', '#0076FF']],
        grid: {
          top: '5%',
          bottom: '15%',
        },
        xAxis: {
          data: ['2017', '2018']
        },
        series: {
          type: 'bar',
          barWidth: '20%',
        }
      },
      data1: [],
      options2: {
        colors: [['#FAD961', '#F76B1C'], ['#B4EC51', '#429321'], ['#1FECFF', '#0076FF']],
        grid: {
          top: '15%',
          bottom: '10%',
        },
        legend: {
          left: '60%',
          top: '-2%',
          itemWidth: 10,
          itemHeight: 10,
        },
        xAxis: {
          data: ['2017', '2018'],
        },
        series: {
          type: 'bar',
          barGap: 0,
          barWidth: '20%',
        }
      },
      data2: [],
      options3: {
        colors: [['#FAD961', '#F76B1C'], ['#B4EC51', '#429321'], ['#1FECFF', '#0076FF']],
        grid: {
          top: '15%',
          bottom: '10%',
        },
        legend: {
          left: '45%',
          top: '-2%',
          itemWidth: 10,
          itemHeight: 10,
        },
        xAxis: {
          data: ['2017', '2018'],
        },
        series: {
          type: 'bar',
          barGap: 0,
          barWidth: '20%',
        }
      },
      data3: [],
    }
  },
  mounted() {
    setTimeout(() => {
      this.area = 2028262
      this.waterProduction = 29598384
      this.farmProduction = 2333269
      this.mapData = [
        { name: '北京', value: 177, area: 100, water: 0, farm: 25962},
        { name: '天津', value: 42, area: 100, water: 638, farm: 27227},
        { name: '河北', value: 102, area: 100, water: 3783, farm: 1523},
        { name: '山西', value: 81, area: 100, water: 3783, farm: 1523},
        { name: '内蒙古', value: 17, area: 100, water: 3783, farm: 1523},
        { name: '辽宁', value: 67, area: 100, water: 3783, farm: 1523},
        { name: '吉林', value: 182, area: 100, water: 3783, farm: 1523},
        { name: '黑龙江', value: 100, area: 100, water: 3783, farm: 1523},
        { name: '上海', value: 24, area: 256897, water: 219, farm: 94293},
        { name: '江苏', value: 299, area: 100, water: 249994, farm: 325294},
        { name: '浙江', value: 114, area: 100, water: 3783, farm: 1523},
        { name: '安徽', value: 29, area: 100, water: 3783, farm: 1523},
        { name: '福建', value: 316, area: 100, water: 3783, farm: 1523},
        { name: '江西', value: 91, area: 100, water: 3783, farm: 1523},
        { name: '山东', value: 19, area: 100, water: 3783, farm: 1523},
        { name: '河南', value: 137, area: 100, water: 3783, farm: 1523},
        { name: '湖北', value: 26, area: 100, water: 690722, farm: 440298},
        { name: '湖南', value: 114, area: 100, water: 3783, farm: 1523},
        { name: '重庆', value: 91, area: 100, water: 3783, farm: 1523},
        { name: '四川', value: 25, area: 100, water: 3783, farm: 1523},
        { name: '贵州', value: 62, area: 100, water: 3783, farm: 1523},
        { name: '云南', value: 83, area: 100, water: 3783, farm: 1523},
        { name: '西藏', value: 9, area: 100, water: 3783, farm: 1523},
        { name: '陕西', value: 80, area: 100, water: 3783, farm: 1523},
        { name: '甘肃', value: 256, area: 100, water: 3783, farm: 1523},
        { name: '青海', value: 10, area: 100, water: 3783, farm: 1523},
        { name: '宁夏', value: 18, area: 100, water: 3783, farm: 1523},
        { name: '新疆', value: 67, area: 100, water: 3783, farm: 1523},
        { name: '广东', value: 123, area: 100, water: 1674, farm: 2817456},
        { name: '广西', value: 59, area: 100, water: 3783, farm: 1523},
        { name: '海南', value: 14, area: 100, water: 3783, farm: 366861},
      ]
      this.data1 = [{data: [12345, 22345]}]
      this.data2 = [{name: '稻田', data: [12345, 13345]}, {name:'淡水养殖', data:[22345, 23345]}]
      this.data3 = [{name: '稻田', data: [12345, 13345]}, {name:'淡水养殖', data:[22345, 23345]}, {name: '面积', data: [12345,12345]}]
    }, 1000)
  },
  methods: {
    handleMapSelect(name) {
      this.curCardIndex = this.mapData.findIndex(item => item.name == name)
      this.setChartData()
      this.$refs.areaCard.handleSelect(this.curCardIndex)
    },
    handleCardSelect(index) {
      if (this.curCardIndex == index) return
      this.curCardIndex = index
      this.setChartData()
      if (!index) {
        this.$refs.map.setRegions(index)
        return
      }
      this.$refs.map.setRegions(this.mapData[index].name)
    },
    setChartData() {
      if (!this.curCardIndex) {
        this.data1 = [{data: [12345, 22345]}]
        this.data2 = [{name: '稻田', data: [12345, 13345]}, {name:'淡水养殖', data:[22345, 23345]}]
        this.data3 = [{name: '稻田', data: [12345, 13345]}, {name:'淡水养殖', data:[22345, 23345]}, {name: '面积', data: [12345,12345]}]
        return
      }
      const data = this.mapData[this.curCardIndex]
      this.data1 = [{data: [data.area, data.area]}]
      this.data2 = [{name: '稻田', data: [data.farm, data.farm]}, {name:'淡水养殖', data:[data.water, data.water]}]
      this.data3 = [{name: '稻田', data: [data.farm, data.farm]}, {name:'淡水养殖', data:[data.water, data.water]}, {name: '面积', data: [data.area,data.area]}]
    },
  },
}
</script>

<style lang="stylus" scoped>
#container
  $gd-layout()
  grid-template-areas \
    '. . box1'\
    '. . box1'\
    'box2 box2 box2'
  grid-template-rows 1fr 1fr 1fr
  grid-template-columns 1fr 1.5fr 1fr
  grid-gap 0
  .box1
    grid-area box1
  .box2
    grid-area box2
  .area
    width 42%
    font-size 1.8rem
    color $color-map(1)
    position absolute
    top 10%
    left 0
    right 0
    text-align center
    >div
      display flex
      justify-content space-around
      margin-top 1rem
      p
        font-size 1.4rem
      b
        color $color-map(1)
        font-size 1.8rem
        font-family $font-din
        margin 0 0.5rem
    p
      color #fff
      font-family $font-pang
    b
      font-size 3rem
    >span
      font-family $font-pang
  .data-wrapper
    display flex
    flex-direction column
    height 100%
    padding 1rem
    >div
      height 33%
      margin-bottom 0.5rem
      >p
        color $color-map(0.8)
        display flex
        align-items center
        >span
          display inline-block
          width 0.4rem
          height 1rem
          margin-right 0.5rem
          background $color-map(0.8)
  .year-select
    position absolute
    z-index 100
    top 0
    right 1rem
    color #fff
    >div
      margin-left 0.5rem
    .year
      color $color-map(1)
      cursor pointer
      font-size 1.6rem
      font-weight bold
</style>
