<script setup>
import { useUniApi } from 'hooks/use-uni-api'
import { getWorkDataInfoApi } from '@/api/elevator'
const { previewImage } = useUniApi()

const dataDetail = ref({})
const getWorkDataInfo = async () => {
  const { error, data } = await getWorkDataInfoApi(options.value)
  if (!error) {
    dataDetail.value = data
  }
}
onMounted(() => {
  getWorkDataInfo()
})

const albumUrls = ref([])
const signRecordUrls = ref([])
watchEffect(() => {
  const {
    carRoofAttachment,
    cabinAttachment,
    machineRoomAttachment,
    pitAttachment,
    doorAttachment,
    channelAttachment,
    signRecord
  } = dataDetail.value
  ;[
    carRoofAttachment,
    cabinAttachment,
    machineRoomAttachment,
    pitAttachment,
    doorAttachment,
    channelAttachment
  ].forEach((item) => {
    item && albumUrls.value.push(item)
  })

  signRecordUrls.value = signRecord ? signRecord.split(',') || [] : []
})

const operationStateMap = {
  2: '接收',
  3: '到场',
  4: '完成',
  7: '评价'
}
const planTypeMap = {
  1: '半月',
  2: '季度',
  3: '半年',
  4: '年度'
}
const actionRecord = ref([])
watchEffect(() => {
  const { operationRecords } = dataDetail.value

  if (operationRecords) {
    actionRecord.value = operationRecords.map((item) => {
      const { operationState } = item
      return {
        ...item,
        operationStateStr: operationStateMap[operationState]
      }
    })
  }
})

// 电梯名称 工作选项 工作状态 创建时间 发布人员 期望时间 工作描述 被困人数 受伤人数 备注 其它原因
const cellData = ref([
  { key: '电梯名称', value: '', field: 'elevatorName' },
  { key: '工作选项', value: '维保' },
  {
    key: '工作状态',
    format: (item) => {
      const { state } = item
      if (state === 2) {
        return '已接收'
      } else if (state === 3) {
        return '已到场'
      } else if (state === 4) {
        return '已完成'
      } else if (state === 7) {
        return '已完成'
      }
    }
  },
  { key: '创建时间', value: '', field: 'createdTime' },
  { key: '发布人员', value: '', field: 'publisher' },
  { key: '维保人员', value: '', field: 'receiveStaff' },
  { key: '协同人员', value: '', field: 'collaborator' },
  { key: '期望时间', value: '', field: 'expectTime' },
  { key: '工作描述', value: '', field: 'description' },
  { key: '被困人数', value: '', field: 'trapNum' },
  { key: '受伤人数', value: '', field: 'injuredNum' },
  { key: '备注', value: '', field: '' },
  { key: '其他原因', value: '', field: '' }
])

const attachmentTypeMap = {
  1: '[图片]',
  2: '[视频]',
  '': '[文本]'
}
const workRecord = ref([])
watchEffect(() => {
  const { recordUploadData } = dataDetail.value
  if (recordUploadData) {
    workRecord.value = JSON.parse(recordUploadData)
  }
})

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

<template>
  <view class="maintenance-detail" px-28>
    <up-cell-group :border="false">
      <up-cell
        v-for="(item, index) in cellData"
        :key="index"
        :title="item.key"
        :value="
          item.format
            ? item.format(dataDetail)
            : dataDetail[item.field] || item.value
        "
      />
    </up-cell-group>

    <!-- 操作记录 -->
    <view mt-32>
      <view text-32 font-500>操作记录</view>
      <up-cell-group :border="false">
        <up-cell
          v-for="(item, index) in actionRecord"
          :key="index"
          :title="item.operator"
          :label="item.operationStateStr"
          :value="item.operationTime"
        />
      </up-cell-group>
    </view>

    <!-- 工作记录 -->
    <view mt-32>
      <view text-32 font-500>工作记录</view>
      <up-cell
        title="[工作表]"
        :label="planTypeMap[dataDetail.planType]"
        :value="dataDetail.finishTime"
        :is-link="true"
        :url="`/pages/views/elevator-maintenance/work-sheet?id=${dataDetail.id}`"
      />

      <up-cell-group v-if="workRecord.length" :border="false">
        <up-cell
          v-for="(item, index) in workRecord"
          :key="index"
          :title="attachmentTypeMap[item.attachmentType] || ''"
          :value="item.uploadTime"
        >
          <template #label>
            <template v-if="item.attachmentType === 1 || !item.attachmentType">
              <up-image
                v-if="item.attachmentUrl"
                :show-loading="true"
                :src="item.attachmentUrl"
                width="120px"
                height="120px"
                @tap="previewImage(item.attachmentUrl)"
              />
            </template>
            <template v-else-if="item.attachmentType === 2">
              <!-- 视频 -->
              <video
                v-if="item.attachmentUrl"
                :src="item.attachmentUrl"
                style="width: 120px; height: 120px"
              ></video>
            </template>
            <view>{{ item.remark }}</view>
          </template>
        </up-cell>
      </up-cell-group>
    </view>

    <!-- 维保照片 -->
    <view v-if="albumUrls.length" mt-32>
      <view text-32 font-500>维保照片</view>
      <view>
        <up-album
          :urls="albumUrls"
          multiple-size="100"
          auto-wrap="true"
          :max-count="6"
          :show-more="false"
        />
      </view>
    </view>

    <!-- 维保签名 -->
    <view v-if="signRecordUrls.length" mt-32>
      <view text-32 font-500>维保签名</view>
      <view>
        <up-album
          :urls="signRecordUrls"
          multiple-size="150"
          auto-wrap="true"
          :max-count="2"
          :show-more="false"
        />
      </view>
    </view>
  </view>
</template>
