<script setup>
import {
  getFaultMessageListApi,
  getPassengerFeedbackListApi
} from 'api/elevator'
import PositionPicker from 'components/PositionPicker.vue'
import dayjs from 'dayjs'
import { useFetch } from 'hooks/use-fetch'
import { useUniApi } from 'hooks/use-uni-api'
const { previewImage } = useUniApi()

// 3 年前的年月日
const startDate = dayjs().subtract(3, 'year').format('YYYY-MM-DD')
const endDate = dayjs().format('YYYY-MM-DD')
const change = (value) => {
  console.log(value)
  const { fulldate } = value
  query.value.startTime = `${fulldate} 00:00:00`
  query.value.endTime = `${fulldate} 23:59:59`
  query.value.happenTimeStart = `${fulldate} 00:00:00`
  query.value.happenTimeEnd = `${fulldate} 23:59:59`
  query.value.pageNum = 1
  dataList.value = []
  hasMore.value = true
  getList()
}

const currTab = ref(0)
const tabs = reactive([{ name: '故障' }, { name: '乘客反馈' }])
const handleTab = (e) => {
  console.log('handleTab', e)
  dataList.value = []
  query.value.pageNum = 1
  currTab.value = e.index
  hasMore.value = true
  getList()
}

const keyValue = reactive([
  { key: '故障来源', value: '', field: 'faultName' },
  { key: '发生时间', value: '', field: 'happenTime' },
  { key: '恢复时间', value: '', filed: 'recoverTime' }
])

const feedbackKeyValue = ref([
  { key: '电梯地址', field: 'elevatorAddress' },
  { key: '联系人', field: 'contacts' },
  { key: '联系方式', field: 'contactsPhone' },
  { key: '物业单位', field: 'tenement' },
  { key: '维保单位', field: 'maintenance' },
  { key: '楼宇', field: 'building' },
  { key: '回复状态', field: 'replyState' },
  { key: '回复时间', field: 'replyTime' },
  { key: '反馈内容', field: 'content' },
  { key: '处理意见', field: 'suggestion' }
])

const showPicker = ref(false)
const place = ref({
  id: '',
  label: '请选择组织信息'
})
const confirmHandler = ([value]) => {
  place.value = value
  query.value.deptId = value.id
  query.value.pageNum = 1
  dataList.value = []
  hasMore.value = true
  getList()
}

const dataList = ref([])
const hasMore = ref(true)
const query = ref({
  pageNum: 1,
  pageSize: 10,
  deptId: '',
  happenTimeStart: '',
  happenTimeEnd: '',
  startTime: '',
  endTime: ''
})
const { fetchApi: getFaultMessageList } = useFetch({
  apiFn: getFaultMessageListApi,
  isList: true
})
const { fetchApi: getPassengerFeedbackList } = useFetch({
  apiFn: getPassengerFeedbackListApi,
  isList: true
})
const getList = async () => {
  let list = []
  const { pageNum, pageSize, deptId } = query.value
  if (currTab.value === 0) {
    const { pageNum, pageSize, happenTimeStart, happenTimeEnd } = query.value
    const [isOk, formatResultData] = await getFaultMessageList({
      ...options.value,
      pageNum,
      pageSize,
      deptId,
      happenTimeStart,
      happenTimeEnd,
      state: 1
    })
    if (!isOk) {
      return
    }
    list = formatResultData.rows
  } else {
    const { startTime, endTime } = query.value
    const [isOk, formatResultData] = await getPassengerFeedbackList({
      ...options.value,
      pageSize,
      pageNum,
      deptId,
      startTime,
      endTime,
      replyState: 1
    })
    if (!isOk) {
      return
    }
    list = formatResultData.rows
  }
  dataList.value.push(...list)
  hasMore.value = list.length == query.value.pageSize
}

const options = ref({})
onLoad(async (e) => {
  options.value = e
  const start = `${dayjs().format('YYYY-MM-DD')} 00:00:00`
  const end = `${dayjs().format('YYYY-MM-DD')} 23:59:59`
  query.value = {
    ...query.value,
    startTime: start,
    endTime: end,
    happenTimeStart: start,
    happenTimeEnd: end
  }
  await getList()
})

onReachBottom(() => {
  if (!hasMore.value) {
    return
  }
  query.value.pageNum++
  getList()
})
</script>

<template>
  <view>
    <view w-full px-28 text-32 font-500 @tap="showPicker = true">
      {{ place.label }}
    </view>

    <uni-calendar
      :insert="true"
      :lunar="true"
      :start-date="startDate"
      :end-date="endDate"
      :is-extend-day="false"
      @change="change"
    />

    <view w-full mt-30>
      <up-tabs
        :current="currTab"
        :list="tabs"
        :scrollable="false"
        :item-style="{
          width: '50%',
          height: '80rpx'
        }"
        :active-style="{
          color: '#3c9cff',
          fontWeight: 'bold'
        }"
        @change="handleTab"
      />
    </view>

    <view mt-30>
      <up-card
        v-for="(item, index) in dataList"
        :key="index"
        :title="item.elevatorName"
      >
        <template #body>
          <!-- 历史故障 -->
          <view v-if="currTab === 0">
            <view v-if="item.picture">
              <up-image
                :show-loading="true"
                :src="item.picture"
                width="120px"
                height="120px"
                @tap="previewImage(item.picture)"
              />
            </view>
            <up-cell
              v-for="(val, idx) in keyValue"
              :key="idx"
              :title="val.key"
              :value="item[val.field]"
            />
          </view>

          <!-- 历史反馈 -->
          <view v-else>
            <up-cell
              v-for="(val, idx) in feedbackKeyValue"
              :key="idx"
              :title="val.key"
              :value="item[val.field]"
            />
          </view>
        </template>
      </up-card>

      <up-loadmore
        v-if="!hasMore && dataList.length"
        :line="true"
        status="nomore"
      />
    </view>
  </view>

  <PositionPicker v-model="showPicker" @confirm="confirmHandler" />
</template>
