<template lang="pug">
.cron
  smartForm(v-model="data" :config="formConfig" :size="size" :gutter="0" labelWidth="0")
</template>
<script>
import { cornDecode, cornEncode } from '../utils/cron'

export default {
  name: 'Smart-Cron',
  components: {},
  props: {
    value: {
      type: [String, Boolean, Array, Number, Object, Error],
    },
    size: {
      type: [String],
    },
    step: {
      type: [String],
      default: '00:30',
    },
    start: {
      type: [String],
      default: '08:00',
    },
    end: {
      type: [String],
      default: '22:00',
    },
  },
  states: [],
  data () {
    return {
      data: {},
    }
  },
  watch: {
    value: {
      handler (value) {
        this.data = {
          ...this.data,
          ...cornDecode(value),
        }
        this.$parent.$emit('el.form.blur', this.data.custom)
      },
      deep: true,
      immediate: true,
    },
    data: {
      handler (data) {
        if (JSON.stringify(data.custom) !== JSON.stringify(this.value)) {
          this.$emit('input', data.custom)
        }
      },
      deep: true,
    },
  },
  created () {
    let [, $month, $date, $hour, $minute] = this.value.split(' ').reverse()
    if (/^\d*$/.test($date) && /^\d*$/.test($month)) {
      this.data.type = 'once'
    } else if (/^\d*$/.test($hour) && /^\d*$/.test($minute)) {
      this.data.type = 'cycle'
    } else {
      this.data.type = 'custom'
    }
  },
  computed: {
    formConfig () {
      return [{
        type: 'select',
        prop: 'type',
        placeholder: '提醒类型',
        value: 'custom',
        options: [{
          label: '一次',
          value: 'once',
        }, {
          label: '周期',
          value: 'cycle',
        }, {
          label: '自定义',
          value: 'custom',
        }],
      }, {
        type: 'text',
        prop: 'custom',
        offset: 1,
        span: 13,
        placeholder: 'corntab 标准时间',
        visible () {
          return this.type === 'custom'
        },
      }, {
        type: 'time',
        prop: 'time',
        offset: 1,
        pickerOptions: {
          start: this.start,
          end: this.end,
          step: this.step,
        },
        placeholder: '时间',
        visible () {
          return this.type !== 'custom'
        },
        trigger () {
          cornEncode(this)
        },
      }, {
        type: 'date',
        prop: 'date',
        offset: 1,
        placeholder: '日期',
        visible () {
          return this.type === 'once'
        },
        trigger () {
          cornEncode(this)
        },
      }, {
        type: 'checkbox',
        prop: 'week',
        span: 24,
        button: true,
        visible () {
          return this.type === 'cycle'
        },
        trigger () {
          cornEncode(this)
        },
        options: [{
          label: '周一',
          value: '1',
        }, {
          label: '周二',
          value: '2',
        }, {
          label: '周三',
          value: '3',
        }, {
          label: '周四',
          value: '4',
        }, {
          label: '周五',
          value: '5',
        }, {
          label: '周六',
          value: '6',
        }, {
          label: '周日',
          value: '7',
        }],
      }]
    },
  },
  mounted () {},
  methods: {
  },
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
>>> .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom 0
}
</style>
