<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: isTrue(item) }">
        <span v-if="isBatch && (isPreMonth(item) || isLastThree(item.num))">无需设置</span>
        <el-input-number
          v-else
          v-model="item.val"
          :controls="false"
          placeholder="请输入"
          :precision="isPrecision ? 2 : 0"
          :min="0"
          :max="99999999"
          @change="$emit('change', tableData)"
          :disabled="item.disabled">
        </el-input-number>
      </div>
    </div>
  </div>
</template>

<script>
const defaultV = [ // 默认值
  { head: '一月', num: '01', val: undefined, disabled: false },
  { head: '二月', num: '02', val: undefined, disabled: false },
  { head: '三月', num: '03', val: undefined, disabled: false },
  { head: '四月', num: '04', val: undefined, disabled: false },
  { head: '五月', num: '05', val: undefined, disabled: false },
  { head: '六月', num: '06', val: undefined, disabled: false },
  { head: '七月', num: '07', val: undefined, disabled: false },
  { head: '八月', num: '08', val: undefined, disabled: false },
  { head: '九月', num: '09', val: undefined, disabled: false },
  { head: '十月', num: '10', val: undefined, disabled: false },
  { head: '十一月', num: '11', val: undefined, disabled: false },
  { head: '十二月', num: '12', val: undefined, disabled: false },
];

export default {
  name: 'MonthTarget',
  props: {
    data: { // 回显数据
      type: Object,
      default: () => []
    },
    year: {
      type: [ String, Number ],
      default: ''
    },
    isBatch: { // 批量
      type: Boolean,
      default: false
    },
    isPrecision: { // 小数点
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: JSON.parse(JSON.stringify(defaultV)),
      thisYear: new Date().getFullYear(),
      month: new Date().getMonth()
    };
  },
  mounted() {
    this.$emit('change', this.tableData);
  },
  methods: {
    validate() { // 验证
      return this.tableData.some(item => this.isTrue(item));
    },
    isTrue(item) { // 非之前年份，非月末三天，大于等于当月 必填
      if (this.isAllNot || this.isLastThree(item.num)) return false;
      if ((this.isAllRed || this.month < item.num) && (item.val === undefined)) return true;
      // return this.isAllNot || this.isLastThree(item.num) ? false : (this.isAllRed || this.month < item.num) && (item.val === undefined);
    },
    isPreMonth(item) { // 是否是之前的月份
      if (this.isAllNot) return true;
      if (this.isAllRed) return false;
      return !(this.month < item.num);
      // return !(this.isAllNot ? false : this.isAllRed || this.month < item.num);
    },
    clear() { // 还原默认值
      this.tableData = JSON.parse(JSON.stringify(defaultV));
      this.$emit('change', this.tableData);
    },
    isLastThree(month) { // 是否为当月最后三天
      if (this.year != this.thisYear) return false;
      let days = new Date(this.year, month, 0).getDate(); // 天数
      return days - 3 < new Date().getDate();
    }
  },
  computed: {
    isAllRed() { // 未来
      return this.year > this.thisYear;
    },
    isAllNot() { // 之前的年份
      return this.year < this.thisYear;
    },
  },
  watch: {
    data(newV) {
      if (!Array.isArray(newV)) return;

      newV.forEach(item => {
        const { performanceYm, performanceValue } = item;
        let month = performanceYm.split('-')[1];
        let table = this.tableData[month - 1];
        table.val = !performanceValue && performanceValue != 0 ? undefined : performanceValue;

        // 以前的月份，有数据不能编辑
        if ((performanceValue || performanceValue == 0) && this.isPreMonth(table)) table.disabled = true;
        // 当月最后三天不能修改当月数据
        if (this.isLastThree(month)) table.disabled = true;
      });
    }
  }
};
</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;
      &:focus {
        box-shadow: 0 0 0 2px rgba(245,34,45,.2);
      }
    }
  }
  .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>