<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 close-on-press-escape 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" class="blue" 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) {
        console.log(val);
        this.cronStr = val;
      }
    },
    mounted() {
      this.cronStr = this.value;
    },
    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>
