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

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

const TimeChecked = ref()

const ETDTime = ref()
const ETATime = ref()

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

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)
}

// 输入ETD、ETA
const changeTime = (val: any) => {
  if (val == 1) {
    if(clampedETDValue.value != '' && clampedETDValue.value != undefined) {
      Timestr = 'ETD within ' + clampedETDValue.value + ' Day(s)'
    } else{
      Timestr = ''
    }
  } else if (val == 2) {
    if(clampedETAValue.value != '' && clampedETAValue.value != undefined) {
      Timestr = 'ETA within ' + clampedETAValue.value + ' Day(s)'
    } else{
      Timestr = ''
    }
  } else {
    Timestr = ''
  }
  emit('ChangeCheckTimeRules', Timestr)
}

const handleCloseCreateRule = (val: any) => {
  if (val.indexOf('ETD') != -1 || val.indexOf('ETA') != -1) {
    TimeChecked.value = 0
    ETDTime.value = ''
    ETATime.value = ''
  } 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>
          <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>
          <div class="Rules_Title OceanTitle">Time</div>
        </template>
        <div class="oceanCheckbox">
          <el-radio-group v-model="TimeChecked" @change="changeTime">
            <el-radio value="1">
              <div class="flex">
                ETD within
                <el-input
                  @input="changeTime('1')"
                  v-model="clampedETDValue"
                  class="input-with-select"
                >
                </el-input>
                <div class="Days">Day(s)</div>
              </div>
            </el-radio>
            <el-radio value="2">
              <div class="flex">
                ETA within
                <el-input
                  @input="changeTime('2')"
                  v-model="clampedETAValue"
                  class="input-with-select"
                >
                </el-input>
                <div class="Days">Day(s)</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-select-border);
  border-radius: 5px;
}
:deep(.el-checkbox) {
  width: 100%;
  background-color: var(--color-drawer-body-bg);
  border-bottom: 1px solid var(--color-select-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;
}

.input-with-select {
  width: 96px;
  border-radius: 6px 0 0 6px;
}
:deep(.el-input__wrapper) {
  border-radius: 6px 0 0 6px;
  opacity: 0.8;
  height: 28px;
}
.flex {
  display: flex;
  align-items: center;
}
.Days {
  width: 64px;
  border: 1px solid var(--color-select-border);
  border-radius: 0 6px 6px 0;
  background-color: var(--color-drawer-body-bg);
  border-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  height: 28px;
}
:deep(.el-radio) {
  background-color: var(--color-drawer-body-bg);
}
:deep( .el-radio__inner) {
  border: 1px solid var(--color-system-checkbox-border);
}
</style>