<script lang="ts" setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  Title: String,
  DelayedData: Object
})
const delayed_data = ref(props.DelayedData)
watch(
  () => props.DelayedData,
  (current) => {
    delayed_data.value = current
    DelayedInit()
  }
)

const DelayedInit = () => {
  let array2: any = []
  OceanCheckedList.value = []
  if (delayed_data.value?.atd_etd != '' && delayed_data.value?.atd_etd != undefined) {
    isDeparture.value = true
    DepartureTime.value = delayed_data.value?.atd_etd
    DepartureSelect.value = delayed_data.value?.atd_etd_unit
    OceanCheckedList.value.push('Departure Delayed')
    array2.push('Departure')
  }
  if (delayed_data.value?.ata_eta != '' && delayed_data.value?.ata_eta != undefined) {
    isArrival.value = true
    ArrivalTime.value = delayed_data.value?.ata_eta
    ArrivalSelect.value = delayed_data.value?.ata_eta_unit
    OceanCheckedList.value.push('Arrival Delayed (ATA-ETA)')
    array2.push('Arrival')
  }
  CheckChange(OceanCheckedList.value)
  changedeparture(array2)
}
const isDeparture = ref(false)
const isArrival = ref(false)
const OceanActive = ref(['DelayedShipments'])
const OceanCheckedList = ref()
const DepartureTime = ref()
const DepartureSelect = ref('')
const ArrivalTime = ref()
const ArrivalSelect = ref('')
const emit = defineEmits(['ChangeCheckRules', 'closeDelayed'])
const DepartureList = ref({
  Departure: '',
  Arrival: ''
})
let Departurestr: any = ''
let Arrivalstr: any = ''

const clampedValue = computed({
  get: () => DepartureTime.value,
  set: (newVal) => {
    const isValid = /^[1-9]\d*$/.test(newVal);
    DepartureTime.value = isValid ? newVal : '';
    if( DepartureTime.value!='') {
      DepartureTime.value = Math.min(Math.max(parseInt(DepartureTime.value, 10), 1), 365)
    }
  }
})
const clampedArrivalValue = computed({
  get: () => ArrivalTime.value,
  set: (newVal) => {
    const isValid = /^[1-9]\d*$/.test(newVal);
    ArrivalTime.value = isValid ? newVal : '';
    if( ArrivalTime.value!='') {
      ArrivalTime.value = Math.min(Math.max(parseInt(ArrivalTime.value, 10), 1), 365)
    }
  }
})

const CheckChange = (val: any) => {
  if (val.includes('Departure Delayed')) {
    isDeparture.value = true
    if(clampedValue.value != '' && clampedValue.value!= undefined) {
      Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
    } else {
      Departurestr = ''
    }
    if (DepartureSelect.value != '') {
      DepartureList.value.Departure = Departurestr
    }
    if (val.includes('Arrival Delayed (ATA-ETA)')) {
      isArrival.value = true
      if(clampedArrivalValue.value != '' && clampedArrivalValue.value!= undefined) {
        Arrivalstr = 'Arrival Delayed (ATA-ETA)' + ' ≥ ' + clampedArrivalValue.value + ' ' + ArrivalSelect.value
      } else {
        Arrivalstr = ''
      }
      if (ArrivalSelect.value != '') {
        DepartureList.value.Arrival = Arrivalstr
      }
    } else {
      isArrival.value = false
      DepartureList.value.Arrival = ''
    }
  } else {
    isDeparture.value = false
    DepartureList.value.Departure = ''
    if (val.includes('Arrival Delayed (ATA-ETA)')) {
      isArrival.value = true
      if(clampedArrivalValue.value != '' && clampedArrivalValue.value!= undefined) {
        Arrivalstr = 'Arrival Delayed (ATA-ETA)' + ' ≥ ' + clampedArrivalValue.value + ' ' + ArrivalSelect.value
      } else {
        Arrivalstr = ''
      }
      if (ArrivalSelect.value != '') {
        DepartureList.value.Arrival = Arrivalstr
      }
    } else {
      isArrival.value = false
      DepartureList.value.Arrival = ''
    }
  }
  emit('ChangeCheckRules', DepartureList.value)
}
const changedeparture = (val: any) => {
  if (val == 'Departure') {
    if(clampedValue.value != '' && clampedValue.value!= undefined) {
      Departurestr = 'Departure Delayed' + ' ≥ ' + clampedValue.value + ' ' + DepartureSelect.value
    } else {
      Departurestr = ''
    }
    if (DepartureSelect.value != '') {
      DepartureList.value.Departure = Departurestr
    }
    if (val == 'Arrival') {
      if(clampedArrivalValue.value != '' && clampedArrivalValue.value!= undefined) {
        Arrivalstr = 'Arrival Delayed (ATA-ETA)' + ' ≥ ' + clampedArrivalValue.value + ' ' + ArrivalSelect.value
      } else {
        Arrivalstr = ''
      }
      if (ArrivalSelect.value != '') {
        DepartureList.value.Arrival = Arrivalstr
      }
    }
  } else {
    if (val == 'Arrival') {
      if(clampedArrivalValue.value != '' && clampedArrivalValue.value!= undefined) {
        Arrivalstr = 'Arrival Delayed (ATA-ETA)' + ' ≥ ' + clampedArrivalValue.value + ' ' + ArrivalSelect.value
      } else {
        Arrivalstr = ''
      }
      if (ArrivalSelect.value != '') {
        DepartureList.value.Arrival = Arrivalstr
      }
    }
  }
  emit('ChangeCheckRules', DepartureList.value)
}
const closeDelayed = (val: any) => {
  if (val.includes('Departure')) {
    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Departure Delayed'), 1)
    DepartureList.value.Departure = ''
    isDeparture.value = false
    DepartureTime.value = ''
    DepartureSelect.value = ''
  }
  if (val.includes('Arrival')) {
    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('Arrival Delayed (ATA-ETA)'), 1)
    DepartureList.value.Arrival = ''
    isArrival.value = false
    ArrivalTime.value = ''
    ArrivalSelect.value = ''
  }
  emit('ChangeCheckRules', DepartureList.value)
}

// 清除所有数据
const ClearData = () => {
  OceanCheckedList.value = []
  DepartureList.value.Departure = ''
  isDeparture.value = false
  DepartureList.value.Arrival = ''
  isArrival.value = false
  DepartureTime.value = ''
  DepartureSelect.value = ''
  ArrivalTime.value = ''
  ArrivalSelect.value = ''
}

defineExpose({
  closeDelayed,
  ClearData
})
</script>
<template>
  <div class="Ocean_collapse">
    <el-collapse v-model="OceanActive">
      <el-collapse-item name="DelayedShipments">
        <template #title>
          <div class="Rules_Title OceanTitle">{{ props.Title }}</div>
        </template>
        <div class="oceanCheckbox">
          <el-checkbox-group @change="CheckChange" v-model="OceanCheckedList">
            <el-checkbox class="delayedType" value="Departure Delayed">
              <div>Departure Delayed (ATD-ETD)</div>
              <div v-if="isDeparture" style="margin-top: 16px">
                <span class="delayedTitle">Delayed Time</span>
                <span class="delayedIcon">></span>
                <el-input
                  v-model="clampedValue"
                  class="input-with-select"
                  @input="changedeparture('Departure')"
                >
                  <template #append>
                    <el-select
                      v-model="DepartureSelect"
                      placeholder="Select"
                      @change="changedeparture('Departure')"
                    >
                      <el-option label="Day(s)" value="Day(s)" />
                      <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
                    </el-select>
                  </template>
                </el-input>
              </div>
            </el-checkbox>
            <el-checkbox class="delayedType" value="Arrival Delayed (ATA-ETA)">
              <div>Arrival Delayed (ATA-ETA)</div>
              <div v-if="isArrival" style="margin-top: 16px">
                <span class="delayedTitle">Delayed Time</span>
                <span class="delayedIcon">></span>
                <el-input
                  v-model="clampedArrivalValue"
                  @input="changedeparture('Arrival')"
                  class="input-with-select"
                >
                  <template #append>
                    <el-select
                      v-model="ArrivalSelect"
                      placeholder="Select"
                      @change="changedeparture('Arrival')"
                    >
                      <el-option label="Day(s)" value="Day(s)" />
                      <el-option v-if="props.Title == 'Air shipments'" label="Hour(s)" value="Hour(s)" />
                    </el-select>
                  </template>
                </el-input>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-checkbox-group) {
  border: 1px solid var(--color-system-border);
  border-radius: 5px;
}
:deep(.el-checkbox) {
  width: 100%;
  background-color: var(--color-system-body-bg);
  border-bottom: 1px solid var(--color-system-border);
  padding: 8px;
}
:deep(.el-checkbox:first-child) {
  border-radius: 6px 6px 0 0;
}
:deep(.el-checkbox:last-child) {
  border-radius: 0 0 6px 6px;
  border-bottom: none;
}
.delayedType {
  align-items: start;
  height: fit-content;
  margin-right: 5px;
  border-radius: 6px;
  padding: 8px;
}
.input-with-select {
  width: 180px;
}
:deep(.el-input__wrapper) {
  width: 50%;
}
:deep(.el-input-group__append) {
  width: 50%;
  padding: 0;
  border: none;
}
:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
  padding: 5px 10px;
  background-color: var(--color-system-body-bg);
}
.delayedTitle {
  color: var(--color-neutral-2);
  font-size: 12px;
}
.delayedIcon {
  margin: 0 8px;
}
.oceanCheckbox {
  margin-bottom: 8px;
}
:deep(.el-radio) {
  align-items: center !important;
}
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px var(--color-system-border-1) inset;
}
:deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
  box-shadow: 0 1px 0 0 var(--color-system-border-1) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
}
</style>