k_online_ui/src/components/AddRules/src/AddRules.vue

<script lang="ts" setup>
import { ref, watch } 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 NotiMethods from './components/NotiMethods.vue'
import submitsucessful from './images/submit_successful.png'
interface CheckboxItem {
  value: string
  label: string
}

interface Props {
  SystemList: Object
  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 SystemList = ref(props.SystemList)
const RulesActive = ref(['SelectMilestone', 'NotificationFrequency', 'NotificationMethod'])
const OceanCheckList = ref()
const AirCheckList = ref()
const ContainerOceanList = ref()
const IsFirstActive = ref(true)
const IsTwoActive = ref(true)
const IsThreeActive = ref(true)
const CancelRulesVisible = ref(false)
const UnableSaveVisible = 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()

watch(
  () => props.SystemList,
  (current) => {
    SystemList.value = current
    FrequencyDataMil.value = current['Milestone_Update']
    MethodsDataMil.value = current['Milestone_Update']
    FrequencyDataCon.value = current['Container_Status_Update']
    MethodsDataCon.value = current['Container_Status_Update']
    FrequencyDataDep.value = current['Departure/Arrival_Delay']
    MethodsDataDep.value = current['Departure/Arrival_Delay']
    FrequencyDataETD.value = current['ETD/ETA_Change']
    MethodsDataETD.value = current['ETD/ETA_Change']
    Initdata(current)
  }
)

// 初始赋值
const Initdata = (val: any) => {
  MilestoneOceanListInit.value = val.Milestone_Update.OceanCheckBoxList
  MilestoneOceanListChecked.value = val.Milestone_Update.OceanCheckedList
  OceanCheckList.value = val.Milestone_Update.OceanCheckedList
  MilestoneAirListInit.value = val.Milestone_Update.AirCheckBoxList
  MilestoneAirListChecked.value = val.Milestone_Update.AirCheckedList
  AirCheckList.value = val.Milestone_Update.AirCheckedList
  ContainerOceanListInit.value = val.Container_Status_Update.CtnrCheckBoxList
  ContainerOceanListChecked.value = val.Container_Status_Update.CtnrCheckedList
  ContainerOceanList.value = val.Container_Status_Update.CtnrCheckedList
  let OceanObj: any = {}
  OceanObj.atd_etd = val['Departure/Arrival_Delay'].ocean_atd_sub_etd
  OceanObj.atd_etd_unit = val['Departure/Arrival_Delay'].ocean_atd_sub_etd_unit
  OceanObj.ata_eta = val['Departure/Arrival_Delay'].ocean_ata_sub_eta
  OceanObj.ata_eta_unit = val['Departure/Arrival_Delay'].ocean_ata_sub_eta_unit
  DelayedDataInit.value = OceanObj
  let AirObj: any = {}
  AirObj.atd_etd = val['Departure/Arrival_Delay'].air_atd_sub_etd
  AirObj.atd_etd_unit = val['Departure/Arrival_Delay'].air_atd_sub_etd_unit
  AirObj.ata_eta = val['Departure/Arrival_Delay'].air_ata_sub_eta
  AirObj.ata_eta_unit = val['Departure/Arrival_Delay'].air_ata_sub_eta_unit
  DelayedDataInitAir.value = AirObj
  let OceanChange: any = {}
  OceanChange.ETDradio = val['ETD/ETA_Change'].ocean_etd_change
  OceanChange.etd_old_sub_new = val['ETD/ETA_Change'].ocean_etd_old_sub_new
  OceanChange.etd_old_sub_new_unit = val['ETD/ETA_Change'].ocean_etd_old_sub_new_unit
  OceanChange.ETAradio = val['ETD/ETA_Change'].ocean_eta_change
  OceanChange.eta_old_sub_new = val['ETD/ETA_Change'].ocean_eta_old_sub_new
  OceanChange.eta_old_sub_new_unit = val['ETD/ETA_Change'].ocean_eta_old_sub_new_unit
  OceanETDInit.value = OceanChange
  let AirChange: any = {}
  AirChange.ETDradio = val['ETD/ETA_Change'].air_etd_change
  AirChange.etd_old_sub_new = val['ETD/ETA_Change'].air_etd_old_sub_new
  AirChange.etd_old_sub_new_unit = val['ETD/ETA_Change'].air_etd_old_sub_new_unit
  AirChange.ETAradio = val['ETD/ETA_Change'].air_eta_change
  AirChange.eta_old_sub_new = val['ETD/ETA_Change'].air_eta_old_sub_new
  AirChange.eta_old_sub_new_unit = val['ETD/ETA_Change'].air_eta_old_sub_new_unit
  AirETDInit.value = AirChange
}

// 给tag list赋值
const ChangeCheckOceanRules = (val: any) => {
  OceanCheckList.value = val
}
const ChangeContainerRules = (val: any) => {
  ContainerOceanList.value = val
}
// 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) => {
  AirCheckList.value = 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)
}

const emits = defineEmits(['UnsavedCollapse', 'SavedAddedRules'])
// 不保存修改的折叠面板
const UnsavedCollapse = () => {
  CancelRulesVisible.value = false
  emits('UnsavedCollapse')
}

// 保存subscribe配置
const missingmessage = ref('')
// 保存成功调用接口
const SaveSuceessful = () => {
  $api
    .Savesubscribe({
      ...savesubscribeobj
    })
    .then((res: any) => {
      if (res.code === 200) {
        SaveedVisible.value = true
        setTimeout(() => {
          SaveedVisible.value = false
          emits('SavedAddedRules', res.data.addedRules, savesubscribeobj.rules_type)
        }, 3000)
      }
    })
}
const Savesubscribe = () => {
  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
    ) {
      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 = OceanCheckList.value
      savesubscribeobj.air_milestone = AirCheckList.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_Update') {
    OceanCheckList.value = []
    AirCheckList.value = []
    MilFrequencyList.value = []
    MilMethodsList.value = []
    MilestoneOceanListChecked.value = []
    MilestoneAirListChecked.value = []
    handleCloseRadio('Mil')
  } else if (val == 'Container_Status_Update') {
    ContainerOceanList.value = []
    ConFrequencyList.value = []
    ConMethodsList.value = []
    ContainerOceanListChecked.value = []
    handleCloseRadio('Con')
  } else if (val == 'Departure/Arrival_Delay') {
    DelayedDeparturedList.value = []
    DelayedAirdList.value = []
    DepFrequencyList.value = []
    DepMethodsList.value = []
    OceanDelayed.value.ClearData()
    AirDelayed.value.ClearData()
    handleCloseRadio('Dep')
  } else {
    ETDOceanList.value = []
    ETDAirList.value = []
    ETDFrequencyList.value = []
    ETDMethodsList.value = []
    handleCloseRadio('ETD')
    OceanETD.value.ClearData()
    AirETD.value.ClearData()
  }
}

defineExpose({
  clearData
})
</script>
<template>
  <div class="Rules_flex">
    <div class="Rules_left">
      <div class="Rules_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">
                  <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">
                  <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">
                  <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">
                  <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">
                  <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">
                  <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
        :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>
  <div class="Rules_buttom">
    <el-button class="el-button--dark rules_button" @click="Savesubscribe">Save</el-button>
    <el-button @click="CancelRulesVisible = true" class="rules_button" type="default"
      >Cancel</el-button
    >
    <!-- 取消保存 -->
    <el-dialog v-model="CancelRulesVisible" width="480">
      <div>You have unsaved changes.</div>
      <div>Are you sure you want to leave this page?</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="default" @click="CancelRulesVisible = false" style="width: 100px"
            >Cancel</el-button
          >
          <el-button class="el-button--warning" @click="UnsavedCollapse" style="width: 100px">
            OK
          </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>
          Unsaved Changes
        </div>
      </template>
    </el-dialog>
    <!-- 保存失败 -->
    <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>
  </div>
</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: #fff !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: #fff !important;
  padding: 0 8px !important;
  height: 40px !important;
}
:deep(.Ocean_collapse .el-collapse-item) {
  background-color: var(--color-dialog-header-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-dialog-header-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-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: #fff;
}
:deep(footer.el-dialog__footer) {
  border-top: none;
}
:deep(.el-collapse) {
  margin-right: 8px;
}
</style>