<template>
  <div :class="$style.cronTabBox">
    <a-tabs v-model="cronTab">
      <a-tab-pane key="excuteOneTime" tab="只执行一次">
        <div
          ><span>执行时间：</span
          ><a-input v-model="cronExp.excuteOneTime.hour" :class="$style.tabInput" /><span>时</span
          ><a-input v-model="cronExp.excuteOneTime.min" :class="$style.tabInput" /><span
            >分</span
          ></div
        >
      </a-tab-pane>
      <a-tab-pane key="repeatExcute" tab="重复执行" force-render
        ><div
          ><span>每隔</span
          ><a-input v-model="cronExp.repeatExcute.hour" :class="$style.tabInput" /><span
            >小时，或者</span
          ><a-input v-model="cronExp.repeatExcute.min" :class="$style.tabInput" /><span
            >分钟, 执行一次</span
          ></div
        ></a-tab-pane
      >
      <a-tab-pane key="cronDetailSetting" tab="详细设置">
        <div
          ><span>执行时间:</span
          ><a-input v-model="cronExp.cronDetailSetting.hour" :class="$style.tabInput" /><span
            >时</span
          ><a-input v-model="cronExp.cronDetailSetting.min" :class="$style.tabInput" /><span
            >分</span
          ></div
        >
        <div :class="$style.cronDetailBox">
          <span :class="$style.spanTop">执行日</span>
          <a-radio-group v-model="cronExp.cronDetailSetting.dayRadio" :class="$style.radioGroup">
            <a-radio :style="radioStyle" value="day">每天</a-radio>
            <a-radio :style="radioStyle" value="week"
              >每周<a-select
                v-model="cronExp.cronDetailSetting.dayofWeek"
                :class="$style.cronSelect"
                :options="weekList"
              >
              </a-select
            ></a-radio>
            <a-radio :style="radioStyle" value="month"
              >每月<a-select
                v-model="cronExp.cronDetailSetting.dayofMonth"
                :class="$style.cronSelect"
                :options="dayList"
              >
              </a-select
            ></a-radio>
          </a-radio-group>
        </div>
        <div :class="$style.cronDetailBox">
          <span>执行月</span>
          <div
            ><a-select
              v-model="cronExp.cronDetailSetting.month"
              :class="$style.cronSelectMonth"
              :options="monthList"
            >
            </a-select
          ></div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div><a-button :class="$style.cronBtn" @click="getCronExpValue">生成表达式</a-button></div>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import components from './_import-components/sd-cron-create-import'

export default {
  name: 'SdCronCreate',
  components,
  props: {
    scheduler: {
      type: Object,
      default: () => {
        return {
          'scheduler.validate.cron.excuteOneTime.hour.error': '执行时间不允许小于当前时间',
          'scheduler.validate.cron.null': '请填写执行时间',
          'scheduler.validate.cron.repeat.error': '请不要同时设置小时间隔以及分钟间隔',
        }
      },
    },
  },
  data() {
    return {
      cronTab: 'excuteOneTime', // cron表达式切换，excuteOneTime为执行一次，repeatExcute重复执行，cronDetailSetting执行详细
      cronExp: {
        excuteOneTime: {
          hour: '0',
          min: '0',
        },
        repeatExcute: {
          hour: '',
          min: '',
        },
        cronDetailSetting: {
          hour: '0',
          min: '0',
          month: '',
          dayofWeek: '',
          dayofMonth: '',
          dayRadio: 'day', // 表达式日历radio，day天，week周，month月
        },
      }, // cron表达式表单数据
      radioStyle: {
        display: 'flex',
        height: '30px',
        lineHeight: '30px',
        marginBottom: '8px',
      },
      weekList: [
        { label: '星期一', value: '1' },
        { label: '星期二', value: '2' },
        { label: '星期三', value: '3' },
        { label: '星期四', value: '4' },
        { label: '星期五', value: '5' },
        { label: '星期六', value: '6' },
        { label: '星期天', value: '7' },
      ],
      dayList: [
        { label: '1号', value: '1' },
        { label: '2号', value: '2' },
        { label: '3号', value: '3' },
        { label: '4号', value: '4' },
        { label: '5号', value: '5' },
        { label: '6号', value: '6' },
        { label: '7号', value: '7' },
        { label: '8号', value: '8' },
        { label: '9号', value: '9' },
        { label: '10号', value: '10' },
        { label: '11号', value: '11' },
        { label: '12号', value: '12' },
        { label: '13号', value: '13' },
        { label: '14号', value: '14' },
        { label: '15号', value: '15' },
        { label: '16号', value: '16' },
        { label: '17号', value: '17' },
        { label: '18号', value: '18' },
        { label: '19号', value: '19' },
        { label: '20号', value: '20' },
        { label: '21号', value: '21' },
        { label: '22号', value: '22' },
        { label: '23号', value: '23' },
        { label: '24号', value: '24' },
        { label: '25号', value: '25' },
        { label: '26号', value: '26' },
        { label: '27号', value: '27' },
        { label: '28号', value: '28' },
        { label: '29号', value: '29' },
        { label: '30号', value: '30' },
        { label: '31号', value: '31' },
      ],
      monthList: [
        { label: '1月', value: '1' },
        { label: '2月', value: '2' },
        { label: '3月', value: '3' },
        { label: '4月', value: '4' },
        { label: '5月', value: '5' },
        { label: '6月', value: '6' },
        { label: '7月', value: '7' },
        { label: '8月', value: '8' },
        { label: '9月', value: '9' },
        { label: '10月', value: '10' },
        { label: '11月', value: '11' },
        { label: '12月', value: '12' },
      ],
    }
  },
  created() {
    this.$snapshotQForm()
  },
  methods: {
    // 获取cron表达式
    getCronExpValue() {
      const now = new Date()
      const vSecond = '0'
      let vHour = '*'
      let vMin = '*'
      let vDay = '*'
      let vMonth = '*'
      let vWeek = '*'
      let vYear = '*'
      if (this.cronTab === 'excuteOneTime') {
        /**
         * 只执行一次
         */
        vHour = this.cronExp.excuteOneTime.hour
        vMin = this.cronExp.excuteOneTime.min
        vDay = `${now.getDate()}`
        vMonth = `${now.getMonth() + 1}`
        vWeek = '?'
        vYear = `${now.getFullYear()}`
        if (vHour === '' || vMin === '') {
          message.error(this.scheduler['scheduler.validate.cron.null'])
          return
        }
        if (Number(vHour) === now.getHours() && Number(vMin) < now.getMinutes()) {
          message.error(this.scheduler['scheduler.validate.cron.excuteOneTime.hour.error'])
          return
        }
        if (Number(vHour) < now.getHours()) {
          message.error(this.scheduler['scheduler.validate.cron.excuteOneTime.hour.error'])
          return
        }
      } else if (this.cronTab === 'repeatExcute') {
        /**
         * 重复执行
         */
        vHour =
          this.cronExp.repeatExcute.hour === ''
            ? '*'
            : `${now.getHours()}/${this.cronExp.repeatExcute.hour}`
        vMin =
          this.cronExp.repeatExcute.min === ''
            ? '*'
            : `${now.getMinutes()}/${this.cronExp.repeatExcute.min}`
        vDay = '*'
        vMonth = '*'
        vWeek = '?'
        vYear = '*'
        if (vHour === '*' && vMin === '*') {
          message.error(this.scheduler['scheduler.validate.cron.null'])
          return
        }
        if (vHour !== '*' && vMin !== '*') {
          message.error(this.scheduler['scheduler.validate.cron.repeat.error'])
          return
        }
      } else if (this.cronTab === 'cronDetailSetting') {
        /**
         * 详细设置
         */
        vMin = this.cronExp.cronDetailSetting.min
        vHour = this.cronExp.cronDetailSetting.hour
        var dayofWeekText = this.cronExp.cronDetailSetting.dayofWeek
        var dayofMonthText = this.cronExp.cronDetailSetting.dayofMonth
        var monthText = this.cronExp.cronDetailSetting.month
        vWeek = '?'
        if (this.cronExp.cronDetailSetting.dayRadio === 'day') {
          vDay = '*'
          vWeek = '?'
        }
        if (this.cronExp.cronDetailSetting.dayRadio === 'week') {
          if (dayofWeekText !== '') {
            vDay = '?'
            vWeek = dayofWeekText
          }
        }
        if (this.cronExp.cronDetailSetting.dayRadio === 'month') {
          if (dayofMonthText !== '') {
            vWeek = '?'
            vDay = dayofMonthText
          }
        }
        if (monthText !== '') {
          vMonth = monthText
        } else {
          vMonth = '*'
        }
        if (vHour === '' || vMin === '') {
          message.error(this.scheduler['scheduler.validate.cron.null'])
          return
        }
      }
      const cronExpValue =
        vSecond + ' ' + vMin + ' ' + vHour + ' ' + vDay + ' ' + vMonth + ' ' + vWeek + ' ' + vYear
      this.$emit('setCronExpValue', cronExpValue)
    },
    // 重置高级设置
    resetCronData() {
      Object.assign(this.cronExp, this._cronExp)
    },
    $snapshotQForm() {
      this._cronExp = JSON.parse(JSON.stringify(this.cronExp))
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.cron-tab-box {
  width: 450px;
  margin: 0 auto;
  .tab-input {
    display: inline-block;
    width: 45px;
    margin: 0 5px;
  }
  .cron-detail-box {
    margin: 8px 0 0 0;
    .span-top {
      vertical-align: top;
    }
    .radio-group {
      display: block;
      :global(.ant-radio) {
        top: 8px;
        height: 1rem;
      }
    }
    .cron-select {
      width: 90px;
      margin-left: 8px;
    }
    .cron-select-month {
      width: 90px;
    }
  }
  .cron-btn {
    margin-top: 30px;
  }
}
</style>
