<script setup>
import { useUniApi } from '@/composables/use-uni-api'
import config from '@/config'
const { cdn } = config

const PNG_1 = `${cdn}/elevator/2024/11/24/b946bbf1c1224f7c97dfbefd22cab437.png`
const PNG_2 = `${cdn}/elevator/2024/11/24/46b2fba990d24ab9958cf76ec29d076e.png`
const PNG_3 = `${cdn}/elevator/2024/11/24/71c817d6f1494dfd805a2159ef0b3a65.png`
const PNG_4 = `${cdn}/elevator/2024/11/24/1a9bb2669fa34ba6a9100d8694961d45.png`

const { previewImage } = useUniApi()
</script>

<template>
  <view>
    <up-collapse accordion value="0">
      <up-collapse-item title="1.关注电梯" name="0">
        <view>
          <view>
            进入小程序轻触【我的】->点击右上角【添加电梯】进入添加电梯页面。
          </view>
          <up-image :src="PNG_1" @click="previewImage(PNG_1)" />
        </view>
      </up-collapse-item>
      <up-collapse-item title="2.电梯信息" name="1">
        <view>
          进入小程序轻触【我的】->点击已关注的电梯名称，即可查看电梯信息。
          <up-image :src="PNG_2" @click="previewImage(PNG_2)" />
        </view>
      </up-collapse-item>
      <up-collapse-item title="3.聊天" name="2">
        <view>
          进入小程序轻触【消息】->点击电梯名称->进入聊天页面。
          <up-image :src="PNG_3" @click="previewImage(PNG_3)" />
        </view>
      </up-collapse-item>
      <up-collapse-item title="4.工作" name="3">
        <view>
          进入小程序轻触【工作】->点击电梯名称→进入工作列表页面。
          <up-image :src="PNG_4" @click="previewImage(PNG_4)" />
        </view>
      </up-collapse-item>
    </up-collapse>
  </view>
</template>
