<template>
<div>
    <Tabs type="card">
      <!-- 秒 -->
        <TabPane label="每秒">
             <div class="cron-marker-tabpane-content">
                <div>
                    每<InputNumber v-model="Seconds" size="small" style="width:100px;margin:0 5px;" :max="59" :min="1"></InputNumber>秒
                </div>
                <div style="margin:10px 0;">
                    <Button type="info" @click="gerateCronExpression(0)">生成时间表达式</Button>
                </div>
             </div>
        </TabPane>
      <!-- 分 -->
        <TabPane label="每分钟">
          <div class="cron-marker-tabpane-content">
                <div>
                    每<InputNumber v-model="Minutes" size="small" style="width:100px;margin:0 5px;" :max="59" :min="1"></InputNumber>分钟
                </div>
                <div style="margin:10px 0;">
                    <Button type="info" @click="gerateCronExpression(1)">生成时间表达式</Button>
                </div>
          </div>
        </TabPane>
       <!-- 时 -->
        <TabPane label="每小时">
           <div class="cron-marker-tabpane-content">
                <RadioGroup v-model="hourlyGroup" vertical>
                    <Radio label="1">
                        每<InputNumber v-model="Hourly" size="small" style="width:100px;margin:0 5px;" :max="24" :min="1"></InputNumber>小时
                    </Radio>

                    <Radio label="2"> 
                        开始时间为<el-select v-model="HourlySelect" size="small" style="width:100px;height:30px;">
                        <el-option v-for="item in hourlyList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                        </el-select>
                        :
                        <el-select v-model="minuteSelect" size="small" style="width:100px;height:30px;">
                        <el-option v-for="item in minuteList" :value="item.value" :key="item.value" :label="item.label" size="small" style="height:30px;"></el-option>
                        </el-select>
                    </Radio>
                </RadioGroup>
                <div style="margin:10px 0;">
                    <Button  type="info" @click="gerateCronExpression(2)">生成时间表达式</Button>
                </div>
           </div>
        </TabPane>
       <!-- 天 -->
        <TabPane label="每天">
           <div class="cron-marker-tabpane-content">
             <RadioGroup v-model="DailyGroup" vertical style="display:block;">
                    <Radio label="1">
                      每<InputNumber v-model="Daily" size="small" style="width:100px;margin:0 5px;" :max="31" :min="1"></InputNumber>天
                    </Radio>
                    <Radio label="2">每个工作日（周一至周五）</Radio>
                    
              </RadioGroup>
              开始时间为
                  <el-select v-model="HourlySelect" size="small" style="width:100px;height:30px;">
                    <el-option v-for="item in hourlyList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                  </el-select>
                    :
                   <el-select v-model="minuteSelect" size="small" style="width:100px;height:30px;">
                    <el-option v-for="item in minuteList" :value="item.value" :key="item.value" :label="item.label" size="small" style="height:30px;"></el-option>
                   </el-select>
             
              

                <div style="margin:10px 0;">
                    <Button  type="info" @click="gerateCronExpression(3)">生成时间表达式</Button>
                </div>
           </div>
        </TabPane>
       <!-- 周 -->
        <TabPane label="每周">
           <div class="cron-marker-tabpane-content">
                <CheckboxGroup v-model="Weekly">
                        <Checkbox label="MON">Monday</Checkbox>
                        <Checkbox label="TUE">Tuesday</Checkbox>
                        <Checkbox label="WED">Wednesday</Checkbox>
                        <Checkbox label="THU">Thursday</Checkbox>
                        <Checkbox label="FRI">Friday</Checkbox>
                        <Checkbox label="SAT">Saturday</Checkbox>
                        <Checkbox label="SUN">Sunday</Checkbox>
                    </CheckboxGroup>
                    
                    开始时间为
                    <el-select v-model="HourlySelect" size="small" style="width:100px;height:30px;">
                    <el-option v-for="item in hourlyList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                    </el-select>
                    :
                    <el-select v-model="minuteSelect" size="small" style="width:100px;height:30px;">
                    <el-option v-for="item in minuteList" :value="item.value" :key="item.value" :label="item.label" size="small" style="height:30px;"></el-option>
                    </el-select>

                    <div style="margin:10px 0;">
                    <Button type="info" @click="gerateCronExpression(4)">生成时间表达式</Button>
                    </div>
           </div>
        </TabPane>
        <TabPane label="每月">
             <div class="cron-marker-tabpane-content">
                <RadioGroup v-model="MonthlyGroup" vertical>
                        <Radio label="1">
                            每<InputNumber v-model="MonthlyMonth" size="small" style="width:100px;margin:0 5px;" :max="12" :min="1"></InputNumber>个月的第
                            
                            <InputNumber v-model="MonthlyDay" size="small" style="width:100px;margin:0 5px;" :max="31" :min="1"></InputNumber>天
                        </Radio>

                        <Radio label="2">
                            每<InputNumber v-model="MonthlyMonth2" size="small" style="width:100px;margin:0 5px;" :max="12" :min="1"></InputNumber>个月的
                            
                            <el-select v-model="FirstFewSelect" size="small" style="width:100px;height:30px;">
                            <el-option v-for="item in firstFiewList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                            </el-select>
                            <el-select v-model="weeklySelect" size="small" style="width:100px;height:30px;">
                            <el-option v-for="item in weeklyList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                            </el-select>
                        </Radio>
                    </RadioGroup>
                    <RadioGroup style="display:block;">
                    开始时间为
                    <el-select v-model="HourlySelect" size="small" style="width:100px;height:30px;">
                    <el-option v-for="item in hourlyList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                </el-select>
                :
                <el-select v-model="minuteSelect" size="small" style="width:100px;height:30px;">
                    <el-option v-for="item in minuteList" :value="item.value" :key="item.value" :label="item.label" size="small" style="height:30px;"></el-option>
                </el-select>
                </RadioGroup>
                

                <div style="margin:10px 0;">
                <Button  type="info" @click="gerateCronExpression(5)">生成时间表达式</Button>
                </div>
             </div>
        </TabPane>
        <TabPane label="每年">
            <div class="cron-marker-tabpane-content">
                <RadioGroup v-model="YearlyGroup" vertical>
                      <Radio label="1">
                        每年<InputNumber v-model="YearlyMonth" size="small" style="width:100px;margin:0 5px;" :max="12" :min="1"></InputNumber>月
                        
                        <InputNumber v-model="YearlyDay" size="small" style="width:100px;margin:0 5px;" :max="31" :min="1"></InputNumber>日
                      </Radio>

                      <Radio label="2">
                         每个
                         <el-select v-model="monthSelect" size="small" style="width:100px;height:30px;">
                          <el-option v-for="item in monthList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                        </el-select>
                        的
                        <el-select v-model="FirstFewSelect" size="small" style="width:100px;height:30px;">
                          <el-option v-for="item in firstFiewList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                        </el-select>
                        <el-select v-model="weeklySelect" size="small" style="width:100px;height:30px;">
                          <el-option v-for="item in weeklyList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                        </el-select>
                      </Radio>
                </RadioGroup>
                <RadioGroup style="display:block;">
                    开始时间为
                    <el-select v-model="HourlySelect" size="small" style="width:100px;height:30px;">
                    <el-option v-for="item in hourlyList" :value="item.value" :key="item.value" :label="item.label" size="small" ></el-option>
                    </el-select>
                    :
                    <el-select v-model="minuteSelect" size="small" style="width:100px;height:30px;">
                        <el-option v-for="item in minuteList" :value="item.value" :key="item.value" :label="item.label" size="small" style="height:30px;"></el-option>
                    </el-select>
                </RadioGroup>

                <div style="margin:10px 0;">
                <Button  type="info" @click="gerateCronExpression(6)">生成时间表达式</Button>
                </div>
            </div>
        </TabPane>
        
    </Tabs>
</div>
</template>
<style lang="less">
.ivu-radio-group-vertical .ivu-radio-wrapper {
  margin-bottom:5px;
}
.cron-marker-tabpane-content{
    padding-left:10px;
}
</style>
<script>
    export default {
        data() {
            return {
                cronExpression: '',
                Seconds: '1',
                Minutes: '1',
                Hourly: '1',
                HourlySelect: "12",
                minuteSelect: "0",
                hourlyGroup: "1",
                hourlyList: [{
                    label: "00",
                    value: "0"
                }, {
                    label: "01",
                    value: "1"
                }, {
                    label: "02",
                    value: "2"
                }, {
                    label: "03",
                    value: "3"
                }, {
                    label: "04",
                    value: "4"
                }, {
                    label: "05",
                    value: "5"
                }, {
                    label: "06",
                    value: "6"
                }, {
                    label: "07",
                    value: "7"
                }, {
                    label: "08",
                    value: "8"
                }, {
                    label: "09",
                    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"
                }],
                minuteList: [],

                DailyGroup: "1",
                Daily: "1",
                Weekly: [],
                MonthlyGroup: "1",
                Monthly: "1",
                MonthlyMonth: "1",
                MonthlyMonth2: "1",
                MonthlyDay: "1",
                FirstFewSelect: "1",
                firstFiewList: [{
                    label: "第一个",
                    value: "1"
                }, {
                    label: "第二个",
                    value: "2"
                }, {
                    label: "第三个",
                    value: "3"
                }, {
                    label: "第四个",
                    value: "4"
                }],
                weeklySelect: "MON",
                weeklyList: [{
                    label: "星期一",
                    value: "MON"
                }, {
                    label: "星期二",
                    value: "TUE"
                }, {
                    label: "星期三",
                    value: "WED"
                }, {
                    label: "星期四",
                    value: "THU"
                }, {
                    label: "星期五",
                    value: "FRI"
                }, {
                    label: "星期六",
                    value: "SAT"
                }, {
                    label: "星期日",
                    value: "SUN"
                }],
                YearlyGroup: '1',
                YearlyMonth: '1',
                YearlyDay: '1',
                monthSelect: '1',
                monthList: [{
                    label: "一月",
                    value: "1"
                }, {
                    label: "二月",
                    value: "2"
                }, {
                    label: "三月",
                    value: "3"
                }, {
                    label: "四月",
                    value: "4"
                }, {
                    label: "五月",
                    value: "5"
                }, {
                    label: "六月",
                    value: "6"
                }, {
                    label: "七月",
                    value: "7"
                }, {
                    label: "八月",
                    value: "8"
                }, {
                    label: "九月",
                    value: "9"
                }, {
                    label: "十月",
                    value: "10"
                }, {
                    label: "十一月",
                    value: "11"
                }, {
                    label: "十二月",
                    value: "12"
                }]
            };
        },
        created: function() {
            this.initMinuteList();
        },
        methods: {
            initMinuteList() {
                this.minuteList = [];
                for (let i = 0; i < 60; i++) {
                    this.minuteList.push({
                        label: i < 10 ? "0" + i : "" + i,
                        value: '' + i
                    });
                }
            },
            gerateCronExpression(index) {
                if (index === 0) {
                    this.cronExpression = `0/${this.Seconds} * * * * ? *`;
                } else if (index === 1) {
                    this.cronExpression = `0 0/${this.Minutes} * 1/1 * ? *`;

                } else if (index === 2) {
                    //每小时
                    //0 0 0/2 1/1 * ? *
                    //0 0 12 1/1 * ? *
                    
                    if (this.hourlyGroup == 1) {
                        this.cronExpression = `0 0 0/${this.Hourly} 1/1 * ? *`;
                    } else {
                        this.cronExpression = `0 ${this.minuteSelect} ${this.HourlySelect} 1/1 * ? *`;
                    }

                } else if (index === 3) {
                    //每天
                    //0 3 12 1/3 * ? *
                    
                    if (this.DailyGroup == 1) {
                        this.cronExpression = `0 ${this.minuteSelect} ${this.HourlySelect} 1/${this.Daily} * ? *`;
                    } else {
                        this.cronExpression = `0 ${this.minuteSelect} ${this.HourlySelect} ? * MON-FRI *`;
                    }

                } else if (index === 4) {
                    //每周
                    //0 3 12 1/3 * ? *
                    if (this.Weekly.length == 0) {
                        this.$Message.warning({
                            content: '请至少选择一天'
                        });
                        return;
                    }
                    this.cronExpression = `0 ${this.minuteSelect} ${this.HourlySelect} ? * ${this.Weekly.toString()} *`;


                } else if (index === 5) {
                    //每月
                    //0 0 12 1 1/2 ? *
                    //	0 0 12 ? 1/1 MON#1 *
                    if (this.MonthlyGroup == 1) {
                        this.cronExpression = `0 ${this.minuteSelect} ${this.HourlySelect} ${this.MonthlyDay} 1/${this.MonthlyMonth} ? *`;
                    } else {
                        this.cronExpression = `0 ${this.minuteSelect} ${this.HourlySelect} ? 1/${this.MonthlyMonth2} ${this.weeklySelect}#${this.FirstFewSelect} *`;
                    }


                } else if (index === 6) {
                    //每月
                    //	0 3 12 1 1 ? *
                    //	0 3 12 ? 8 MON#1 *
                    if (this.YearlyGroup == 1) {
                        this.cronExpression = `0 ${this.minuteSelect} ${this.HourlySelect} ${this.YearlyDay} ${this.YearlyMonth} ? *`;
                    } else {
                        this.cronExpression = `0 ${this.minuteSelect} ${this.HourlySelect} ? ${this.monthSelect} ${this.weeklySelect}#${this.FirstFewSelect} *`;
                    }

                }
                this.$emit('changeCronExpression', this.cronExpression)


            }
        }
    };
</script>

<style>
    .el-input--small .el-input__inner {
        height: 24px !important;
    }
</style>