<template>
  <div class="w-full h-full bg-white p-4">
    <p class="font-bold text-lg leading-10 border-b-2">帮助文档</p>
    <p class="font-bold text-lg text-black">脚本</p>
    <div class="p-3 text-black leading-loose">
      <ol class="list-decimal">
        <li class="pl-2" v-for="(item, index) in scriptsDesc" :key="index">
          <span class="font-bold text-sm">{{ item.scriptName }}：</span
          ><span class="text-gray-500">{{ item.scriptDesc }}</span>
          <template v-if="item?.example">
            <p class="text-gray-500">示例：</p>
            <div class="bg-[#1e293b] p-2 text-white rounded">{{ item.example }}</div>
          </template>
        </li>
      </ol>
    </div>
    <p class="font-bold text-lg text-black mb-2">内置变量</p>

    <p class="text-black mb-2"><span>单元格</span> <span>cellValue</span></p>

    <p class="font-bold text-lg text-black mb-2">变量模块内置变量</p>

    <p>
      <span class="font-bold text-black">支持订单字段：</span>
      <span
        v-for="(item, index) in orderVars"
        :key="index"
        class="mr-1 mb-1 inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
        >{{ item.fliedTitle }}</span
      >
    </p>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { apiGetScriptDesc, apiOrderVarGetVarField } from '@/api/common'

const scriptsDesc = ref([])
const orderVars = ref([])

const onQueryVar = async () => {
  const { data } = await apiOrderVarGetVarField()
  orderVars.value = data.result || []
}
const onQueryExlScript = async () => {
  const { data } = await apiGetScriptDesc()
  scriptsDesc.value = data.result || []
}

onMounted(() => {
  onQueryVar()
  onQueryExlScript()
})
</script>
<style lang="scss" scoped></style>
