<template>
  <!-- 附加页面 -->
  <div>
    <!-- 页面左半部分 -->
    <el-form
      :model="model"
      :model1="model1"
      ref="modelForm"
      label-position="left"
      label-width="90px"
      size="small"
      :rules="rules"
      style="height:600px"
    >
      <el-col :span="10">
        <el-col :span="22">
          <el-form-item label="起息日" prop="bgnIntDay">
            <c-date-picker
              v-model="model.bgnIntDay"
              type="date"
              placeholder="选择日期"
              :picker-options="bgnIntDay"
              @blur="completeDay"
              :append-to-body="false"
              style="width:180px !important;"
            ></c-date-picker>
          </el-form-item>
        </el-col>
      </el-col>

      <el-col :span="12">
        <el-col :span="22">
          <el-form-item label="到期日" prop="dueDate">
            <c-date-picker
              v-model="model1.dueDate"
              type="date"
              placeholder="选择日期"
              :picker-options="dueDate"
              @blur="completeDay"
              :append-to-body="false"
              style="width:180px !important;"
            ></c-date-picker>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="10">
        <el-col :span="22">
          <el-form-item label="周几" prop="weekday1">
            <c-input v-model="model.weekday1" maxlength="32" disabled></c-input>
          </el-form-item>
        </el-col>
      </el-col>

      <el-col :span="12">
        <el-col :span="22">
          <el-form-item label="周几" prop="weekday2">
            <c-input v-model="model1.weekday2" maxlength="32" disabled></c-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="10">
        <el-col :span="22">
          <el-form-item label="节假日" prop="holiday1">
            <c-input v-model="model.holiday1" maxlength="32" disabled></c-input>
          </el-form-item>
        </el-col>
      </el-col>
      <el-col :span="12">
        <el-col :span="22">
          <el-form-item label="节假日" prop="holiday2">
            <c-input v-model="model1.holiday2" maxlength="32" disabled></c-input>
          </el-form-item>
        </el-col>
      </el-col>

      <el-col :span="10">
        <el-col :span="22">
          <el-form-item label="实际天数" prop="realdays">
            <c-input v-model="model.realdays" maxlength="32" placeholder="请输入" @blur="completeDate"></c-input>
          </el-form-item>
        </el-col>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import moment from "moment";
import Api from "~/service/Api";
import Calculator from "./Calculator";

export default {
  data() {
    return {
      bgnIntDay: {
        // 结束日期大于开始日期
        disabledDate: time => {
          return time.getTime() > moment(this.model1.dueDate);
        }
      },
      dueDate: {
        // 结束日期大于开始日期
        disabledDate: time => {
          return time.getTime() < moment(this.model.bgnIntDay);
        }
      },
      model: new Calculator().data,
      model1: new Calculator().data,
      rules: {
        /* realdays: [
          {
            message: "输入项必须为数字",
            trigger: "blur"
          }
        ] */
      }
    };
  },
  props: {},
  methods: {
    //补全天数
    completeDay(){
      this.$refs.modelForm.validate(async valid => {
        if (!valid) return;
        if (
          this.model1.dueDate !== null &&
          this.model.bgnIntDay !== null
        ) {
          let days = moment(this.model1.dueDate).diff(
            moment(this.model.bgnIntDay),
            "days"
          );
          this.model.realdays = days;
        }
        this.isholiday();
      });
    },

    //补全日期
    completeDate(){
      this.$refs.modelForm.validate(async valid => {
        if (!valid) return;
        if (this.model.bgnIntDay !== null && this.model.realdays !== "") {
          let dueDate = moment(this.model.bgnIntDay)
            .add(this.model.realdays, "days")
            .format("YYYYMMDD");
          this.model1.dueDate = dueDate;
        } else if (this.model1.dueDate !== null && this.model.realdays !== "") {
          let bgnIntDay = moment(this.model1.dueDate)
            .subtract(this.model.realdays, "days")
            .format("YYYYMMDD");
          this.model.bgnIntDay = bgnIntDay;
        } 
        this.isholiday();
      });
    },

    //判断起息日是否是节假日
    isholiday() {
      this.$refs.modelForm.validate(async valid => {
        if (!valid) return;
        if (this.model.bgnIntDay !== null) {
          this.model.queryDate = this.model.bgnIntDay;
          let rtnmsg = await Api.post("v1/pm/isholiday", this.model);
          // this.model.holiday1 = rtnmsg.data;
          if (rtnmsg.data.isHolidayFlag == "0") {
            this.model.holiday1 = "否";
          } else {
            this.model.holiday1 = "是";
          }
          console.log(rtnmsg.msg);
          this.model.weekday1 = this.getWeekNo(this.model.bgnIntDay);
        }
        if (this.model1.dueDate !== null) {
          this.model1.queryDate = this.model1.dueDate;
          let rtnmsg1 = await Api.post("v1/pm/isholiday", this.model1);
          // this.model1.holiday2 = rtnmsg1.data;
          if (rtnmsg1.data.isHolidayFlag == "0") {
            this.model1.holiday2 = "否";
          } else {
            this.model1.holiday2 = "是";
          }
          console.log(rtnmsg1.msg);
          this.model1.weekday2 = this.getWeekNo(this.model1.dueDate);
        }
      });
    },
   
    //计算当前日期是周几
    getWeekNo(date) {
      let week = moment(date).day();
      if (week === 0) {
        return "7";
      } else {
        return week;
      }
    }

    //todo:三个变量互相监听
    // computed: {
    //   realdays() {
    //     let days = moment(this.model.dueDate).diff(
    //       moment(this.model.bgnIntDay),
    //       "days"
    //     );
    //     debugger;
    //     return days;
    //   }
    // bgnIntDay() {
    //   // let bgnIntDay = moment(this.model.dueDate).substract(this.model.realdays,"days");
    //   // let date=format({date:bgnIntDay,formatStr:"yyyy-MM-dd"})
    //   let bgnIntDay="2020-01-01"+this.model.realdays;
    //   debugger;
    //   console.log(bgnIntDay);
    //   return date;
    // }
    // dueDate() {
    //   let dueDate = moment().substract(this.model.realdays, "days");
    //   return dueDate;
    // }
    // },
  },
  watch: {
    "model.bgnIntDay": {
      deep: true, //深度监听
      handler: function() {
        if (this.model.bgnIntDay == null || this.model.bgnIntDay == "") {
          this.model.weekday1 = "";
          this.model.holiday1 = "";
          this.model.realdays = "";

        }
      }
    },
    "model1.dueDate": {
      deep: true, //深度监听
      handler: function() {
        if (this.model1.dueDate == null || this.model1.dueDate == "") {
          this.model1.weekday2 = "";
          this.model1.holiday2 = "";
          this.model.realdays = "";
        }
      }
    },
  }
};
</script>