k_online_ui/src/components/CreateAddRules/src/CreateAddRules.vue

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import RulesShipments from './components/RulesShipments.vue'
import AddedrluesTag from './components/AddedrluesTag.vue'
import DelayedType from './components/DelayedType.vue'
import ETDShipments from './components/ETDShipments.vue'
import NotiFrequency from './components/NotiFrequency.vue'
import ShipmentRange from './components/ShipmentRange.vue'
import NotiMethods from './components/NotiMethods.vue'
import submitsucessful from './images/submit_successful.png'
import { useRouter } from 'vue-router'

const router = useRouter()
interface CheckboxItem {
  value: string
  label: string
}

interface Props {
  TitleType: String
}
const MilestoneOceanListInit = ref<CheckboxItem[]>([])
const MilestoneOceanListChecked = ref([])
const MilestoneAirListInit = ref<CheckboxItem[]>([])
const MilestoneAirListChecked = ref([])
const ContainerOceanListInit = ref<CheckboxItem[]>([])
const ContainerOceanListChecked = ref([])
const props = defineProps<Props>()
let savesubscribeobj: any = {}
const RulesActive = ref([
  'ShipmentRange',
  'SelectMilestone',
  'NotificationFrequency',
  'NotificationMethod'
])
const OceanCheckList = ref()
const OceanCheckListCode = ref()
const AirCheckList = ref()
const AirCheckListCode = ref()
const ContainerOceanList = ref()
const ContainerOceanCode = ref()
const IsFirstActive = ref(true)
const IsTwoActive = ref(true)
const IsThreeActive = ref(true)
const IsFourActive = ref(true)
const UnableSaveVisible = ref(false)
const SaveVisibleError = ref(false)
const SaveVisibleDetected = ref(false)
const SaveedVisible = ref(false)
const DelayedDeparturedList = ref()
const DelayedAirdList = ref()
const ETDOceanList = ref()
const ETDAirList = ref()
const FrequencyDataMil = ref()
const FrequencyDataCon = ref()
const FrequencyDataDep = ref()
const FrequencyDataETD = ref()
const MethodsDataMil = ref()
const MethodsDataCon = ref()
const MethodsDataDep = ref()
const MethodsDataETD = ref()
const DelayedDataInit = ref()
const DelayedDataInitAir = ref()
const OceanETDInit = ref()
const AirETDInit = ref()
const ShipmentRangeMil = ref()
const ShipmentRangeCon = ref()
const ShipmentRangeDep = ref()
const ShipmentRangeETD = ref()

const MonitoringList = ref()
const getInitMonitoring = () => {
  $api
    .MonitoringInit({})
    .then((res: any) => {
      if (res.code === 200) {
        MonitoringList.value = res.data
        MilestoneOceanListInit.value = res.data.OceanCheckBoxList
        MilestoneAirListInit.value = res.data.AirCheckBoxList
        ContainerOceanListInit.value = res.data.CtnrCheckBoxList
      }
    })
    .finally(() => {})
}
onMounted(() => {
  getInitMonitoring()
  Initdata()
})
// 初始赋值
const editTableidtwo = ref('')
const Initdata = () => {
  if (sessionStorage.getItem('editTableid') != null) {
    const editTableid = sessionStorage.getItem('editTableid')
    editTableidtwo.value = sessionStorage.getItem('editTableid')
    const editTablerules_type = sessionStorage.getItem('editTablerules_type')
    $api
      .EditMonitoringTable({
        id: editTableid,
        rules_type: editTablerules_type
      })
      .then((res: any) => {
        if (res.code === 200) {
          if (editTablerules_type == 'Milestone_Update') {
            FrequencyDataMil.value = res.data.Milestone_Update
            MethodsDataMil.value = res.data.Milestone_Update
            ShipmentRangeMil.value = res.data.Milestone_Update
            MilestoneOceanListInit.value = res.data.Milestone_Update.OceanCheckBoxList
            MilestoneOceanListChecked.value = res.data.Milestone_Update.OceanCheckedList
            OceanCheckList.value = []
            // 遍历选中的value值，找到对应的label值
            MilestoneOceanListChecked.value.forEach((value) => {
              const option = MilestoneOceanListInit.value.find((item) => item.value === value)
              if (option) {
                OceanCheckList.value.push(option.label)
              }
            })
            MilestoneAirListInit.value = res.data.Milestone_Update.AirCheckBoxList
            MilestoneAirListChecked.value = res.data.Milestone_Update.AirCheckedList
            AirCheckList.value = []
            // 遍历选中的value值，找到对应的label值
            MilestoneAirListChecked.value.forEach((value) => {
              const option = MilestoneAirListInit.value.find((item) => item.value === value)
              if (option) {
                AirCheckList.value.push(option.label)
              }
            })
            createListMilestone.value = res.data.Milestone_Update.shipment_details
          } else if (editTablerules_type == 'Container_Status_Update') {
            ContainerOceanListInit.value = res.data.Container_Status_Update.CtnrCheckBoxList
            ContainerOceanListChecked.value = res.data.Container_Status_Update.CtnrCheckedList
            ContainerOceanList.value = []
            // 遍历选中的value值，找到对应的label值
            ContainerOceanListChecked.value.forEach((value) => {
              const option = ContainerOceanListInit.value.find((item) => item.value === value)
              if (option) {
                ContainerOceanList.value.push(option.label)
              }
            })
            FrequencyDataCon.value = res.data.Container_Status_Update
            MethodsDataCon.value = res.data.Container_Status_Update
            ShipmentRangeCon.value = res.data.Container_Status_Update
          } else if (editTablerules_type == 'Departure/Arrival_Delay') {
            let OceanObj: any = {}
            OceanObj.atd_etd = res.data['Departure/Arrival_Delay'].ocean_atd_sub_etd
            OceanObj.atd_etd_unit = res.data['Departure/Arrival_Delay'].ocean_atd_sub_etd_unit
            OceanObj.ata_eta = res.data['Departure/Arrival_Delay'].ocean_ata_sub_eta
            OceanObj.ata_eta_unit = res.data['Departure/Arrival_Delay'].ocean_ata_sub_eta_unit
            DelayedDataInit.value = OceanObj
            let AirObj: any = {}
            AirObj.atd_etd = res.data['Departure/Arrival_Delay'].air_atd_sub_etd
            AirObj.atd_etd_unit = res.data['Departure/Arrival_Delay'].air_atd_sub_etd_unit
            AirObj.ata_eta = res.data['Departure/Arrival_Delay'].air_ata_sub_eta
            AirObj.ata_eta_unit = res.data['Departure/Arrival_Delay'].air_ata_sub_eta_unit
            DelayedDataInitAir.value = AirObj
            FrequencyDataDep.value = res.data['Departure/Arrival_Delay']
            MethodsDataDep.value = res.data['Departure/Arrival_Delay']
            ShipmentRangeDep.value = res.data['Departure/Arrival_Delay']
          } else if (editTablerules_type == 'ETD/ETA_Change') {
            let OceanChange: any = {}
            OceanChange.ETDradio = res.data['ETD/ETA_Change'].ocean_etd_change
            OceanChange.etd_old_sub_new = res.data['ETD/ETA_Change'].ocean_etd_old_sub_new
            OceanChange.etd_old_sub_new_unit = res.data['ETD/ETA_Change'].ocean_etd_old_sub_new_unit
            OceanChange.ETAradio = res.data['ETD/ETA_Change'].ocean_eta_change
            OceanChange.eta_old_sub_new = res.data['ETD/ETA_Change'].ocean_eta_old_sub_new
            OceanChange.eta_old_sub_new_unit = res.data['ETD/ETA_Change'].ocean_eta_old_sub_new_unit
            OceanETDInit.value = OceanChange
            let AirChange: any = {}
            AirChange.ETDradio = res.data['ETD/ETA_Change'].air_etd_change
            AirChange.etd_old_sub_new = res.data['ETD/ETA_Change'].air_etd_old_sub_new
            AirChange.etd_old_sub_new_unit = res.data['ETD/ETA_Change'].air_etd_old_sub_new_unit
            AirChange.ETAradio = res.data['ETD/ETA_Change'].air_eta_change
            AirChange.eta_old_sub_new = res.data['ETD/ETA_Change'].air_eta_old_sub_new
            AirChange.eta_old_sub_new_unit = res.data['ETD/ETA_Change'].air_eta_old_sub_new_unit
            AirETDInit.value = AirChange
            FrequencyDataETD.value = res.data['ETD/ETA_Change']
            MethodsDataETD.value = res.data['ETD/ETA_Change']
            ShipmentRangeETD.value = res.data['ETD/ETA_Change']
          }
        }
      })
    setTimeout(() => {
      sessionStorage.removeItem('editTableid')
      sessionStorage.removeItem('editTablerules_type')
    }, 1000)
  }
}

// 给tag list赋值
const ChangeCheckOceanRules = (val: any, value: any) => {
  OceanCheckList.value = val
  OceanCheckListCode.value = value
}
const ChangeContainerRules = (val: any, value: any) => {
  ContainerOceanList.value = val
  ContainerOceanCode.value = value
}
// delayed赋值
const ChangeDeayedRules = (val: any) => {
  DelayedDeparturedList.value = []
  if (val.Departure != '') {
    DelayedDeparturedList.value.push(val.Departure)
    savesubscribeobj.ocean_atd_sub_etd = val.Departure.split(' ')[3]
    savesubscribeobj.ocean_atd_sub_etd_unit = val.Departure.split(' ')[4]
  } else {
    delete savesubscribeobj.ocean_atd_sub_etd
    delete savesubscribeobj.ocean_atd_sub_etd_unit
  }
  if (val.Arrival != '') {
    DelayedDeparturedList.value.push(val.Arrival)
    savesubscribeobj.ocean_ata_sub_eta = val.Arrival.split(' ')[4]
    savesubscribeobj.ocean_ata_sub_eta_unit = val.Arrival.split(' ')[5]
  } else {
    delete savesubscribeobj.ocean_ata_sub_eta
    delete savesubscribeobj.ocean_ata_sub_eta_unit
  }
}
const ChangeAirRules = (val: any) => {
  DelayedAirdList.value = []
  if (val.Departure != '') {
    DelayedAirdList.value.push(val.Departure)
    savesubscribeobj.air_atd_sub_etd = val.Departure.split(' ')[3]
    savesubscribeobj.air_atd_sub_etd_unit = val.Departure.split(' ')[4]
  } else {
    delete savesubscribeobj.air_atd_sub_etd
    delete savesubscribeobj.air_atd_sub_etd_unit
  }
  if (val.Arrival != '') {
    DelayedAirdList.value.push(val.Arrival)
    savesubscribeobj.air_ata_sub_eta = val.Arrival.split(' ')[4]
    savesubscribeobj.air_ata_sub_eta_unit = val.Arrival.split(' ')[5]
  } else {
    delete savesubscribeobj.air_ata_sub_eta
    delete savesubscribeobj.air_ata_sub_eta_unit
  }
}
const ChangeCheckAirRules = (val: any, value: any) => {
  AirCheckList.value = val
  AirCheckListCode.value = value
}

//选择create new rules
const createListMilestone = ref()
const createListContainer = ref()
const createListDeparture = ref()
const createListETDChange = ref()

let createObj: any = {
  Transportstr: '',
  Timestr: ''
}
const changecheckCreateRulesMilestone = (val: any, value: any) => {
  createListMilestone.value = []
  createObj.Transportstr = val
  if (createObj.Transportstr != '') {
    createListMilestone.value.push(createObj.Transportstr)
  }
  if (createObj.Timestr != '') {
    createListMilestone.value.push(createObj.Timestr)
  }
  savesubscribeobj.shipment_transport_mode = value
  savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
}
const ChangeCheckTimeRulesMilestone = (val: any, time: any) => {
  createListMilestone.value = []
  createObj.Timestr = val
  if (val.includes('ETD')) {
    savesubscribeobj.shipment_etd_limit = time
    savesubscribeobj.shipment_eta_limit = ''
  }
  if (val.includes('ETA')) {
    savesubscribeobj.shipment_eta_limit = time
    savesubscribeobj.shipment_etd_limit = ''
  }
  if (createObj.Transportstr != '') {
    createListMilestone.value.push(createObj.Transportstr)
  }
  if (createObj.Timestr != '') {
    createListMilestone.value.push(createObj.Timestr)
  }
  savesubscribeobj.shipment_details = createListMilestone.value.join(';\n')
}
const changecheckCreateRulesContainer = (val: any, value: any) => {
  createListContainer.value = []
  createObj.Transportstr = val
  if (createObj.Transportstr != '') {
    createListContainer.value.push(createObj.Transportstr)
  }
  if (createObj.Timestr != '') {
    createListContainer.value.push(createObj.Timestr)
  }
  savesubscribeobj.shipment_transport_mode = value
  savesubscribeobj.shipment_details = createListContainer.value.join(';\n')
}
const ChangeCheckTimeRulesContainer = (val: any, time: any) => {
  createListContainer.value = []
  createObj.Timestr = val
  if (val.includes('ETD')) {
    savesubscribeobj.shipment_etd_limit = time
    savesubscribeobj.shipment_eta_limit = ''
  }
  if (val.includes('ETA')) {
    savesubscribeobj.shipment_eta_limit = time
    savesubscribeobj.shipment_etd_limit = ''
  }
  if (createObj.Transportstr != '') {
    createListContainer.value.push(createObj.Transportstr)
  }
  if (createObj.Timestr != '') {
    createListContainer.value.push(createObj.Timestr)
  }
  savesubscribeobj.shipment_details = createListContainer.value.join(';\n')
}
const changecheckCreateRulesDeparture = (val: any, value: any) => {
  createListDeparture.value = []
  createObj.Transportstr = val
  if (createObj.Transportstr != '') {
    createListDeparture.value.push(createObj.Transportstr)
  }
  if (createObj.Timestr != '') {
    createListDeparture.value.push(createObj.Timestr)
  }
  savesubscribeobj.shipment_transport_mode = value
  savesubscribeobj.shipment_details = createListDeparture.value.join(';\n')
}
const ChangeCheckTimeRulesDeparture = (val: any, time: any) => {
  createListDeparture.value = []
  createObj.Timestr = val
  if (val.includes('ETD')) {
    savesubscribeobj.shipment_etd_limit = time
    savesubscribeobj.shipment_eta_limit = ''
  }
  if (val.includes('ETA')) {
    savesubscribeobj.shipment_eta_limit = time
    savesubscribeobj.shipment_etd_limit = ''
  }
  if (createObj.Transportstr != '') {
    createListDeparture.value.push(createObj.Transportstr)
  }
  if (createObj.Timestr != '') {
    createListDeparture.value.push(createObj.Timestr)
  }
  savesubscribeobj.shipment_details = createListDeparture.value.join(';\n')
}
const changecheckCreateRulesETDChange = (val: any, value: any) => {
  createListETDChange.value = []
  createObj.Transportstr = val
  if (createObj.Transportstr != '') {
    createListETDChange.value.push(createObj.Transportstr)
  }
  if (createObj.Timestr != '') {
    createListETDChange.value.push(createObj.Timestr)
  }
  savesubscribeobj.shipment_transport_mode = value
  savesubscribeobj.shipment_details = createListETDChange.value.join(';\n')
}
const ChangeCheckTimeRulesETDChange = (val: any, time: any) => {
  createListETDChange.value = []
  createObj.Timestr = val
  if (val.includes('ETD')) {
    savesubscribeobj.shipment_etd_limit = time
    savesubscribeobj.shipment_eta_limit = ''
  }
  if (val.includes('ETA')) {
    savesubscribeobj.shipment_eta_limit = time
    savesubscribeobj.shipment_etd_limit = ''
  }
  if (createObj.Transportstr != '') {
    createListETDChange.value.push(createObj.Transportstr)
  }
  if (createObj.Timestr != '') {
    createListETDChange.value.push(createObj.Timestr)
  }
  savesubscribeobj.shipment_details = createListETDChange.value.join(';\n')
}
// 删除create tag
const ShipmentRangeRef = ref()
const handleCloseCreateRule = (val: any) => {
  if (val.indexOf('ETD') != -1 || val.indexOf('ETA') != -1) {
    createObj.Timestr = ''
  } else if (val.indexOf('Transport') != -1) {
    createObj.Transportstr = ''
  }
  ShipmentRangeRef.value.handleCloseCreateRule(val)
}
// 更改Frequency时间
const MilFrequencyList = ref([])
const ChangeMilFrequency = (val: any, type: any) => {
  MilFrequencyList.value = val
  savesubscribeobj = { ...savesubscribeobj, ...type }
}
const ConFrequencyList = ref([])
const ChangeConFrequency = (val: any, type: any) => {
  ConFrequencyList.value = val
  savesubscribeobj = { ...savesubscribeobj, ...type }
}
const DepFrequencyList = ref([])
const ChangeDepFrequency = (val: any, type: any) => {
  DepFrequencyList.value = val
  savesubscribeobj = { ...savesubscribeobj, ...type }
}
const ETDFrequencyList = ref([])
const ChangeETDFrequency = (val: any, type: any) => {
  ETDFrequencyList.value = val
  savesubscribeobj = { ...savesubscribeobj, ...type }
}

// 删除 Frequency tag
const NotiFrequencyDeleteMil = ref()
const NotiFrequencyDeleteCon = ref()
const NotiFrequencyDeleteDep = ref()
const NotiFrequencyDeleteETD = ref()
const handleCloseRadio = (val: any) => {
  if (val == 'Mil') {
    NotiFrequencyDeleteMil.value.handleCloseRadioFrequency()
  } else if (val == 'Con') {
    NotiFrequencyDeleteCon.value.handleCloseRadioFrequency()
  } else if (val == 'Dep') {
    NotiFrequencyDeleteDep.value.handleCloseRadioFrequency()
  } else {
    NotiFrequencyDeleteETD.value.handleCloseRadioFrequency()
  }
}

// methods 切换
const MilMethodsList = ref([])
const ChangeMethodsAddMil = (val: any, type: any) => {
  MilMethodsList.value = val
  savesubscribeobj = { ...savesubscribeobj, ...type }
}
const ConMethodsList = ref([])
const ChangeMethodsAddCon = (val: any, type: any) => {
  ConMethodsList.value = val
  savesubscribeobj = { ...savesubscribeobj, ...type }
}
const DepMethodsList = ref([])
const ChangeMethodsAddDep = (val: any, type: any) => {
  DepMethodsList.value = val
  savesubscribeobj = { ...savesubscribeobj, ...type }
}
const ETDMethodsList = ref([])
const ChangeMethodsAddETD = (val: any, type: any) => {
  ETDMethodsList.value = val
  savesubscribeobj = { ...savesubscribeobj, ...type }
}
const OceanDelayed = ref()
const AirDelayed = ref()

const handleCloseDelayed = (val: any) => {
  OceanDelayed.value.closeDelayed(val)
}
const handleCloseAirDelayed = (val: any) => {
  AirDelayed.value.closeDelayed(val)
}
// ETD Change
const ChangeETDOceanRules = (val: any) => {
  ETDOceanList.value = []
  if (val.ETD != '') {
    if (val.ETD.indexOf('≥') != -1) {
      savesubscribeobj.ocean_etd_change = false
      savesubscribeobj.ocean_etd_old_sub_new = val.ETD.split(' ')[6]
      savesubscribeobj.ocean_etd_old_sub_new_unit = val.ETD.split(' ')[7]
    } else {
      savesubscribeobj.ocean_etd_change = true
    }
    ETDOceanList.value.push(val.ETD)
  } else {
    delete savesubscribeobj.ocean_etd_change
    delete savesubscribeobj.ocean_etd_old_sub_new
    delete savesubscribeobj.ocean_etd_old_sub_new_unit
  }
  if (val.ETA != '') {
    if (val.ETA.indexOf('≥') != -1) {
      savesubscribeobj.ocean_eta_change = false
      savesubscribeobj.ocean_eta_old_sub_new = val.ETA.split(' ')[6]
      savesubscribeobj.ocean_eta_old_sub_new_unit = val.ETA.split(' ')[7]
    } else {
      savesubscribeobj.ocean_eta_change = true
    }
    ETDOceanList.value.push(val.ETA)
  } else {
    delete savesubscribeobj.ocean_eta_change
    delete savesubscribeobj.ocean_eta_old_sub_new
    delete savesubscribeobj.ocean_eta_old_sub_new_unit
  }
}
// 删除ETD tag
const OceanETD = ref()
const closeOceanETD = (val: any) => {
  OceanETD.value.closeETD(val)
}
// ETA Change
const ChangeETDAirRules = (val: any) => {
  ETDAirList.value = []
  if (val.ETD != '') {
    if (val.ETD.indexOf('≥') != -1) {
      savesubscribeobj.air_etd_change = false
      savesubscribeobj.air_etd_old_sub_new = val.ETD.split(' ')[6]
      savesubscribeobj.air_etd_old_sub_new_unit = val.ETD.split(' ')[7]
    } else {
      savesubscribeobj.air_etd_change = true
    }
    ETDAirList.value.push(val.ETD)
  } else {
    delete savesubscribeobj.air_etd_change
    delete savesubscribeobj.air_etd_old_sub_new
    delete savesubscribeobj.air_etd_old_sub_new_unit
  }
  if (val.ETA != '') {
    if (val.ETA.indexOf('≥') != -1) {
      savesubscribeobj.air_eta_change = false
      savesubscribeobj.air_eta_old_sub_new = val.ETA.split(' ')[6]
      savesubscribeobj.air_eta_old_sub_new_unit = val.ETA.split(' ')[7]
    } else {
      savesubscribeobj.air_eta_change = true
    }
    ETDAirList.value.push(val.ETA)
  } else {
    delete savesubscribeobj.air_eta_change
    delete savesubscribeobj.air_eta_old_sub_new
    delete savesubscribeobj.air_eta_old_sub_new_unit
  }
}

// 删除ETA tag
const AirETD = ref()
const closeAirETD = (val: any) => {
  AirETD.value.closeETD(val)
}

// 保存subscribe配置
const missingmessage = ref('')
// 保存成功调用接口
const SaveSuceessful = () => {
  $api
    .MonitoringSave({
      ...savesubscribeobj,
      is_similar_rule: false,
      id: editTableidtwo.value
    })
    .then((res: any) => {
      if (res.code === 200) {
        console.log(res.data)
        if(res.data.msg == 'Update Successful') {
          SaveedVisible.value = true
          setTimeout(() => {
            SaveedVisible.value = false
            sessionStorage.setItem('activeTab', 'Monitoring Settings')
            router.push({
              path: '/SystemSettings',
              query: {}
            })
          }, 3000)
        } else if(res.data.msg == 'Similar Rule Detected') {
          SaveVisibleDetected.value = true
        } else if(res.data.msg == 'Unable to Save')
        SaveVisibleError.value = true
      }
    })
}

const HandelSaveVisibleDetected = () => {
  SaveVisibleDetected.value = false
  $api
    .MonitoringSave({
      ...savesubscribeobj,
      is_similar_rule: true,
      id: editTableidtwo.value
    })
    .then((res: any) => {
      if (res.code === 200) {
          SaveedVisible.value = true
          setTimeout(() => {
            SaveedVisible.value = false
            sessionStorage.setItem('activeTab', 'Monitoring Settings')
            router.push({
              path: '/SystemSettings',
              query: {}
            })
          }, 3000)
      }
    })
}
const Savesubscribe = () => {
  missingmessage.value = ''
  let str = ''
  if (props.TitleType == 'Milestone') {
    savesubscribeobj.rules_type = 'Milestone_Update'
    if (
      OceanCheckList.value == undefined ||
      AirCheckList.value == undefined ||
      MilFrequencyList.value.length == 0 ||
      MilMethodsList.value.length == 0 ||
      createObj.Transportstr == '' ||
      createObj.Timestr == ''
    ) {
      if (createObj.Transportstr == '') {
        missingmessage.value += 'Transport Mode, '
      }
      if (createObj.Timestr == '') {
        missingmessage.value += 'Time, '
      }
      if (OceanCheckList.value == undefined) {
        missingmessage.value += 'Ocean Shipments, '
      }
      if (AirCheckList.value == undefined) {
        missingmessage.value += 'Air Shipments, '
      }
      if (MilFrequencyList.value.length == 0) {
        missingmessage.value += 'Notification Frequency, '
      }
      if (MilMethodsList.value.length == 0) {
        missingmessage.value += 'Notification Method, '
      }
      missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
      UnableSaveVisible.value = true
    } else {
      savesubscribeobj.ocean_milestone = OceanCheckListCode.value
      savesubscribeobj.air_milestone = AirCheckListCode.value
      str =
        'Ocean Milestones: ' +
        OceanCheckList.value.join(',') +
        ';\nAir Milestones: ' +
        AirCheckList.value.join(',') +
        ';'
      savesubscribeobj.event_details = str
      SaveSuceessful()
    }
  } else if (props.TitleType == 'Container') {
    savesubscribeobj.rules_type = 'Container_Status_Update'
    if (
      ContainerOceanList.value == undefined ||
      ConFrequencyList.value.length == 0 ||
      ConMethodsList.value.length == 0
    ) {
      if (ContainerOceanList.value == undefined) {
        missingmessage.value += 'Ocean Shipments, '
      }
      if (ConFrequencyList.value.length == 0) {
        missingmessage.value += 'Notification Frequency, '
      }
      if (ConMethodsList.value.length == 0) {
        missingmessage.value += 'Notification Method, '
      }
      missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
      UnableSaveVisible.value = true
    } else {
      savesubscribeobj.ocean_ctnr_status = ContainerOceanList.value
      str = 'Ocean Container: ' + ContainerOceanList.value.join(',')
      savesubscribeobj.event_details = str
      SaveSuceessful()
    }
  } else if (props.TitleType == 'Departure') {
    savesubscribeobj.rules_type = 'Departure/Arrival_Delay'
    if (
      DelayedDeparturedList.value == undefined ||
      DelayedAirdList.value == undefined ||
      DepFrequencyList.value.length == 0 ||
      DepMethodsList.value.length == 0
    ) {
      if (DelayedDeparturedList.value == undefined) {
        missingmessage.value += 'Ocean Shipments, '
      }
      if (DelayedAirdList.value == undefined) {
        missingmessage.value += 'Air Shipments, '
      }
      if (DepFrequencyList.value.length == 0) {
        missingmessage.value += 'Notification Frequency, '
      }
      if (DepMethodsList.value.length == 0) {
        missingmessage.value += 'Notification Method, '
      }
      missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
      UnableSaveVisible.value = true
    } else {
      str = DelayedDeparturedList.value.join(';\n') + ';\n' + DelayedAirdList.value.join(';\n')
      savesubscribeobj.event_details = str
      SaveSuceessful()
    }
  } else {
    savesubscribeobj.rules_type = 'ETD/ETA_Change'
    if (
      ETDOceanList.value == undefined ||
      ETDOceanList.value.length == 0 ||
      ETDAirList.value == undefined ||
      ETDAirList.value.length == 0 ||
      ETDFrequencyList.value.length == 0 ||
      ETDMethodsList.value.length == 0
    ) {
      if (ETDOceanList.value == undefined) {
        missingmessage.value += 'Ocean Shipments, '
      }
      if (ETDAirList.value == undefined) {
        missingmessage.value += 'Air Shipments, '
      }
      if (ETDFrequencyList.value.length == 0) {
        missingmessage.value += 'Notification Frequency, '
      }
      if (ETDMethodsList.value.length == 0) {
        missingmessage.value += 'Notification Method, '
      }
      missingmessage.value = missingmessage.value.substring(0, missingmessage.value.length - 2)
      UnableSaveVisible.value = true
    } else {
      str = ETDOceanList.value.join(';\n') + ';\n' + ETDAirList.value.join(';\n')
      savesubscribeobj.event_details = str
      SaveSuceessful()
    }
  }
}

// 删除表格数据后清空所有数据
const clearData = (val: any) => {
  if (val == 'Milestone') {
    OceanCheckList.value = []
    AirCheckList.value = []
    MilFrequencyList.value = []
    MilMethodsList.value = []
    MilestoneOceanListChecked.value = []
    MilestoneAirListChecked.value = []
    createListMilestone.value = []
  } else if (val == 'Container') {
    ContainerOceanList.value = []
    createListContainer.value = []
    ConFrequencyList.value = []
    ConMethodsList.value = []
    ContainerOceanListChecked.value = []
  } else if (val == 'Departure') {
    DelayedDeparturedList.value = []
    DelayedAirdList.value = []
    DepFrequencyList.value = []
    DepMethodsList.value = []
    createListDeparture.value = []
  } else {
    ETDOceanList.value = []
    ETDAirList.value = []
    ETDFrequencyList.value = []
    ETDMethodsList.value = []
    createListETDChange.value = []
  }
}

defineExpose({
  clearData,
  Savesubscribe,
  Initdata
})
</script>
<template>
  <div class="Rules_flex">
    <div class="Rules_left">
      <div class="Rules_collapse">
        <el-collapse v-model="RulesActive" @change="IsFourActive = !IsFourActive">
          <el-collapse-item name="ShipmentRange">
            <template #title>
              <div class="Rules_Title">
                <span class="iconfont_icon icon_dark">
                  <svg class="iconfont" aria-hidden="true">
                    <use
                      :xlink:href="IsFourActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
                    ></use>
                  </svg>
                </span>
                <span class="stars_red">*</span>Shipment Range
              </div>
            </template>
            <div>
              <ShipmentRange
                ref="ShipmentRangeRef"
                v-if="props.TitleType == 'Milestone'"
                :ShipmentRangeData="ShipmentRangeMil"
                @ChangeCheckRules="changecheckCreateRulesMilestone"
                @ChangeCheckTimeRules="ChangeCheckTimeRulesMilestone"
              ></ShipmentRange>
              <ShipmentRange
                ref="ShipmentRangeRef"
                v-if="props.TitleType == 'Container'"
                :ShipmentRangeData="ShipmentRangeCon"
                @ChangeCheckRules="changecheckCreateRulesContainer"
                @ChangeCheckTimeRules="ChangeCheckTimeRulesContainer"
              ></ShipmentRange>
              <ShipmentRange
                ref="ShipmentRangeRef"
                v-if="props.TitleType == 'Departure'"
                :ShipmentRangeData="ShipmentRangeDep"
                @ChangeCheckRules="changecheckCreateRulesDeparture"
                @ChangeCheckTimeRules="ChangeCheckTimeRulesDeparture"
              ></ShipmentRange>
              <ShipmentRange
                ref="ShipmentRangeRef"
                v-if="props.TitleType == 'ETDChange'"
                :ShipmentRangeData="ShipmentRangeETD"
                @ChangeCheckRules="changecheckCreateRulesETDChange"
                @ChangeCheckTimeRules="ChangeCheckTimeRulesETDChange"
              ></ShipmentRange>
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse
          v-model="RulesActive"
          @change="IsFirstActive = !IsFirstActive"
          v-if="props.TitleType == 'Milestone'"
        >
          <el-collapse-item name="SelectMilestone">
            <template #title>
              <div class="Rules_Title">
                <span class="iconfont_icon icon_dark">
                  <svg class="iconfont" aria-hidden="true">
                    <use
                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
                    ></use>
                  </svg>
                </span>
                <span class="stars_red">*</span>Select Milestone
              </div>
            </template>
            <div>
              <RulesShipments
                Title="Ocean shipments"
                @ChangeCheckRules="ChangeCheckOceanRules"
                :CheckboxList="MilestoneOceanListInit"
                :CheckedList="MilestoneOceanListChecked"
              ></RulesShipments>
            </div>
            <div>
              <RulesShipments
                Title="Air shipments"
                @ChangeCheckRules="ChangeCheckAirRules"
                :CheckboxList="MilestoneAirListInit"
                :CheckedList="MilestoneAirListChecked"
              ></RulesShipments>
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse
          v-model="RulesActive"
          @change="IsFirstActive = !IsFirstActive"
          v-if="props.TitleType == 'Container'"
        >
          <el-collapse-item name="SelectMilestone">
            <template #title>
              <div class="Rules_Title">
                <span class="iconfont_icon icon_dark">
                  <svg class="iconfont" aria-hidden="true">
                    <use
                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
                    ></use>
                  </svg>
                </span>
                <span class="stars_red">*</span>Select Container Status
              </div>
            </template>
            <div>
              <RulesShipments
                Title="Ocean shipments"
                @ChangeCheckRules="ChangeContainerRules"
                :CheckboxList="ContainerOceanListInit"
                :CheckedList="ContainerOceanListChecked"
              ></RulesShipments>
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse
          v-model="RulesActive"
          @change="IsFirstActive = !IsFirstActive"
          v-if="props.TitleType == 'Departure'"
        >
          <el-collapse-item name="SelectMilestone">
            <template #title>
              <div class="Rules_Title">
                <span class="iconfont_icon icon_dark">
                  <svg class="iconfont" aria-hidden="true">
                    <use
                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
                    ></use>
                  </svg>
                </span>
                <span class="stars_red">*</span>Select Delayed Type
              </div>
            </template>
            <div>
              <DelayedType
                Title="Ocean shipments"
                ref="OceanDelayed"
                :DelayedData="DelayedDataInit"
                @ChangeCheckRules="ChangeDeayedRules"
              ></DelayedType>
            </div>
            <div>
              <DelayedType
                Title="Air shipments"
                ref="AirDelayed"
                :DelayedData="DelayedDataInitAir"
                @ChangeCheckRules="ChangeAirRules"
              ></DelayedType>
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse
          v-model="RulesActive"
          @change="IsFirstActive = !IsFirstActive"
          v-if="props.TitleType == 'ETDChange'"
        >
          <el-collapse-item name="SelectMilestone">
            <template #title>
              <div class="Rules_Title">
                <span class="iconfont_icon icon_dark">
                  <svg class="iconfont" aria-hidden="true">
                    <use
                      :xlink:href="IsFirstActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
                    ></use>
                  </svg>
                </span>
                <span class="stars_red">*</span>Select Delayed Type
              </div>
            </template>
            <div>
              <ETDShipments
                Title="Ocean shipments"
                ref="OceanETD"
                :ETDData="OceanETDInit"
                @ChangeCheckRules="ChangeETDOceanRules"
              ></ETDShipments>
            </div>
            <div>
              <ETDShipments
                Title="Air shipments"
                ref="AirETD"
                :ETDData="AirETDInit"
                @ChangeCheckRules="ChangeETDAirRules"
              ></ETDShipments>
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse
          style="margin-top: 17px; margin-right: 16px"
          v-model="RulesActive"
          @change="IsTwoActive = !IsTwoActive"
        >
          <el-collapse-item name="NotificationFrequency">
            <template #title>
              <div class="Rules_Title">
                <span class="iconfont_icon icon_dark">
                  <svg class="iconfont" aria-hidden="true">
                    <use
                      :xlink:href="IsTwoActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
                    ></use>
                  </svg>
                </span>
                <span class="stars_red">*</span>Notification Frequency
              </div>
            </template>
            <NotiFrequency
              v-if="props.TitleType == 'Milestone'"
              ref="NotiFrequencyDeleteMil"
              :FrequencyData="FrequencyDataMil"
              @ChangeFrequencyAdd="ChangeMilFrequency"
            ></NotiFrequency>
            <NotiFrequency
              v-if="props.TitleType == 'Container'"
              ref="NotiFrequencyDeleteCon"
              :FrequencyData="FrequencyDataCon"
              @ChangeFrequencyAdd="ChangeConFrequency"
            ></NotiFrequency>
            <NotiFrequency
              v-if="props.TitleType == 'Departure'"
              ref="NotiFrequencyDeleteDep"
              :FrequencyData="FrequencyDataDep"
              @ChangeFrequencyAdd="ChangeDepFrequency"
            ></NotiFrequency>
            <NotiFrequency
              v-if="props.TitleType == 'ETDChange'"
              ref="NotiFrequencyDeleteETD"
              :FrequencyData="FrequencyDataETD"
              @ChangeFrequencyAdd="ChangeETDFrequency"
            ></NotiFrequency>
          </el-collapse-item>
        </el-collapse>
        <el-collapse
          style="margin: 17px 0"
          v-model="RulesActive"
          @change="IsThreeActive = !IsThreeActive"
        >
          <el-collapse-item name="NotificationMethod">
            <template #title>
              <div class="Rules_Title">
                <span class="iconfont_icon icon_dark">
                  <svg class="iconfont" aria-hidden="true">
                    <use
                      :xlink:href="IsThreeActive ? '#icon-icon_dropdown_b' : '#icon-icon_up_b'"
                    ></use>
                  </svg>
                </span>
                <span class="stars_red">*</span>Notification Method
              </div>
            </template>
            <NotiMethods
              v-if="props.TitleType == 'Milestone'"
              :MethodsData="MethodsDataMil"
              @ChangeMethodsAdd="ChangeMethodsAddMil"
            ></NotiMethods>
            <NotiMethods
              v-if="props.TitleType == 'Container'"
              :MethodsData="MethodsDataCon"
              @ChangeMethodsAdd="ChangeMethodsAddCon"
            ></NotiMethods>
            <NotiMethods
              v-if="props.TitleType == 'Departure'"
              :MethodsData="MethodsDataDep"
              @ChangeMethodsAdd="ChangeMethodsAddDep"
            ></NotiMethods>
            <NotiMethods
              v-if="props.TitleType == 'ETDChange'"
              :MethodsData="MethodsDataETD"
              @ChangeMethodsAdd="ChangeMethodsAddETD"
            ></NotiMethods>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="Rules_right">
      <div class="right_Title">Added Rules</div>
      <AddedrluesTag
        v-if="props.TitleType == 'Milestone'"
        :CheckedList="createListMilestone"
        Title="Shipment Range"
        @handleCloseRadio="handleCloseCreateRule"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Container'"
        :CheckedList="createListContainer"
        Title="Shipment Range"
        @handleCloseRadio="handleCloseCreateRule"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Departure'"
        :CheckedList="createListDeparture"
        Title="Shipment Range"
        @handleCloseRadio="handleCloseCreateRule"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'ETDChange'"
        :CheckedList="createListETDChange"
        Title="Shipment Range"
        @handleCloseRadio="handleCloseCreateRule"
      ></AddedrluesTag>
      <AddedrluesTag
        :CheckedList="DelayedDeparturedList"
        v-if="props.TitleType == 'Departure'"
        @handleCloseRadio="handleCloseDelayed"
        Title="Ocean Shipments"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Milestone'"
        :CheckedList="OceanCheckList"
        Title="Ocean Shipments"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Container'"
        :CheckedList="ContainerOceanList"
        Title="Ocean Shipments"
      ></AddedrluesTag>
      <AddedrluesTag
        :CheckedList="ETDOceanList"
        v-if="props.TitleType == 'ETDChange'"
        Title="Ocean Shipments"
        @handleCloseRadio="closeOceanETD"
      ></AddedrluesTag>
      <AddedrluesTag
        :CheckedList="ETDAirList"
        v-if="props.TitleType == 'ETDChange'"
        @handleCloseRadio="closeAirETD"
        Title="Air Shipments"
      ></AddedrluesTag>
      <AddedrluesTag
        :CheckedList="DelayedAirdList"
        v-if="props.TitleType == 'Departure'"
        @handleCloseRadio="handleCloseAirDelayed"
        Title="Air Shipments"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Milestone'"
        :CheckedList="AirCheckList"
        Title="Air Shipments"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Milestone'"
        :CheckedList="MilFrequencyList"
        Title="Notification Frequency"
        @handleCloseRadio="handleCloseRadio('Mil')"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Container'"
        :CheckedList="ConFrequencyList"
        Title="Notification Frequency"
        @handleCloseRadio="handleCloseRadio('Con')"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Departure'"
        :CheckedList="DepFrequencyList"
        Title="Notification Frequency"
        @handleCloseRadio="handleCloseRadio('Dep')"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'ETDChange'"
        :CheckedList="ETDFrequencyList"
        Title="Notification Frequency"
        @handleCloseRadio="handleCloseRadio('ETD')"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Milestone'"
        :CheckedList="MilMethodsList"
        Title="Notification Method"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Container'"
        :CheckedList="ConMethodsList"
        Title="Notification Method"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'Departure'"
        :CheckedList="DepMethodsList"
        Title="Notification Method"
      ></AddedrluesTag>
      <AddedrluesTag
        v-if="props.TitleType == 'ETDChange'"
        :CheckedList="ETDMethodsList"
        Title="Notification Method"
      ></AddedrluesTag>
    </div>
  </div>
  <el-dialog v-model="UnableSaveVisible" width="480">
    <div>{{ missingmessage }} missing.</div>
    <div>Please complete all required fields.</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          class="el-button--danger"
          @click="UnableSaveVisible = false"
          style="width: 100px"
        >
          OK
        </el-button>
      </div>
    </template>
    <template #header>
      <div class="cancel_header">
        <span class="iconfont_icon iconfont_warning">
          <svg class="iconfont icon_danger" aria-hidden="true">
            <use xlink:href="#icon-icon_fail_fill_b"></use>
          </svg>
        </span>
        Unable to Save
      </div>
    </template>
  </el-dialog>
  <!-- 保存成功 -->
  <el-dialog v-model="SaveedVisible" width="320" style="height: 212px">
    <div style="text-align: center"><el-image :src="submitsucessful" /></div>
    <div style="text-align: center; margin-top: 20px">Saved successfully</div>
  </el-dialog>
  <!-- 保存失败 -->
  <el-dialog v-model="SaveVisibleError" width="480">
      <div>Duplicate Rule Error.</div>
      <div>This rule exactly matches an existing rule.</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            class="el-button--danger"
            @click="SaveVisibleError = false"
            style="width: 100px"
          >
            OK
          </el-button>
        </div>
      </template>
      <template #header>
        <div class="cancel_header">
          <span class="iconfont_icon iconfont_warning">
            <svg class="iconfont icon_danger" aria-hidden="true">
              <use xlink:href="#icon-icon_fail_fill_b"></use>
            </svg>
          </span>
          Unable to Save
        </div>
      </template>
    </el-dialog>
    <!-- 三项重合提示 -->
  <el-dialog v-model="SaveVisibleDetected" width="480">
      <div>A similar configuration rule already exists.</div>
      <div>Would you like to proceed with creating this rule?</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            class="el-button--default"
            @click="SaveVisibleDetected = false"
            style="width: 100px"
          >
            Cancel
          </el-button>
          <el-button
            class="el-button--warning"
            @click="HandelSaveVisibleDetected"
            style="width: 100px"
          >
            Save
          </el-button>
        </div>
      </template>
      <template #header>
        <div class="cancel_header">
          <span class="iconfont_icon iconfont_warning">
            <svg class="iconfont icon_warning" aria-hidden="true">
              <use xlink:href="#icon-icon_tipsfilled_b"></use>
            </svg>
          </span>
          Similar Rule Detected
        </div>
      </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.Rules_flex {
  padding: 0 0 0 8px;
  display: flex;
}
.Rules_left {
  width: 60%;
  border-right: 1px solid var(--color-user-config-title-bottom-border);
}
.Rules_right {
  width: 40%;
  background-color: var(--more-filters-background-color);
}
.right_Title {
  color: var(--color-neutral-1);
  padding: 9px 8px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid var(--color-user-config-title-bottom-border);
  background-color: var(--color-drawer-body-bg);
}
.iconfont {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.icon_danger {
  fill: var(--color-btn-danger-bg);
}
:deep(.Rules_Title) {
  color: var(--color-neutral-1);
  font-size: 14px;
  font-weight: 700;
  height: 22px;
  display: flex;
  align-items: center;
}
.stars_red {
  color: var(--color-danger);
}
:deep(.el-collapse-item__header) {
  height: 25px !important;
  margin: 14px 0 0 0 !important;
  border: none !important;
  padding: 0 !important;
}
:deep(.el-collapse-item__header):hover {
  background-color: var(--color-system-color-bg) !important;
  border: none !important;
}
:deep(.el-collapse-item__arrow) {
  width: 0 !important;
  height: 0 !important;
}
:deep(.el-icon svg) {
  width: 0 !important;
}
:deep(.el-collapse-item__header.is-active) {
  background-color: transparent !important;
  border-color: transparent !important;
}
:deep(.el-collapse-item__arrow.is-active) {
  transform: rotate(-180deg) !important;
}
:deep(.Ocean_collapse .el-collapse-item__arrow) {
  width: 16px !important;
  height: 16px !important;
  background-image: url('../src/images/icon_expand.png') !important;
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(0);
}
:deep(.Ocean_collapse .el-collapse-item__header) {
  background-color: var(--color-system-color-bg) !important;
  padding: 0 8px !important;
  height: 40px !important;
}
:deep(.Ocean_collapse .el-collapse-item) {
  background-color: var(--color-system-color-bg);
  border-radius: 12px;
}
:deep(.Ocean_collapse .el-collapse-item__wrap) {
  padding: 0 8px !important;
}
:deep(.Ocean_collapse .el-collapse-item__header.is-active) {
  background-color: var(--color-system-color-bg) !important;
}
:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: var(--color-neutral-1);
}
.Rules_buttom {
  padding: 8px;
  border-top: 1px solid var(--color-system-border-1);
}
.rules_button {
  width: 100px;
  height: 40px;
}
.cancel_header {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-1);
  display: flex;
  align-items: center;
}
.icon_warning {
  width: 22px;
  height: 22px;
  margin-right: 0;
  fill: var(--color-btn-warning-bg);
}
.iconfont_warning {
  display: flex;
  align-items: center;
}
:deep(header.el-dialog__header) {
  background-color: var(--color-system-body-bg);
}
:deep(footer.el-dialog__footer) {
  border-top: none;
}
:deep(.el-collapse) {
  margin-right: 8px;
}
</style>