<script lang="ts" setup name="Schedule">
import { ref, computed } from 'vue'
import SecondMinute from "./component/secondAndMinute.vue";
import Hour from './component/hour.vue';
import Day from './component/day.vue';
import Week from "./component/week.vue";
import Month from './component/month.vue';
import Year from './component/year.vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
  timeInfo: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['scheduleChange']);

const activeName = ref('m')
const sVal = ref('0')
const mVal = ref('00')
const hVal = ref('00')
const dVal = ref('')
const monthVal = ref('')
const weekVal = ref('')
const yearVal = ref('')
const finalTitle: any = ref([])
let preV = ""
const value_ = computed(() => {
  if (!dVal.value && !weekVal.value) {
    return "";
  }
  
  const v = `0 ${mVal.value} ${hVal.value} ${dVal.value} ${monthVal.value} ${weekVal.value} ${yearVal.value}`;
  if(preV === v) {

    return v
  }
  if (dVal.value === "?" && weekVal.value === "?") {
    ElMessage.error('日期与星期不可以同时为"不指定"');
  }
  if (dVal.value !== "?" && weekVal.value !== "?") {
    ElMessage.error('日期与星期必须有一个为"不指定"');
  }
  if (v !== props.timeInfo) {
    emits('scheduleChange', v)
  }
  preV = v
  return v;
})

watch(() => value_.value, (val) => {
  setResult(val);
})

const setResult = (a) => {
  finalTitle.value = [];
  let lable = ['秒', '分', '时', '日', '月', '星期', '年'];
  let time = ['s', 'm', 'h', 'd', 'month', 'week', 'year'];
  let weekNum = { '1': '日', '2': '一', '3': '二', '4': '三', '5': '四', '6': '五', '7': '六' };
  // 每出现次数
  let everyCount = 0;
  // 周期出现次数
  let periodCount = 0;
  // 循环出现次数
  let loopCount = 0;
  let arr = a.split(' ');
  //多次出现*号将不为第一次出现的项变为未指定
  let mapArr = arr.map((item, index) => {
    if (item == '*' && index != arr.indexOf('*')) {
      return (item = '?');
    } else {
      return item;
    }
  });
  let loopLastindex = null;
  mapArr.forEach((item, index) => {
    if (item.indexOf('/') != -1) {
      loopLastindex = index;
    }
  });
  mapArr.forEach((item, index) => {
    let str = '';
    if (item.indexOf('-') != -1) {
      if (index == 5) {
        str = `${[lable[index]]}${weekNum[item.split('-')[0]]}至${[lable[index]]}${weekNum[item.split('-')[1]]}`;
      } else {
        str = `${item.split('-')[0]}至${item.split('-')[1]}${[lable[index]]}`;
      }
      periodCount++;
    } else if (item.indexOf('/') != -1) {
      if (index == 5) {
        if (index == loopLastindex) {
          str = `从${[lable[index]]}${weekNum[item.split('/')[0]]}开始，每${item.split('/')[1]}天`;
        } else {
          str = `${[lable[index]]}${weekNum[item.split('/')[0]]}，每${item.split('/')[1]}天`;
        }
      } else if (index == 2) {
        if (index == loopLastindex) {
          str = `从${item.split('/')[0]}${[lable[index]]}开始，每${item.split('/')[1]}小时`;
        } else {
          str = `${item.split('/')[0]}${[lable[index]]}，每${item.split('/')[1]}小时`;
        }
      } else if (index == 4) {
        if (index == loopLastindex) {
          str = `从${item.split('/')[0]}${[lable[index]]}开始，每${item.split('/')[1]}个月`;
        } else {
          str = `${item.split('/')[0]}${[lable[index]]}，每${item.split('/')[1]}个月`;
        }
      } else {
        if (index == loopLastindex) {
          str = `从${item.split('/')[0]}${[lable[index]]}开始，每${item.split('/')[1]}${[lable[index]]}`;
        } else {
          str = `${item.split('/')[0]}${[lable[index]]}，每${item.split('/')[1]}${[lable[index]]}`;
        }
      }
      loopCount++;
    } else if (item.indexOf('W') != -1) {
      str = `本月${item.split('W')[0]}${[lable[index]]},最近的工作日`;
    } else if (item.indexOf('L') != -1) {
      if (index == 5) {
        str = `本月最后一个${[lable[index]]}${weekNum[item.split('L')[0]]}`;
      } else {
        str = `本月最后一天`;
      }
    } else if (item.indexOf('#') != -1) {
      str = `本月第${item.split('#')[0]}周,星期${weekNum[item.split('#')[1]]}`;
    } else if (item.indexOf('*') != -1) {
      // str = `每${[lable[index]]}`;
      if (everyCount) {
        str = '';
      } else {
        str = `每${[lable[index]]}`;
        everyCount++;
      }
    } else if (item.indexOf(',') != -1) {
      if (index == 5) {
        str = `${[lable[index]]}${item.split(',').map(i => weekNum[i]).join(',')}`;
      } else {
        str = `${item}${[lable[index]]}`;
      }
    } else if (item.indexOf('?') != -1 || index == 0) {
      str = ` `;
    } else if (typeof Number(item) === 'number' && !isNaN(Number(item))) {
      if (index == 5) {
        str = `${[lable[index]]}${weekNum[item]}`;
      } else {
        if (item == "") {
          str = "";
        } else {
          str = `${Number(item)}${[lable[index]]}`;
        }
      }
    } else {
      str = '';
    }
    time[index] = str;
  });
  let newArr = arr;
  time.reverse()
  newArr.reverse();
  //周期
  let periodArr = findall(newArr, '-');
  // 循环
  let loopArr = findall(newArr, '/');
  // 指定周
  let specifyArr = findall(newArr, '#');
  // 工作日
  let workArr = findall(newArr, 'W');
  // 最后一个
  let lastArr = findall(newArr, 'L');
  // 每
  let everyArr = findall(newArr, '*');
  // 指定
  let appointArr: any = [];
  newArr.forEach((item, index) => {
    if ((typeof Number(item) === 'number' && !isNaN(Number(item)) && index !== newArr.length - 1) || item.indexOf(',') != -1) {
      appointArr.push(index);
    }
  });
  let periodStr = statistics(periodArr, time);
  let loopStr = statistics(loopArr, time);
  let specifyStr = statistics(specifyArr, time);
  let workStr = statistics(workArr, time);
  let lastStr = statistics(lastArr, time);
  let everyStr = statistics(everyArr, time);
  let appointStr = statistics(appointArr, time);
  if (everyStr.length) {
    finalTitle.value.push(`触发频次：${everyStr[everyStr.length - 1]}执行一次`);
  }
  if (periodStr.length) {
    finalTitle.value.push(`触发周期：${periodStr.join('的')}`);
  }
  if (loopStr.length) {
    finalTitle.value.push(`触发循环：${loopStr.join('的')}执行一次`);
  }
  if (specifyStr.length) {
    finalTitle.value.push(`指定周：${specifyStr.join('的')}`);
  }
  if (workStr.length) {
    finalTitle.value.push(`${workStr.join('')}`);
  }
  if (lastStr.length) {
    finalTitle.value.push(`${lastStr[lastStr.length - 1]}`);
  }
  if (appointStr.length) {
    if (appointStr[0] == "") {
      appointStr = appointStr.slice(1);
    }
    finalTitle.value.push(`指定时间：${appointStr.join('的')}`);
  }
}

const findall = (arr, x) => {
  let results: any = [];
  arr.forEach((el, i) => el.indexOf(x) != -1 && results.push(i));
  return results;
}

const statistics = (a, time) => {
  let results: any = [];
  if (a.length) {
    a.forEach((j, jndex) => {
      results.push(time[j]);
    });
  }
  return results;
}

const updateVal = (val) => {
  if (!val) {
    return ;
  }
  const arrays = val.split(' ');
  sVal.value = arrays[0] || "00";
  mVal.value = arrays[1] || "00";
  hVal.value = arrays[2] || "00";
  dVal.value = arrays[3] || "*";
  monthVal.value = arrays[4] || "*";
  weekVal.value = arrays[5] || "?";
  yearVal.value = arrays[6] || "";
}

watch(() => props.timeInfo, (newVal, oldVal) => {
  updateVal(newVal)
}, {
  immediate: true
})

</script>

<template>
  <div class="timing-panel" :val="value_">
    <el-tabs v-model="activeName" class="demo-tabs">
      <!-- <el-tab-pane label="秒" name="second"></el-tab-pane> -->
      <el-tab-pane label="分" name="m">
        <SecondMinute :value="mVal" :label="'分'" @input="(val) => mVal = val" />
      </el-tab-pane>
      <el-tab-pane label="时" name="h">
        <Hour :value="hVal" label="时" @input="(val) => hVal = val" />
      </el-tab-pane>
      <el-tab-pane label="日" name="d">
        <Day :value="dVal" label="日" @input="(val) => dVal = val" />
      </el-tab-pane>
      <el-tab-pane label="月" name="month">
        <Month :value="monthVal" label="月" @input="(val) => monthVal = val" />
      </el-tab-pane>
      <el-tab-pane label="周" name="week">
        <Week :value="weekVal" label="周" @input="(val) => weekVal = val" />
      </el-tab-pane>
      <el-tab-pane label="年" name="year">
        <Year :value="yearVal" label="年" @input="(val) => yearVal = val" />
      </el-tab-pane>
    </el-tabs>
    <div class="border1px">
      <p v-for="item in finalTitle" :key="item">{{ item }}</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.el-tabs {
  --el-tabs-header-height: 36px;

  :deep(.el-tabs__item) {
    padding: 0 16px;
  }

  :deep(.el-tabs__header) {
    margin: 0px;
  }

  :deep(.el-tab-pane) {
    margin-top: 15px;
    margin-bottom: 10px;
  }
}

.el-tabs--card {
  &.border {
    :deep(> .el-tabs__header) {
      margin: 0;
      border-bottom: none;

      .el-tabs__item {

        &:hover {
          color: initial;
        }

        &.is-active {
          color: initial;
          border-bottom-color: #fff;
        }
      }
    }

    :deep(.el-tabs__content) {
      border: 1px solid var(--el-border-color-light);
      padding: 8px 12px 0;
    }
  }
}

:deep(.pd1) {
  display: flex;
  align-items: center;

  .el-select {
    width: 120px !important;
    margin: 0 10px;

    .el-select-dropdown__wrap {
      max-height: 150px;
    }
  }
}

.border1px {
  border: 1px solid #d9d9d9;
}
</style>