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

const OceanActive = ref(['TransportMode', 'Time'])
const TransportCheckedList = ref([])
interface OceanItem {
  label: string
  value: string
}
const TransportList = ref<OceanItem[]>([])
const props = defineProps({
  ShipmentRangeData: Object
})
const ShipmentRange_data = ref(props.ShipmentRangeData)
TransportList.value = [
  {
    label: 'Ocean',
    value: 'Ocean'
  },
  {
    label: 'Air',
    value: 'Air'
  },
  {
    label: 'Road',
    value: 'Road'
  }
]

const TimeChecked = ref()
const defaultradio = ref()
const defaultradio2 = ref()

watch(
  () => props.ShipmentRangeData,
  (current) => {
    ShipmentRange_data.value = current
    ShipmentRangeInit()
  }
)

const ShipmentRangeInit = () => {
  if (ShipmentRange_data.value?.shipment_transport_mode != undefined) {
    TransportCheckedList.value = ShipmentRange_data.value?.shipment_transport_mode.split(';')
    CheckChange(ShipmentRange_data.value?.shipment_transport_mode)
  }
  if (typeof ShipmentRange_data.value?.shipment_eta_limit == 'number' && typeof ShipmentRange_data.value?.shipment_eta_limit_from == 'number') {
    ETATimeStart.value = ShipmentRange_data.value?.shipment_eta_limit_from
    ETATimeEnd.value = ShipmentRange_data.value?.shipment_eta_limit
    TimeChecked.value = 2
    changeTime(2)
  }
  if (typeof ShipmentRange_data.value?.shipment_etd_limit == 'number' && typeof ShipmentRange_data.value?.shipment_etd_limit_from == 'number') {
    ETDTimeStart.value = ShipmentRange_data.value?.shipment_etd_limit_from
    ETDTimeEnd.value = ShipmentRange_data.value?.shipment_etd_limit
    TimeChecked.value = 1
    changeTime(1)
  }
}

const ETDTimeStart = ref()
const ETDTimeEnd = ref()
const ETATimeStart = ref()
const ETATimeEnd = ref()

const clampedETDValueStart = computed({
  get: () => ETDTimeStart.value,
  set: (newVal) => {
    // 转换为整数
    const num = parseInt(newVal, 10);
    // 处理非数字和NaN情况
    if (isNaN(num)) {
      ETDTimeStart.value = 0;
      return;
    }
    // 范围限制
    ETDTimeStart.value = Math.max(0, Math.min(365, num));
  }
})
const clampedETDValueEnd = computed({
  get: () => ETDTimeEnd.value,
  set: (newVal) => {
    // 转换为整数
    const num = parseInt(newVal, 10);
    // 处理非数字和NaN情况
    if (isNaN(num)) {
      ETDTimeEnd.value = 0;
      return;
    }
    // 范围限制
    ETDTimeEnd.value = Math.max(0, Math.min(365, num));
  }
})
const clampedETAValueStart = computed({
  get: () => ETATimeStart.value,
  set: (newVal) => {
    // 转换为整数
    const num = parseInt(newVal, 10);
    // 处理非数字和NaN情况
    if (isNaN(num)) {
      ETATimeStart.value = 0;
      return;
    }
    // 范围限制
    ETATimeStart.value = Math.max(0, Math.min(365, num));
  }
})
const clampedETAValueEnd = computed({
  get: () => ETATimeEnd.value,
  set: (newVal) => {
    // 转换为整数
    const num = parseInt(newVal, 10);
    // 处理非数字和NaN情况
    if (isNaN(num)) {
      ETATimeEnd.value = 0;
      return;
    }
    // 范围限制
    ETATimeEnd.value = Math.max(0, Math.min(365, num));
  }
})

let Transportstr: any = ''
let Timestr: any = ''
const emit = defineEmits(['ChangeCheckRules', 'ChangeCheckTimeRules'])
const CheckChange = (val: any) => {
  if (val != '') {
    Transportstr = 'Transport Mode: ' + val
  } else {
    Transportstr = ''
  }
  emit('ChangeCheckRules', Transportstr, TransportCheckedList.value)
}

const isETDVisible = ref(false)
const isETAVisible = ref(false)
// 输入ETD、ETA
const changeTime = (val: any) => {
  if (val == 1) {
    isETDVisible.value = true
    isETAVisible.value = false
    defaultradio.value =''
    defaultradio2.value =''
    ETATimeStart.value = ''
    ETATimeEnd.value = ''
    if(typeof clampedETDValueStart.value == 'number' && typeof clampedETDValueEnd.value == 'number') {
      if(clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 30) {
        defaultradio.value = 'Next 30 days'
      } else if(clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 60) {
        defaultradio.value = 'Next 60 days'
      } else if(clampedETDValueStart.value == 10 && clampedETDValueEnd.value == 60) {
        defaultradio.value = 'Past 10 days to next 60 day'
      } else if(clampedETDValueStart.value == 30 && clampedETDValueEnd.value == 0) {
        defaultradio.value = 'Past 30 days'
      } else {
        defaultradio.value = 'Customize'
      }
      Timestr = 'ETD: minus ' + clampedETDValueStart.value + ' Day(s) to Plus '+ clampedETDValueEnd.value + ' Day(s)'
    } else{
      Timestr = ''
    }
    emit('ChangeCheckTimeRules', Timestr, clampedETDValueStart.value,clampedETDValueEnd.value)
  } else if (val == 2) {
    isETDVisible.value = false
    isETAVisible.value = true
    defaultradio2.value =''
    defaultradio.value =''
    ETDTimeStart.value = ''
    ETDTimeEnd.value = ''
    if(typeof clampedETAValueStart.value == 'number' && typeof clampedETAValueEnd.value == 'number') {
      if(clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 30) {
        defaultradio2.value = 'Next 30 days'
      } else if(clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 60) {
        defaultradio2.value = 'Next 60 days'
      } else if(clampedETAValueStart.value == 10 && clampedETAValueEnd.value == 60) {
        defaultradio2.value = 'Past 10 days to next 60 day'
      } else if(clampedETAValueStart.value == 30 && clampedETAValueEnd.value == 0) {
        defaultradio2.value = 'Past 30 days'
      } else {
        defaultradio2.value = 'Customize'
      }
      Timestr = 'ETA: minus ' + clampedETAValueStart.value + ' Day(s) to Plus '+ clampedETAValueEnd.value + ' Day(s)'
    } else{
      Timestr = ''
    }
    emit('ChangeCheckTimeRules', Timestr, clampedETAValueStart.value, clampedETAValueEnd.value)
  } else {
    Timestr = ''
  }
}

//切换默认值
const changedefaultradio = (val:any) => {
  if(val == 'Next 30 days') {
    clampedETDValueStart.value = 0
    clampedETDValueEnd.value = 30
  } else if(val == 'Next 60 days') {
    clampedETDValueStart.value = 0
    clampedETDValueEnd.value = 60
  } else if(val == 'Past 30 days') {
    clampedETDValueStart.value = 30
    clampedETDValueEnd.value = 0
  } else if(val == 'Past 10 days to next 60 days') {
    clampedETDValueStart.value = 10
    clampedETDValueEnd.value = 60
  } else {
    clampedETDValueStart.value = 0
    clampedETDValueEnd.value = 0
  }
  Timestr = 'ETD: minus ' + clampedETDValueStart.value + ' Day(s) to Plus '+ clampedETDValueEnd.value + ' Day(s)'
  emit('ChangeCheckTimeRules', Timestr, clampedETDValueStart.value,clampedETDValueEnd.value)
}
//切换默认值
const changedefaultradioETA = (val:any) => {
  if(val == 'Next 30 days') {
    clampedETAValueStart.value = 0
    clampedETAValueEnd.value = 30
  } else if(val == 'Next 60 days') {
    clampedETAValueStart.value = 0
    clampedETAValueEnd.value = 60
  } else if(val == 'Past 30 days') {
    clampedETAValueStart.value = 30
    clampedETAValueEnd.value = 0
  } else if(val == 'Past 10 days to next 60 days') {
    clampedETAValueStart.value = 10
    clampedETAValueEnd.value = 60
  } else {
    clampedETAValueStart.value = 0
    clampedETAValueEnd.value = 0
  }
  Timestr = 'ETA: minus ' + clampedETAValueStart.value + ' Day(s) to Plus'+ clampedETAValueEnd.value + ' Day(s)'
  emit('ChangeCheckTimeRules', Timestr, clampedETAValueStart.value,clampedETAValueEnd.value)
}
const handleCloseCreateRule = (val: any) => {
  if (val.indexOf('ETD') != -1 || val.indexOf('ETA') != -1) {
    TimeChecked.value = 0
    ETDTimeStart.value = ''
    ETDTimeEnd.value = ''
    isETDVisible.value = false
    defaultradio.value = ''
    defaultradio2.value = ''
    ETATimeStart.value = ''
    ETATimeEnd.value = ''
    isETAVisible.value = false
  } else if (val.indexOf('Transport') != -1) {
    TransportCheckedList.value = []
  }
}

defineExpose({
  handleCloseCreateRule
})
</script>
<template>
  <div class="Ocean_collapse">
    <el-collapse v-model="OceanActive">
      <el-collapse-item name="TransportMode">
        <template #title>
          <span class="stars_red">*</span><div class="Rules_Title OceanTitle">Transport Mode</div>
        </template>
        <div class="oceanCheckbox">
          <el-checkbox-group @change="CheckChange" v-model="TransportCheckedList">
            <el-checkbox
              v-for="item in TransportList"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-checkbox-group>
        </div>
      </el-collapse-item>
      <el-collapse-item name="Time">
        <template #title>
          <span class="stars_red">*</span><div class="Rules_Title OceanTitle">Time</div>
        </template>
        <div class="oceanCheckbox">
          <el-radio-group v-model="TimeChecked" @change="changeTime">
            <el-radio :value="1">
              <div>ETD</div>
              <div v-if="isETDVisible">
                <el-radio-group v-model="defaultradio" @change="changedefaultradio">
                  <el-radio-button label="Next 30 days" value="Next 30 days" />
                  <el-radio-button label="Next 60 days" value="Next 60 days" />
                  <el-radio-button label="Past 10 days to next 60 days" value="Past 10 days to next 60 days" />
                  <el-radio-button label="Past 30 days" value="Past 30 days" />
                  <el-radio-button label="Customize" value="Customize" />
                </el-radio-group>
                <div class="flex" style="align-items: end;margin-bottom: 8.5px;">
                  <div>
                    <div class="time_title">Start Date</div>
                    <div class="flex">
                      <div class="currentTime">Current time minus</div>
                      <el-input
                        @input="changeTime('1')"
                        v-model="clampedETDValueStart"
                        class="input-with-select"
                      >
                      </el-input>
                      <div class="Days">Day(s)</div>
                    </div>
                  </div>
                  <div class="To">To</div>
                  <div>
                    <div class="time_title">End Date</div>
                    <div class="flex">
                      <div class="currentTime">Current time plus</div>
                      <el-input
                        @input="changeTime('1')"
                        v-model="clampedETDValueEnd"
                        class="input-with-select"
                      >
                      </el-input>
                      <div class="Days">Day(s)</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-radio>
            <el-radio :value="2">
              <div>ETA</div>
              <div v-if="isETAVisible">
                <el-radio-group v-model="defaultradio2" @change="changedefaultradioETA">
                  <el-radio-button label="Next 30 days" value="Next 30 days" />
                  <el-radio-button label="Next 60 days" value="Next 60 days" />
                  <el-radio-button label="Past 10 days to next 60 days" value="Past 10 days to next 60 days" />
                  <el-radio-button label="Past 30 days" value="Past 30 days" />
                  <el-radio-button label="Customize" value="Customize" />
                </el-radio-group>
                <div class="flex" style="align-items: end;margin-bottom: 8.5px;">
                  <div>
                    <div class="time_title">Start Date</div>
                    <div class="flex">
                      <div class="currentTime">Current time minus</div>
                      <el-input
                        @input="changeTime('2')"
                        v-model="clampedETAValueStart"
                        class="input-with-select"
                      >
                      </el-input>
                      <div class="Days">Day(s)</div>
                    </div>
                  </div>
                  <div class="To">To</div>
                  <div>
                    <div class="time_title">End Date</div>
                    <div class="flex">
                      <div class="currentTime">Current time plus</div>
                      <el-input
                        @input="changeTime('2')"
                        v-model="clampedETAValueEnd"
                        class="input-with-select"
                      >
                      </el-input>
                      <div class="Days">Day(s)</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-radio>
          </el-radio-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;
}
.oceanCheckbox {
  max-height: 321px;
  overflow-x: hidden;
  margin-bottom: 8px;
  overflow-y: scroll;
}
.currentTime {
  background-color: var(--el-disabled-bg-color);
  border-radius: 6px 0 0 6px;
  padding: 0 8px;
  height: 28px;
  line-height: 28px;
  border: 1px solid var(--color-system-border);
}
.input-with-select {
  width: 84px;
  border-radius: 0;
}
:deep(.el-input__wrapper) {
  border-radius: 0;
  opacity: 0.8;
  height: 28px;
}
.flex {
  display: flex;
  align-items: center;
}
.Days {
  width: 47px;
  border: 1px solid var(--color-system-border);
  border-radius: 0 6px 6px 0;
  background-color: var(--color-system-body-bg);
  border-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  height: 28px;
}
.time_title {
  color: var(--color-neutral-2);
  font-size: 12px;
  height: 25px;
}
.To {
  color: var(--color-neutral-2);
  font-size: 12px;
  margin: 0 6px;
  line-height: 24px;
}
:deep(.el-radio-group) {
  display: block;
}
:deep(.el-radio) {
  display: flex;
  min-height: 32px;
  border: 1px solid var(--color-system-border);
  background-color: var(--color-system-body-bg);
  margin-bottom: 4px;
  border-radius: 6px;
  padding: 0 8px;
  margin-right: 0;
  height: fit-content;
  line-height: 32px;
  align-items:  start;
}
:deep( .el-radio__inner) {
  border: 1px solid var(--color-system-checkbox-border);
}
:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: var(--color-neutral-1);
}
:deep(.el-radio__input) {
  margin-top: 7px;
}
: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;
}
:deep(.el-radio-button__inner) {
  border: 1px solid var(--color-system-border);
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-left:1px solid var(--color-system-border);
}
.stars_red {
  color: var(--color-danger);
}
</style>