<template>
  <div class="crontab-warp">
    <el-tabs v-model="tabActive" type="border-card">
      <el-tab-pane :label="tabTitles[0]" name="second">
        <CrontabSecond @updata='updataContabValue' :check='checkNumber'></CrontabSecond>
      </el-tab-pane>
      <el-tab-pane :label="tabTitles[1]" name="minute">
        <CrontabMin @updata='updataContabValue' :check='checkNumber'></CrontabMin>
      </el-tab-pane>
      <el-tab-pane :label="tabTitles[2]" name="hour">
        <CrontabHour @updata='updataContabValue' :check='checkNumber'></CrontabHour>
      </el-tab-pane>
      <el-tab-pane :label="tabTitles[3]" name="day">
        <CrontabDay @updata='updataContabValue' :check='checkNumber' :week='contabValueObj.week'></CrontabDay>
      </el-tab-pane>
      <el-tab-pane :label="tabTitles[4]" name="month">
        <CrontabMouth @updata='updataContabValue' :check='checkNumber'></CrontabMouth>
      </el-tab-pane>
      <el-tab-pane :label="tabTitles[5]" name="week">
        <CrontabWeek @updata='updataContabValue' :check='checkNumber' :day='contabValueObj.day'></CrontabWeek>
      </el-tab-pane>
      <el-tab-pane :label="tabTitles[6]" name="year">
        <CrontabYear @updata='updataContabValue' :check='checkNumber'></CrontabYear>
      </el-tab-pane>
    </el-tabs>
    <el-card>
      <template slot="header" class="clearfix">
        <span>时间表达式预览 :</span>
        <el-tag type="">{{contabValueString}}</el-tag>
      </template>
      <el-form label-position="top" class="crontab-form">
        <el-row :gutter='10'>
          <el-col :span="3">
            <el-form-item :label="tabTitles[0]">
              <el-input :title="contabValueObj.second" readonly v-model="contabValueObj.second"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :label="tabTitles[1]">
              <el-input :title='contabValueObj.min' readonly v-model="contabValueObj.min"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :label="tabTitles[2]">
              <el-input :title='contabValueObj.hour' readonly v-model="contabValueObj.hour"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :label="tabTitles[3]">
              <el-input :title='contabValueObj.day' readonly v-model="contabValueObj.day"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :label="tabTitles[4]">
              <el-input :title='contabValueObj.mouth' readonly v-model="contabValueObj.mouth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item :label="tabTitles[5]">
              <el-input :title='contabValueObj.week' readonly v-model="contabValueObj.week"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="tabTitles[6]">
              <el-input :title='contabValueObj.year' readonly v-model="contabValueObj.year"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <CrontabResult :ex='contabValueString'></CrontabResult>
  </div>
</template>

<script>
  import CrontabSecond from "./Crontab-Second.vue";
  import CrontabMin from "./Crontab-Min.vue";
  import CrontabHour from "./Crontab-Hour.vue";
  import CrontabDay from "./Crontab-Day.vue";
  import CrontabMouth from "./Crontab-Mouth.vue";
  import CrontabWeek from "./Crontab-Week.vue";
  import CrontabYear from "./Crontab-Year.vue";
  import CrontabResult from "./Crontab-Result.vue";

  export default {
    props: {
      value: {type: String | null, default: null}
    },
    data() {
      return {
        tabTitles: ["秒", "分", "时", "日", "月", "周", "年"],
        tabActive: "second",
        myindex: 0,
        contabValueObj: {
          second: "*",
          min: "*",
          hour: "*",
          day: "*",
          mouth: "*",
          week: "?",
          year: ""
        }
      };
    },
    watch: {
      value(val) {
        if (!val) this.clear();
      }
    },
    methods: {
      // tab切换值
      tabCheck(index) {
        this.tabActive = index;
      },
      // 由子组件触发，更改表达式组成的字段值
      updataContabValue(name, value) {
        this.contabValueObj[name] = value;
      },
      // 表单选项的子组件校验数字格式（通过-props传递）
      checkNumber(value, minLimit, maxLimit) {
        //检查必须为整数
        value = Math.floor(value);
        if (value < minLimit) {
          value = minLimit;
        } else if (value > maxLimit) {
          value = maxLimit;
        }
        return value;
      },
      // 填充表达式
      submitFill() {
        this.$emit("input", this.contabValueString);
      },
      //重置
      clear() {
      }
    },
    computed: {
      contabValueString: function () {
        let obj = this.contabValueObj;
        let str =
          obj.second +
          " " +
          obj.min +
          " " +
          obj.hour +
          " " +
          obj.day +
          " " +
          obj.mouth +
          " " +
          obj.week +
          (obj.year === "" ? "" : " " + obj.year);
        return str;
      }
    },
    components: {
      CrontabSecond,
      CrontabMin,
      CrontabHour,
      CrontabDay,
      CrontabMouth,
      CrontabWeek,
      CrontabYear,
      CrontabResult
    }
  };
</script>
<style lang='scss'>
  .crontab-warp {
    & .el-tabs {
      height: 323px;
      box-shadow: unset;

      & .el-tabs__content {
        border: none;
      }

      & .el-row {
        margin: 10px;
      }
    }

    & .el-card {
      box-shadow: unset !important;
      border: 1px solid #dcdfe6;
      margin-top: 10px;

      & .el-card__header {
        background-color: #f5f7fa;
        height: 40px;
        padding: 0px 0px 0px 10px;
        line-height: 40px;
        color: #909399;

        & .el-tag {
          height: 24px;
          line-height: 24px;
          letter-spacing: 4px;

          &::before {
            display: none;
          }
        }
      }

      & .crontab-form {
        & .el-form-item {
          text-align: center;
          margin: 0px;

          & .el-form-item__content {
            & input {
              text-align: center;
            }
          }
        }
      }
    }

    & .el-input-height {
      line-height: 20px;
      width: 123px;

      & .el-input__inner {
        height: 22px;
        line-height: 22px;
      }
    }

    & .el-radio,
    & .el-radio-group {
      width: 100%;
    }
  }
</style>
