<template>
  <div class="custom-time">
    <el-form :model="state.form.rules" ref="form" :rules="rules" label-width="0" style="width: 100%">
      <el-table :data="state.form.rules" border stripe>
        <el-table-column label="日期范围" prop="date">
          <template #default="{ $index }">
            <el-form-item :prop="`[${$index}].date`" :rules="rules.date">
              <el-date-picker
                v-model="state.form.rules[$index].date"
                type="daterange"
                range-separator="-"
                value-format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="时间点" prop="time">
          <template #default="{ $index }">
            <el-form-item :prop="`[${$index}].time`" :rules="rules.time">
              <el-time-picker
                style="width: 100%"
                v-model="state.form.rules[$index].time"
                placeholder="请选择时间"
                value-format="HH:mm:ss">
              </el-time-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="" width="125px">
          <template #default="{ $index }">
            <div class="table-operation">
              <el-button link type="primary" @click="Add($index)" :disabled="state.form.rules.length >= ADD_NUM">
                新增
              </el-button>
              <span class="line"></span>
              <el-button link type="primary" @click="Remove($index)" :disabled="state.form.rules.length == 1">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
const ADD_NUM = 8;
const props = defineProps({
  rules: {
    type: Object,
    default: null,
  },
});
const state = reactive({
  form: {
    rules: [],
  },
});
const rules = {
  date: [{ required: true, message: "请选择", trigger: "change" }],
  time: [{ required: true, message: "请选择", trigger: "change" }],
};
const addTrue = ref(0);
// 表格新增
const Add = (index) => {
  // 新增上限
  if (state.form.rules.length >= ADD_NUM) return;
  state.form.rules.splice(index + 1, 0, {
    date: [],
    time: "",
  });
  addTrue.value += 1;
};
// 表格删除
const Remove = (index) => {
  state.form.rules.splice(index, 1);
  addTrue.value -= 1;
};
watch(
  () => props.rules,
  (n) => {
    state.form.rules =
      n?.lists.map((e) => {
        return {
          date: e.date,
          time: e.time,
        };
      }) || [];
    if (state.form.rules.length == 0) {
      Add(-1);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const form = ref(null);
const Submit = async () => {
  const isValid = await new Promise((resolve, reject) => {
    form.value.validate((res) => resolve(res));
  });
  return isValid;
};
defineExpose({
  Submit,
  form: state.form,
});
</script>

<style lang="scss" scoped>
.table-operation {
  display: flex;
  align-items: center;
  .line {
    width: 1px;
    height: 14px;
    background-color: #c1c7d7;
    margin: 0 16px;
    display: inline-block;
  }
}
.custom-time {
  padding-left: 110px;
}
:deep(.el-form-item) {
  margin-bottom: 0 !important;
}
</style>
