<script lang="ts" setup>
import { useCalculatingHeight } from '@/hooks/calculatingHeight'
import TableView from './components/TableView'
import LogDialog from '@/views/AIApiLog/src/components/LogDialog.vue'

const OperationSearch = ref()
const filterRef: Ref<HTMLElement | null> = ref(null)
const containerHeight = useCalculatingHeight(document.documentElement, 290, [filterRef])
const searchData = ref({
  inputModel: '',
  startDate: '',
  endDate: '',
  userType: '',
  questionType: '',
  answerType: '',
  answerSatisfaction: '',
  comparator: 'thanOrEqual',
  responseDuration: 0
})

const userTypeList = [
  {
    label: 'Customer',
    value: 'customer'
  },
  {
    label: 'Employee',
    value: 'employee'
  }
]
const questionTypeList = [
  {
    label: 'Predefined Question',
    value: 'predefinedQuestion'
  },
  {
    label: 'free text',
    value: 'freeText'
  }
]
const AnswerTypeList = [
  {
    label: 'Suspend',
    value: 'suspend'
  },
  {
    label: 'Timeout',
    value: 'timeout'
  },
  {
    label: 'Predefined Template',
    value: 'predefinedTemplate'
  },
  {
    label: 'AI Answer',
    value: 'AIAnswer'
  }
]
const answerSatisfactionList = [
  {
    label: 'Null',
    value: 'null'
  },
  {
    label: 'Good',
    value: 'good'
  },
  {
    label: 'Not Good',
    value: 'notGood'
  }
]

const comparatorList = [
  {
    label: '>=',
    value: 'thanOrEqual'
  },
  {
    label: '=',
    value: 'equal'
  },
  {
    label: '<=',
    value: 'lessOrEqual'
  }
]
const tableRef = ref()

const Search = () => {
  tableRef.value.SearchOperationLog(searchData.value)
}
const DateChange = (date: any) => {
  searchData.value.startDate = date[0]
  searchData.value.endDate = date[1]
  tableRef.value.SearchOperationLog(searchData.value)
}

const logDialogRef = ref()
const openDialog = () => {
  logDialogRef.value.openDialog()
}
</script>
<template>
  <div class="dashboard">
    <div class="Title">Chat Log</div>
    <div class="display">
      <div class="heaer_top">
        <div class="input-tips_filter">
          <el-input
            placeholder="Search Question ID、User"
            v-model="OperationSearch"
            class="log_input"
          >
            <template #prefix>
              <span class="iconfont_icon">
                <svg class="iconfont icon_dark" aria-hidden="true">
                  <use xlink:href="#icon-icon_search_b"></use>
                </svg>
              </span>
            </template>
          </el-input>
        </div>

        <div class="date-tips_filter">
          <CalendarDate @DateChange="DateChange"></CalendarDate>
        </div>
        <div class="tips_filter">
          <el-select v-model="searchData.userType" placeholder="User Type">
            <el-option
              v-for="item in userTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="tips_filter">
          <el-select v-model="searchData.questionType" placeholder="Question Type">
            <el-option
              v-for="item in questionTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="tips_filter">
          <el-select v-model="searchData.answerType" placeholder="Answer Type">
            <el-option
              v-for="item in AnswerTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="tips_filter">
          <el-select v-model="searchData.answerSatisfaction" placeholder="Answer Satisfaction">
            <el-option
              v-for="item in answerSatisfactionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="comparator-tips_filter">
          <span>Response Duration</span>
          <el-select v-model="searchData.comparator" style="width: 70px; margin: 0 6px">
            <el-option
              v-for="item in comparatorList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input-number
            v-model="searchData.responseDuration"
            placeholder="s"
            :controls="false"
            :min="0"
            style="width: 60px"
          ></el-input-number>
        </div>
        <el-button class="el-button--dark" @click="Search">Search</el-button>
      </div>
    </div>
    <TableView :height="containerHeight" ref="tableRef"></TableView>
    <LogDialog ref="logDialogRef" />
  </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;
}

.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(.ant-picker-range) {
  width: 250px !important;
  height: 32px;
  background-color: var(--color-mode) !important;
}
.tips_filter {
  flex: 1;
  height: 30px;
  max-width: 170px;
  margin-right: 8px;
}
.input-tips_filter {
  flex: 1;
  max-width: 320px;
  height: 32px;
  margin-right: 8px;
  :deep(.el-input__wrapper) {
    height: 32px;
  }
}
.date-tips_filter {
  flex: 1;
  max-width: 250px;
  height: 32px;
  margin-right: 8px;
}
.comparator-tips_filter {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 260px;
  height: 32px;
  margin-right: 8px;
}
.dashboard {
  position: relative;
  background-color: var(--color-mode);
}
:deep(.log_input .el-input__wrapper) {
  box-shadow: 0 0 0 1px var(--color-select-border);
  border-radius: 6px;
}
</style>
