<script setup>
import { useUniApi } from 'hooks/use-uni-api'
import ChatLeft from './components/ChatLeft.vue'
import ChatRight from './components/ChatRight.vue'
import { getFaultMessageListApi } from '@/api/elevator'
import { usePaging } from '@/composables/use-paging'

const { previewImage } = useUniApi()
const imgHandler = (item) => {
  previewImage(item.picture)
}

const content = ref('')
const handleSend = () => {
  dataList.value.unshift({
    direction: 'right',
    content: content.value
  })
  content.value = ''
}

// const instance = getCurrentInstance()

const query = ref({
  elevatorNum: ''
})
const { paging, dataList, queryHandler } = usePaging({
  apiFn: getFaultMessageListApi,
  query
})

const options = ref({})
onLoad((e) => {
  options.value = e
  const { elevatorNum } = options.value
  query.value.elevatorNum = elevatorNum
})
</script>

<template>
  <view w-full h-100vh flex-col f-s-s bg="#E5E5E5">
    <view w-full flex-auto overflow-hidden>
      <z-paging
        ref="paging"
        v-model="dataList"
        use-chat-record-mode
        :safe-area-inset-bottom="false"
        bottom-bg-color="#f8f8f8"
        :fixed="false"
        @query="queryHandler"
      >
        <view
          v-for="(item, index) in dataList"
          :key="index"
          style="position: relative"
        >
          <view style="transform: scaleY(-1)">
            <ChatLeft
              v-if="item.direction !== 'right'"
              :key="index + 'left'"
              :item="item"
              @imgHandler="imgHandler"
            />
            <ChatRight
              v-else
              :key="index + 'right'"
              :item="item"
              @imgHandler="imgHandler"
            />
          </view>
        </view>
        <!-- 底部聊天输入框 -->
        <!-- <template #bottom>
          <chat-input-bar ref="inputBar" @send="doSend" />
        </template> -->
      </z-paging>
    </view>

    <!-- 输入框 -->
    <view w-full bg="#f8f8f8" p-20 pb-60 flex-none z-1>
      <view w-full f-s-c>
        <up-input
          v-model="content"
          flex-auto
          placeholder="请输入内容"
          border="surround"
        />
        <view w-120 flex-none ml-16>
          <up-button
            type="primary"
            shape="circle"
            text="发送"
            @tap="handleSend"
          />
        </view>
      </view>
    </view>
  </view>
</template>
