<script lang="ts" setup>
import { useCalculatingHeight } from '@/hooks/calculatingHeight'
import TableView from './components/TableView'
import dayjs from 'dayjs'

const filterRef: Ref<HTMLElement | null> = ref(null)
const containerHeight = useCalculatingHeight(document.documentElement, 290, [filterRef])
const searchData = ref({
  text_search: '',
  question_date_start: '',
  question_date_end: '',
  user_type: '',
  question_type: '',
  answer_type: '',
  answer_satisfication: '',
  response_duration_type: '',
  response_duration_num: null
})

const userTypeList = [
  {
    label: 'Customer',
    value: 'customer'
  },
  {
    label: 'Employee',
    value: 'employee'
  }
]
const questionTypeList = [
  {
    label: 'Predefined Question',
    value: 'Predefined Question'
  },
  {
    label: 'Free Text',
    value: 'Free Text'
  }
]
const AnswerTypeList = [
  {
    label: 'Suspend',
    value: 'Suspend'
  },
  {
    label: 'Timeout',
    value: 'Timeout'
  },
  {
    label: 'Predefined Template',
    value: 'Predefined Template'
  },
  {
    label: 'AI Answer',
    value: 'AI Answer'
  }
]
const answerSatisfactionList = [
  {
    label: 'Null',
    value: 'Null'
  },
  {
    label: 'Good',
    value: 'Good'
  },
  {
    label: 'Not Good',
    value: 'Not Good'
  }
]

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

const Search = () => {
  tableRef.value.searchTableData(searchData.value)
}
const DateChange = (date: any) => {
  if (!date) {
    searchData.value.question_date_start = ''
    searchData.value.question_date_end = ''
  } else {
    searchData.value.question_date_start = dayjs(date[0]).format('MM/DD/YYYY')
    searchData.value.question_date_end = dayjs(date[1]).format('MM/DD/YYYY')
  }
  tableRef.value.searchTableData(searchData.value)
}
</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="searchData.text_search"
            clearable
            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.user_type" clearable 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 clearable v-model="searchData.question_type" 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 clearable v-model="searchData.answer_type" 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
            clearable
            v-model="searchData.answer_satisfication"
            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="response_duration_type-tips_filter">
          <span>Response Duration</span>
          <el-select
            clearable
            v-model="searchData.response_duration_type"
            style="width: 70px; margin: 0 6px"
            placeholder=""
          >
            <el-option
              v-for="item in response_duration_typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input-number
            v-model="searchData.response_duration_num"
            placeholder=""
            :controls="false"
            :min="0"
            style="width: 60px; height: 34px"
          ></el-input-number>
        </div>
        <el-button class="el-button--dark" @click="Search">Search</el-button>
      </div>
    </div>
    <TableView :height="containerHeight" :searchData="searchData" ref="tableRef"></TableView>
  </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;
}
.response_duration_type-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>
