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

const props = defineProps({
  Title: String,
  ETDData: Object
})
const ETD_data = ref(props.ETDData)
watch(
  () => props.ETDData,
  (current) => {
    ETD_data.value = current
    ETDInit()
  }
)

const ETDInit = () => {
  OceanCheckedList.value = []
  if (ETD_data.value?.ETDradio == 't') {
    ETDRadio.value = '1'
    OceanCheckedList.value.push('ETD')
  } else {
    if (ETD_data.value?.etd_old_sub_new != '' && ETD_data.value?.etd_old_sub_new != undefined) {
      ETDRadio.value = '2'
      isETD.value = true
      ETDTime.value = ETD_data.value?.etd_old_sub_new
      ETDSelect.value = ETD_data.value?.etd_old_sub_new_unit
      OceanCheckedList.value.push('ETD')
    }
  }
  if (ETD_data.value?.ETAradio == 't') {
    ETARadio.value = '1'
    OceanCheckedList.value.push('ETA')
  } else {
    if (ETD_data.value?.eta_old_sub_new != '' && ETD_data.value?.eta_old_sub_new != undefined) {
      ETARadio.value = '2'
      isETA.value = true
      ETATime.value = ETD_data.value?.eta_old_sub_new
      ETASelect.value = ETD_data.value?.eta_old_sub_new_unit
      OceanCheckedList.value.push('ETA')
    }
  }
  CheckChange(OceanCheckedList.value)
  changeETDRadio(ETDRadio.value)
  changeETARadio(ETARadio.value)
  changedeparture(OceanCheckedList.value)
}
const isETD = ref(false)
const isETA = ref(false)
const OceanActive = ref(['ETDShipments'])
const OceanCheckedList = ref()
const ETDTime = ref()
const ETDSelect = ref('')
const ETATime = ref()
const ETASelect = ref('')
const ETDRadio = ref()
const ETARadio = ref()
const emit = defineEmits(['ChangeCheckRules', 'closeETD'])
const ETDETAList = ref({
  ETD: '',
  ETA: ''
})
let ETDstr: any = ''
let ETAstr: any = ''
const CheckChange = (val: any) => {
  if (val.includes('ETD')) {
    isETD.value = true
    if (ETDSelect.value != ''  && clampedValue.value!= '') {
      ETDETAList.value.ETD = ETDstr
    } else {
      ETDETAList.value.ETD = ''
    }
    if (val.includes('ETA')) {
      isETA.value = true
      if (ETASelect.value != ''  && clampedETAValue.value!= '') {
        ETDETAList.value.ETA = ETAstr
      } else {
        ETDETAList.value.ETA = ''
      }
    } else {
      isETA.value = false
      ETDETAList.value.ETA = ''
    }
  } else {
    isETD.value = false
    ETDETAList.value.ETD = ''
    if (val.includes('ETA')) {
      isETA.value = true
      if (ETASelect.value != ''  && clampedETAValue.value!= '') {
        ETDETAList.value.ETA = ETAstr
      } else {
        ETDETAList.value.ETA = ''
      }
    } else {
      isETA.value = false
      ETDETAList.value.ETA = ''
    }
  }
  emit('ChangeCheckRules', ETDETAList.value)
}
const changeETDRadio = (val: any) => {
  if (val == 1) {
    ETDstr = 'ETD: Notify for all changes'
    ETDETAList.value.ETD = ETDstr
  } else if (val == 2) {
    ETDstr = 'ETD: Notify only when time difference ≥ ' + clampedValue.value + ' ' + ETDSelect.value
    if (ETDSelect.value != '' && clampedValue.value!= '') {
      ETDETAList.value.ETD = ETDstr
    } else {
      ETDETAList.value.ETD = ''
    }
  }
  emit('ChangeCheckRules', ETDETAList.value)
}
const changeETARadio = (val: any) => {
  if (val == 1) {
    ETAstr = 'ETA: Notify for all changes'
    ETDETAList.value.ETA = ETAstr
  } else if (val == 2) {
    ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
    if (ETASelect.value != '' && clampedValue.value!= '') {
      ETDETAList.value.ETA = ETAstr
    } else {
      ETDETAList.value.ETA = ''
    }
  }
  emit('ChangeCheckRules', ETDETAList.value)
}
const changedeparture = (val: any) => {
  if (val == 'ETD') {
    if(ETDstr.includes('all changes')) {
      ETDETAList.value.ETD = ETDstr
    } else {
      ETDstr = 'ETD: Notify only when time difference ≥ ' + clampedValue.value + ' ' + ETDSelect.value
      if (ETDSelect.value != '' && clampedValue.value!= '' && clampedValue.value!= undefined ) {
        ETDETAList.value.ETD = ETDstr
      } else {
        ETDETAList.value.ETD = ''
      }
    }
    if (val == 'ETA') {
      if(ETAstr.includes('all changes')) {
        ETDETAList.value.ETA = ETAstr
      } else {
        ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
        if (ETASelect.value != '' && clampedETAValue.value!= '') {
          ETDETAList.value.ETA = ETAstr
        } else {
          ETDETAList.value.ETA = ''
        }
      }
    }
  } else {
    if(ETAstr.includes('all changes')) {
        ETDETAList.value.ETA = ETAstr
      } else {
        ETAstr = 'ETA: Notify only when time difference ≥ ' + clampedETAValue.value + ' ' + ETASelect.value
        if (ETASelect.value != '' && clampedETAValue.value!= '') {
          ETDETAList.value.ETA = ETAstr
        } else {
          ETDETAList.value.ETA = ''
        }
      }
  }
  emit('ChangeCheckRules', ETDETAList.value)
}
const closeETD = (val: any) => {
  if (val.includes('ETD')) {
    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('ETD'), 1)
    ETDETAList.value.ETD = ''
    isETD.value = false
    ETDTime.value = ''
    ETDSelect.value = ''
    ETDRadio.value = 0
  }
  if (val.includes('ETA')) {
    OceanCheckedList.value.splice(OceanCheckedList.value.indexOf('ETA'), 1)
    ETDETAList.value.ETA = ''
    isETA.value = false
    ETATime.value = ''
    ETASelect.value = ''
    ETARadio.value = 0
  }
  emit('ChangeCheckRules', ETDETAList.value)
}

// 清除所有数据
const ClearData = () => {
  OceanCheckedList.value = []
  ETDETAList.value.ETD = ''
  isETD.value = false
  ETDETAList.value.ETA = ''
  isETA.value = false
  ETDRadio.value = 0
  ETARadio.value = 0
  ETDTime.value = ''
  ETDSelect.value = ''
  ETATime.value = ''
  ETASelect.value = ''
}

defineExpose({
  closeETD,
  ClearData
})

const clampedValue = 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)
    }
  }
})
</script>
<template>
  <div class="Ocean_collapse">
    <el-collapse v-model="OceanActive">
      <el-collapse-item name="ETDShipments">
        <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="ETD">
              <div>ETD</div>
              <div v-if="isETD" style="margin-top: 16px">
                <el-radio-group v-model="ETDRadio" @change="changeETDRadio">
                  <el-radio value="1">Notify for all changes</el-radio>
                  <el-radio value="2"
                    >Notify only when time difference
                    <span class="delayedIcon">≥</span>
                    <el-input
                      v-model="clampedValue"
                      class="input-with-select"
                      @input="changedeparture('ETD')"
                    >
                      <template #append>
                        <el-select
                          v-model="ETDSelect"
                          placeholder="Select"
                          @change="changedeparture('ETD')"
                        >
                          <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
                  ></el-radio>
                </el-radio-group>
              </div>
            </el-checkbox>
            <el-checkbox class="delayedType" value="ETA">
              <div>ETA</div>
              <div v-if="isETA" style="margin-top: 16px">
                <el-radio-group v-model="ETARadio" @change="changeETARadio">
                  <el-radio value="1">Notify for all changes</el-radio>
                  <el-radio value="2"
                    >Notify only when time difference
                    <span class="delayedIcon">≥</span>
                    <el-input
                      v-model="clampedETAValue"
                      class="input-with-select"
                      @input="changedeparture('ETA')"
                    >
                      <template #append>
                        <el-select
                          v-model="ETASelect"
                          placeholder="Select"
                          @change="changedeparture('ETA')"
                        >
                          <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
                  ></el-radio>
                </el-radio-group>
              </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;
}
:deep(.el-radio) {
  border: none !important;
}
:deep( .el-radio__inner) {
  border: 1px solid var(--color-system-checkbox-border);
}
.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);
}
.delayedIcon {
  margin: 0 8px;
}
.oceanCheckbox {
  margin-bottom: 8px;
}
: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: center !important;
}
:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: var(--color-neutral-1);
}
: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>