<template>
  <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
    <ChinaMap ref="map" :data="mapData" @select="handleMapSelect" :visualConfig="visualConfig"/>
    <ThemeTitle style="width: 130%;margin-left:10%;">全国稻田综合种养驾驶舱</ThemeTitle>
    <YearSelector @select="handleYearChange" :years="years" :primaryYear="primaryYear" :secondaryYear="secondaryYear"/>
    <div class="area">
      <p>{{primaryYear}}年全国稻田综合种养面积</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&&curCardIndex!=0) ? 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 axios from 'axios'
import ThemeTitle from './components/title'
import ChinaMap from './components/map'
import AreaCard from './components/area-card'
import YearSelector from './components/year-selector'
export default {
  name: 'ChinaFarming',
  components: {
    ThemeTitle,
    ChinaMap,
    AreaCard,
    YearSelector,
  },
  data() {
    return {
      years: [2014, 2015, 2016, 2017, 2018],
      primaryYear: 2018,
      secondaryYear: 2017,
      curCardIndex: null,
      curProvinceData: null,
      area: 0,
      waterProduction: 0,
      farmProduction: 0,
      mapData: [],
      options1: {
        colors: [['#1FECFF', '#0076FF']],
        grid: {
          top: '5%',
          bottom: '15%',
        },
        xAxis: {
          data: [],
        },
        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: [],
        },
        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,
        },
        yAxis: [{},{}],
        xAxis: {
          data: [],
        },
        series: [
          {
            type: 'bar',
            barGap: 0,
            barWidth: '20%',
          },
          {
            type: 'bar',
            barGap: 0,
            barWidth: '20%',
          },
          {
            type: 'bar',
            barGap: 0,
            barWidth: '20%',
            yAxisIndex: 1,
          },
        ]
      },
      data3: [],
      visualConfig: {
        pieces: [
          {min:0, max: 5000},
          {min:5001, max: 10000},
          {min:10001, max: 50000},
          {min:50001, max: 100000},
          {min:100001, max: 200000},
          {min:200001, max: 300000},
          {min:300001}
          // {min:0, max: 2000},
          // {min:2001, max: 4000},
          // {min:4001, max: 6000},
          // {min:6001, max: 8000},
          // {min:8001, max: 10000},
          // {min:10001, max: 20000},
          // {min:20001, max: 30000},
          // {min:30001, max: 100000},
          // {min:100001, max: 200000},
          // {min:200001, max: 300000},
          // {min:300001}
        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios.get(this.$api.FILE_URL + 'farming.json').then(res => {
        const {nation, province} = res.data
        this.nation = nation
        this.province = province
        this.transformChartData()
        this.transformProvinceData()
      })
    },
    handleYearChange(val, type) {
      this[type] = val
      this.transformChartData(this.curProvinceData || this.nation)
      this.transformProvinceData()
    },
    calcYearLabel() {
      const max = Math.max.apply(null, [this.primaryYear, this.secondaryYear])
      const min = Math.min.apply(null, [this.primaryYear, this.secondaryYear])
      const result = []
      for(let year = min; year <= max; year++) {
        result.push(year)
      }
      return result
    },
    transformChartData(flag = this.nation) {
      this.area = 0
      this.waterProduction = 0
      this.farmProduction = 0
      this.$nextTick(() => {
        this.area = (this.nation.area.find(item => item.name == this.primaryYear)).value
        this.waterProduction = (this.nation.water.find(item => item.name == this.primaryYear)).value
        this.farmProduction = (this.nation.farm.find(item => item.name == this.primaryYear)).value
        const xLabel = this.calcYearLabel()
        this.options1.xAxis.data = xLabel
        this.options2.xAxis.data = xLabel
        this.options3.xAxis.data = xLabel
        const areaData = xLabel.map(year => {
          const data = flag.area.find(item => item.name == year)
          return data.value || 0
        })
        const farmData = xLabel.map(year => {
          const data = flag.farm.find(item => item.name == year)
          return data.value || 0
        })
        const waterData = xLabel.map(year => {
          const data = flag.water.find(item => item.name == year)
          return data.value || 0
        })
        this.data1 = [{data: areaData}]
        this.data2 = [{name: '稻田', data: farmData}, {name:'淡水养殖', data: waterData}]
        this.data3 = [{name: '稻田', data: farmData}, {name:'淡水养殖', data: waterData}, {name: '面积', data: areaData}]
      })
    },
    transformProvinceData() {
      this.mapData = this.province.map(item => {
        const areaData = (item.area.find(el => el.name == this.primaryYear)).value
        const farmData = (item.farm.find(el => el.name == this.primaryYear)).value
        const waterData = (item.water.find(el => el.name == this.primaryYear)).value
        return {
          name: item.name,
          value: areaData,
          area: areaData,
          farm: farmData,
          water: waterData
        }
      })
    },
    handleMapSelect(name) {
      this.curCardIndex = this.mapData.findIndex(item => item.name == name)
      this.curProvinceData = null
      this.setChartData()
      this.$refs.areaCard.handleSelect(this.curCardIndex)
    },
    handleCardSelect(index) {
      if (this.curCardIndex == index) return
      this.curCardIndex = index
      this.curProvinceData = null
      this.setChartData()
      if (!index && index != 0) {
        this.$refs.map.setRegions(index)
        return
      }
      this.$refs.map.setRegions(this.mapData[index].name)
    },
    setChartData() {
      if (!this.curCardIndex && this.curCardIndex != 0) {
        this.transformChartData()
        return
      }
      const curProvince = this.mapData[this.curCardIndex].name
      this.curProvinceData = this.province.find(item => item.name == curProvince)
      this.transformChartData(this.curProvinceData)
    },
  },
}
</script>

<style lang="stylus" scoped>
#container
  $gd-layout(0)
  grid-template-areas \
    '. . box1'\
    '. . box1'\
    'box2 box2 box2'
  grid-template-rows 1fr 1fr 1fr
  grid-template-columns 1fr 1.5fr 1fr
  .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)
</style>
