<script lang="ts" setup>
import { ref } from 'vue'
import { useCalculatingHeight } from '@/hooks/calculatingHeight'
import CalendarDate from '@/components/DateRange/src/components/CalendarDate.vue'
import BookingTable from './components/BookingTable'

const OperationSearch = ref()
const filterRef: Ref<HTMLElement | null> = ref(null)
const containerHeight = useCalculatingHeight(document.documentElement, 290, [filterRef])
const UserType = ref()
const selectedPage = ref()
const selectedOperation = ref()
const usertypeoptions = ref([
  {
    label: 'Customer',
    value: 'Customer'
  },
  {
    label: 'Employee',
    value: 'Employee'
  }
])
const Page = ref([
  {
    label: 'Login',
    value: 'Login'
  },
  {
    label: 'Booking',
    value: 'Booking'
  },
  {
    label: 'Tracking',
    value: 'Tracking'
  },
  {
    label: 'Logout',
    value: 'Logout'
  },
  {
    label: 'Profile',
    value: 'Profile'
  }
])
const Operation = ref([
  {
    label: 'Login',
    value: 'Login',
    page: 'Login'
  },
  {
    label: 'Search',
    value: 'Search',
    page: 'Booking'
  },
  {
    label: 'Customize Coulumns',
    value: 'Customize Coulumns',
    page: 'Booking'
  },
  {
    label: 'Open Detailed Page',
    value: 'Open Detailed Page',
    page: 'Booking'
  },
  {
    label: 'Close Detailed Page',
    value: 'Close Detailed Page',
    page: 'Booking'
  },
  {
    label: 'Download',
    value: 'Download',
    page: 'Booking'
  },
  {
    label: 'Send Email',
    value: 'Send Email',
    page: 'Booking'
  },
  {
    label: 'Public tracking',
    value: 'Public tracking',
    page: 'Tracking'
  },
  {
    label: 'Search',
    value: 'Search',
    page: 'Tracking'
  },
  {
    label: 'Customize Coulumns',
    value: 'Customize Coulumns',
    page: 'Tracking'
  },
  {
    label: 'Open Detailed Page',
    value: 'Open Detailed Page',
    page: 'Tracking'
  },
  {
    label: 'Close Detailed Page',
    value: 'Close Detailed Page',
    page: 'Tracking'
  },
  {
    label: 'Download',
    value: 'Download',
    page: 'Tracking'
  },
  {
    label: 'Add Reference',
    value: 'Add Reference',
    page: 'Tracking'
  },
  {
    label: 'Upload File',
    value: 'Upload File',
    page: 'Tracking'
  },
  {
    label: 'Send Email',
    value: 'Send Email',
    page: 'Tracking'
  },
  {
    label: 'AMS/ISF',
    value: 'AMS/ISF',
    page: 'Tracking'
  },
  {
    label: 'Logout',
    value: 'Logout',
    page: 'Logout'
  },
  {
    label: 'Change password',
    value: 'Change password',
    page: 'Profile'
  }
])
const newOperationList = ref()
const handlePageChange = (value: any) => {
  newOperationList.value = Operation.value.filter((item) => {
    return item.page == value
  })
  selectedOperation.value = newOperationList.value[0].value
  searchLogData.page = value
  searchLogData.operation = newOperationList.value[0].value
  BookingTable_ref.value.SearchOperationLog(searchLogData)
}
const BookingTable_ref = ref()
let searchLogData: any = {}
const changeUserType = (val: any) => {
  Search('user_type', val)
}
const handleOperationChange = (val: any) => {
  Search('operation', val)
}
const Search = (tag: any, value: any) => {
  searchLogData.user_name = OperationSearch.value
  searchLogData[tag] = value
  BookingTable_ref.value.SearchOperationLog(searchLogData)
}
const DateChange = (date: any) => {
  searchLogData.operation_date_start = date[0]
  searchLogData.operation_date_end = date[1]
  BookingTable_ref.value.SearchOperationLog(searchLogData)
}
</script>
<template>
  <div class="dashboard">
    <div class="Title">Operation Log</div>
    <div class="display">
      <div class="heaer_top">
        <div class="search tips_filter">
          <el-input placeholder="Search user name" v-model="OperationSearch">
            <template #prefix>
              <span class="iconfont_icon">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_search_b"></use>
                </svg>
              </span>
            </template>
          </el-input>
        </div>
        <div class="tips_filter">
          <el-select
            v-model="UserType"
            placeholder="User Type"
            style="width: 144px"
            @change="changeUserType"
          >
            <el-option
              v-for="item in usertypeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="tips_filter">
          <CalendarDate @DateChange="DateChange"></CalendarDate>
        </div>
        <div class="tips_filter">
          <el-select
            style="width: 144px"
            v-model="selectedPage"
            placeholder="Page"
            @change="handlePageChange"
          >
            <el-option
              v-for="province in Page"
              :key="province.value"
              :label="province.label"
              :value="province.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="tips_filter">
          <el-select
            style="width: 144px"
            v-model="selectedOperation"
            placeholder="Operation"
            @change="handleOperationChange"
          >
            <el-option
              v-for="city in newOperationList"
              :key="city.value"
              :label="city.label"
              :value="city.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-button class="el-button--dark" @click="Search">Search</el-button>
      </div>
    </div>
    <BookingTable :height="containerHeight" ref="BookingTable_ref"></BookingTable>
  </div>
</template>

<style lang="scss" scoped>
.Title {
  display: flex;
  height: 68px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-6);
  font-weight: 700;
  padding-left: 23.32px;
  align-items: center;
}
.heaer_top {
  margin-top: 6.57px;
  margin-bottom: 8px;
  padding-right: 8px;
  display: flex;
}
.search {
  width: 308px;
  height: 32px;
}
.display {
  border: 1px solid var(--color-border);
  border-width: 0 0 1px 0;
  padding-left: 23.52px;
}
:deep(.el-select__placeholder.is-transparent span) {
  color: var(--tag-info-text-color) !important;
}
:deep(.ETD_title) {
  margin-bottom: 0;
}
:deep(:where(.css-dev-only-do-not-override-19iuou).ant-picker-range) {
  width: 250px !important;
  height: 32px;
}
.tips_filter {
  margin-right: 8px;
}
.dashboard {
  z-index: 2014;
  position: relative;
  background-color: white;
}
</style>