<script setup>
import { getPassengerFeedbackListApi } from '@/api/elevator'
import { usePaging } from '@/composables/use-paging'

const tabs = reactive([{ name: '待处理' }, { name: '已处理' }])
const handleTab = ({ index }) => {
  query.value.replyState = index
  reload()
}

const toDetail = (item) => {
  console.log('toDetail =>', item)
}

const query = ref({
  replyState: 0
})
const { paging, dataList, dataTotal, reload, queryHandler } = usePaging({
  apiFn: getPassengerFeedbackListApi,
  query
})

const options = ref({})
onLoad(async (e) => {
  dataList.value = []
  options.value = e
})
</script>

<template>
  <view class="passenger-feedback" w-full h-100vh flex-col f-s-c bg="#F8F8F8">
    <view w-full>
      <up-tabs
        :list="tabs"
        :scrollable="false"
        :item-style="{
          width: '50%',
          height: '80rpx'
        }"
        :active-style="{
          color: '#3c9cff',
          fontWeight: 'bold'
        }"
        @click="handleTab"
      />
    </view>

    <view w-full text-32 font-500 px-32 py-12 bg-white>
      总数：{{ dataTotal }}个
    </view>

    <view w-full flex-auto overflow-hidden mt-8 bg-white>
      <z-paging
        ref="paging"
        v-model="dataList"
        :fixed="false"
        @query="queryHandler"
      >
        <up-card
          v-for="(item, index) in dataList"
          :key="index"
          :title="item.elevatorName"
          @click="toDetail(item)"
        >
          <template #body>
            <view>
              <up-cell title="电梯地址" :value="item.elevatorAddress" />
              <up-cell title="联系人" :value="item.contacts" />
              <up-cell title="联系方式" :value="item.contactsPhone" />
              <up-cell title="物业单位" :value="item.tenement" />
              <up-cell title="维保单位" :value="item.maintenance" />
              <up-cell title="楼宇" :value="item.building" />
              <up-cell title="回复状态" :value="item.replyState" />
              <up-cell title="回复时间" :value="item.replyTime" />
              <up-cell title="反馈内容" :value="item.content" />
              <up-cell title="处理意见" :value="item.suggestion" />
            </view>
          </template>
        </up-card>
        <!-- <up-cell-group>
          <up-cell
            v-for="(item, index) in dataList"
            :key="index"
            :title="item.elevatorNum"
            :label="item.elevatorAddress"
            :value="item.contacts || item.userName"
          />
        </up-cell-group>
      </z-paging> -->
      </z-paging>
    </view>
  </view>
</template>

<style>
.passenger-feedback .u-tabs {
  background-color: #fff !important;
}
</style>
