<style>
  .el-select-dropdown {
    z-index: 9999 !important;
  }

  .w280 {
    width: 280px !important;
  }

  .el-tooltip__popper {
    z-index: 9999 !important;
  }

  .w80 {
    width: 80px !important;
  }

</style>
<template>
  <q-dialog v-model="persistent" maximized full-height seamless position="right" @hide="closeProcess">
    <q-card style="margin-top:61px;width:500px" class="no-border-radius classinfo_Dialog">
      <div class="baseSetForm_Dialog">
        <div class="cycle_Title">周期设置</div>
        <div class="Period-alert">
          <i class="iconfont icon-tishi" style="color:#3370ff;margin-right:8px;"></i>
          <span>本年度仅剩余 1 次修改机会。修改周期后，之前生效的周期将会保留</span>
        </div>
        <div class="Okr_Length">OKR 周期长度<span class="FormItem-asterisk">*</span></div>
        <div style="width:130px;margin-top:10px;">
          <el-radio-group v-model="addMsg.PeriodMonth" @change="getMonth(addMsg.PeriodMonth)">
            <el-radio :label="1">1 个月</el-radio>
            <el-radio :label="2">2 个月</el-radio>
            <el-radio :label="3">3 个月（季度）</el-radio>
            <el-radio :label="4">4 个月</el-radio>
            <el-radio :label="6">半年</el-radio>
          </el-radio-group>
        </div>
        <div class="Okr_Length">新生效周期
          <span class="FormItem-asterisk">*</span>
          <el-tooltip content="当前周期设置后的首个生效周期" placement="top" effect="light">
            <i class="iconfont icon-tishi" style="margin-left:5px;"></i>
          </el-tooltip>
        </div>
        <el-select v-model="ckedTime" class="baseDropdown w280" size="small" style="margin-top:10px;"
          @change="getCycle(ckedTime)" placeholder="请选择">
          <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div class="Okr_Length" style="margin-top:20px;">新周期出现时间
          <span class="FormItem-asterisk">*</span>
          <el-tooltip content="提前 30 天展示下周期的 OKR 填写入口" placement="top" effect="light">
            <i class="iconfont icon-tishi" style="margin-left:5px;"></i>
          </el-tooltip>
        </div>
        <div style="display:flex;align-items:center;margin-top:20px;">
          <span>上个周期结束前</span>
          <el-input type="text" v-model="addMsg.BeforeNum" class="w80" style="margin:0 20px;" @keyup.native="checkInteger(addMsg,'BeforeNum')" size="small"></el-input>
          <el-select v-model="addMsg.BeforeType" class="baseDropdown w80" size="small" placeholder="请选择">
            <el-option label="天" :value="1"></el-option>
            <el-option label="月" :value="2"></el-option>
          </el-select>
        </div>
        <div class="Okr_Length" style="margin:20px 0;">
          <div style="color:#1f2329">年度 OKR</div>
          <div style="color:#646a73;margin-top:5px;">开启年度周期，对 OKR 进行长期规划</div>
        </div>
        <el-switch v-model="addMsg.YearOKR" :active-value="1" :inactive-value="2">
        </el-switch>
        <div class="Okr_Length" style="margin:20px 0;">
          <div style="color:#1f2329">主管审核</div>
        </div>
        <el-switch v-model="addMsg.DirectorAudit" :active-value="1" :inactive-value="2">
        </el-switch>

      </div>
      <div class="process_Btn_List">
        <div class="processBtn_Cancel" @click="closeProcess">关闭</div>
        <div class="processBtn_Save" @click="setBaseInfo">确定</div>
      </div>
    </q-card>
    <div class="dialog-out-close" @click="closeProcess"
      style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
  </q-dialog>
</template>
<script>
  import {
    SetOKRPeriodConfigInfo
  } from '../../api/okr/index';
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        addMsg: {
          Id: 0,
          PeriodMonth: 1, //月份
          StartDate: '', //开始时间
          EndDate: '', //	结束时间
          BeforeNum: '', // 新周期出现时间
          BeforeType: 1, //类型 1天 2月
          YearOKR: 1, //年度是否开启 1是 2否
          DirectorAudit: 1 //主管审核 1开启 2不开启
        },
        ckedTime: '', //选中的日期
        timeList: []
      }
    },
    mounted() {
      this.addMsg.Id = this.saveObj.Id;
      this.addMsg.PeriodMonth = this.saveObj.PeriodMonth;
      this.addMsg.StartDate = this.saveObj.StartDate;
      this.addMsg.EndDate = this.saveObj.EndDate;
      this.addMsg.BeforeNum = this.saveObj.BeforeNum;
      this.addMsg.BeforeType = this.saveObj.BeforeType;
      this.addMsg.YearOKR = this.saveObj.YearOKR;
      this.addMsg.DirectorAudit = this.saveObj.DirectorAudit;
      this.getMonth(this.addMsg.PeriodMonth);
    },
    created(){
      this.$nextTick(() => {
        var newEndDate = '';
        var newStartDate = '';
        if(this.addMsg.StartDate){
          let StartTime = this.addMsg.StartDate.split('年');
          let month = StartTime[1].split('月')[0];
          if(parseInt(month)<10){
            month = month.split('0')[1]
          }
          newStartDate = StartTime[0]+'年'+month+'月'
        }
        if(this.addMsg.EndDate){
          let EndTime = this.addMsg.EndDate.split('年');
          let month = EndTime[1].split('月')[0];
          if(parseInt(month)<10){
            month = month.split('0')[1]
          }
          newEndDate = EndTime[0]+'年'+month+'月'
        }
        this.timeList.forEach(x=>{
          if(newStartDate===x.StartDate&&newEndDate===x.EndDate){
            this.ckedTime=x.value;
          }
        })
      });
    },
    methods: {
      getMonth(num) {
        var date = new Date;
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var StartDate = '';
        var EndDate = '';
        this.ckedTime = '';
        this.timeList = [];
        for (let i = 1; i <= 12; i++) {
          let currentDate = year + '-' + i;
          currentDate = new Date(currentDate);
          // 月份减去一
          let lastDate = currentDate.setMonth(currentDate.getMonth() - num); // 输出日期格式为毫秒形式1551398400000
          lastDate = new Date(lastDate);
          let lastYear = lastDate.getFullYear();
          let lastMonth = lastDate.getMonth() + 2;
          if (lastMonth > 12) {
            lastMonth = 1;
            lastYear = lastYear + 1;
          }
          if (num == 1) {
            lastDate = lastYear + ' ' + '年' + ' ' + lastMonth + ' ' + '月';
            StartDate = lastYear + '年' + lastMonth + '月';
            EndDate = lastYear + '年' + lastMonth + '月';
          } else {
            if (lastYear == year) {
              lastDate = lastYear + ' ' + '年' + ' ' + lastMonth + ' ' + '-' + ' ' + i + ' ' + '月'
              StartDate = lastYear + '年' + lastMonth + '月';
              EndDate = lastYear + '年' + i + '月';
            } else {
              lastDate = lastYear + ' ' + '年' + ' ' + lastMonth + ' ' + '月' + ' ' + '-' + ' ' + year + ' ' + '年' + ' ' +
                i + ' ' + '月'
              StartDate = lastYear + '年' + lastMonth + '月';
              EndDate = year + '年' + i + '月';
            }
          }
          let obj = {
            value: lastDate,
            label: lastDate,
            StartDate: StartDate,
            EndDate: EndDate
          }
          this.timeList.push(obj);
        }
      },
      getCycle(value) {
        this.timeList.forEach(x => {
          if (x.value == value) {
            this.addMsg.StartDate = x.StartDate;
            this.addMsg.EndDate = x.EndDate;
          }
        })
      },
      //关闭流程设置
      closeProcess() {
        this.persistent = false;
        this.$emit('close');
      },
      //保存数据
      setBaseInfo() {
        if(this.ckedTime==''){
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择新生效周期`
          })
          return;
        }
        if(this.addMsg.BeforeNum==''){
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请填写上个周期结束天数`
          })
          return;
        }
        SetOKRPeriodConfigInfo(this.addMsg).then(res => {
          if (res.Code == 1) {
            this.$emit('success');
            this.closeProcess();
          }
        })
      }
    }
  }

</script>
