<template>
  <el-dialog title="填写实际成本" :visible="comDialogStatus" class="cost-month-select-container" @close="dialogClose" :destroy-on-close="true"
    :close-on-click-modal="false">
    <div class=" dialog-content-inner">
      <!-- 成本年份 -->
      <div class="cost-year-container">
        <span>成本年份</span>
        <el-date-picker v-model="time" type="month" placeholder="请选择所需要添加的成本月份" format="yyyy年MM月" value-format="yyyy-MM" class="project-record-date"
          @change="timeChange" :picker-options="pickerOptions"></el-date-picker>
      </div>
    </div>

    <!--  底部按钮 -->
    <div class="dialog-content-footer">
      <div class="cancel-or-ok">
        <el-button size="medium" @click="cancel" class="cancel-select-year">取消</el-button>
        <el-button type="primary" size="medium" @click="ok" class="ok-select-year">确定</el-button>
      </div>
    </div>

  </el-dialog>
</template>
<script>
import dayjs from "dayjs";
export default {
  name: "costMonthSelect",
  props: {
    dialogStatus: {
      type: Boolean,
      default: false
    },
    projectCreateTime: {
      type: String,
      default: ""
    },
    disableMonths: {
      type: Array,
      default: () => []
    }
  },
  model: {
    prop: "dialogStatus",
    event: "dialogStatusChange"
  },
  watch: {
    dialogStatus(newValue) {
      this.comDialogStatus = newValue;
    }
  },
  data() {
    return {
      comDialogStatus: this.dialogStatus,
      time: "",
      pickerOptions: {
        disabledDate: this.disabledDateHandler
      }
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    // 时间选择变化
    timeChange(time) {
      // console.log(time);
    },
    cancel() {
      this.comDialogStatus = false;
    },
    ok() {
      if (!this.time) {
        return this.$message.error("请选择成本年份");
      }
      // 发布事件
      this.$emit("timeSelect", dayjs(this.time).format("YYYYMM"));
      this.comDialogStatus = false;
    },
    reset() {
      this.time = "";
    },
    dialogClose() {
      this.$emit("dialogStatusChange", false);
      this.reset();
    },
    disabledDateHandler(optionTime) {
      // 选项年月
      const _optionTime = dayjs(optionTime).format("YYYYMM");
      // 当前项目年月
      const _thresholdTime = dayjs(this.projectCreateTime).format("YYYYMM");
      // 当前项目年
      const _thresholdYear = _thresholdTime.slice(0, 4);
      // 当前项目月份 补0
      const _thresholdMonth = _thresholdTime.slice(4);
      // 是否小于当前项目年月 或 大于 当前项目年月 往后推五年 以及成本月份被锁定 禁用
      const lastYearMonth = parseInt(`${parseInt(_thresholdYear) + 5}${_thresholdMonth}`);
      if (parseInt(_optionTime) < parseInt(_thresholdTime) || parseInt(_optionTime) > lastYearMonth || this.disableMonths.includes(_optionTime)) {
        return true;
      }
      return false;
    }
  },
}
</script>
<style lang="scss" scoped>
.cost-month-select-container {
  ::v-deep .el-dialog {
    margin-top: 0px !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    width: 480px;

    .el-dialog__header {
      height: 56px;
      padding: 0px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #eeeeee;
      box-sizing: border-box;

      .el-dialog__title {
        font-size: 16px;
        font-weight: bold;
        color: #232323;
      }

      .el-dialog__headerbtn {
        position: static;
        width: 16px;
        height: 16px;

        .el-dialog__close {
          font-size: 16px;
        }
      }
    }

    .el-dialog__body {
      padding: 0px;
      box-sizing: border-box;

      .dialog-content-inner {
        min-height: 120px;
        padding: 24px 20px;
      }

      .cost-year-container {
        display: flex;
        align-items: center;

        & > span {
          color: rgba(35, 35, 35, 0.8);
          font-size: 14px;
          margin-right: 16px;
          white-space: nowrap;
        }

        .project-record-date {
          width: 100%;
          .el-input__inner {
            height: 30px;
            line-height: 30px;
            padding: 0px 12px;
            border-radius: 2px;
            border-color: #dcdfe6;
            font-size: 14px;
            color: #232323;
            font-weight: 350;
          }
          .el-input__suffix {
            right: 12px;
            .el-input__icon {
              line-height: 30px;
              width: auto;
            }
          }
          .el-input__prefix {
            display: none;
          }
        }
      }

      .dialog-content-footer {
        height: 64px;
        padding: 0px 20px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-top: 1px solid #eeeeee;
        box-sizing: border-box;

        .cancel-or-ok {
          display: flex;
          height: 100%;
          align-items: center;

          .el-button {
            padding: 0px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            font-size: 14px;

            &.cancel-select-year {
              color: rgba(35, 35, 35, 0.8);
              border: 1px solid #dcdfe6;
              background: #fff;
            }

            &.ok-select-year {
              background: #0081ff;
              border-color: #0081ff;
            }
          }
        }
      }
    }
  }
}
</style>
