<template>
  <view>
    <uni-card spacing="0">
      <view style="height: 72vh">
        <zb-table
          ref="zbTableRef"
          isShowLoadMore
          stripe
          :fit="false"
          :columns="column"
          :cellStyle="setCellStyle"
          :cellHeaderStyle="setCellHeaderStyle"
          :data="listData"
          @detail="handleDetail"
          @pullUpLoading="pullUpLoadingAction"
        ></zb-table>
      </view>
    </uni-card>
    <up-modal :show="fileShow" :title="fileInfo.documentName" confirmText="关闭" @confirm="fileShow = false">
      <scroll-view scroll-y="true" style="max-height: 60vh">
        <uni-card>
          <up-parse :content="fileInfo.documentContent"></up-parse>
        </uni-card>
      </scroll-view>
    </up-modal>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { setCellHeaderStyle, setCellStyle } from '@/nx/config/zbTable'
import { getDeviceDocumentList, getDocumentInfoById } from './document.api'
import { useListData } from '@/nx/hooks/usePageListData'

import nx from '@/nx'

const column = reactive([
  {
    label: '文档名称',
    name: 'documentName',
    width: 260
  },
  {
    label: '文档描述',
    name: 'documentAbstract',
    width: 420
  },
  {
    label: '文档类型',
    name: 'documentType',
    width: 120
  },

  {
    name: 'operation',
    type: 'operation',
    label: '操作',
    renders: [{ name: '查看', func: 'detail' }]
  }
])
const deviceId = ref('')
const deviceText = ref('')

onMounted(() => {
  const { id, deviceName } = nx.$store('biz').deviceInfo
  deviceId.value = id
  deviceText.value = deviceName
  getInitData()
})
const searchParams = computed(() => ({
  deviceBusInfoId: deviceId.value,
  searchRelationType: 'device'
}))
const { listData, loadingData, scrollToLower, loadStatus, getInitData } = useListData({
  searchParams,
  api: getDeviceDocumentList,
  processData: data => {
    return data.map(item => {
      return {
        ...item,
        documentType: item.documentType === 'file' ? '文件' : '文本'
      }
    })
  }
})
const zbTableRef = ref()
function pullUpLoadingAction() {
  if (loadingData.value) return
  if (loadStatus.value === 'nomore') {
    zbTableRef.value.pullUpCompleteLoading('ok')
  } else {
    scrollToLower()
  }
}

const fileShow = ref(false)
const fileInfo = ref({})
async function handleDetail(row) {
  console.log(row)

  fileInfo.value = row
  if (row.documentType === '文本') {
    const { documentContent } = await getDocumentInfoById(row.documentBusInfoId)
    fileInfo.value.documentContent = documentContent
    fileShow.value = true
  } else {
    nx.$router.go('/pages/device/documentList/preview', { documentUrl: row.documentUrl })
  }
}
</script>

<style lang="scss" scoped>
:deep(.zb-table uni-button[type='primary']) {
  background-color: $uni-color-primary !important;
}
</style>
