<template>
  <div class="dialog-wrap">
    <el-dialog title="变更预约"
               :visible.sync="reservationDialog"
               v-if="isChangeReservation"
               center
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :before-close="closeChangeReserve1">
      <el-form
        ref="reservationForm"
        :model="reservationForm"
        :rules="rules"
        label-suffix=":"
        label-width="120px">
        <el-form-item label="变更居民">
          <span>{{reservationForm.nickname}}</span>
        </el-form-item>
        <el-form-item label="预约状态" required prop="appointStatus">
          <el-radio-group v-model="reservationForm.appointStatus">
            <el-radio label="3">已接受</el-radio>
            <el-radio label="4">已拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--appointStatus：3是已接受，4是已拒绝-->
        <el-form-item v-if="reservationForm.appointStatus == 3" label="预约时间" required>
         <div style="display: flex;">
           <el-form-item prop="appointmentDate">
             <el-date-picker
               type="date"
               v-model="reservationForm.appointmentDate"
               placeholder="请选择预约日期"
               value-format="yyyy-MM-dd"
               value="yyyy-MM-dd"
               :picker-options="pickerOptions"
               @change="changeHandler">
             </el-date-picker>
           </el-form-item>
           <el-form-item prop="appointmentRange">
             <el-select v-model="reservationForm.appointmentRange" placeholder="请选择时间段" clearable style="margin-left:20px;">
               <el-option
                 v-for="item in timeRangeOptions"
                 :key="item.value"
                 :label="item.label"
                 :value="item.label">
               </el-option>
             </el-select>
           </el-form-item>
         </div>
         <p class="warn-tips" v-if="reservationForm.appointmentDate">该日期已经成功预约{{getRevervationNum}}人，请确保能在此时间段完成预约的履约任务</p>
        </el-form-item>
        <el-form-item label="变更原因" prop="reason">
          <el-input type="textarea" v-model="reservationForm.changeReason" placeholder="请输入变更原因" maxlength="30" rows="3" style="width:60%;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeChangeReserve1" plain>取 消</el-button>
        <el-button type="primary" @click="closeChangeReserve('reservationForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { changeReservationStatus } from '@/utils/followup/followapis'
  import { mapState, mapActions } from 'vuex'
  export default {
    components: {},
    data(){
      return{
        reservationDialog: true,
        timeRangeOptions: [
          {
          value: 1,
          label: '6:00-7:00'
        }, {
          value: 2,
          label: '7:00-8:00'
        }, {
          value: 3,
          label: '8:00-9:00'
        }, {
          value: 4,
          label: '9:00-10:00'
        }, {
          value: 5,
          label: '10:00-11:00'
        }, {
          value: 6,
          label: '11:00-12:00'
        }, {
          value: 7,
          label: '12:00-13:00'
        }, {
          value: 8,
          label: '13:00-14:00'
        }, {
          value: 9,
          label: '14:00-15:00'
        }, {
          value: 10,
          label: '15:00-16:00'
        }, {
          value: 11,
          label: '16:00-17:00'
        }, {
          value: 12,
          label: '17:00-18:00'
        }, {
          value: 13,
          label: '18:00-19:00'
        }, {
          value: 14,
          label: '19:00-20:00'
        }, {
          value: 15,
          label: '20:00-21:00'
        }],
        rules: {
          appointStatus: [{ required: true, message: '请选择预约状态', trigger: 'change' }],
          appointmentDate: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
          appointmentRange: [{ required: true, message: '请选择时间段', trigger: 'change' }],
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },
    props: {
      isChangeReservation: {
        type: Boolean,
        default: false
      },
      reservationForm: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    watch: {
      reservationForm(val) {
        this.reservationForm = val;
      }
    },
    computed: {
      ...mapState('reservationManage',{
        getRevervationNum: state => state.getRevervationNum,
      })
    },
    mounted(){
    },
    methods: {
      ...mapActions('reservationManage', ['getReservationPatients']),
      closeChangeReserve1(){
        if (this.$refs['reservationForm']) {
          this.$refs['reservationForm'].resetFields();
        }
        this.$emit('closeChangeReserve',false)
      },
      closeChangeReserve(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              changeReservationStatus({
                ...this.reservationForm
              }).then(({data}) => {
                this.$message.success('变更成功!');
                this.$emit('closeChangeReserve',false);
                this.$refs['reservationForm'].resetFields();
              })
            } else {
              return false;
            }
          });
      },
      changeHandler(val) {
        this.getReservationPatients({makeAnAppointDate: val});
//        console.log('日期',this.getRevervationNum)
      },
    }
  }
</script>
<style scoped lang="scss">
  @import '../../../../style/followup/followup-common';
  @import '../../../../style/followup/element-reset.css';

  .warn-tips{
    font-size: 12px;
    color: #e6a23c;
    padding-top: 5px;
  }
  .el-dialog{
    min-width: 580px!important;
  }
</style>
