<template>
  <div>
    <el-row :gutter="8" v-if="pageType">
      <el-col :span="2">
        <el-input
          @input="
            value => (formData.cycleValue = value.replace(/^(0+)|[^\d]+/g, ''))
          "
          class="cycle_value"
          size="small"
          v-model.number="formData.cycleValue"
          @change="cycleValueChange"
          placeholder="请输入"
          :disabled="isBindPlan"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-select
          v-model="formData.cycleType"
          size="small"
          @change="handleCycleTypeChange"
          :disabled="isBindPlan"
        >
          <el-option
            v-for="item in cycleOpt"
            :key="item.code"
            :label="item.label"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-col>

      <el-col :span="8" v-if="[1, 2, 4, 5].includes(formData.cycleType)">
        <div
          v-for="(item, index) in ruleCycleList"
          :key="index"
          class="cycle01_box"
        >
          <el-input
            v-model.number="item.month"
            size="small"
            oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
            @input="e => inputMonth(e, index)"
            v-if="[5].includes(formData.cycleType)"
            :disabled="isBindPlan"
          >
            <template #suffix>月</template>
          </el-input>

          <el-input
            v-model.number="item.day"
            size="small"
            oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
            @input="e => inputDay(e, index)"
            v-if="[4, 5].includes(formData.cycleType)"
            :disabled="isBindPlan"
          >
            <template #suffix>日</template>
          </el-input>

          <el-input
            v-model.number="item.hour"
            size="small"
            oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
            @input="e => inputHour(e, index)"
            v-if="[2, 4, 5].includes(formData.cycleType)"
            :disabled="isBindPlan"
          >
            <template #suffix>时</template>
          </el-input>

          <el-input
            v-model.number="item.minute"
            size="small"
            oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
            @input="e => inputMinute(e, index)"
            :disabled="isBindPlan"
          >
            <template #suffix>分</template>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col :span="24" class="cycle_time_column">
        <span style="margin-right: 20px"
          >{{ formData.cycleValue }}{{ cycleOptObj[formData.cycleType] }}</span
        >
        <div v-if="[1, 2, 4, 5].includes(formData.cycleType)">
          <span v-if="[5].includes(formData.cycleType)"
            >{{ ruleCycleList[0].month }}月</span
          >
          <span v-if="[4, 5].includes(formData.cycleType)"
            >{{ ruleCycleList[0].day }}日</span
          >
          <span v-if="[2, 4, 5].includes(formData.cycleType)"
            >{{ ruleCycleList[0].hour }}时</span
          >
          <span>{{ ruleCycleList[0].minute }}分</span>
        </div>
      </el-col>
    </el-row>

    <!-- 根据周期类型展示时间组件 11,12,13,14 -->
    <div>
      <!-- 次/天 -->
      <el-row :gutter="20" v-if="formData.cycleType === 11">
        <el-col
          v-for="(item, index) in ruleCycleList"
          :key="index"
          :span="6"
          class="cycle_item"
        >
          <span>第{{ index + 1 }}次</span>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.hour"
              size="small"
              placeholder="时"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="e => inputHour(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>时</template>
            </el-input>
          </div>
          <div v-else>{{ item.hour }}时</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.minute"
              size="small"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="e => inputMinute(e, index)"
              placeholder="分"
              :disabled="isBindPlan"
            >
              <template #suffix>分</template>
            </el-input>
          </div>
          <div v-else>
            {{ item.minute > 9 ? item.minute : '0' + item.minute }}分
          </div>
        </el-col>
      </el-row>
      <!-- 次/周 -->
      <el-row :gutter="20" v-else-if="formData.cycleType === 12">
        <el-col
          v-for="(item, index) in ruleCycleList"
          :key="index"
          :span="6"
          class="cycle_item"
        >
          <span>第{{ index + 1 }}次</span>
          <div class="cycle_sub_item" v-if="pageType">
            <el-select v-model.number="item.week" size="small" placeholder="周" :disabled="isBindPlan">
              <el-option
                v-for="item in weekList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option> </el-select
            >周
          </div>
          <div v-else>{{ item.week }}</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.hour"
              size="small"
              placeholder="时"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="e => inputHour(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>时</template>
            </el-input>
          </div>
          <div v-else>{{ item.hour }}时</div>
        </el-col>
      </el-row>
      <!-- 次/月 -->
      <el-row :gutter="20" v-else-if="formData.cycleType === 13">
        <el-col
          v-for="(item, index) in ruleCycleList"
          :key="index"
          :span="6"
          class="cycle_item"
        >
          <span>第{{ index + 1 }}次</span>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.day"
              size="small"
              placeholder="日"
              oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
              @input="e => inputDay(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>日</template>
            </el-input>
          </div>
          <div v-else>{{ item.day }}日</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.hour"
              size="small"
              placeholder="时"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="e => inputHour(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>时</template>
            </el-input>
          </div>
          <div v-else>{{ item.hour }}</div>
        </el-col>
      </el-row>
      <!-- 次/年 -->
      <el-row :gutter="20" v-else-if="formData.cycleType === 14">
        <el-col
          v-for="(item, index) in ruleCycleList"
          :key="index"
          :span="6"
          class="cycle_item"
        >
          <span>第{{ index + 1 }}次</span>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.month"
              size="small"
              placeholder="月"
              oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
              @input="e => inputMonth(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>月</template>
            </el-input>
          </div>
          <div v-else>{{ item.month }}月</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.day"
              size="small"
              placeholder="日"
              oninput="value = value.replace(/^(0+)|[^\d]+/g,'')"
              @input="e => inputDay(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>日</template>
            </el-input>
          </div>
          <div v-else>{{ item.day }}日</div>
          <div class="cycle_sub_item" v-if="pageType">
            <el-input
              v-model.number="item.hour"
              size="small"
              placeholder="时"
              oninput="value = value.replace(/^0+(\d)|[^\d]+/g,'')"
              @input="e => inputHour(e, index)"
              :disabled="isBindPlan"
            >
              <template #suffix>时</template>
            </el-input>
          </div>
          <div v-else>{{ item.hour }}时</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 编辑edit和新增add
    pageType: {
      type: String,
      default: ''
    },

    isBindPlan:{
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      ruleCycleList: [
        // {
        //   year: '', // 周期年
        //   month: '', // 周期月
        //   week: '', // 周期周
        //   day: '', // 周期日
        //   hour: '', // 周期时
        //   minute: '', // 周期分
        //   second: '' // 周期秒
        // }
      ],
      weekList: [
        { value: 1, label: '周一' },
        { value: 2, label: '周二' },
        { value: 3, label: '周三' },
        { value: 4, label: '周四' },
        { value: 5, label: '周五' },
        { value: 6, label: '周六' },
        { value: 7, label: '周日' }
      ],
      cycleOptObj: {
        1: '时/次',
        2: '天/次',
        //3: '周/次',
        4: '月/次',
        5: '年/次',
        11: '次/天',
        //12: '次/周',
        13: '次/月',
        14: '次/年'
      },
      cycleOpt: [
        { code: 1, label: '时/次' },
        { code: 2, label: '天/次' },
        //{ code: 3, label: '周/次' },
        { code: 4, label: '月/次' },
        { code: 5, label: '年/次' },
        { code: 11, label: '次/天' },
        //{ code: 12, label: '次/周' },
        { code: 13, label: '次/月' },
        { code: 14, label: '次/年' }
      ]
    }
  },
  watch: {
    formData (val) {
      this.ruleCycleList = val.cycle
    }
  },
  methods: {
    // 巡点检周期输入数量
    cycleValueChange (val) {
      console.log(val)
      const cycleType01 = [1, 2, 4, 5]
      const cycleType02 = [11, 13, 14]
      this.ruleCycleList = []

      // 次在后
      if (cycleType01.includes(this.formData.cycleType)) {
        this.ruleCycleList.push({
          month: 1, // 周期月
          day: 1, // 周期日
          hour: 0, // 周期时
          minute: 0 // 周期分
        })
      }

      // 次在前
      if (cycleType02.includes(this.formData.cycleType)) {
        for (let i = 0; i < val; i++) {
          this.ruleCycleList.push({
            month: 1, // 周期月
            day: 1, // 周期日
            hour: 0, // 周期时
            minute: 0 // 周期分
          })
        }
      }

      // 时/次
      if (this.formData.cycleType === 1) {
        this.ruleCycleList.forEach(item => {
          delete item.month
          delete item.day
          delete item.hour
        })
      }
      // 天/次、次/天
      if ([2, 11].includes(this.formData.cycleType)) {
        this.ruleCycleList.forEach(item => {
          delete item.month
          delete item.day
        })
      }
      // 月/次、次/月
      if ([4, 13].includes(this.formData.cycleType)) {
        this.ruleCycleList.forEach(item => {
          delete item.month
        })
      }
    },

    // 周期类型选择
    handleCycleTypeChange () {
      this.cycleValueChange(this.formData.cycleValue)
    },

    // 输入月
    inputMonth (e, index) {
      if (e > 12) {
        this.ruleCycleList[index].month = 1
        return this.$message.warning('月份最大值为12月')
      }
    },
    // 输入日
    inputDay (e, index) {
      if (e > 31) {
        this.ruleCycleList[index].day = 1
        return this.$message.warning('日期最大值为31日')
      }
    },
    // 输入时
    inputHour (e, index) {
      if (e > 23) {
        this.ruleCycleList[index].hour = 0
        return this.$message.warning('时间最大值为23时')
      }
    },
    // 输入时
    inputMinute (e, index) {
      if (e > 59) {
        this.ruleCycleList[index].minute = 0
        return this.$message.warning('分钟最大值为59分')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cycle_item {
  display: flex;
  align-items: center;
  color: #666;
  > span {
    width: 50px;
  }
  .cycle_sub_item {
    flex: 1;
    display: flex;
    align-items: center;
  }
}
.cycle01_box {
  display: flex;
  ::v-deep .el-input {
    width: 80px;
  }
}
.cycle_time_column {
  display: flex;
}
</style>
