<template>
  <div class="year-select">
    <Dropdown @on-click="handleChange($event, 'primaryYear')">
      <p>
        主显示
        <span class="year">
          {{primaryYear}}
          <Icon type="md-arrow-dropdown"></Icon>
        </span>
      </p>
      <DropdownMenu slot="list">
        <DropdownItem :class="year == primaryYear ? 'ivu-select-item-selected' : ''" v-for="year in years" :key="year" :name="year">{{year}}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <Dropdown @on-click="handleChange($event, 'secondaryYear')">
      <p>
        对比
        <span class="year">
          {{secondaryYear}}
          <Icon type="md-arrow-dropdown"></Icon>
        </span>
      </p>
      <DropdownMenu slot="list">
        <DropdownItem :class="year == secondaryYear ? 'ivu-select-item-selected' : ''" v-for="year in years" :key="year" :name="year">{{year}}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
export default {
  name: 'YearSelector',
  props: {
    years: {
      type: Array,
      default() {
        return []
      }
    },
    primaryYear: {
      type: [Number, String],
      default: 2018,
    },
    secondaryYear: {
      type: [Number, String],
      default: 2017,
    },
  },
  methods: {
    handleChange(val, type) {
      this.$emit('select', val, type)
    },
  },
}
</script>

<style lang="stylus" scoped>
.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>
