<template>
  <div>
    <el-input class='input-append' v-model="cronStr" @blur='cronblur' :readonly='readonly'>
      <el-button type='text' @click="showCronDia" slot="append" icon="alibaba al-gaojixuangu" :title="title" :disabled="readonly"></el-button>
    </el-input>
    <el-dialog append-to-body :visible.sync='showCron' width='80%'>
      <template slot='title'>
        <i class="alibaba al-gaojixuangu"></i>
        <span> {{ title}}</span>
      </template>
      <div class="dialog-button">
        <el-button icon="el-icon-fa-save" type="primary" plain @click="$refs.cronTab.submitFill();showCron=!showCron"></el-button>
      </div>
      <cron-main ref='cronTab' v-model="cronStr"></cron-main>
    </el-dialog>
  </div>
</template>

<script>
import CronMain from "./module/Crontab-Main";
import CronExpressionValidator from "../../libs/CronValidator.js";

export default {
  components: { CronMain },
  props: {
    title: { type: String, default: "高级设置" },
    readonly: { type: Boolean, default: false },
    value: { type: String | null, default: null }
  },
  data() {
    return {
      cronStr: null,
      showCron: false
    };
  },
  watch: {
    cronStr(val) {
      this.$emit("input", val);
    },
    value(val) {
      this.cronStr = val;
    }
  },
  methods: {
    showCronDia() {
      this.showCron = true;
    },
    cronblur() {
      let val = this.cronStr;
      if (val && val !== "") {
        let result = CronExpressionValidator.validateCronExpression(val);
        if (!result) this.$emit("input", null);
      }
    }
  }
};
</script>
<style lang="scss">
.input-append {
  & .el-input-group__append {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 18px;
    width: 15px;
    border-left: 1px solid #c4c4c4;
    & .el-button {
      position: absolute;
      top: 8px;
      right: 21px;
      color: #000;
    }
  }
}
</style>
