<template>
  <div class="dialog-wrap">
    <el-dialog
      title="预约履约居民"
      v-model="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
                :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>
      <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>
      <template v-slot:footer>
        <div class="dialog-footer">
          <el-button @click="closeSendReserve1" plain>取消发送</el-button>
          <el-button type="primary" @click="closeSendReserve('reservationForm')"
            >立即发送</el-button
          >
        </div>
      </template>
    </el-dialog>
    <no-enough
      :isNoEnoughShow="isNoEnoughShow"
      @closeTipsDialog="closeTipsDialog"
    ></no-enough>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
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()
      }
      $emit(this, '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()
                $emit(_self, 'closeSendReserve', false)
              })
            } else {
              if (!inServiceTimeFlag) {
                _self.$message.warning('已超过发送时间范围!')
                return
              } else {
                //  额度不足
                _self.isNoEnoughShow = true
                return
              }
            }
          })
        } else {
          return false
        }
      })
    },
  },
  emits: ['closeSendReserve'],
}
</script>

<style lang="scss" scoped>
@import '../../../../style/followup/followup-common';
@import '../../../../style/followup/element-reset.css';
.warn-tips {
  font-size: 12px;
  color: #e6a23c;
  line-height: 15px;
}
.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>
