<template>
  <div>
    <el-form-item label="买家可选自提时间">
      <el-switch v-model="ruleForm.chooseTimeFlag" :active-value="1" :inactive-value="0"></el-switch>
      <p style="font-size:12px;color:#909399">开启表示买家可选择自提时间，商户需按约定时间备货完成。</p>
      <!-- <p style="font-size:12px;color:#909399">若开启，表示买家可选择自提时间，商户需按约定时间备货完成</p> -->
    </el-form-item>
    <template v-if="ruleForm.chooseTimeFlag">
      <el-form-item label="日期类型" required>
        <el-radio v-model="ruleForm.dateType" :label="1">动态日期</el-radio>
        <el-radio v-model="ruleForm.dateType" :label="2">固定日期</el-radio>
      </el-form-item>
      <el-form-item label="商品备货设置" v-if="ruleForm.dateType == 1" prop="dynamicType">
        <div class="mb10">
          <el-radio v-model="ruleForm.dynamicType" style="margin-right:10px" :label="1">下单当天</el-radio>
          <el-input-number class="w100 mr10" v-model="ruleForm.dynamicH" :min="1" :max="24" controls-position="right" :precision="0"></el-input-number>小时
          <el-input-number class="w100 mr10 ml10" v-model="ruleForm.dynamicM" :min="0" :max="60" controls-position="right" :precision="0"></el-input-number>分钟后，买家可提货
        </div>
        <div>
          <el-radio v-model="ruleForm.dynamicType" style="margin-right:10px" :label="2">下单</el-radio>
          <el-input-number class="w100 mr10" v-model="ruleForm.dynamicD" :min="1" :max="1000" controls-position="right" :precision="0"></el-input-number>天后，买家可提货
        </div>
      </el-form-item>
      <el-form-item label="提货有效期" v-if="ruleForm.dateType == 1" prop="dynamicStop">
        备货完成<el-input-number class="w100 mr10 ml10" v-model="ruleForm.dynamicStop" :min="2" controls-position="right" :precision="0"></el-input-number>天后，停止自提
      </el-form-item>
      <el-form-item label="日期范围" v-if="ruleForm.dateType == 2" prop="fixedTime">
        <div class="mb10" v-for="(v, i) in ruleForm.fixedTime" :key="i" >
          <el-date-picker v-model="v.dataRange" :picker-options="pickerOptionsEnd" is-range format="yy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="value => limitDataSelect(i, value)"> </el-date-picker>
          <el-button v-if="i" type="text" @click="deleteTime(v)" class="delete-btn ml10">删除</el-button>
        </div>
        <el-button type="text" @click="addTime" :disabled="ruleForm.fixedTime.length >= 5"> <i class="el-icon-plus"></i>添加时间</el-button>
      </el-form-item>
      <el-form-item label="超期发货单处理">
        <div>
          <el-radio v-model="ruleForm.timeoutDealType" :label="1">到期自动完成核销</el-radio>
        </div>
        <div>
          <el-radio v-model="ruleForm.timeoutDealType" :label="2">到期自动关闭发货单，若为销售订单请至应用中查看退款情况</el-radio>
        </div>
      </el-form-item>
    </template>
  </div>
</template>
<script>
export default {
  name: 'PickupFormContent',
  props: {
    ruleForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      // 限制开始时间
      pickerOptionsEnd: {
        disabledDate(time) {
          return time.getTime() < new Date(new Date().toLocaleDateString()).getTime();
        }
      },
    };
  },
  methods: {
    addTime() {
      this.ruleForm.fixedTime.push({ dataRange: '' });
    },
    deleteTime(i) {
      this.ruleForm.fixedTime.splice(i, 1);
    },
    // 时间限制
    limitDataSelect(index, val) {
      let selectTime = new Date(val[0]).valueOf();
      let selectTimeEnd = new Date(val[1]).valueOf();
      const vTime = this.ruleForm.fixedTime;
      if(vTime.length == 1) {
        return;
      }
      if (index !== 0) {
        // 不是第一个
        // // 和前面的时间比较
        for (let i = index - 1; i >= 0; i--) {
          if (vTime[i].dataRange) {
            let selectTimePrev = new Date(vTime[i].dataRange[1]).valueOf();
            // 和前前一个的存在的结束时间比较
            if (selectTime <= selectTimePrev) {
              this.$message.error('日期不可重叠！');
              vTime[index].dataRange = null;
            }
          }
        }
        // 和后面的时间比较
        for (let j = index + 1; j < vTime.length; j++) {
          if (vTime[j].dataRange) {
            let selectTimeAfter = new Date(vTime[j].dataRange[0]).valueOf();
            // 和后一个的存在的开始时间比较
            if (selectTime >= selectTimeAfter || selectTimeEnd >= selectTimeAfter) {
              this.$message.error('日期不可重叠！');
              vTime[index].dataRange = null;
            }
          }
        }
      } else {
        // 和后面的时间比较
        for (let j = index + 1; j < vTime.length; j++) {
          if (vTime[j].dataRange) {
            let selectTimeAfter = new Date(vTime[j].dataRange[0]).valueOf();
            // 和后一个的存在的开始时间比较
            if (selectTime >= selectTimeAfter || selectTimeEnd >= selectTimeAfter) {
              this.$message.error('日期不可重叠！');
              vTime[index].dataRange = null;
            }
          }
        }
      }
    },
  }
};
</script>

<style style="scss" scoped>
.w-280 {
  width: 280px;
}
</style>