<template lang="html">
  <div class="cron" :val="value_" >
    <el-tabs v-model="activeName" >
      <el-tab-pane label="秒" name="s">
        <second-and-minute v-model="sVal" lable="秒" @handleSval='sInput'></second-and-minute >
      </el-tab-pane>
      <el-tab-pane label="分" name="m">
        <second-and-minute v-model="mVal" lable="分" @handleSval='mInput'></second-and-minute >
      </el-tab-pane>
      <el-tab-pane label="时" name="h">
        <hour v-model="hVal" lable="时" @handleSval='hInput'></hour>
      </el-tab-pane>
      <el-tab-pane label="日" name="d">
        <day v-model="dVal" lable="日" @handleSval='dInput'></day>
      </el-tab-pane>
      <el-tab-pane label="月" name="month">
        <month v-model="monthVal" lable="月" @handleSval='moInput'></month>
      </el-tab-pane>
      <el-tab-pane label="周" name="week">
        <week v-model="weekVal" lable="周" @handleSval='wInput'></week>
      </el-tab-pane>
      <!-- <el-tab-pane label="年" name="year">
        <year v-model="yearVal" lable="年" @handleSval='yInput'></year>
      </el-tab-pane> -->
    </el-tabs>
    <!-- table -->
    <el-table
       :data="tableData"
       height='83'
       size="mini"
       border
       style="width: 100%;">
       <el-table-column
         prop="sVal"
         label="秒"
         >
       </el-table-column>
       <el-table-column
         prop="mVal"
         label="分"
         >
       </el-table-column>
       <el-table-column
         prop="hVal"
         label="时"
         >
       </el-table-column>
       <el-table-column
         prop="dVal"
         label="日"
         >
       </el-table-column>
       <el-table-column
         prop="monthVal"
         label="月"
         >
       </el-table-column>
       <el-table-column
         prop="weekVal"
         label="周"
         >
       </el-table-column>
       <!-- 目前服务器不支持年 -->
       <!-- <el-table-column
         prop="yearVal"
         label="年">
       </el-table-column> -->
     </el-table>
     <div style='height:36px;line-height:36px;font-size:15px;font-weight:600'>表达式备注：</div>
     <p> 秒({{sVal_remark}})
     分({{mVal_remark}})
     时({{hVal_remark}})
     天({{dVal_remark}})
     月({{moVal_remark}})
     周({{wVal_remark}})</p>
    
     
      
     
     
     
     
     
  </div>
</template>

<script>
import SecondAndMinute from "./components/secondAndMinute";
import hour from "./components/hour";
import day from "./components/day";
import month from "./components/month";
import week from "./components/week";
import year from "./components/year";
export default {
  name: "cron",
  props: {
    value: {
      type: String
    }
  },
  data() {
    return {
      //
      activeName: "s",
      sVal: "",
      mVal: "",
      hVal: "",
      dVal: "",
      monthVal: "",
      weekVal: "",
      // yearVal: "",
      sVal_remark: "",
      mVal_remark: "",
      hVal_remark: "",
      dVal_remark: "",
      moVal_remark: "",
      wVal_remark: "",
      yVal_remark: ""
    };
  },
  watch: {
    value(a, b) {
      this.updateVal();
    },
    value_(val){
      if(val){
         if (
        (this.dVal === "?" && this.weekVal === "?") ||
        (this.dVal !== "?" && this.weekVal !== "?")
      ) {
        this.$message.error("日期与星期必须有且仅有一个为不指定");
      }
      }
    }
  },
  computed: {
    tableData() {
      // let ename =
      //   "秒(" +
      //   this.sVal_remark +
      //   ")-分(" +
      //   this.mVal_remark +
      //   ") - 时(" +
      //   this.hVal_remark +
      //   ")-天(" +
      //   this.dVal_remark +
      //   ")-月(" +
      //   this.moVal_remark +
      //   ")-年(" +
      //   this.yVal_remark +
      //   ")";
           let ename =
        "秒(" +
        this.sVal_remark +
        ")-分(" +
        this.mVal_remark +
        ") - 时(" +
        this.hVal_remark +
        ")-天(" +
        this.dVal_remark +
        ")-月(" +
        this.moVal_remark +
        ")-周(" +
        this.wVal_remark +
        ")";
      
      this.$emit("ename", ename);
      return [
        {
          sVal: this.sVal,
          mVal: this.mVal,
          hVal: this.hVal,
          dVal: this.dVal,
          monthVal: this.monthVal,
          weekVal: this.weekVal,
          // yearVal: this.yearVal
        }
      ];
    },
    value_() {
      if (!this.dVal && !this.weekVal) {
        return "";
      }
     
      // let v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`;
      let v = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal}`;
     
        // console.log('vvvvv', v==this.value)
     
     if (v !== this.value) {
        this.$emit("handleExpress", v);
      }
      return v;
    }
  },
  methods: {
    sInput(val) {
      this.sVal_remark = val;
    },
    mInput(val) {
      this.mVal_remark = val;
    },
    hInput(val) {
      this.hVal_remark = val;
    },
    dInput(val) {
      this.dVal_remark = val;
    },
    moInput(val) {
      this.moVal_remark = val;
    },
    wInput(val) {
      this.wVal_remark = val;
    },
    yInput(val) {
      this.yVal_remark = val;
    },
    updateVal() {
      if (!this.value) {
        return;
      }
      let arrays = this.value.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];
    }
  },
  created() {
    this.updateVal();
  },
  components: {
    SecondAndMinute,
    hour,
    day,
    month,
    week,
    // year
  }
};
</script>

<style lang="css">
.cron {
  text-align: left;
  padding: 10px;
  border-radius: 4px;
  /* border: 1px solid #ebeef5; */
  background-color: #fff;
  /* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); */
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}
.cron .el-tab-pane {
  height: 300px;
  overflow-y: auto;
}
.time {
  height: 25px;
  line-height: 25px;
}
</style>
