<template>
  <div class="dialog-wrap">
    <el-dialog title="预约履约居民"
               :visible.sync="reservationDialog"
               v-if="isDialogShow"
               center
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :before-close="closeSendReserve1">
      <el-form
        ref="reservationForm"
        :model="reservationForm"
        :rules="rules"
        label-suffix=":"
        label-width="120px"
        :label-position="'left'"
        size="small">
        <el-form-item label="已选居民">
          <span>{{checkData.sendWechatResidentSize + checkData.sendMobileResidentSize}}人</span>
          <!--<span>{{selectList.length}}人</span>-->
          <span>（微信发送{{checkData.sendWechatResidentSize}}人；短信发送{{checkData.sendMobileResidentSize}}人）</span>
        </el-form-item>
        <el-form-item 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>
      <div class="reservation-content content-list" v-if="reservationForm.appointmentDate && reservationForm.appointmentRange">
        <div class="item">
          <span class="title">发送内容:</span>
          <p>{{userName}}医生邀请您在{{reservationForm.appointmentDate}}的{{reservationForm.appointmentRange}}进行履约，请确认是否参加。</p>
        </div>
        <div class="item">
          <span class="title">本次推送:</span>
          <p>{{checkData.sendWechatAppointSize + checkData.sendMobileSmsCount}}条（微信不限额推送{{checkData.sendWechatAppointSize}}条；使用短信额度推送{{checkData.sendMobileSmsCount}}条）</p>
        </div>
        <div class="item">
          <span class="title">推送成功后剩余额度:</span>
          <p>{{ checkData.sendedAvailableNum}}条</p>
        </div>
        <p>提示：微信推送不消耗额度，建议您与居民绑定微信，关注云鹊健康微信公众号</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeSendReserve1" plain>取消发送</el-button>
        <el-button type="primary" @click="closeSendReserve('reservationForm')">立即发送</el-button>
      </div>
    </el-dialog>
    <no-enough :isNoEnoughShow="isNoEnoughShow" @closeTipsDialog="closeTipsDialog"></no-enough>
  </div>
</template>
<script>
  import {sendReservation, getCheckReservation} from '@/utils/followup/followapis'
  import NoEnough from './no-enough'
  import { mapState, mapActions } from 'vuex'
  export default {
    components: {NoEnough},
    data(){
      return{
        reservationDialog: true,
        sendFlagLast: null,
        reservationForm: {
          appointmentDate: '',
          appointmentRange: '',
        },
        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'
        }],
        isNoEnoughShow: false, //余额不足dialog展示
        rules: {
          appointmentDate: [{ required: true, message: '请选择预约日期', trigger: 'change' }],
          appointmentRange: [{ required: true, message: '请选择时间段', trigger: 'change' }],
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },
    props: {
      isDialogShow: {
        type: Boolean,
        default: false
      },
      checkData: {},
      selectList: {    //已选择发送人员list
        type: Array,
        default: [],
      },
      validContents: {
        type: Array,
        default: [],
      }
    },
    watch: {
      selectList(val) {
        this.selectList = val;
      }
    },
    computed: {
      ...mapState('reservationManage',{
        getRevervationNum: state => state.getRevervationNum,
        userName: state => state.userName,
        // checkRevervationData: state => state.checkRevervationData,
      })
    },
    mounted(){
    },
    methods: {
      ...mapActions('reservationManage', ['getReservationPatients']),
      changeHandler(val) {
        this.getReservationPatients({makeAnAppointDate: val});
      },
      closeTipsDialog(val){
        this.isNoEnoughShow = val;
      },
      closeSendReserve1(){
        if (this.$refs['reservationForm']) {
          this.$refs['reservationForm'].resetFields();
        }
        this.$emit('closeSendReserve',false)
      },
      closeSendReserve(formName){
        let _self = this;
        _self.$refs[formName].validate((valid) => {
            if (valid) {
              //校验额度是否不够
              getCheckReservation({
                content: '',
                validContents: _self.validContents
              }).then(({data}) => {
                const sendFlagLast = data.sendFlag;
                const inServiceTimeFlag = data.inServiceTimeFlag;
                if(sendFlagLast){ //额度还可用
                  sendReservation({
                    ...this.reservationForm,
                    patientAppointList: _self.selectList
                  }).then(({data}) => {
                    _self.$refs['reservationForm'].resetFields();
                    _self.$emit('closeSendReserve',false);
                  })
                }else {
                  if(!inServiceTimeFlag) {
                    _self.$message.warning('已超过发送时间范围!');
                    return;
                  }else {
                    //  额度不足
                    _self.isNoEnoughShow = true;
                    return;
                  }
                }
              })
            } else {
              return false;
            }
          });
      },
    }
  }
</script>
<style scoped lang="scss">
  @import '../../../../style/followup/followup-common';
  @import '../../../../style/followup/element-reset.css';

  .warn-tips{
    font-size: 12px;
    color: #e6a23c;
    line-height: 15px;
    /*padding-top: 5px;*/
  }
  .el-dialog{
    min-width: 580px!important;
  }
  .reservation-content{
    padding: 10px;
    border-top: 1px dashed #efefef;
    &.content-list{
      .item{
        display: flex;
        line-height: 28px;
        padding: 10px 0;
        .title{
          display: inline-block;
          margin-right: 15px;
        }
        p{
          flex: 1;
        }
      }
    }
  }
</style>
