<template>
  <div class="dialog-wrap">
    <el-dialog
      title="变更预约"
      v-model="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
                :shortcuts="pickerOptions && pickerOptions.shortcuts"
                :disabled-date="pickerOptions && pickerOptions.disabledDate"
                :cell-class-name="pickerOptions && pickerOptions.cellClassName"
                type="date"
                v-model="reservationForm.appointmentDate"
                placeholder="请选择预约日期"
                value-format="yyyy-MM-dd"
                model-value="yyyy-MM-dd"
                @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>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="closeChangeReserve1" plain>取 消</el-button>
          <el-button
            type="primary"
            @click="closeChangeReserve('reservationForm')"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
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()
      }
      $emit(this, 'closeChangeReserve', false)
    },
    closeChangeReserve(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          changeReservationStatus({
            ...this.reservationForm,
          }).then(({ data }) => {
            this.$message.success('变更成功!')
            $emit(this, 'closeChangeReserve', false)
            this.$refs['reservationForm'].resetFields()
          })
        } else {
          return false
        }
      })
    },
    changeHandler(val) {
      this.getReservationPatients({ makeAnAppointDate: val })
      //        console.log('日期',this.getRevervationNum)
    },
  },
  emits: ['closeChangeReserve'],
}
</script>

<style lang="scss" scoped>
@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>
