<template>
  <a-modal
    class="delayModal"
    title="套餐服务延期"
    width="60%"
    centered
    :footer="null"
    :maskClosable="false"
    :destroyOnClose="true"
    @cancel="isShow = false"
    v-model="isShow">
    <!-- 表单 -->
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <!-- 服务名称 -->
      <a-form-model-item label="服务名称" class="item-con"><p class="item-main">清泉洗车(VIP)</p></a-form-model-item>
      <!-- 到期时间 -->
      <a-form-model-item label="到期时间" class="item-con"><p class="item-main">2020-11-28</p></a-form-model-item>
      <!-- 过期次数 -->
      <a-form-model-item label="过期次数" class="item-con"><p class="item-main">15次</p></a-form-model-item>
      <!-- 新的到期时间 -->
      <a-form-model-item label="新的到期时间" prop="time">
        <a-date-picker
          type="date"
          v-model="form.time"
          id="delay-time"
          placeholder="请选择到期时间,超过该时间,用户将无法再使用套餐"
          :disabled-date="disabledDate"
          style="width: 80%;" />
      </a-form-model-item>
      <!-- 是否返还已过期服务 -->
      <a-form-model-item label="是否返还已过期服务" prop="timeType">
        <a-radio-group id="delay-timeType" v-model="form.timeType">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="0">否</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <!-- 返还次数 -->
      <a-form-model-item v-if="form.timeType==1" label="返还次数" prop="custMobile">
        <a-input-number
          id="delay-custMobile"
          v-model="form.custMobile"
          :precision="0"
          :min="0"
          :max="999999"
          placeholder="请输入返还次数"
          style="width: 80%;margin-right: 10px;" />次
      </a-form-model-item>
      <a-form-model-item label="" class="btn-cont" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
        <a-button id="delay-cancel" class="delay-cancel" @click="cancel">取消</a-button>
        <a-button type="primary" id="delay-submit" @click="onSubmit">提交</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import moment from 'moment'
export default {
  name: 'DelayModal',
  props: {
    openModal: {
      //  弹框是否展示
      type: Boolean,
      default: false
    },
    setmealId: {
      //  套餐id
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  弹框是否展示
      form: {
        time: null, //  新的到期时间
        timeType: 1, //  是否返还已过期服务
        custMobile: null //  返还次数
      },
      rules: {
        time: [{ required: true, message: '请选择新的到期时间', trigger: 'change' }],
        timeType: [{ required: true, message: '请选择是否返还已过期服务', trigger: 'change' }],
        custMobile: [{ required: true, message: '请输入返还次数', trigger: 'blur' }]
      }
    }
  },
  methods: {
    moment,
    disabledDate (current) {
      // return current && current < moment().endOf('day')  //  不包含当天
      return current.valueOf() < moment().subtract(1, 'days').valueOf() //  包含当天
    },
    //  取消
    cancel () {
      this.resetForm() //  重置表单数据
      this.isShow = false
    },
    // 重置表单
    resetForm () {
      this.form.custMobile = null
      this.form.timeType = 1
      this.form.time = null
    },
    //  提交
    onSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const params = {
            bundleId: this.setmealId,
            custMobile: this.form.custMobile,
            timeType: this.form.timeType,
            time: this.form.time
          }
          // bundleBuy(params).then(res => {
          //   if (res.status == 200) {
          //     this.cancel()
          //   }
          // })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (val) {
      if (!val) {
        this.$emit('close')
      } else {
        this.resetForm() //  重置表单数据
      }
    },
    setmealId (newValue, oldValue) {
      if (newValue && this.isShow) {
        // this.setmealData = newValue
      } else {
        // this.setmealData = null
      }
    }
  }
}
</script>

<style lang="less">
  .delayModal{
    .btn-cont {
    	text-align: center;
    	margin: 50px 0 10px;
      button{
        margin: 0 20px;
      }
    }
  }
</style>
