<template>
    <div class="cron" :val="_value">
        <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('components.croneditor.label.second')" name="s">
                <second-and-minute v-model="sVal" :label="$t('components.croneditor.second')"></second-and-minute>
            </el-tab-pane>
            <el-tab-pane :label="$t('components.croneditor.label.minute')" name="m">
                <second-and-minute v-model="mVal" :label="$t('components.croneditor.minute')"></second-and-minute>
            </el-tab-pane>
            <el-tab-pane :label="$t('components.croneditor.label.hour')" name="h">
                <hour v-model="hVal" :lable="$t('components.croneditor.hour.title')"></hour>
            </el-tab-pane>
            <el-tab-pane :label="$t('components.croneditor.label.day')" name="d">
                <day v-model="dVal" @cronChange="cronChange" :lable="$t('components.croneditor.day.title')"></day>
            </el-tab-pane>
            <el-tab-pane :label="$t('components.croneditor.label.month')" name="month">
                <month v-model="monthVal" :lable="$t('components.croneditor.month.title')"></month>
            </el-tab-pane>
            <el-tab-pane :label="$t('components.croneditor.label.week')" name="week">
                <week v-model="weekVal" @cronChange="cronChange" :lable="$t('components.croneditor.week.title')"></week>
            </el-tab-pane>
            <el-tab-pane :label="$t('components.croneditor.label.year')" name="year">
                <year v-model="yearVal" :lable="$t('components.croneditor.year.title')"></year>
            </el-tab-pane>
        </el-tabs>
        <!-- table -->
        <el-table :data="tableData" size="mini" border style="width: 100%">
            <el-table-column prop="sVal" :label="$t('components.croneditor.second')" width="70"> </el-table-column>
            <el-table-column prop="mVal" :label="$t('components.croneditor.minute')" width="70"> </el-table-column>
            <el-table-column prop="hVal" :label="$t('components.croneditor.hour.title')" width="70"> </el-table-column>
            <el-table-column prop="dVal" :label="$t('components.croneditor.day.title')" width="70"> </el-table-column>
            <el-table-column prop="monthVal" :label="$t('components.croneditor.month.title')" width="70">
            </el-table-column>
            <el-table-column prop="weekVal" :label="$t('components.croneditor.week.title')" width="70">
            </el-table-column>
            <el-table-column prop="yearVal" :label="this.$t('components.croneditor.year.title')"> </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import SecondAndMinute from './secondAndMinute.vue';
import hour from './hour.vue';
import day from './day.vue';
import month from './month.vue';
import week from './week.vue';
import year from './year.vue';
import { Vue, Component, Prop, Watch, Model } from 'vue-property-decorator';

@Component({
    components: {
        'second-and-minute': SecondAndMinute,
        hour,
        day,
        month,
        week,
        year,
    },
})
export default class VueCron extends Vue {
    /**
     * 传递数据
     *
     * @type {any}
     * @memberof VueCron
     */
    @Prop() data: any;

    /**
     * Cron表达式
     *
     * @type {any}
     * @memberof VueCron
     */
    @Prop() value: any;

    /**
     * 标签名
     *
     * @type {any}
     * @memberof VueCron
     */
    public activeName: string = 's';

    /**
     * 标签-秒 数据
     *
     * @type {any}
     * @memberof VueCron
     */
    public sVal: any = '';

    /**
     * 标签-分 数据
     *
     * @type {any}
     * @memberof VueCron
     */
    public mVal: any = '';

    /**
     * 标签-天 数据
     *
     * @type {any}
     * @memberof VueCron
     */
    public dVal: any = '';

    /**
     * 标签-时 数据
     *
     * @type {any}
     * @memberof VueCron
     */
    public hVal: any = '';

    /**
     * 标签月 数据
     *
     * @type {any}
     * @memberof VueCron
     */
    public monthVal: any = '';

    /**
     * 标签-周 数据
     *
     * @type {any}
     * @memberof VueCron
     */
    public weekVal: any = '';

    /**
     * 标签年 数据
     *
     * @type {any}
     * @memberof VueCron
     */
    public yearVal: any = '';

    /**
     * 数据值变化
     * @returns
     * @memberof VueCron
     */
    @Watch('value')
    public updateVal(newVal: string) {
        if (newVal) {
            let arrays: Array<any> = newVal.split(' ');
            this.sVal = arrays[0];
            this.mVal = arrays[1];
            this.hVal = arrays[2];
            this.dVal = arrays[3];
            this.monthVal = arrays[4];
            this.weekVal = arrays[5];
            this.yearVal = arrays[6];
        }
    }

    /**
     * 获取表格内容
     * @returns
     * @memberof VueCron
     */
    get tableData() {
        return [
            {
                sVal: this.sVal,
                mVal: this.mVal,
                hVal: this.hVal,
                dVal: this.dVal,
                monthVal: this.monthVal,
                weekVal: this.weekVal,
                yearVal: this.yearVal,
            },
        ];
    }

    /**
     * 获取Cron表达式
     * @returns
     * @memberof VueCron
     */
    get _value() {
        if (!this.dVal && !this.weekVal) {
            return '';
        }
        if (this.dVal === '?' && this.weekVal === '?') {
            this.$throw(this.$t('components.croneditor.message.error2') as string, '_value');
        }
        if (this.dVal !== '?' && this.weekVal !== '?') {
            this.$throw(this.$t('components.croneditor.message.error1') as string, '_value');
        }
        let v: any = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`;
        if (v !== this.value && !Object.is(v, '* * * ? * * *')) {
            this.$emit('cronValue', v);
        }
        return v;
    }

    /**
     * cron表达式改变（解决日与星期冲突）
     * @returns
     * @memberof VueCron
     */
    public cronChange(value: string, name?: string) {
        if (name) {
            if (Object.is(name, 'dVal')) {
                this.weekVal = '?';
            } else if (Object.is(name, 'weekVal')) {
                this.dVal = '?';
            }
        }
    }
}
</script>

<style lang="less">
.cron {
    text-align: left;
    padding: 10px;
    background: #fff;
    border: 1px solid #dcdfe6;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
</style>
