<template>
  <div id="container" :style="`background-image: url(${require('@/assets/images/stars-bg.png')})`">
    <ChinaMap ref="map" :data="mapData" @select="handleMapSelect"  :visualFormatter="visualFormatter"/>
    <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>2018年渔业经济总产值</p>
      <b v-if="total"><m-flip :value="total"/></b>
      <span>元</span>
    </div>
    <div class="box1">
      <m-card mode="2" :title="`${curCardIndex ? mapData[curCardIndex].name : '全国'}产值细类`">
        <div class="class-wrapper">
          <div>
            <p class="title"><span/>渔业产值</p>
            <div>
              <p>海水养殖</p>
              <p><m-count :value="2822773" :decimal="0"/> / 200% <Icon color="#B4EC51" type="md-arrow-up" /></p>
              <p><Progress :stroke-width="fontSize" :percent="85" stroke-color="rgba(91,213,255,1)" status="active" :hide-info="true"/></p>
            </div>
            <div>
              <p>淡水养殖</p>
              <p><m-count :value="2822773" :decimal="0"/> / 150% <Icon color="#B4EC51" type="md-arrow-up" /></p>
              <p><Progress :stroke-width="fontSize" :percent="55" stroke-color="rgba(91,213,255,1)" status="active" :hide-info="true"/></p>
            </div>
            <div>
              <p>海洋捕捞</p>
              <p><m-count :value="2822773" :decimal="0"/> / 110% <Icon color="#B4EC51" type="md-arrow-up" /></p>
              <p><Progress :stroke-width="fontSize" :percent="25" stroke-color="rgb(91,213,255)" status="active" :hide-info="true"/></p>
            </div>
          </div>
          <div>
            <p class="title"><span/>渔业流通和服务业</p>
            <div>
              <p>水产品加工</p>
              <p><m-count :value="2822773" :decimal="0"/> / 110% <Icon color="#B4EC51" type="md-arrow-up" /></p>
              <p><Progress :stroke-width="fontSize" :percent="25" stroke-color="rgb(255, 206, 51)" status="active" :hide-info="true"/></p>
            </div>
            <div>
              <p>渔用机具制造</p>
              <p><m-count :value="2822773" :decimal="0"/> / 200% <Icon color="#B4EC51" type="md-arrow-up" /></p>
              <p><Progress :stroke-width="fontSize" :percent="85" stroke-color="rgb(255, 206, 51)" status="active" :hide-info="true"/></p>
            </div>
          </div>
          <div>
            <p class="title"><span/>渔业工业和建筑业</p>
            <div>
              <p>水产流通</p>
              <p><m-count :value="2822773" :decimal="0"/> / 120% <Icon color="#B4EC51" type="md-arrow-up" /></p>
              <p><Progress :stroke-width="fontSize" :percent="25" stroke-color="rgb(0, 118, 254)" status="active" :hide-info="true"/></p>
            </div>
            <div>
              <p>水产（仓储）运输</p>
              <p><m-count :value="2822773" :decimal="0"/> / 200% <Icon color="#B4EC51" type="md-arrow-up" /></p>
              <p><Progress :stroke-width="fontSize" :percent="75" stroke-color="rgb(0, 118, 254)" status="active" :hide-info="true"/></p>
            </div>
            <div>
              <p>休闲渔业</p>
              <p><m-count :value="2822773" :decimal="0"/> / 110% <Icon color="red" type="md-arrow-down" /></p>
              <p><Progress :stroke-width="fontSize" :percent="25" stroke-color="rgb(0, 118, 254)" status="active" :hide-info="true"/></p>
            </div>
            <div>
              <p>其他</p>
              <p><m-count :value="2822773" :decimal="0"/> / 109% <Icon color="#B4EC51" type="md-arrow-up" /></p>
              <p><Progress :stroke-width="fontSize" :percent="10" stroke-color="rgb(0, 118, 254)" status="active" :hide-info="true"/></p>
            </div>
          </div>
        </div>
      </m-card>
    </div>
    <div class="box3">
      <m-card mode="2" :title="`${curCardIndex ? mapData[curCardIndex].name : '全国'}产值分布`">
        <div class="percent-wrapper">
          <div class="flag flag1">
            <div class="info">
              <p>12.98%</p>
              <p>渔业工业和建筑业：4395.626.98元</p>
            </div>
            <div class="line"/>
          </div>
          <div class="flag flag2">
            <div class="line"/>
            <div class="info">
              <p>52.01%</p>
              <p>渔业产值：17.863.162.97元</p>
            </div>
          </div>
          <div class="flag flag3">
            <div class="info">
              <p>35.01%</p>
              <p>渔业流通和服务业：11.621.085.98元</p>
            </div>
            <div class="line"/>
          </div>
          <div class="progress-container">
            <div class="progress-bar"/>
            <div class="progress-bg"/>
          </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: 'ChinaFishing',
  components: {
    ThemeTitle,
    ChinaMap,
    AreaCard,
  },
  data() {
    return {
      curCardIndex: null,
      total: 0,
      mapData: [],
    }
  },
  mounted() {
    setTimeout(() => {
      this.total = 258644732.15
      this.mapData = [
        { name: '北京', value: 177, output: 25962},
        { name: '天津', value: 42, output: 27227},
        { name: '河北', value: 102, output: 1523},
        { name: '山西', value: 81, output: 1523},
        { name: '内蒙古', value: 17, output: 1523},
        { name: '辽宁', value: 67, output: 1523},
        { name: '吉林', value: 182, output: 1523},
        { name: '黑龙江', value: 100, output: 1523},
        { name: '上海', value: 24, output: 94293},
        { name: '江苏', value: 299, output: 325294},
        { name: '浙江', value: 114, output: 1523},
        { name: '安徽', value: 29, output: 1523},
        { name: '福建', value: 316, output: 1523},
        { name: '江西', value: 91, output: 1523},
        { name: '山东', value: 19, output: 1523},
        { name: '河南', value: 137, output: 1523},
        { name: '湖北', value: 26, output: 440298},
        { name: '湖南', value: 114, output: 1523},
        { name: '重庆', value: 91, output: 1523},
        { name: '四川', value: 25, output: 1523},
        { name: '贵州', value: 62, output: 1523},
        { name: '云南', value: 83, output: 1523},
        { name: '西藏', value: 9, output: 1523},
        { name: '陕西', value: 80, output: 1523},
        { name: '甘肃', value: 256, output: 1523},
        { name: '青海', value: 10, output: 1523},
        { name: '宁夏', value: 18, output: 1523},
        { name: '新疆', value: 67, output: 1523},
        { name: '广东', value: 123, output: 2817456},
        { name: '广西', value: 59, output: 1523},
        { name: '海南', value: 14, output: 366861},
      ]
    }, 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]}]
    },
  },
  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()
  grid-template-areas \
    '. . box1'\
    '. . box1'\
    '. . box3'\
    'box2 box2 box2'
  grid-template-rows 1fr 1fr 1fr 1fr
  grid-template-columns 1fr 1fr 1.2fr
  grid-gap 0.5rem
  .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 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
  .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
  .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
        left 5%
        .line
          background rgba(0,118,254,0.8)
        .info
          border-bottom 0.1rem solid rgba(0,118,254,0.8)
      &.flag2
        top 55%
        left 30%
        .line
          background rgba(91,213,255,0.8)
        .info
          border-top 0.1rem solid rgba(91,213,255,0.8)
      &.flag3
        left 55%
        .line
          background rgba(255,206,51,0.8)
          margin-left 30%
        .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>
