<template>
  <div class="time-picker-wrap">
    <el-row :gutter="20" style="margin-bottom: 10px; width: calc(100% - 10px);">
      <el-col :span="12">
        <span class="form-span">规则名称:</span>
        <el-input class="form-input" v-model="form.ruleName" placeholder="请输入规则名称" />
      </el-col>
      <el-col :span="12">
        <span class="form-span">单价:</span>
        <el-input-number
          v-model="form.unitPrice"
          :precision="2"
          class="form-input"
           placeholder="单价"
        ></el-input-number>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="width: calc(100% - 10px);" v-if="contractType === 'LADDER'">
      <el-col :span="12">
        <span class="form-span">最小值:</span>
        <el-input-number
          v-model="form.minVal"
          :precision="2"
          :disabled="nodeMaxVal !== 0"
          class="form-input"
          :min="nodeMaxVal"
          label="最小值"
        ></el-input-number>
      </el-col>
      <el-col :span="12">
        <span class="form-span">最大值:</span>
        <el-input-number
          v-model="form.maxVal"
          :precision="2"
          class="form-input"
          :min="form.minVal"
          label="最大值"
        ></el-input-number>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="width: calc(100% - 10px);" v-else>
      <el-col :span="24">
        <span class="form-span">时间:</span>
        <el-time-picker
          is-range
          v-model="times"
          value-format="HH:mm:ss"
          range-separator="至"
          class="form-input"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="timeChange"
          maxTime="23:59:59"
          :disabled="nodeMaxTime === '23:59:59'"
          placeholder="选择时间范围"
        ></el-time-picker>
      </el-col>
    </el-row>
    <el-button
      type="text"
      style="color: #f56c6c; font-size: 20px; position: relative; left: 5px;"
      icon="el-icon-delete"
      v-show="delshow"
      @click="handelDelRule(index)"
    ></el-button>
  </div>
</template>
<script>
export default {
  name: "",
  props: [
    "priceList",
    "contractType",
    "nodeMaxTime",
    "tempIndex",
    "nodeMaxVal",
    "delshow"
  ],
  data() {
    return {
      times: [],
      form: {},
      timeMin: ""
    };
  },
  created() {
    this.form = this.priceList;
    if (this.contractType === "LADDER") {
      this.valSet(this.nodeMaxVal);
    } else {
      this.timtSet(this.nodeMaxTime);
    }
  },
  watch: {
    form: {
      handler(val, oldVal) {
        this.reultEventFu();
        if (
          this.contractType === "LADDER" &&
          this.form.minVal >= this.form.maxVal
        ) {
          this.form.maxVal = this.form.minVal;
        }
      },
      deep: true
    },
    nodeMaxTime(val) {
      if (val) {
        this.timtSet(val);
      }
    },
    nodeMaxVal(val) {
      if (val || val === 0) {
        this.valSet(val);
      }
    },
    contractType(val) {
      this.form = this.priceList;
      if (val === "LADDER") {
        this.valSet(this.nodeMaxVal);
      } else {
        this.timtSet(this.nodeMaxTime);
      }
    }
  },
  methods: {
    timtSet(val) {
      this.form.maxTime = this.priceList.maxTime || "23:59:59";
      this.form.minTime = this.priceList.minTime || "00:00:00";
      if (val === "23:59:59") {
        this.form.minTime = "23:59:59";
      } else if (val) {
        this.form.minTime = val;
        // this.timeReckon(val, this.form.minTime)
          // ? val
          // : this.form.minTime;
      }
      this.times = [this.form.minTime, this.form.maxTime];
      this.$forceUpdate();
    },
    valSet(val) {
      this.form.minVal = this.priceList.minVal || 0;
      if (val === "" || val === 0) {
        this.form.minVal = 0;
        this.form.maxVal = this.form.minVal + 1;
      } else {
        this.form.minVal = val;
        if (this.form.minVal >= this.form.maxVal) {
          this.form.maxVal = this.form.minVal + 1;
        }
      }
      this.$forceUpdate();
    },
    reultEventFu() {
      this.$emit("resultEvent", { result: this.form, index: this.tempIndex });
    },
    timeChange(val) {
      if (val) {
        this.form.minTime = this.nodeMaxTime
        // this.times[0] = this.nodeMaxTime;
        this.times = [
          this.nodeMaxTime,
          this.timeReckon(this.nodeMaxTime, val[1]) ? "23:59:59" : val[1]
        ];
          // ? this.nodeMaxTime
          // : val[0];
        // if (this.timeReckon(this.nodeMaxTime, val[0])) {
        //   this.times = [
        //     this.nodeMaxTime,
        //     this.timeReckon(this.nodeMaxTime, val[1]) ? "23:59:59" : val[1]
        //   ];
        // }
        this.form.maxTime = val[1];
      } else {
        this.form.minTime = "";
        this.form.maxTime = "";
      }
    },
    returnMaxTime(index) {
      var time = this.form.priceContractRuleList[index].minTime
        ? this.form.priceContractRuleList[index].minTime
        : "00:00:00";
      return time + " - 23:59:59";
    },
    handelDelRule(index) {
      this.$emit("delEvent", { result: this.form, index: this.tempIndex });
    },
    timeReckon(refer, timeStr) {
      const referTime = new Date(
        this.parseTime(new Date(), "{y}-{m}-{d}") + " " + refer
      ).getTime();
      const time = new Date(
        this.parseTime(new Date(), "{y}-{m}-{d}") + " " + timeStr
      ).getTime();
      return referTime > time;
    }
  }
};
</script>
<style lang="scss">
.time-picker-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .form-span {
    display: block;
    width: 80px;
    text-align: right;
  }
  .form-input {
    margin-left: 10px;
    width: calc(100% - 80px);
  }
  .el-col-12 {
    display: flex;
  }
  .el-col-24 {
    display: flex;
  }
}
</style>
