<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), noIcon }">
        <span v-if="isBatch && (isPreMonth(item) || isLastThree(item.num))">无需设置</span>
        <template v-else>
          <el-select v-model="item.type" :disabled="item.disabled">
            <el-option label="日权重" :value="1"></el-option>
            <el-option label="日指标" :value="2"></el-option>
          </el-select>
          <el-input-number
            v-model="item.val"
            :controls="false"
            placeholder="请输入"
            :precision="isPrecision ? 2 : 0"
            :min="0"
            :max="99999999.99"
            @change="$emit('change', tableData)"
            :disabled="item.disabled">
          </el-input-number>
        </template>
      </div>
    </div>

    <div class="tip">当月及之后月份必填，历史月份非必填</div>
  </div>
</template>

<script>
const defaultV = [ // 默认值
  { head: '一月', type: 1, num: '01', val: undefined, disabled: false },
  { head: '二月', type: 1, num: '02', val: undefined, disabled: false },
  { head: '三月', type: 1, num: '03', val: undefined, disabled: false },
  { head: '四月', type: 1, num: '04', val: undefined, disabled: false },
  { head: '五月', type: 1, num: '05', val: undefined, disabled: false },
  { head: '六月', type: 1, num: '06', val: undefined, disabled: false },
  { head: '七月', type: 1, num: '07', val: undefined, disabled: false },
  { head: '八月', type: 1, num: '08', val: undefined, disabled: false },
  { head: '九月', type: 1, num: '09', val: undefined, disabled: false },
  { head: '十月', type: 1, num: '10', val: undefined, disabled: false },
  { head: '十一月', type: 1, num: '11', val: undefined, disabled: false },
  { head: '十二月', type: 1, 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
    },
    noIcon: { // 不要￥
      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;
      if (this.month + 1 != month) 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, performanceSubType } = item;
        let month = performanceYm.split('-')[1];
        let table = this.tableData[month - 1];
        table.val = !performanceValue && performanceValue != 0 ? undefined : performanceValue;
        table.type = performanceSubType || 1;

        // 以前的月份，有数据不能编辑
        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: 240px;
    &:nth-of-type(4n) {
      width: 242px;
    }
    header {
      height: 44px;
      line-height: 44px;
      text-indent: 30px;
      background-color: #EBECF0;
    }
    .content {
      display: flex;
      // justify-content: center;
      align-items: center;
      height: 62px;
      padding-left: 30px;
      border-bottom: 1px solid #DCDFE6;
    }
    .red .el-input-number .el-input__inner {
      border-color: #F5222D;
      &:focus {
        box-shadow: 0 0 0 2px rgba(245,34,45,.2);
      }
    }
  }
  .el-select {
    width: 95px;
    margin-right: -1px;
    .el-input__inner {
      height: 32px !important;
      border-radius: 2px 0 0 2px;
      &:focus {
        border-color: #dcdfe6;
        box-shadow: none;
      }
    }
    .is-focus .el-input__inner {
      border-color: #dcdfe6;
      box-shadow: none;
    }
  }
  .el-input-number {
    width: 98px;
    &:before {
      content: '￥';
      position: absolute;
      top: 0px;
      left: 11px;
      z-index: 3;
      font-size: 14px;
      color: #303133;
    }
    .el-input__inner {
      border-radius: 0 2px 2px 0;
      text-align: left;
      padding-left: 30px;
    }
  }
  .noIcon .el-input-number::before {
    content: '';
  }
  .tip {
    font-size: 12px;
    color: #909399;
  }
}
</style>