<script setup lang="ts">
import { ref, onMounted } from 'vue'
import AddRSettingTableules from './components/SettingTable'
import MonitoringTable from './components/MonitoringTable'
import { useRouter, useRoute } from 'vue-router'
import PersonalProfile from './components/PersonalProfile.vue'
import moment from 'moment-timezone'

const router = useRouter()
const route = useRoute()
const TabActive = ref(route.query.tab || 'Personal Profile')
const isMilestoneChecked = ref(false)
const isContainerChecked = ref(false)
const isDepartureChecked = ref(false)
const isETDChangeChecked = ref(false)
const isMilestoneAdded = ref(false)
const isContainerAdded = ref(false)
const isDepartureAdded = ref(false)
const isETDChangeAdded = ref(false)
const CollapseActive = ref()
const isActiveCollapse = ref({
  Milestone: false,
  Container: false,
  Departure: false,
  ETDChange: false
})
// 展开与折叠
const isActive = (name: any) => {
  isContainerChecked.value = false
  isMilestoneChecked.value = false
  isETDChangeChecked.value = false
  isDepartureChecked.value = false
  isActiveCollapse.value.ETDChange = false
  isActiveCollapse.value.Milestone = false
  isActiveCollapse.value.Departure = false
  isActiveCollapse.value.Container = false
  isActiveCollapse.value[name] = true
}
const changeCollapse = (val: any) => {
  if (val == 'Milestone') {
    isActive('Milestone')
    isMilestoneChecked.value = true
  } else if (val == 'Container') {
    isActive('Container')
    isContainerChecked.value = true
  } else if (val == 'Departure') {
    isActive('Departure')
    isDepartureChecked.value = true
  } else if (val == 'ETDChange') {
    isActive('ETDChange')
    isETDChangeChecked.value = true
  } else {
    isContainerChecked.value = false
    isMilestoneChecked.value = false
    isETDChangeChecked.value = false
    isDepartureChecked.value = false
    isActiveCollapse.value.ETDChange = false
    isActiveCollapse.value.Milestone = false
    isActiveCollapse.value.Departure = false
    isActiveCollapse.value.Container = false
  }
}

const UnsavedCollapse = () => {
  CollapseActive.value = ''
}

// 表格列
const AddedRulesColumns = ref([
  {
    field: 'Event',
    title: 'Event',
    type: 'normal',
    formatter: ''
  },
  {
    field: 'Event Details',
    title: 'Event Details',
    type: 'normal',
    formatter: ''
  },
  {
    field: 'Frequency',
    title: 'Frequency',
    type: 'normal',
    formatter: ''
  },
  {
    field: 'Methods',
    title: 'Methods',
    type: 'normal',
    formatter: ''
  }
])
const SubShipmentsColumns = ref([
  {
    field: 'h_bol',
    title: 'HBOL/HAWB',
    type: 'link',
    formatter: ''
  },
  {
    field: 'shipper',
    title: 'Shipper',
    type: 'normal',
    formatter: ''
  },
  {
    field: 'consignee',
    title: 'Consignee',
    type: 'normal',
    formatter: ''
  },
  {
    field: 'etd',
    title: 'ETD',
    type: 'normal',
    formatter: 'date'
  },
  {
    field: 'eta',
    title: 'ETA',
    type: 'normal',
    formatter: 'date'
  },
  {
    field: 'recent_milestone',
    title: 'Recent Milestone',
    type: 'normal',
    formatter: ''
  }
])

// System Settings初始数据
const SubShipmentsTable = ref()
const AddRulesTable = ref()
const subscribeInit = ref({})

const DefaultTimeZone = ref()
const isInitSystem = JSON.parse(localStorage.getItem('userInfo')).subscribe_notification_default_init
DefaultTimeZone.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z')
const FirstInitSubscribe = () => {
  if(isInitSystem) {
    $api.FirstInitSubscribe({
      default_time_zone: DefaultTimeZone.value
    }).then((res:any) => {
      getsubscribe()
    })
  } else {
    getsubscribe()
  }
}

const getsubscribe = () => {
  $api.getsubscribe({}).then((res: any) => {
    if (res.code === 200) {
      subscribeInit.value = res.data
      SubShipmentsTable.value.getTableData(res.data.subscribeShipmentWithPage)
      AddRulesTable.value.getTableData(res.data.addedRules)
      isMilestoneAdded.value = res.data.Milestone_Update.is_display
      isContainerAdded.value = res.data.Container_Status_Update.is_display
      isDepartureAdded.value = res.data['Departure/Arrival_Delay'].is_display
      isETDChangeAdded.value = res.data['ETD/ETA_Change'].is_display
    }
  })
}

const handleTabClick = (tab: any) => {
  if(tab.paneName == 'Subscribe Notifications') {
    isMilestoneChecked.value = false
    isContainerChecked.value = false
    isDepartureChecked.value = false
    isETDChangeChecked.value = false
    getsubscribe()
    CollapseActive.value = ''
  }
}

// 保存成功后更改表单数据
const SavedAddedRules = (val: any, type: any) => {
  AddRulesTable.value.getTableData(val)
  CollapseActive.value = ''
  isMilestoneChecked.value = false
  isContainerChecked.value = false
  isDepartureChecked.value = false
  isETDChangeChecked.value = false
  if (type == 'Milestone_Update') {
    isMilestoneAdded.value = true
  } else if (type == 'Container_Status_Update') {
    isContainerAdded.value = true
  } else if (type == 'Departure/Arrival_Delay') {
    isDepartureAdded.value = true
  } else {
    isETDChangeAdded.value = true
  }
}

// 删除表格后更改数据
const Milestone = ref()
const Container = ref()
const Departure = ref()
const ETDChange = ref()
const deleteAddedRules = (val: any) => {
  if (val == 'Milestone_Update') {
    isMilestoneAdded.value = false
    Milestone.value.clearData(val)
  } else if (val == 'Container_Status_Update') {
    isContainerAdded.value = false
    Container.value.clearData(val)
  } else if (val == 'Departure/Arrival_Delay') {
    isDepartureAdded.value = false
    Departure.value.clearData(val)
  } else {
    isETDChangeAdded.value = false
    ETDChange.value.clearData(val)
  }
}

// 跳转Create New Rule页面
const ToCreateRule = () => {
  router.push({
    path: '/SystemSettings/createnewrule',
    query: {}
  })
  sessionStorage.setItem('activeTab', 'Monitoring Settings')
}

const tabledatalength = ref()
const gettabledatalength = (val: any) => {
  tabledatalength.value = val
}

onMounted(() => {
  FirstInitSubscribe()
  if (sessionStorage.getItem('activeTab') != null) {
    TabActive.value = sessionStorage.getItem('activeTab')
    sessionStorage.removeItem('activeTab')
  }
})
</script>
<template>
  <div class="Title">System Settings</div>
  <el-tabs v-model="TabActive" class="demo-tabs" @tab-click="handleTabClick">
    <el-tab-pane label="Personal Profile" name="Personal Profile"><PersonalProfile /></el-tab-pane>
    <el-tab-pane label="Subscribe Notifications" name="Subscribe Notifications">
      <div class="subscribedTitle">Notification Events for Subscribed Shipments</div>
      <div class="SubscribeCollapse">
        <el-collapse v-model="CollapseActive" accordion @change="changeCollapse">
          <el-collapse-item name="Milestone" :class="isMilestoneChecked ? 'border_ischecked' : ''">
            <template #title>
              <div class="flex">
                <div class="collapse_left" :class="isMilestoneAdded ? 'text_ischecked' : ''">
                  <div class="dot" :class="isMilestoneAdded ? 'dot_ischecked' : ''"></div>
                  Milestone Update
                </div>
                <div class="collapse_edit">{{ isMilestoneAdded ? 'Edit' : 'Add' }}</div>
              </div>
            </template>
            <div>
              <AddRules
                TitleType="Milestone"
                @UnsavedCollapse="UnsavedCollapse"
                :SystemList="subscribeInit"
                @SavedAddedRules="SavedAddedRules"
                ref="Milestone"
              ></AddRules>
            </div>
          </el-collapse-item>
          <el-collapse-item style="margin: 8px 0;" name="Container" :class="isContainerChecked ? 'border_ischecked' : ''">
            <template #title>
              <div class="flex">
                <div class="collapse_left" :class="isContainerAdded ? 'text_ischecked' : ''">
                  <div class="dot" :class="isContainerAdded ? 'dot_ischecked' : ''"></div>
                  Container Status Update
                </div>
                <div class="collapse_edit">{{ isContainerAdded ? 'Edit' : 'Add' }}</div>
              </div>
            </template>
            <div>
              <AddRules
                TitleType="Container"
                ref="Container"
                @UnsavedCollapse="UnsavedCollapse"
                :SystemList="subscribeInit"
                @SavedAddedRules="SavedAddedRules"
              ></AddRules>
            </div>
          </el-collapse-item>
          <el-collapse-item style="margin-bottom: 8px;" name="Departure" :class="isDepartureChecked ? 'border_ischecked' : ''">
            <template #title>
              <div class="flex">
                <div class="collapse_left" :class="isDepartureAdded ? 'text_ischecked' : ''">
                  <div class="dot" :class="isDepartureAdded ? 'dot_ischecked' : ''"></div>
                  Departure/Arrival Delay
                </div>
                <div class="collapse_edit">{{ isDepartureAdded ? 'Edit' : 'Add' }}</div>
              </div>
            </template>
            <div>
              <AddRules
                TitleType="Departure"
                ref="Departure"
                @UnsavedCollapse="UnsavedCollapse"
                :SystemList="subscribeInit"
                @SavedAddedRules="SavedAddedRules"
              ></AddRules>
            </div>
          </el-collapse-item>
          <el-collapse-item name="ETDChange" :class="isETDChangeChecked ? 'border_ischecked' : ''">
            <template #title>
              <div class="flex">
                <div class="collapse_left" :class="isETDChangeAdded ? 'text_ischecked' : ''">
                  <div class="dot" :class="isETDChangeAdded ? 'dot_ischecked' : ''"></div>
                  ETD/ETA Change
                </div>
                <div class="collapse_edit">{{ isETDChangeAdded ? 'Edit' : 'Add' }}</div>
              </div>
            </template>
            <div>
              <AddRules
                TitleType="ETDChange"
                ref="ETDChange"
                @UnsavedCollapse="UnsavedCollapse"
                :SystemList="subscribeInit"
                @SavedAddedRules="SavedAddedRules"
              ></AddRules>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="TableTitle">Added Rules</div>
      <AddRSettingTableules
        :propsType="true"
        ref="AddRulesTable"
        :ColumnsList="AddedRulesColumns"
        @deleteAddedRules="deleteAddedRules"
      ></AddRSettingTableules>
      <div class="TableTitle subscribetitle">Subscribed Shipments</div>
      <AddRSettingTableules
        :ColumnsList="SubShipmentsColumns"
        ref="SubShipmentsTable"
      ></AddRSettingTableules>
    </el-tab-pane>
    <el-tab-pane label="Monitoring Settings" name="Monitoring Settings">
      <div class="monitoring_flex">
        <div class="subscribedTitle">Added Rules</div>
        <el-button
          class="el-button--main"
          style="height: 40px"
          v-if="tabledatalength != 0 && tabledatalength != null"
          @click="ToCreateRule"
          >+ Add Rule</el-button
        >
      </div>
      <MonitoringTable @gettabledatalength="gettabledatalength"></MonitoringTable>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
.Title {
  display: flex;
  height: 68px;
  font-size: var(--font-size-6);
  font-weight: 700;
  padding: 0 24px;
  align-items: center;
}
.TableTitle {
  font-size: 18px;
  font-weight: 700;
  padding: 21px 24px 13px 24px;
}
.subscribetitle {
  padding-top: 30px;
}
.SubscribeCollapse {
  padding: 0 24px 24px 24px;
  border-bottom: 1px solid var(--color-select-border);
}
:deep(.el-tabs__nav-wrap:after) {
  height: 2px;
}
:deep(.el-tabs__item) {
  color: var(--color-neutral-1);
  font-weight: 400;
  font-size: 18px;
  padding: 0 64px;
}
.subscribedTitle {
  color: var(--color-neutral-1);
  font-weight: 700;
  font-size: 18px;
  padding: 0 24px;
  margin: 23px 0 20px 0;
}
: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;
}
.border_ischecked {
  border: 2px solid var(--color-theme);
}
:deep(.el-tabs__nav) {
  padding-left: 24px;
}
: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);
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 98%;
  margin-right: 8px;
}
.collapse_left {
  display: flex;
  align-items: center;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-dot-unchecked);
  margin: 0 15px 0 9px;
}
.dot_ischecked {
  background-color: var(--color-dot-checked);
}
.text_ischecked {
  color: var(--color-theme);
}
.collapse_edit {
  color: var(--color-theme);
  font-weight: 400;
}
:deep(.el-collapse-item__arrow) {
  width: 16px;
  height: 16px;
  background-image: url('../src/images/icon_expand_colorful.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(0);
}
:deep(.el-collapse-item__arrow.is-active) {
  transform: rotate(-180deg);
}
:deep(.el-icon svg) {
  width: 0;
}
.monitoring_flex {
  display: flex;
  justify-content: space-between;
  padding-right: 24px;
  align-items: end;
}
.el-button--main {
  margin-bottom: 4px;
}
.demo-tabs {
  height: calc(100% - 68px);
  :deep(.el-tabs__content) {
    overflow-y: auto;
  }
}
</style>
