<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const notificationvalue = ref()
const notificationoptions = ref([
  {
    label: 'Milestone Update',
    value: 'Milestone'
  },
  {
    label: 'Container Status Update',
    value: 'Container'
  },
  {
    label: 'Departure/Arrival Delay',
    value: 'Departure'
  },
  {
    label: 'ETD/ETA Change',
    value: 'ETDChange'
  }
])
const CancelRulesVisible = ref()
const ChangeRulesVisible = ref()
// 保存
const CreateAddRulesRef = ref()
const saveMonitoring = () => {
  CreateAddRulesRef.value.Savesubscribe()
}
let select: any = ''
const changenotification = (val: any) => {
  select = val
  if (notificationvalue.value != undefined) {
    ChangeRulesVisible.value = true
  }
}
const ChangeRulesVisibleOK = () => {
  ChangeRulesVisible.value = false
  notificationvalue.value = select
  CreateAddRulesRef.value.clearData(select)
}
onMounted(() => {
  if (sessionStorage.getItem('editTableoption') != null) {
    notificationvalue.value = sessionStorage.getItem('editTableoption')
    setTimeout(() => {
      sessionStorage.removeItem('editTableoption')
    }, 1000)
  }
})
</script>
<template>
  <div class="Title">
    <div>Create New Rule</div>
    <div>
      <el-button class="create_button" style="margin-right: 8px;" type="default" @click="CancelRulesVisible = true">
        <span class="iconfont_icon">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#icon-icon_return_b"></use>
          </svg>
        </span>
        Cancel
      </el-button>
      <!-- 取消保存 -->
      <el-dialog v-model="CancelRulesVisible" width="480">
        <div style="font-weight: 400">You have unsaved changes.</div>
        <div style="font-weight: 400">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="router.back()" 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>
      <!-- 切换select -->
      <el-dialog v-model="ChangeRulesVisible" width="480">
        <div style="font-weight: 400">You have unsaved changes.</div>
        <div style="font-weight: 400">Are you sure you want to leave this page?</div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="default" @click="ChangeRulesVisible = false" style="width: 100px"
              >Cancel</el-button
            >
            <el-button
              class="el-button--warning"
              @click="ChangeRulesVisibleOK"
              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-button
        :disabled="notificationvalue == '' || notificationvalue == undefined"
        class="el-button--main create_button"
        @click="saveMonitoring"
      >
        <span class="iconfont_icon">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#icon-icon_save_b"></use>
          </svg>
        </span>
        Save
      </el-button>
    </div>
  </div>
  <div class="contetnt">
    <div class="notification">
      <div class="notification_title">Notification Events</div>
      <div>
        <el-select v-model="notificationvalue" placeholder="Select event" style="width: 400px">
          <el-option
            v-for="item in notificationoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            @mousedown="changenotification(item.value)"
          />
        </el-select>
      </div>
    </div>
    <div class="setting">
      <div class="setting_header">Setting</div>
      <TableEmpty
        v-if="notificationvalue == '' || notificationvalue == undefined"
        style="margin-top: 100px"
        EmptyTitle="Please select Notification Events first"
      ></TableEmpty>
      <div v-else>
        <CreateAddRules ref="CreateAddRulesRef" :TitleType="notificationvalue"></CreateAddRules>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Title {
  display: flex;
  background-color: var(--color-mode);
  height: 68px;
  font-size: var(--font-size-6);
  font-weight: 700;
  padding: 0 24px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}
.create_button {
  width: 115px;
  height: 40px;
}
.contetnt {
  padding: 0 24px;
  margin-top: 16px;
  padding-bottom: 48px;
}
.notification {
  border: 1px solid var(--color-border);
  padding: 16px;
  border-radius: 12px;
}
.notification_title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 21px;
}
.setting {
  margin-top: 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  min-height: 690px;
}
.setting_header {
  font-size: 18px;
  font-weight: 700;
  background-color: var(--color-dialog-header-bg);
  height: 48px;
  padding: 13px 16px;
  border-radius: 12px 12px 0 0;
}
:deep(.el-collapse-item__header):hover {
  background-color: var(--border-hover-color);
  border-color: var(--border-hover-color);
}
:deep(.el-collapse-item__header.is-active) {
  background-color: var(--border-hover-color);
  border-color: var(--border-hover-color);
}
:deep(.el-collapse) {
  border: none;
}
:deep(.el-collapse-item__wrap) {
  border: none;
  background-color: transparent;
}
:deep(.el-collapse-item) {
  border: none;
  width: 100%;
  border-radius: 6px;
}
:deep(.el-collapse-item__header) {
  border: 1px solid var(--color-select-border);
  padding: 0 24px 0 12px;
  border-radius: 6px;
  color: var(--color-neutral-1);
  font-size: 14px;
  font-weight: 700;
  height: 64px;
  display: flex;
  align-items: center;
  background-color: transparent;
}
.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;
}
</style>