<template>
  <div id="month-target">
    <div class="target-box" v-for="item in tableData" :key="item.num">
      <header>{{ item.head }}</header>
      <div :class="{ content: true, red: isAllNot ? false : (isAllRed || month < item.num) && !item.val }">
        <el-input-number v-model="item.val" :controls="false" placeholder="请输入" @change="$emit('change', tableData)"></el-input-number>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MonthTarget',
  props: {
    data: {
      type: Object,
      default: () => []
    },
    year: {
      type: [ String, Number ],
      default: '2020'
    }
  },
  data() {
    return {
      tableData: [
        { head: '一月', num: '01', val: undefined },
        { head: '二月', num: '02', val: undefined },
        { head: '三月', num: '03', val: undefined },
        { head: '四月', num: '04', val: undefined },
        { head: '五月', num: '05', val: undefined },
        { head: '六月', num: '06', val: undefined },
        { head: '七月', num: '07', val: undefined },
        { head: '八月', num: '08', val: undefined },
        { head: '九月', num: '09', val: undefined },
        { head: '十月', num: '10', val: undefined },
        { head: '十一月', num: '11', val: undefined },
        { head: '十二月', num: '12', val: undefined },
      ],
      thisYear: new Date().getFullYear(),
      month: new Date().getMonth()
    };
  },
  mounted() {
    this.$emit('change', this.tableData);
  },
  methods: {
    validate() {
      // eslint-disable-next-line
      return this.tableData.some(item => this.isAllNot ? false : (this.isAllRed || this.month < item.num) && !item.val);
    }
  },
  computed: {
    isAllRed() {
      return this.year > this.thisYear;
    },
    isAllNot() {
      return this.year < this.thisYear;
    }
  }
};
</script>

<style lang="less">
#month-target {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  width: 962px;
  color: #303133;
  .target-box {
    width: 160px;
    header {
      height: 44px;
      line-height: 44px;
      text-indent: 22px;
      background-color: #EBECF0;
    }
    .content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 62px;
      border-bottom: 1px solid #DCDFE6;
    }
    .red .el-input__inner {
      border-color: #F5222D;
    }
  }
  .el-input-number {
    width: 120px;
    &:before {
      content: '￥';
      position: absolute;
      top: 0px;
      left: 11px;
      z-index: 3;
      font-size: 14px;
      color: #303133;
    }
    .el-input__inner {
      text-align: left;
      padding-left: 30px;
    }
  }
}
</style>