<template>
  <div class="planCalender">
    <el-row type="flex" justify="space-between">
      <el-col>
        <div class="ExMiddle">
          <span class="bordPrimary"></span>
        </div>
        <div class="TXc">半月保未完成</div>
      </el-col>
      <el-col>
        <div class="ExMiddle">
          <span class="bordSuccess"></span>
        </div>
        <div class="TXc">季度保未完成</div>
      </el-col>
      <el-col>
        <div class="ExMiddle">
          <span class="bordYellow"></span>
        </div>
        <div class="TXc">半年保未完成</div>
      </el-col>
      <el-col>
        <div class="ExMiddle">
          <span class="bordRed"></span>
        </div>
        <div class="TXc">全年保未完成</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" class="marT20">
      <el-col>
        <div class="ExMiddle">
          <span class="ibacPrimary"></span>
        </div>
        <div class="TXc">半月保已完成</div>
      </el-col>
      <el-col>
        <div class="ExMiddle">
          <span class="ibacSuccess"></span>
        </div>
        <div class="TXc">季度保已完成</div>
      </el-col>
      <el-col>
        <div class="ExMiddle">
          <span class="ibacYellow"></span>
        </div>
        <div class="TXc">半年保已完成</div>
      </el-col>
      <el-col>
        <div class="ExMiddle">
          <span class="ibacRed"></span>
        </div>
        <div class="TXc">全年保已完成</div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" class="marT20 NavYear">
      <el-col :span="1">
        <i class="iconfont iconjiantou_xianxing_zuo" @click="ChangeYear(navYear-1)"></i>
      </el-col>
      <el-col :span="4">
        <span @click="ChangeYear(navYear-2)">{{navYear-2}}</span>
      </el-col>
      <el-col :span="4">
        <span @click="ChangeYear(navYear-1)">{{navYear-1}}</span>
      </el-col>
      <el-col :span="5">
        <span>{{navYear}}</span>
      </el-col>
      <el-col :span="4">
        <span @click="ChangeYear(navYear+1)">{{navYear+1}}</span>
      </el-col>
      <el-col :span="4">
        <span @click="ChangeYear(navYear+2)">{{navYear+2}}</span>
      </el-col>
      <el-col :span="1">
        <i class="iconfont iconjiantou_xianxing_you" @click="ChangeYear(navYear+1)"></i>
      </el-col>
    </el-row>
    <div class="AllCalenderS">
      <el-row class="AllYear marT10" :gutter="20">
        <el-col
          :xs="6"
          :sm="6"
          :md="6"
          :lg="6"
          v-for="(weeksD,indexs) in Days.slice(0,4)"
          :key="indexs"
        >
          <div>{{indexs+1}}月</div>
          <table class="calendarWeeksTable">
            <thead class="FAQBacGray">
              <th v-for="(weekDay,indexa) in weeks" :key="indexa">{{weekDay}}</th>
            </thead>
            <tbody>
              <tr v-for="(items,index) in weeksD" :key="index">
                <td v-for="(item,i) in items" :key="i">
                  <span
                    :class="[item.Type===1&&item.Status!==1?'banyuebao':item.Type===2&&item.Status!==1?'jibao':item.Type===3&&item.Status!==1?'bannianbao':item.Type===4&&item.Status!==1?'nianbao':'$ibacSuccess',item.Type===1&&item.Status===1?'banyuebaoed':item.Type===2&&item.Status===1?'jibaoed':item.Type===3&&item.Status===1?'bannianbaoed':item.Type===4&&item.Status===1?'nianbaoed':'$ibacSuccess']"
                    @click="conso(item)"
                    v-if="item.Type!==null"
                  >{{item.days}}</span>
                  <span v-else>{{item.days}}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </el-col>
      </el-row>
      <el-row class="AllYear marT10" :gutter="20">
        <el-col
          :xs="6"
          :sm="6"
          :md="6"
          :lg="6"
          v-for="(weeksD,indexs) in Days.slice(4,8)"
          :key="indexs"
        >
          <div>{{indexs+5}}月</div>
          <table class="calendarWeeksTable">
            <thead class="FAQBacGray">
              <th v-for="(weekDay,indexa) in weeks" :key="indexa">{{weekDay}}</th>
            </thead>
            <tbody>
              <tr v-for="(items,index) in weeksD" :key="index">
                <td v-for="(item,i) in items" :key="i">
                  <span
                    :class="[item.Type===1&&item.Status!==1?'banyuebao':item.Type===2&&item.Status!==1?'jibao':item.Type===3&&item.Status!==1?'bannianbao':item.Type===4&&item.Status!==1?'nianbao':'$ibacSuccess',item.Type===1&&item.Status===1?'banyuebaoed':item.Type===2&&item.Status===1?'jibaoed':item.Type===3&&item.Status===1?'bannianbaoed':item.Type===4&&item.Status===1?'nianbaoed':'$ibacSuccess']"
                    @click="conso(item)"
                    v-if="item.Type!==null"
                  >{{item.days}}</span>
                  <span v-else>{{item.days}}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </el-col>
      </el-row>
      <el-row class="AllYear marT10" :gutter="20">
        <el-col
          :xs="6"
          :sm="6"
          :md="6"
          :lg="6"
          v-for="(weeksD,indexs) in Days.slice(8,12)"
          :key="indexs"
        >
          <div>{{indexs+9}}月</div>
          <table class="calendarWeeksTable">
            <thead class="FAQBacGray">
              <th v-for="(weekDay,indexa) in weeks" :key="indexa">{{weekDay}}</th>
            </thead>
            <tbody>
              <tr v-for="(items,index) in weeksD" :key="index">
                <td v-for="(item,i) in items" :key="i">
                  <span
                    :class="[item.Type===1&&item.Status!==1?'banyuebao':item.Type===2&&item.Status!==1?'jibao':item.Type===3&&item.Status!==1?'bannianbao':item.Type===4&&item.Status!==1?'nianbao':'$ibacSuccess',item.Type===1&&item.Status===1?'banyuebaoed':item.Type===2&&item.Status===1?'jibaoed':item.Type===3&&item.Status===1?'bannianbaoed':item.Type===4&&item.Status===1?'nianbaoed':'$ibacSuccess']"
                    @click="conso(item)"
                    v-if="item.Type!==null"
                  >{{item.days}}</span>
                  <span v-else>{{item.days}}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </el-col>
      </el-row>
    </div>
      <div>
      <el-dialog
        title="修改维保计划"
        :visible.sync="dialogVisible"
        class="plansNextD"
        width="520px"
        :before-close="addClose"
        append-to-body
      >
        <div class="plansNext">
            <el-row type="flex" justify="start" class="liHeight">
              <el-col :span="5">
                <span>修改维保日期:</span>
              </el-col>
              <el-col :span="16">
                  <el-date-picker
                    v-model="planDates.updateTime"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    :picker-options="compant1"
                  ></el-date-picker>
              </el-col>
            </el-row>
            <el-row type="flex" justify="start" class="liHeight" v-if="!planDates.isKeep">
              <el-col :span="5">
                <span>设置保养间隔:</span>
              </el-col>
              <el-col :span="16">
                  <el-select v-model="planDates.interval" placeholder="选择保养间隔">
                    <el-option v-for="item in IntervalVal" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
              </el-col>
            </el-row>
            <el-row type="flex" justify="start" class="liHeight" v-else>
              <el-col :span="5">
                <span>设置保养间隔:</span>
              </el-col>
              <el-col :span="16">
                  <el-input v-model="planDates.interval" placeholder="请输入维保间隔"></el-input>
              </el-col>
            </el-row>
            <el-row type="flex" justify="start" class="liHeight">
              <el-col :span="5">
                <span>是否按需维保:</span>
              </el-col>
              <el-col :span="4">
                <el-switch
                  v-model="planDates.isKeep"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </el-col>
              <el-col :span="12">
                <div class="titleSpan">
                <i class>*</i>
                根据自己需求设置维保间隔
                </div>
              </el-col>
            </el-row>
          <div class="TXc">
            <el-button type="infor" plain size="small" @click="addClose">取消</el-button>
            <el-button type="primary" plain size="small" @click="PlanDeter">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  props: ["rows"],
  data() {
    return {
      navYear: null,
      weeks: ["一", "二", "三", "四", "五", "六", "日"],
      Days: [],
      PlanData: [],
      dialogVisible:false,
      planDates:{
        updateTime:null,
        interval:null,
        isKeep: false,
        currentTime:null,
      },
      updateTimeBefor:'',
      IntervalVal: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      planRules:{
      },
      oldPlanDate:{},
      oldPlan:null,
      compant1:{
        disabledDate:time=>{
          return time.getTime()<(new Date(this.updateTimeBefor.replace(/-/g,'/')).getTime()+86400000)||time.getTime()>(new Date(this.updateTimeBefor.replace(/-/g,'/')).getTime()+1296000000)
        }
      },
    };
  },
  mounted() {},
  methods: {
    ChangeYear(b) {
      this.navYear = b;
      var url = "business/maintenance/plan/detail";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        projectId: this.rows.projectId,
        liftId: this.rows.liftId,
        beginTime: this.navYear + "-01" + "-01",
        endTime: this.navYear + "-12" + "-31"
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.PlanData = res.data;
          this.AllDays(b);
        } else {
          this.PlanData = [];
          this.$message(res.message);
          this.AllDays(b);
        }
      });
    },
    AllDays(isF) {
      var nDate = new Date();
      // 循环获取所有月的天数
      var months = [];
      // 年生成数据
      for (let i = 1; i <= 12; i++) {
        var MonthDays = new Date(isF, i , 0).getDate();
        var monthDay = [];
        var NullDays = [];
        var myDate =
          new Date(isF + "-" + i + "-" + 1).getDay() === 0
            ? 7
            : new Date(isF + "-" + i + "-" + 1).getDay();
        for (let ij = 1; ij < myDate; ij++) {
          let obj = {};
          obj.days = "";
          NullDays.push(obj);
        }
        // 生成每个月的天
        for (let j = 1; j <= MonthDays; j++) {
          // 获取当前一号
          // 
          let oi = i < 10 ? "0" + i : i;
          let oj = j < 10 ? "0" + j : j;
          let getObj = this.getobj(isF + "-" + oi + "-" + oj);
          getObj.days = j;
          monthDay.push(getObj);
        }
        var NewMonDay = NullDays.concat(monthDay);
        var NewSpliceDay = [];
        // 切割
        for (
          let k = 0, allDaysLength = NewMonDay.length;
          k < allDaysLength;
          k = k + 7
        ) {
          NewSpliceDay.push(NewMonDay.slice(k, k + 7));
        }
        months.push(NewSpliceDay);
      }
      this.Days.splice(0);
      this.Days = months;
    },
    getobj(j) {
      // 遍历数组获取时间
      let obj = {
        Type:null,
      };
      var a = this.PlanData.forEach(ForItem => {
        // b = new Date(parseInt(b, 10));
        // let month=b.getMonth()+1;
        if (ForItem.planDate === j) {
          obj.PlanDate = ForItem.planDate;
          obj.ID = ForItem.id;
          obj.LiftID = ForItem.liftId;
          obj.MTCompanyID = ForItem.mtCompanyId;
          obj.ProjectID = ForItem.projectId;
          obj.WorkerID = ForItem.workerId;
          obj.WorkDate = ForItem.workDate;
          obj.Count = ForItem.count;
          obj.Type = ForItem.type;
          obj.Status = ForItem.status;
          obj.isKeep=ForItem.demand==="0"?false:true;
          obj.periods=ForItem.count;
        }
      });
      return obj;
    },
    // 修改维保计划
    conso(d) {
      var isEdit;
      if(d.Status!==0) return this.$message.error('该日期不是未开始的维保计划')
      this.oldPlanDate=d;
      this.planDates.updateTime=d.PlanDate;
      this.planDates.currentTime=d.PlanDate;
      // this.$set(this.planDates, "updateTime", d.PlanDate)
      this.planDates.interval=this.oldPlan.planInterval;
      this.PlanData.map((item,index)=>{
        if(index!=0){
          if(item.planDate==d.PlanDate){
            this.updateTimeBefor = this.PlanData[index-1].planDate
          }
        }
        
      })
      this.dialogVisible=true;
      
      
    },
    // 获取所有数据
    getPlanList(row) {
      this.oldPlan=row;
      this.navYear = new Date().getFullYear();
      var url = "business/maintenance/plan/detail";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        projectId: row.projectId,
        liftId: row.liftId,
        beginTime: this.navYear + "-01" + "-01",
        endTime: this.navYear + "-12" + "-31"
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.PlanData = res.data;
          this.AllDays(new Date().getFullYear());
        } else {
          this.PlanData = [];
          this.$message(res.message);
          this.AllDays(new Date().getFullYear());
        }
      });
    },
    // 关闭模态框
    addClose(){
       this.dialogVisible=false;
    },
    // 确定修改
    PlanDeter(){
      var url="business/maintenance/modify/plan";
      var param={
        liftId:this.oldPlanDate.LiftID,
        projectId:this.oldPlanDate.ProjectID,
        relevanceId:this.oldPlan.relevanceId,
        // mtCompanyId:JSON.parse(sessionStorage.getItem("companyID")).id,
        mtCompanyId:JSON.parse(sessionStorage.getItem("companyID")).id,
        periods:this.oldPlanDate.periods,
        workerId:this.oldPlanDate.WorkerID,
        interval:this.oldPlan.interval
      };
      var a=false;
      if(this.planDates.interval!=this.oldPlan.planInterval){
        a=true;
        param.interval=this.planDates.interval;
      };
      if(this.planDates.updateTime!=this.planDates.currentTime){
        param.updateTime=this.planDates.updateTime;
        param.currentTime=this.planDates.currentTime;
        this.currentTime=param.updateTime;
      }
      if(this.planDates.updateTime==this.planDates.currentTime&&this.planDates.interval==this.oldPlan.planInterval) return this.$message({type:"warning",message:"请更改状态"});
      this.axios.post(url,param).then(res=>{
        if(res.statusCode==="1"){
          if(a) this.oldPlan.planInterval=this.planDates.interval;
          // this.$emit('getPlanList');
          this.$parent.$parent.getPlanList();
          this.getPlanList(this.oldPlan);
          this.addClose();
          this.$message({
            type:"success",
            message:res.message
          })
        }else{
          this.$message.error(res.message)
        }
        
      })
    }
  }
};
</script>