<template>
  <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
    <ChinaMap ref="map" :data="mapData" @select="handleMapSelect"  :visualFormatter="visualFormatter" :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="total"><m-flip :value="total"/></b>
      <span>万元</span>
    </div>
    <div class="box1">
      <m-card mode="2" :title="`${!(!curCardIndex&&curCardIndex!=0) ? mapData[curCardIndex].name : '全国'}产值细类`">
        <div class="class-wrapper" v-if="primaryData && primaryData.length > 0">
          <div v-for="(parent, index) in primaryData" :key="parent.title">
            <p class="title"><span/>{{parent.title}}</p>
            <div v-for="(item, i) in parent.list" :key="item.name">
              <p>{{item.name}}</p>
              <p>
                <m-count :value="item.value" :decimal="0"/> / {{calcRate(item.value, index, i).rate}}
                <Icon v-if="calcRate(item.value, index, i).isUp" color="#B4EC51" type="md-arrow-up" />
                <Icon v-else color="red" type="md-arrow-down" />
              </p>
              <p><Progress :stroke-width="fontSize" :percent="calcPercent(item.value, parent.total)" :stroke-color="colors[index]" status="active" :hide-info="true"/></p>
            </div>
          </div>
        </div>
      </m-card>
    </div>
    <div class="box3">
      <m-card mode="2" :title="`${!(!curCardIndex&&curCardIndex!=0) ? mapData[curCardIndex].name : '全国'}产值分布`">
        <div class="percent-wrapper" v-if="primaryData && primaryData.length > 0">
          <div v-if="percent3 > 0" class="flag flag1" :style="`left:${percent3 <= 2 ? (percent3 + 2) : (percent3 >= 20 ? percent3 / 4 : percent3 / 1.5)}%`">
            <div class="info">
              <p>渔业工业和建筑业占比：{{percent3}}%</p>
              <p><m-count :value="primaryData[2].total"/>万元</p>
            </div>
            <div class="line"/>
          </div>
          <div v-if="percent1 > 0" class="flag flag2" :style="`left:${(percent1 / 2) + (percent3 >= 40 ? percent3 / 1.2 : percent3 / 2)}%`">
            <div class="line"/>
            <div class="info">
              <p>渔业产值占比：{{percent1}}%</p>
              <p><m-count :value="primaryData[0].total"/>万元</p>
            </div>
          </div>
          <div v-if="percent2 > 0" class="flag flag3" :style="`right:${percent2 <= 5 ? (percent2 + 2) : (percent2 >= 20 ? percent2 / 4.5 : percent2 / 2)}%`">
            <div class="info">
              <p>渔业流通和服务业占比：{{percent2}}%</p>
              <p><m-count :value="primaryData[1].total"/>万元</p>
            </div>
            <div class="line"/>
          </div>
          <div class="progress-container">
            <div class="progress-bar"/>
            <div class="progress-bg" :style="barBgStyle"/>
          </div>
        </div>
      </m-card>
    </div>
    <div class="box2">
      <m-card mode="2" title="各地区渔业经济产值情况">
        <area-card mode="2" 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: 'ChinaFishing',
  components: {
    ThemeTitle,
    ChinaMap,
    AreaCard,
    YearSelector,
  },
  data() {
    return {
      years: [2015, 2016, 2017, 2018],
      colors: ['rgb(91,213,255)', 'rgb(255, 206, 51)', 'rgb(0, 118, 254)'],
      primaryYear: 2018,
      secondaryYear: 2017,
      curCardIndex: null,
      curProvinceData: null,
      total: 0,
      mapData: [],
      totalData: [],
      nation: [],
      province: [],
      primaryData: [],
      secondaryData: [],
      percent1: 0,
      percent2: 0,
      percent3: 0,
      barBgStyle: {},
      visualConfig: {
        pieces: [
          {min:0, max: 100000},
          {min:100001, max: 1000000},
          {min:1000001, max: 10000000},
          {min:10000001, max: 20000000},
          {min:20000001, max: 30000000},
          {min:30000001},
        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios.get(this.$api.FILE_URL + 'fishing.json').then(res => {
        const {total, nation, province} = res.data
        this.nation = nation
        this.totalData = total
        this.province = province
        this.transformChartData()
        this.transformProvinceData()
      })
    },
    handleYearChange(val, type) {
      this[type] = val
      const data = this.curProvinceData ? [this.curProvinceData.value, this.curProvinceData.total] : [this.nation]
      this.transformChartData(...data)
      this.transformProvinceData()
    },
    transformChartData(flag = this.nation, provinceTotal = null) {
      this.total = 0
      this.$nextTick(() => {
        this.total = (this.totalData.find(item => item.name == this.primaryYear)).value
        let totalValue = this.total
        if (provinceTotal) {
          totalValue = (provinceTotal.find(item => item.name == this.primaryYear)).value
        }
        this.primaryData = flag.map(item => {
          return item.find(el => el.name == this.primaryYear)
        })
        this.secondaryData = flag.map(item => {
          return item.find(el => el.name == this.secondaryYear)
        })
        for(let i=0;i<=2;i++) {
          this[`percent${i + 1}`] = Number((this.primaryData[i].total * 100 / totalValue).toFixed(2))
        }
        this.barBgStyle = {
          background: `linear-gradient(to right, rgb(0,118,254) ${this.percent3}% , rgb(91,213,255) ${this.percent3}%, rgb(91,213,255) ${this.percent1 + this.percent3}%, rgb(255,206,51) ${this.percent1 + this.percent3}%)`
        }
      })
    },
    transformProvinceData() {
      this.mapData = this.province.map(item => {
        const value = (item.total.find(el => el.name == this.primaryYear)).value
        const second = (item.total.find(el => el.name == this.secondaryYear)).value
        return {
          name: item.name,
          output: value,
          secondaryOutput: second,
          value,
        }
      })
    },
    calcRate(val, parentIndex, itemIndex) {
      const second = this.secondaryData[parentIndex].list[itemIndex].value
      const max = Math.max.apply(null, [val, second])
      const min = Math.min.apply(null, [val, second])
      return {
        rate: ((max - min) * 100 / (second || 1)).toFixed(2) + '%',
        isUp: val >= second,
      }
    },
    calcPercent(val, total) {
      if ((val / total) * 100 >= 100) {
        return 100
      }
      return Number(((val / total) * 100).toFixed(2))
    },
    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.value, this.curProvinceData.total)
    },
  },
  computed: {
    fontSize() {
      return Math.floor(screen.height * 1.48 / 100) / 2
    },
    visualFormatter() {
      return e => {
        const {data} = e
        return `
            <h3>${data.name}</h3>
            <p>渔业经济产值：${data.output}（万元）</p>
            `
      }
    }
  },
}
</script>

<style lang="stylus" scoped>
$radius = 2rem
#container
  $gd-layout(0.5rem)
  grid-template-areas \
    '. . box1'\
    '. . box1'\
    '. . box3'\
    'box2 box2 box2'
  grid-template-rows 1fr 1fr 1fr 1fr
  grid-template-columns 1fr 1fr 1.2fr
  .box1
    grid-area box1
  .box2
    grid-area box2
  .box3
    grid-area box3
  .area
    width 42%
    font-size 1.8rem
    color $color-map(1)
    position absolute
    top 10%
    left 3%
    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
  .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
  .class-wrapper
    display flex
    justify-content space-around
    padding 1rem
    width 100%
    color #ccc
    >div
      width 30%
      &:nth-child(2)
        .title
          color rgb(255, 206, 51)
          >span
            background rgb(255, 206, 51)
      &:nth-child(3)
        .title
          color rgb(0, 118, 254)
          >span
            background rgb(0, 118, 254)
      .title
        display flex
        align-items center
        color $color-map(1)
        font-weight bold
        margin-bottom 0.5rem
        >span
          display inline-block
          width 0.4rem
          height 1rem
          margin-right 0.5rem
          background $color-map(1)
      >div
        margin-bottom 0.5rem
        line-height 1.2rem

  .percent-wrapper
    display flex
    align-items center
    justify-content center
    position relative
    height 100%
    width 100%
    .flag
      position absolute
      top 5%
      color #ccc
      .line
        width 0.1rem
        height 1.5rem
      &.flag1
        .line
          background rgba(0,118,254,0.8)
        .info
          border-bottom 0.1rem solid rgba(0,118,254,0.8)
      &.flag2
        top 55%
        .line
          background rgba(91,213,255,0.8)
        .info
          border-top 0.1rem solid rgba(91,213,255,0.8)
      &.flag3
        .line
          background rgba(255,206,51,0.8)
          margin-left 100%
        .info
          border-bottom 0.1rem solid rgba(255,206,51,0.8)
    .progress-container
      height 1.8rem
      width 95%
      position relative
      border-radius $radius
      div
        position: absolute
        top 0
        left 0
        width 100%
        height 100%
        border-radius $radius
        &.progress-bar
          z-index 1
          opacity 0.2
          background-size 100%
          background-image repeating-linear-gradient(45deg, transparent, transparent 0.6rem, #fff 0.6rem, #fff 0.8rem)
        // &.progress-bg
        //   background linear-gradient(to right, rgb(0,118,254) 12.89% , rgb(91,213,255) 12.89%, rgb(91,213,255) 64.9%, rgb(255,206,51) 64.9%)
</style>

<style lang="stylus">
.class-wrapper
  >div
    &:nth-child(1)
      .ivu-progress-inner
        background rgba(91,213,255,0.5)
    &:nth-child(2)
      .ivu-progress-inner
        background rgba(255,206,51,0.5)
    &:nth-child(3)
      .ivu-progress-inner
        background rgba(0,118,254,0.5)
</style>
